diff --git a/.eslintrc.json b/.eslintrc.json index 3169ff3d9..564bc90e7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -2,7 +2,6 @@ "globals": { "appName": true, "appVersion": true, - "INJECT_CYPRESS_FONT": true, "PLYR_ICONS": true, "oc_defaults": true, "__dirname": true diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 3c50576b6..dab29354f 100644 --- a/.github/workflows/cypress.yml +++ b/.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 }} diff --git a/cypress/e2e/visual-regression.cy.ts b/cypress/e2e/visual-regression.cy.ts index 4488b4017..9712ec1cb 100644 --- a/cypress/e2e/visual-regression.cy.ts +++ b/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,10 +36,15 @@ 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 }) @@ -47,7 +52,12 @@ describe('Visual regression tests ', function() { }) 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') }) }) diff --git a/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/image.png b/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/image.png index f7f686fa8..fb98c0579 100644 Binary files a/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/image.png and b/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/image.png differ diff --git a/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/image2.png b/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/image2.png index 784cc490b..4184497a5 100644 Binary files a/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/image2.png and b/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/image2.png differ diff --git a/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/non-dav.png b/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/non-dav.png index e1937b128..ece06d644 100644 Binary files a/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/non-dav.png and b/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/non-dav.png differ diff --git a/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/video.png b/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/video.png index 2ab667725..37d275740 100644 Binary files a/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/video.png and b/cypress/snapshots/base/cypress/e2e/visual-regression.cy.ts/video.png differ diff --git a/package.json b/package.json index 1f0dac696..45fb042f2 100644 --- a/package.json +++ b/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", diff --git a/src/components/Videos.vue b/src/components/Videos.vue index bcfb7a41a..6b78e39f9 100644 --- a/src/components/Videos.vue +++ b/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() }, diff --git a/src/main.js b/src/main.js index b207f2cb5..9d38a9553 100644 --- a/src/main.js +++ b/src/main.js @@ -19,10 +19,11 @@ * along with this program. If not, see . * */ +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: { @@ -30,10 +31,6 @@ Vue.mixin({ }, }) -// 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 diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue index 786315daa..b6fe3b62e 100644 --- a/src/views/Viewer.vue +++ b/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 + } }, /** diff --git a/vite.config.js b/vite.config.js index afb406401..fc836bec4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,7 +2,7 @@ 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({ @@ -10,7 +10,6 @@ export default createAppConfig({ }, { replace: { PLYR_ICONS: JSON.stringify(plyrIcons), - INJECT_CYPRESS_FONT: isTesting ? '; import("@fontsource/roboto");' : '', }, - minify: false, + minify: isProduction, })