Add visual regression testing

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

.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/visual-regression.spec.js

@@ -0,0 +1,106 @@
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * 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')
+	})
+})

cypress/plugins/index.js

@@ -12,8 +12,28 @@
 // the project's config changing)
 
 const browserify = require('@cypress/browserify-preprocessor')
+const getCompareSnapshotsPlugin = require('cypress-visual-regression/dist/plugin');
 
 module.exports = (on, config) => {
 	// Fix browserslist extend https://github.com/cypress-io/cypress/issues/2983#issuecomment-570616682
 	on('file:preprocessor', browserify())
+	getCompareSnapshotsPlugin(on, config);
+
+	// Disable spell checking to prevent rendering differences
+	on('before:browser:launch', (browser, launchOptions) => {
+		if (browser.family === 'chromium' && browser.name !== 'electron') {
+			launchOptions.preferences.default['browser.enable_spellchecking'] = false
+			return launchOptions
+		}
+
+		if (browser.family === 'firefox') {
+			launchOptions.preferences['layout.spellcheckDefault'] = 0
+			return launchOptions
+		}
+
+		if (browser.name === 'electron') {
+			launchOptions.preferences.spellcheck = false
+			return launchOptions
+		}
+	})
 }

cypress/support/commands.js

@@ -20,8 +20,12 @@
  *
  */
 
+// eslint-disable-next-line node/no-unpublished-import
+import compareSnapshotCommand from 'cypress-visual-regression/dist/command'
 import axios from '@nextcloud/axios'
 
+compareSnapshotCommand()
+
 const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
 Cypress.env('baseUrl', url)
 
@@ -156,3 +160,14 @@ Cypress.Commands.add('createLinkShare', path => {
 		}
 	}).should('have.length', 15)
 })
+
+Cypress.Commands.overwrite('compareSnapshot', (originalFn, subject, name, options) => {
+	// hide avatar because random colour break the visual regression tests
+	cy.window().then(window => {
+		const avatarDiv = window.document.querySelector('.avatardiv')
+		if (avatarDiv) {
+			avatarDiv.remove()
+		}
+	})
+	return originalFn(subject, name, options)
+})