Enh/visual regression

.github/workflows/cypress.yml

@@ -40,11 +40,6 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
-      - name: Install dependencies & build app
-        run: |
-          npm ci
-          TESTING=true npm run build --if-present
-
       - name: Wait for server
         run: |
             npm install -g wait-on
@@ -60,10 +55,19 @@ jobs:
         with:
           record: true
           parallel: true
+          build: npm run build
           # cypress env
           ci-build-id: ${{ github.sha }}-${{ github.run_number }}
           tag: ${{ github.event_name }}
         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 }}
+          TESTING: true
+
+      - name: Upload snapshots
+        uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: snapshots
+          path: cypress/snapshots

.gitignore

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

Makefile

@@ -34,6 +34,11 @@ test-coverage:
 	npm run test:coverage
 
 test-cypress:
+	./cypress/start.sh
+	npm run cypress
+	./cypress/stop.sh
+
+test-cypress-gui:
 	./cypress/start.sh
 	npm run cypress:gui
 	./cypress/stop.sh

cypress.json

@@ -3,5 +3,11 @@
   "projectId": "xysa6x",
   "viewportWidth": 1280,
   "viewportHeight": 720,
-  "defaultCommandTimeout": 6000
+  "defaultCommandTimeout": 6000,
+  "env": {
+    "failSilently": false,
+    "type": "actual"
+  },
+  "screenshotsFolder": "cypress/snapshots/actual",
+  "trashAssetsBeforeRuns": true
 }

cypress/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+	env: {
+		jest: true,
+		"cypress/globals": true
+	},
+	extends: [
+		"plugin:cypress/recommended"
+	],
+	rules: {
+		'cypress/no-unnecessary-waiting': off
+	}
+}

cypress/integration/files-shares.spec.js

@@ -51,10 +51,6 @@ describe('See shared folder with link share', function() {
 		cy.get('#fileList tr').should('contain', 'Photos')
 	})
 
-	it('Does not have any visual regression 1', function() {
-		cy.matchImageSnapshot()
-	})
-
 	it('See shared files in the list', function() {
 		cy.openFile('Photos')
 		cy.get('#fileList tr[data-file="image1.jpg"]', { timeout: 10000 })
@@ -69,19 +65,20 @@ describe('See shared folder with link share', function() {
 			.should('contain', 'video1.mp4')
 	})
 
-	it('Does not have any visual regression 2', function() {
-		cy.matchImageSnapshot()
+	it('Take screenshot', function() {
+		cy.screenshot()
 	})
 
 	it('Share the Photos folder with a share link and access the share link', function() {
 		cy.createLinkShare('/Photos').then(token => {
 			cy.logout()
 			cy.visit(`/s/${token}`)
+			cy.wait(1000)
 		})
 	})
 
-	it('Does not have any visual regression 3', function() {
-		cy.matchImageSnapshot()
+	it('Does not have any visual regression 1', function() {
+		cy.compareSnapshot('files-1')
 	})
 
 	it('Open the viewer on file click', function() {
@@ -109,8 +106,8 @@ describe('See shared folder with link share', function() {
 		cy.get('#viewer-content a.next').should('be.visible')
 	})
 
-	it('Does not have any visual regression 4', function() {
-		cy.matchImageSnapshot()
+	it('Does not have any visual regression 2', function() {
+		cy.compareSnapshot('files-2')
 	})
 
 	it('Show image2 on next', function() {
@@ -127,8 +124,8 @@ describe('See shared folder with link share', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Does not have any visual regression 5', function() {
-		cy.matchImageSnapshot()
+	it('Does not have any visual regression 3', function() {
+		cy.compareSnapshot('files-3')
 	})
 
 	it('Show image3 on next', function() {
@@ -145,8 +142,8 @@ describe('See shared folder with link share', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Does not have any visual regression 6', function() {
-		cy.matchImageSnapshot()
+	it('Does not have any visual regression 4', function() {
+		cy.compareSnapshot('files-4')
 	})
 
 	it('Show image4 on next', function() {
@@ -163,8 +160,8 @@ describe('See shared folder with link share', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Does not have any visual regression 7', function() {
-		cy.matchImageSnapshot()
+	it('Does not have any visual regression 5', function() {
+		cy.compareSnapshot('files-5')
 	})
 
 	it('Show video1 on next', function() {
@@ -184,8 +181,8 @@ describe('See shared folder with link share', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Does not have any visual regression 8', function() {
-		cy.matchImageSnapshot()
+	it('Does not have any visual regression 6', function() {
+		cy.compareSnapshot('files-6')
 	})
 
 	it('Show image1 again on next', function() {
@@ -202,7 +199,7 @@ describe('See shared folder with link share', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Does not have any visual regression 9', function() {
-		cy.matchImageSnapshot()
+	it('Does not have any visual regression 7', function() {
+		cy.compareSnapshot('files-7')
 	})
 })

cypress/integration/files.spec.js

@@ -20,6 +20,7 @@
  *
  */
 
+
 describe('Files default view', function() {
 	before(function() {
 		cy.login('admin', 'admin')

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

@@ -69,6 +69,6 @@ describe('Open image-small.png in viewer', function() {
 	})
 
 	it('Does not have any visual regression', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('image-small')
 	})
 })

cypress/integration/image.gif.spec.js

@@ -20,7 +20,6 @@
  *
  */
 
-
 import { randHash } from '../utils/'
 const randUser = randHash()
 

cypress/integration/image.png.spec.js

@@ -73,6 +73,6 @@ describe('Open image.png in viewer', function() {
 	})
 
 	it('Does not have any visual regression', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('image-png')
 	})
 })

cypress/integration/image.svg.spec.js

@@ -20,7 +20,6 @@
  *
  */
 
-
 import { randHash } from '../utils/'
 const randUser = randHash()
 
@@ -76,6 +75,6 @@ describe('Open image.svg in viewer', function() {
 	})
 
 	it('Does not have any visual regression', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('image-svg')
 	})
 })

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

@@ -87,7 +87,7 @@ describe('Open custom list of images in viewer with pagination', function() {
 									},
 								],
 								// This will be triggered when we get to the end of the list
-								loadMore: function() {
+								loadMore() {
 									// make sure we only loadMore once
 									if (loaded) {
 										return []
@@ -143,7 +143,7 @@ describe('Open custom list of images in viewer with pagination', function() {
 	})
 
 	it('Does not have any visual regression 1', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-custom-list-loadmore-1')
 	})
 
 	it('Show image2 on next', function() {
@@ -161,7 +161,7 @@ describe('Open custom list of images in viewer with pagination', function() {
 	})
 
 	it('Does not have any visual regression 2', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-custom-list-loadmore-2')
 	})
 
 	it('Show image3 on next', function() {
@@ -179,7 +179,7 @@ describe('Open custom list of images in viewer with pagination', function() {
 	})
 
 	it('Does not have any visual regression 3', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-custom-list-loadmore-3')
 	})
 
 	it('Show image4 on next', function() {
@@ -197,7 +197,7 @@ describe('Open custom list of images in viewer with pagination', function() {
 	})
 
 	it('Does not have any visual regression 4', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-custom-list-loadmore-4')
 	})
 
 	it('Show image1 again on next', function() {
@@ -215,6 +215,6 @@ describe('Open custom list of images in viewer with pagination', function() {
 	})
 
 	it('Does not have any visual regression 5', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-custom-list-loadmore-5')
 	})
 })

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

@@ -110,7 +110,7 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('Does not have any visual regression 1', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-custom-list-1')
 	})
 
 	it('Show image3 on next', function() {
@@ -134,7 +134,7 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('Does not have any visual regression 2', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-custom-list-2')
 	})
 
 	it('Show image1 on next', function() {
@@ -158,6 +158,6 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('Does not have any visual regression 3', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-custom-list-3')
 	})
 })

cypress/integration/images.spec.js

@@ -81,7 +81,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('Does not have any visual regression 1', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-1')
 	})
 
 	it('Show image2 on next', function() {
@@ -99,7 +99,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('Does not have any visual regression 2', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-2')
 	})
 
 	it('Show image3 on next', function() {
@@ -117,7 +117,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('Does not have any visual regression 3', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-3')
 	})
 
 	it('Show image4 on next', function() {
@@ -136,7 +136,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('Does not have any visual regression 4', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-4')
 	})
 
 	it('Show image1 again on next', function() {
@@ -154,6 +154,6 @@ describe('Open images in viewer', function() {
 	})
 
 	it('Does not have any visual regression 5', function() {
-		cy.matchImageSnapshot()
+		cy.compareSnapshot('images-5')
 	})
 })