Add visual regression testing

.github/workflows/cypress.yml

@@ -90,7 +90,15 @@ jobs:
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           # https://github.com/cypress-io/github-action/issues/124
-          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }} 
+          TESTING: true
+
+      - name: Upload snapshots
+        uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: snapshots
+          path: cypress/snapshots
 
   summary:
     runs-on: ubuntu-latest

.gitignore

@@ -17,9 +17,14 @@ yarn-error.log*
 build/
 coverage/
 
+vendor
+.php_cs.cache
+
+# Cypress files
+js/*roboto*
 cypress/downloads
 cypress/screenshots
 cypress/snapshots
 cypress/videos
-vendor
-.php_cs.cache
+cypress/snapshots/actual
+cypress/snapshots/diff

cypress.json

@@ -5,5 +5,11 @@
   "viewportHeight": 720,
   "defaultCommandTimeout": 6000,
   "retries": 2,
-  "testFiles": "**/*.spec.js"
+  "testFiles": "**/*.spec.js",
+  "env": {
+    "failSilently": false,
+    "type": "actual"
+  },
+  "screenshotsFolder": "cypress/snapshots/actual",
+  "trashAssetsBeforeRuns": true
 }

cypress/initserver.sh

@@ -7,6 +7,7 @@ chown -R www-data:www-data /var/www/html/data
 
 su www-data -c "
 	php occ config:system:set force_language --value en
+	php occ config:system:set enforce_theme --value light
 	php occ app:enable $APP_NAME
 	php occ app:list
 "

cypress/integration/audio.mpeg.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Daniel Kesselberg <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/audio.ogg.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Daniel Kesselberg <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/audios.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Daniel Kesselberg <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/delete.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/download-share-disabled.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Florent Fayolle <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/download-share.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Florent Fayolle <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/download.spec.js

@@ -3,7 +3,7 @@
  *
  * @author Florent Fayolle <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/files-shares.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/files.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/image-small.png.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/image.gif.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/image.png.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/image.svg.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/image.webp.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/images-custom-list-loadmore.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/images-custom-list.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/images.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/oddname/oddname.js

@@ -4,7 +4,7 @@
  * @author John Molakvoæ <[email protected]>
  * @author Robbert Gurdeep Singh <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/sidebar.spec.js

@@ -4,7 +4,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/video.mkv.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/video.mp4.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/video.ogv.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/video.webm.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/videos.spec.js

@@ -3,7 +3,7 @@
  *
  * @author John Molakvoæ <[email protected]>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as

cypress/integration/visual-regression.spec.js

@@ -0,0 +1,106 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { randHash } from '../utils'
+const randUser = randHash()
+
+describe('Open mp4 videos in viewer', function() {
+	before(function() {
+		// Init user
+		cy.nextcloudCreateUser(randUser, 'password')
+		cy.login(randUser, 'password')
+
+		// Upload test file
+		cy.uploadFile('video1.mp4', 'video/mp4')
+		cy.uploadFile('image1.jpg', 'image/jpeg')
+		cy.visit('/apps/files')
+
+		// wait a bit for things to be settled
+		cy.wait(1000)
+	})
+	after(function() {
+		cy.logout()
+	})
+
+	it('See files in the list', function() {
+		cy.get('#fileList tr[data-file="video1.mp4"]', { timeout: 10000 })
+			.should('contain', 'video1.mp4')
+		cy.get('#fileList tr[data-file="image1.jpg"]', { timeout: 10000 })
+			.should('contain', 'image1.jpg')
+	})
+
+	it('Open the viewer on file click', function() {
+		cy.openFile('video1.mp4')
+		cy.get('body > .viewer').should('be.visible')
+	})
+
+	it('See the menu icon and title on the viewer header', function() {
+		cy.get('body > .viewer .modal-title').should('contain', 'video1.mp4')
+		cy.get('body > .viewer .modal-header button.action-item__menutoggle').should('be.visible')
+		cy.get('body > .viewer .modal-header button.header-close').should('be.visible')
+	})
+
+	it('Does see next navigation arrows', function() {
+		cy.get('body > .viewer .modal-container video').should('have.length', 1)
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active video')
+			.should('have.attr', 'src')
+			.and('contain', `/remote.php/dav/files/${randUser}/video1.mp4`)
+		cy.get('body > .viewer a.next').should('be.visible')
+		cy.get('body > .viewer a.next').should('be.visible')
+	})
+
+	it('Does not see a loading animation', function() {
+		cy.get('body > .viewer', { timeout: 10000 })
+			.should('be.visible')
+			.and('have.class', 'modal-mask')
+			.and('not.have.class', 'icon-loading')
+	})
+
+	it('Take screenshot 1', function() {
+		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active video').then(video => {
+			video.get(0).pause()
+			video.get(0).currentTime = 1
+		})
+		// wait a bit for things to be settled
+		cy.wait(250)
+		cy.compareSnapshot('video')
+	})
+
+	it('Show second file on next', function() {
+		cy.get('body > .viewer a.next').click()
+		cy.get('body > .viewer .modal-container img').should('have.length', 1)
+		cy.get('body > .viewer .modal-container img').should('have.attr', 'src')
+		cy.get('body > .viewer a.next').should('be.visible')
+		cy.get('body > .viewer a.next').should('be.visible')
+	})
+
+	it('Does not see a loading animation', function() {
+		cy.get('body > .viewer', { timeout: 10000 })
+			.should('be.visible')
+			.and('have.class', 'modal-mask')
+			.and('not.have.class', 'icon-loading')
+	})
+
+	it('Take screenshot 2', function() {
+		cy.compareSnapshot('image')
+	})
+})