fix(cypress): wait for ressource load

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

.eslintrc.json

@@ -2,7 +2,6 @@
 	"globals": {
 		"appName": true,
 		"appVersion": true,
-		"INJECT_CYPRESS_FONT": true,
 		"PLYR_ICONS": true,
 		"oc_defaults": true,
 		"__dirname": true

.github/workflows/cypress.yml

@@ -58,7 +58,7 @@ jobs:
       - name: Install node dependencies & build app
         run: |
           npm ci
-          TESTING=true npm run build --if-present
+          npm run build --if-present
 
       - name: Save context
         uses: buildjet/cache/save@e376f15c6ec6dc595375c78633174c7e5f92dc0e # v3
@@ -115,7 +115,6 @@ jobs:
           # https://github.com/cypress-io/github-action/issues/124
           COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
           # Needed for some specific code workarounds
-          TESTING: true
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           SPLIT: ${{ matrix.total-containers }}

cypress/e2e/visual-regression.cy.ts

@@ -20,7 +20,7 @@
  *
  */
 
-describe('Visual regression tests ', function() {
+describe('Visual regression tests', function() {
 	let randUser
 
 	before(function() {
@@ -36,18 +36,28 @@ describe('Visual regression tests ', function() {
 			cy.login(user)
 			cy.visit('/apps/files')
 		})
+
+		cy.window().then((win) => {
+			// Load roboto font for visual regression consistency
+			win.loadRoboto = true
+			win.document.body.style.fontFamily = 'Roboto'
+		})
 	})
 
 	it('See files in the list', function() {
-		// TODO: Do we care about the file name being split by a ' ' in the text property?
 		cy.getFile('test-card.mp4', { timeout: 10000 })
 			.should('contain', 'test-card .mp4')
 		cy.getFile('test-card.png', { timeout: 10000 })
 			.should('contain', 'test-card .png')
 	})
 
 	it('Open the viewer on file click', function() {
+		cy.intercept('GET', '**/core/preview*').as('image1')
+		cy.intercept('GET', '/remote.php/dav/files/*/test-card.mp4').as('video')
 		cy.openFile('test-card.mp4')
+		cy.wait('@video')
+		// We preload images, so we can check its loading here and not when clicking next
+		cy.wait('@image1')
 		cy.get('body > .viewer').should('be.visible')
 	})
 
@@ -73,7 +83,7 @@ describe('Visual regression tests ', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Take test-card.mp4 screenshot', function() {
+	it('Take test-card.mp4 screenshot', { retries: 0 }, function() {
 		cy.get('body > .viewer .modal-container .viewer__file.viewer__file--active video').then(video => {
 			video.get(0).pause()
 			video.get(0).currentTime = 1
@@ -99,14 +109,17 @@ describe('Visual regression tests ', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Take test-card.png screenshot', function() {
+	it('Take test-card.png screenshot', { retries: 0 }, function() {
 		cy.compareSnapshot('image')
 	})
 
 	it('Close and open image again', function() {
 		cy.get('body > .viewer button.header-close').click()
 		cy.get('body > .viewer').should('not.exist')
+
+		// No need to intercept the request again, it's cached
 		cy.openFile('test-card.png')
+
 		cy.get('body > .viewer').should('be.visible')
 		cy.get('body > .viewer .modal-header__name').should('contain', 'test-card.png')
 		cy.get('body > .viewer .modal-container img').should('have.length', 1)
@@ -122,7 +135,7 @@ describe('Visual regression tests ', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Take test-card.png screenshot 2', function() {
+	it('Take test-card.png screenshot 2', { retries: 0 }, function() {
 		cy.compareSnapshot('image2')
 	})
 
@@ -136,13 +149,14 @@ describe('Visual regression tests ', function() {
 			hasPreview: false,
 			fileid: 123,
 		}
-
+		cy.intercept('GET', '/core/img/favicon.png').as('favicon')
 		cy.window().then((win) => {
 			win.OCA.Viewer.open({
 				fileInfo,
 				list: [fileInfo],
 			})
 		})
+		cy.wait('@favicon')
 
 		cy.get('body > .viewer .modal-container img').should('have.length', 1)
 		cy.get('body > .viewer .modal-container img').should('have.attr', 'src')
@@ -157,7 +171,7 @@ describe('Visual regression tests ', function() {
 			.and('not.have.class', 'icon-loading')
 	})
 
-	it('Take non-dav logo.png screenshot', function() {
+	it('Take non-dav logo.png screenshot', { retries: 0 }, function() {
 		cy.compareSnapshot('non-dav')
 	})
 })

package.json

@@ -36,9 +36,8 @@
     "cypress": "npm run cypress:e2e",
     "cypress:e2e": "cypress run --e2e",
     "cypress:gui": "cypress open --e2e",
-    "cypress:pre-snapshots": "TESTING=true npm run dev",
-    "cypress:visual-regression": "npm run cypress:pre-snapshots && cypress run --spec cypress/e2e/visual-regression.cy.ts",
-    "cypress:update-snapshots": "npm run cypress:pre-snapshots && cypress run --env visualRegressionType=base --spec cypress/e2e/visual-regression.cy.ts --config screenshotsFolder=cypress/snapshots/base"
+    "cypress:visual-regression": "cypress run --spec cypress/e2e/visual-regression.cy.ts",
+    "cypress:update-snapshots": "cypress run --env visualRegressionType=base --spec cypress/e2e/visual-regression.cy.ts --config screenshotsFolder=cypress/snapshots/base"
   },
   "dependencies": {
     "@fontsource/roboto": "^5.0.14",

src/components/Videos.vue

@@ -136,7 +136,7 @@ export default {
 	beforeDestroy() {
 		// Force stop any ongoing request
 		logger.debug('Closing video stream', { filename: this.filename })
-		this.$refs.video.pause()
+		this.$refs.video?.pause?.()
 		this.player.stop()
 		this.player.destroy()
 	},

src/main.js

@@ -19,21 +19,18 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import { translate as t } from '@nextcloud/l10n'
 import Vue from 'vue'
+
 import ViewerComponent from './views/Viewer.vue'
 import ViewerService from './services/Viewer.js'
-import { translate as t } from '@nextcloud/l10n'
 
 Vue.mixin({
 	methods: {
 		t,
 	},
 })
 
-// Inject proper font for cypress visual regression testing
-// eslint-disable-next-line no-unused-expressions
-INJECT_CYPRESS_FONT
-
 Vue.prototype.OC = window.OC
 Vue.prototype.OCA = window.OCA
 

src/views/Viewer.vue

@@ -591,6 +591,13 @@ export default {
 				OCA.Files.Sidebar.setFullScreenMode(true)
 			}
 			this.sortingConfig = await getSortingConfig()
+
+			// Load Roboto font for visual regression tests
+			if (window.loadRoboto) {
+				logger.debug('⚠️ Loading roboto font for visual regression tests')
+				import('@fontsource/roboto/index.css')
+				delete window.loadRoboto
+			}
 		},
 
 		/**

vite.config.js

@@ -2,15 +2,14 @@ import { createAppConfig } from '@nextcloud/vite-config'
 import { readFileSync } from 'node:fs'
 import { join } from 'node:path'
 
-const isTesting = !!process.env.TESTING
+const isProduction = process.env.NODE_ENV === 'production'
 const plyrIcons = readFileSync(join(__dirname, 'node_modules', 'plyr', 'dist', 'plyr.svg'), { encoding: 'utf8' })
 
 export default createAppConfig({
 	main: 'src/main.js',
 }, {
 	replace: {
 		PLYR_ICONS: JSON.stringify(plyrIcons),
-		INJECT_CYPRESS_FONT: isTesting ? '; import("@fontsource/roboto");' : '',
 	},
-	minify: false,
+	minify: isProduction,
 })