diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml index 75a3a35e5..4a7bdad61 100644 --- a/.github/workflows/cypress.yml +++ b/.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,6 +55,7 @@ jobs: with: record: true parallel: true + build: npm run build # cypress env ci-build-id: ${{ github.sha }}-${{ github.run_number }} tag: ${{ github.event_name }} @@ -67,3 +63,11 @@ jobs: 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 diff --git a/.gitignore b/.gitignore index 4687b35a0..c80f11db7 100644 --- a/.gitignore +++ b/.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 diff --git a/Makefile b/Makefile index 25e898b55..6352426bc 100644 --- a/Makefile +++ b/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 diff --git a/cypress.json b/cypress.json index 75282456f..cd28335bb 100644 --- a/cypress.json +++ b/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 } diff --git a/cypress/.eslintrc.js b/cypress/.eslintrc.js new file mode 100644 index 000000000..274e0894c --- /dev/null +++ b/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 + } +} diff --git a/cypress/integration/files-shares.spec.js b/cypress/integration/files-shares.spec.js index 1acddbd59..c044d5eef 100644 --- a/cypress/integration/files-shares.spec.js +++ b/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') }) }) diff --git a/cypress/integration/files.spec.js b/cypress/integration/files.spec.js index 6f77be7db..ff34e5b10 100644 --- a/cypress/integration/files.spec.js +++ b/cypress/integration/files.spec.js @@ -20,6 +20,7 @@ * */ + describe('Files default view', function() { before(function() { cy.login('admin', 'admin') diff --git a/cypress/integration/image-small.png.spec.js b/cypress/integration/image-small.png.spec.js index 4ed8d8496..84c82156b 100644 --- a/cypress/integration/image-small.png.spec.js +++ b/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') }) }) diff --git a/cypress/integration/image.gif.spec.js b/cypress/integration/image.gif.spec.js index 7461b5a0b..5653b476c 100644 --- a/cypress/integration/image.gif.spec.js +++ b/cypress/integration/image.gif.spec.js @@ -20,7 +20,6 @@ * */ - import { randHash } from '../utils/' const randUser = randHash() diff --git a/cypress/integration/image.png.spec.js b/cypress/integration/image.png.spec.js index 18c505d72..67492961d 100644 --- a/cypress/integration/image.png.spec.js +++ b/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') }) }) diff --git a/cypress/integration/image.svg.spec.js b/cypress/integration/image.svg.spec.js index c5b6d5195..2afb6a928 100644 --- a/cypress/integration/image.svg.spec.js +++ b/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') }) }) diff --git a/cypress/integration/images-custom-list-loadmore.spec.js b/cypress/integration/images-custom-list-loadmore.spec.js index 23d77045d..a6dcc1255 100644 --- a/cypress/integration/images-custom-list-loadmore.spec.js +++ b/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') }) }) diff --git a/cypress/integration/images-custom-list.spec.js b/cypress/integration/images-custom-list.spec.js index d4344a6e7..659f5d4d0 100644 --- a/cypress/integration/images-custom-list.spec.js +++ b/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') }) }) diff --git a/cypress/integration/images.spec.js b/cypress/integration/images.spec.js index 258fe55a1..987f059d3 100644 --- a/cypress/integration/images.spec.js +++ b/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') }) }) diff --git a/cypress/integration/sidebar.spec.js b/cypress/integration/sidebar.spec.js index b55d38529..5685565dc 100644 --- a/cypress/integration/sidebar.spec.js +++ b/cypress/integration/sidebar.spec.js @@ -74,7 +74,7 @@ describe('Open the sidebar from the viewer and open viewer with sidebar already }) it('Does not have any visual regression 1', function() { - cy.matchImageSnapshot() + cy.compareSnapshot('sidebar-1') }) it('Open the sidebar', function() { @@ -97,7 +97,7 @@ describe('Open the sidebar from the viewer and open viewer with sidebar already // Switch to sharing section to avoid the issue. cy.get('aside.app-sidebar a#sharing').click() - cy.matchImageSnapshot() + cy.compareSnapshot('sidebar-2') }) it('Change to next image with sidebar open', function() { @@ -116,7 +116,7 @@ describe('Open the sidebar from the viewer and open viewer with sidebar already // Switch to sharing section to avoid the issue. cy.get('aside.app-sidebar a#sharing').click() - cy.matchImageSnapshot() + cy.compareSnapshot('sidebar-3') }) it('Change to previous image with sidebar open', function() { @@ -135,7 +135,7 @@ describe('Open the sidebar from the viewer and open viewer with sidebar already // Switch to sharing section to avoid the issue. cy.get('aside.app-sidebar a#sharing').click() - cy.matchImageSnapshot() + cy.compareSnapshot('sidebar-4') }) it('Close the sidebar', function() { @@ -165,6 +165,6 @@ describe('Open the sidebar from the viewer and open viewer with sidebar already }) it('Does not have any visual regression 5', function() { - cy.matchImageSnapshot() + cy.compareSnapshot('sidebar-5') }) }) diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index e1d51dd1f..c50406933 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -11,10 +11,27 @@ // This function is called when a project is opened or re-opened (e.g. due to // the project's config changing) -const { - addMatchImageSnapshotPlugin -} = require('cypress-image-snapshot/plugin') +const getCompareSnapshotsPlugin = require('cypress-visual-regression/dist/plugin') -module.exports = (on, config) => { - addMatchImageSnapshotPlugin(on, config) +module.exports = (on) => { + getCompareSnapshotsPlugin(on) + + + // 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 + } + }) } diff --git a/cypress/snapshots/base/files-shares.spec.js/See shared folder with link share -- Take screenshot.png b/cypress/snapshots/base/files-shares.spec.js/See shared folder with link share -- Take screenshot.png new file mode 100644 index 000000000..e5f95983a Binary files /dev/null and b/cypress/snapshots/base/files-shares.spec.js/See shared folder with link share -- Take screenshot.png differ diff --git a/cypress/snapshots/base/files-shares.spec.js/files-1-base.png b/cypress/snapshots/base/files-shares.spec.js/files-1-base.png new file mode 100644 index 000000000..e11724396 Binary files /dev/null and b/cypress/snapshots/base/files-shares.spec.js/files-1-base.png differ diff --git a/cypress/snapshots/base/files-shares.spec.js/files-2-base.png b/cypress/snapshots/base/files-shares.spec.js/files-2-base.png new file mode 100644 index 000000000..45d6db94d Binary files /dev/null and b/cypress/snapshots/base/files-shares.spec.js/files-2-base.png differ diff --git a/cypress/snapshots/base/files-shares.spec.js/files-3-base.png b/cypress/snapshots/base/files-shares.spec.js/files-3-base.png new file mode 100644 index 000000000..d28ccfd4a Binary files /dev/null and b/cypress/snapshots/base/files-shares.spec.js/files-3-base.png differ diff --git a/cypress/snapshots/base/files-shares.spec.js/files-4-base.png b/cypress/snapshots/base/files-shares.spec.js/files-4-base.png new file mode 100644 index 000000000..579f65637 Binary files /dev/null and b/cypress/snapshots/base/files-shares.spec.js/files-4-base.png differ diff --git a/cypress/snapshots/base/files-shares.spec.js/files-5-base.png b/cypress/snapshots/base/files-shares.spec.js/files-5-base.png new file mode 100644 index 000000000..8d8dd6a25 Binary files /dev/null and b/cypress/snapshots/base/files-shares.spec.js/files-5-base.png differ diff --git a/cypress/snapshots/base/files-shares.spec.js/files-6-base.png b/cypress/snapshots/base/files-shares.spec.js/files-6-base.png new file mode 100644 index 000000000..156b97d6b Binary files /dev/null and b/cypress/snapshots/base/files-shares.spec.js/files-6-base.png differ diff --git a/cypress/snapshots/base/files-shares.spec.js/files-7-base.png b/cypress/snapshots/base/files-shares.spec.js/files-7-base.png new file mode 100644 index 000000000..45d6db94d Binary files /dev/null and b/cypress/snapshots/base/files-shares.spec.js/files-7-base.png differ diff --git a/cypress/snapshots/base/files.spec.js/Files default view -- Take screenshot.png b/cypress/snapshots/base/files.spec.js/Files default view -- Take screenshot.png new file mode 100644 index 000000000..658f685f6 Binary files /dev/null and b/cypress/snapshots/base/files.spec.js/Files default view -- Take screenshot.png differ diff --git a/cypress/snapshots/base/image-small.png.spec.js/image-small-base.png b/cypress/snapshots/base/image-small.png.spec.js/image-small-base.png new file mode 100644 index 000000000..dcc59be9c Binary files /dev/null and b/cypress/snapshots/base/image-small.png.spec.js/image-small-base.png differ diff --git a/cypress/snapshots/base/image.gif.spec.js/Open image.gif in viewer -- Take screenshot.png b/cypress/snapshots/base/image.gif.spec.js/Open image.gif in viewer -- Take screenshot.png new file mode 100644 index 000000000..c56d41ac8 Binary files /dev/null and b/cypress/snapshots/base/image.gif.spec.js/Open image.gif in viewer -- Take screenshot.png differ diff --git a/cypress/snapshots/base/image.png.spec.js/image-png-base.png b/cypress/snapshots/base/image.png.spec.js/image-png-base.png new file mode 100644 index 000000000..69477b728 Binary files /dev/null and b/cypress/snapshots/base/image.png.spec.js/image-png-base.png differ diff --git a/cypress/snapshots/base/image.svg.spec.js/image-svg-base.png b/cypress/snapshots/base/image.svg.spec.js/image-svg-base.png new file mode 100644 index 000000000..87824c42e Binary files /dev/null and b/cypress/snapshots/base/image.svg.spec.js/image-svg-base.png differ diff --git a/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-1-base.png b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-1-base.png new file mode 100644 index 000000000..e6b0be0b7 Binary files /dev/null and b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-1-base.png differ diff --git a/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-2-base.png b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-2-base.png new file mode 100644 index 000000000..a0c5451f8 Binary files /dev/null and b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-2-base.png differ diff --git a/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-3-base.png b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-3-base.png new file mode 100644 index 000000000..0dbee7f23 Binary files /dev/null and b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-3-base.png differ diff --git a/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-4-base.png b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-4-base.png new file mode 100644 index 000000000..2c2885deb Binary files /dev/null and b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-4-base.png differ diff --git a/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-5-base.png b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-5-base.png new file mode 100644 index 000000000..e6b0be0b7 Binary files /dev/null and b/cypress/snapshots/base/images-custom-list-loadmore.spec.js/images-custom-list-loadmore-5-base.png differ diff --git a/cypress/snapshots/base/images-custom-list.spec.js/images-custom-list-1-base.png b/cypress/snapshots/base/images-custom-list.spec.js/images-custom-list-1-base.png new file mode 100644 index 000000000..e6b0be0b7 Binary files /dev/null and b/cypress/snapshots/base/images-custom-list.spec.js/images-custom-list-1-base.png differ diff --git a/cypress/snapshots/base/images-custom-list.spec.js/images-custom-list-2-base.png b/cypress/snapshots/base/images-custom-list.spec.js/images-custom-list-2-base.png new file mode 100644 index 000000000..0dbee7f23 Binary files /dev/null and b/cypress/snapshots/base/images-custom-list.spec.js/images-custom-list-2-base.png differ diff --git a/cypress/snapshots/base/images-custom-list.spec.js/images-custom-list-3-base.png b/cypress/snapshots/base/images-custom-list.spec.js/images-custom-list-3-base.png new file mode 100644 index 000000000..e6b0be0b7 Binary files /dev/null and b/cypress/snapshots/base/images-custom-list.spec.js/images-custom-list-3-base.png differ diff --git a/cypress/snapshots/base/images.spec.js/images-1-base.png b/cypress/snapshots/base/images.spec.js/images-1-base.png new file mode 100644 index 000000000..e6b0be0b7 Binary files /dev/null and b/cypress/snapshots/base/images.spec.js/images-1-base.png differ diff --git a/cypress/snapshots/base/images.spec.js/images-2-base.png b/cypress/snapshots/base/images.spec.js/images-2-base.png new file mode 100644 index 000000000..a0c5451f8 Binary files /dev/null and b/cypress/snapshots/base/images.spec.js/images-2-base.png differ diff --git a/cypress/snapshots/base/images.spec.js/images-3-base.png b/cypress/snapshots/base/images.spec.js/images-3-base.png new file mode 100644 index 000000000..0dbee7f23 Binary files /dev/null and b/cypress/snapshots/base/images.spec.js/images-3-base.png differ diff --git a/cypress/snapshots/base/images.spec.js/images-4-base.png b/cypress/snapshots/base/images.spec.js/images-4-base.png new file mode 100644 index 000000000..2c2885deb Binary files /dev/null and b/cypress/snapshots/base/images.spec.js/images-4-base.png differ diff --git a/cypress/snapshots/base/images.spec.js/images-5-base.png b/cypress/snapshots/base/images.spec.js/images-5-base.png new file mode 100644 index 000000000..e6b0be0b7 Binary files /dev/null and b/cypress/snapshots/base/images.spec.js/images-5-base.png differ diff --git a/cypress/snapshots/base/sidebar.spec.js/sidebar-1-base.png b/cypress/snapshots/base/sidebar.spec.js/sidebar-1-base.png new file mode 100644 index 000000000..e6b0be0b7 Binary files /dev/null and b/cypress/snapshots/base/sidebar.spec.js/sidebar-1-base.png differ diff --git a/cypress/snapshots/base/sidebar.spec.js/sidebar-2-base.png b/cypress/snapshots/base/sidebar.spec.js/sidebar-2-base.png new file mode 100644 index 000000000..a02fa807e Binary files /dev/null and b/cypress/snapshots/base/sidebar.spec.js/sidebar-2-base.png differ diff --git a/cypress/snapshots/base/sidebar.spec.js/sidebar-3-base.png b/cypress/snapshots/base/sidebar.spec.js/sidebar-3-base.png new file mode 100644 index 000000000..66290572e Binary files /dev/null and b/cypress/snapshots/base/sidebar.spec.js/sidebar-3-base.png differ diff --git a/cypress/snapshots/base/sidebar.spec.js/sidebar-4-base.png b/cypress/snapshots/base/sidebar.spec.js/sidebar-4-base.png new file mode 100644 index 000000000..5a82a997e Binary files /dev/null and b/cypress/snapshots/base/sidebar.spec.js/sidebar-4-base.png differ diff --git a/cypress/snapshots/base/sidebar.spec.js/sidebar-5-base.png b/cypress/snapshots/base/sidebar.spec.js/sidebar-5-base.png new file mode 100644 index 000000000..21c3a9453 Binary files /dev/null and b/cypress/snapshots/base/sidebar.spec.js/sidebar-5-base.png differ diff --git a/cypress/snapshots/base/video.mkv.spec.js/Open video.mkv in viewer -- Take screenshot.png b/cypress/snapshots/base/video.mkv.spec.js/Open video.mkv in viewer -- Take screenshot.png new file mode 100644 index 000000000..62379c6f5 Binary files /dev/null and b/cypress/snapshots/base/video.mkv.spec.js/Open video.mkv in viewer -- Take screenshot.png differ diff --git a/cypress/snapshots/base/video.mp4.spec.js/Open video1.mp4 in viewer -- Take screenshot.png b/cypress/snapshots/base/video.mp4.spec.js/Open video1.mp4 in viewer -- Take screenshot.png new file mode 100644 index 000000000..754f34ce1 Binary files /dev/null and b/cypress/snapshots/base/video.mp4.spec.js/Open video1.mp4 in viewer -- Take screenshot.png differ diff --git a/cypress/snapshots/base/video.ogv.spec.js/Open video.ogv in viewer -- Take screenshot.png b/cypress/snapshots/base/video.ogv.spec.js/Open video.ogv in viewer -- Take screenshot.png new file mode 100644 index 000000000..dacfa345e Binary files /dev/null and b/cypress/snapshots/base/video.ogv.spec.js/Open video.ogv in viewer -- Take screenshot.png differ diff --git a/cypress/snapshots/base/video.webm.spec.js/Open video.webm in viewer -- Take screenshot.png b/cypress/snapshots/base/video.webm.spec.js/Open video.webm in viewer -- Take screenshot.png new file mode 100644 index 000000000..2766f03a5 Binary files /dev/null and b/cypress/snapshots/base/video.webm.spec.js/Open video.webm in viewer -- Take screenshot.png differ diff --git a/cypress/snapshots/base/videos.spec.js/Open mp4 videos in viewer -- Take screenshot 1.png b/cypress/snapshots/base/videos.spec.js/Open mp4 videos in viewer -- Take screenshot 1.png new file mode 100644 index 000000000..4e06d8916 Binary files /dev/null and b/cypress/snapshots/base/videos.spec.js/Open mp4 videos in viewer -- Take screenshot 1.png differ diff --git a/cypress/snapshots/base/videos.spec.js/Open mp4 videos in viewer -- Take screenshot 2.png b/cypress/snapshots/base/videos.spec.js/Open mp4 videos in viewer -- Take screenshot 2.png new file mode 100644 index 000000000..162d8c897 Binary files /dev/null and b/cypress/snapshots/base/videos.spec.js/Open mp4 videos in viewer -- Take screenshot 2.png differ diff --git a/cypress/support/commands.js b/cypress/support/commands.js index a5a1cab9d..9e079359e 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -20,10 +20,11 @@ * */ -import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command' +// eslint-disable-next-line node/no-unpublished-import +import compareSnapshotCommand from 'cypress-visual-regression/dist/command' import axios from '@nextcloud/axios' -addMatchImageSnapshotCommand() +compareSnapshotCommand() const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '') Cypress.env('baseUrl', url) @@ -81,7 +82,7 @@ Cypress.Commands.add('uploadFile', (fileName, mimeType, path = '') => { headers: { requesttoken: window.OC.requestToken, 'Content-Type': mimeType, - } + }, }).then(response => { cy.log(`Uploaded ${fileName}`, response) }) @@ -104,6 +105,7 @@ Cypress.Commands.add('createFolder', dirName => { Cypress.Commands.add('openFile', fileName => { cy.get(`#fileList tr[data-file="${fileName}"] a.name`).click() + // eslint-disable-next-line cypress/no-unnecessary-waiting cy.wait(250) }) @@ -132,20 +134,20 @@ Cypress.Commands.add('createLinkShare', path => { }, { headers: { requesttoken: window.OC.requestToken, - } + }, }) if (!('ocs' in request.data) || !('token' in request.data.ocs.data && request.data.ocs.data.token.length > 0)) { throw request } cy.log('Share link created', request.data.ocs.data.token) return cy.wrap(request.data.ocs.data.token) - } catch(error) { + } catch (error) { console.error(error) } }).should('have.length', 15) }) -Cypress.Commands.overwrite('matchImageSnapshot', (originalFn, subject, name, options) => { +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') diff --git a/cypress/utils/index.js b/cypress/utils/index.js index cee81c0f5..3ecf7c41c 100644 --- a/cypress/utils/index.js +++ b/cypress/utils/index.js @@ -20,7 +20,7 @@ * */ -const getSearchParams = url => { +export const getSearchParams = url => { return url .split(/[?&]/) .reduce((acc, cur) => { @@ -30,6 +30,4 @@ const getSearchParams = url => { }, {}) } -const randHash = () => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10) - -export default { getSearchParams, randHash } +export const randHash = () => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10) diff --git a/package-lock.json b/package-lock.json index c68603190..0ca3da23d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2829,6 +2829,46 @@ } } }, + "@cypress/webpack-preprocessor": { + "version": "5.4.5", + "resolved": "https://registry.npmjs.org/@cypress/webpack-preprocessor/-/webpack-preprocessor-5.4.5.tgz", + "integrity": "sha512-KH9B//f5DanvnO4RxyEq9RRGqeFqbzsk/wvINWhJAZcyCSZ9iD/J5E1picHt7UZxw9iXw3hzJWcuKNxdR4nk5w==", + "dev": true, + "requires": { + "bluebird": "^3.7.1", + "debug": "^4.1.1", + "lodash": "^4.17.20" + }, + "dependencies": { + "bluebird": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", + "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", + "dev": true + }, + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, + "lodash": { + "version": "4.17.20", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", + "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==", + "dev": true + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + } + } + }, "@cypress/xvfb": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz", @@ -3243,9 +3283,9 @@ } }, "@nextcloud/webpack-vue-config": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-1.2.0.tgz", - "integrity": "sha512-JBLk/ksQJQfnbe9fTfeJESCYWv1E2kEyv8Ms0ttj6XCcZfsJICJAVNk4HZtvzDcmqY95Ccnfyy82i9EjaGO3nw==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@nextcloud/webpack-vue-config/-/webpack-vue-config-1.4.0.tgz", + "integrity": "sha512-VSs9FXuCJMEWKt3JG6zjSj5FiIQHkA3fTrYFP2Qa+8bmqBmfOpYJkUpJPXHvUnJyN7SLHIV0DJo1YB4olOQpaQ==", "dev": true }, "@nodelib/fs.scandir": { @@ -3782,41 +3822,6 @@ } } }, - "app-path": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/app-path/-/app-path-3.2.0.tgz", - "integrity": "sha512-PQPaKXi64FZuofJkrtaO3I5RZESm9Yjv7tkeJaDz4EZMeBBfGtr5MyQ3m5AC7F0HVrISBLatPxAAAgvbe418fQ==", - "dev": true, - "requires": { - "execa": "^1.0.0" - }, - "dependencies": { - "execa": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", - "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", - "dev": true, - "requires": { - "cross-spawn": "^6.0.0", - "get-stream": "^4.0.0", - "is-stream": "^1.1.0", - "npm-run-path": "^2.0.0", - "p-finally": "^1.0.0", - "signal-exit": "^3.0.0", - "strip-eof": "^1.0.0" - } - }, - "get-stream": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", - "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", - "dev": true, - "requires": { - "pump": "^3.0.0" - } - } - } - }, "aproba": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", @@ -5356,32 +5361,42 @@ } }, "css-loader": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz", - "integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==", + "version": "4.2.2", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.2.2.tgz", + "integrity": "sha512-omVGsTkZPVwVRpckeUnLshPp12KsmMSLqYxs12+RzM9jRR5Y+Idn/tBffjXRvOE+qW7if24cuceFJqYR5FmGBg==", "dev": true, "requires": { - "camelcase": "^5.3.1", + "camelcase": "^6.0.0", "cssesc": "^3.0.0", "icss-utils": "^4.1.1", - "loader-utils": "^1.2.3", - "normalize-path": "^3.0.0", + "loader-utils": "^2.0.0", "postcss": "^7.0.32", "postcss-modules-extract-imports": "^2.0.0", - "postcss-modules-local-by-default": "^3.0.2", + "postcss-modules-local-by-default": "^3.0.3", "postcss-modules-scope": "^2.2.0", "postcss-modules-values": "^3.0.0", "postcss-value-parser": "^4.1.0", "schema-utils": "^2.7.0", - "semver": "^6.3.0" + "semver": "^7.3.2" }, "dependencies": { - "camelcase": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", + "emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", "dev": true }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, "postcss": { "version": "7.0.32", "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", @@ -5394,9 +5409,9 @@ } }, "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", "dev": true }, "source-map": { @@ -5585,30 +5600,209 @@ } } }, - "cypress-image-snapshot": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/cypress-image-snapshot/-/cypress-image-snapshot-3.1.1.tgz", - "integrity": "sha512-r+rjnljehx45qhhV9M/lBsg34Ibys9JWSbPFo9ktV6ovnpxiZSh9GYM/SXEvtJoEonRF51M/Gn2G6J3UlaV6Dg==", + "cypress-visual-regression": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/cypress-visual-regression/-/cypress-visual-regression-1.5.0.tgz", + "integrity": "sha512-CA8bv4Wojs3fw28YTAEnVuuR+k5a9N5+BeB/RPr7ACtJh3X0BaWBUO9ZnxrXyuTzjI3Sy7IWDErb9pjN7cz+sA==", "dev": true, "requires": { - "chalk": "^2.4.1", - "fs-extra": "^7.0.1", - "glob": "^7.1.3", - "jest-image-snapshot": "2.8.2", - "pkg-dir": "^3.0.0", - "term-img": "^4.0.0" + "cypress": "^4.12.0", + "pixelmatch": "^5.1.0", + "pngjs": "^3.4.0" }, "dependencies": { + "ansi-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", + "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", + "dev": true + }, + "bluebird": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", + "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", + "dev": true + }, + "cli-table3": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.5.1.tgz", + "integrity": "sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==", + "dev": true, + "requires": { + "colors": "^1.1.2", + "object-assign": "^4.1.0", + "string-width": "^2.1.1" + } + }, + "cypress": { + "version": "4.12.1", + "resolved": "https://registry.npmjs.org/cypress/-/cypress-4.12.1.tgz", + "integrity": "sha512-9SGIPEmqU8vuRA6xst2CMTYd9sCFCxKSzrHt0wr+w2iAQMCIIsXsQ5Gplns1sT6LDbZcmLv6uehabAOl3fhc9Q==", + "dev": true, + "requires": { + "@cypress/listr-verbose-renderer": "^0.4.1", + "@cypress/request": "^2.88.5", + "@cypress/xvfb": "^1.2.4", + "@types/sinonjs__fake-timers": "^6.0.1", + "@types/sizzle": "^2.3.2", + "arch": "^2.1.2", + "bluebird": "^3.7.2", + "cachedir": "^2.3.0", + "chalk": "^2.4.2", + "check-more-types": "^2.24.0", + "cli-table3": "~0.5.1", + "commander": "^4.1.1", + "common-tags": "^1.8.0", + "debug": "^4.1.1", + "eventemitter2": "^6.4.2", + "execa": "^1.0.0", + "executable": "^4.1.1", + "extract-zip": "^1.7.0", + "fs-extra": "^8.1.0", + "getos": "^3.2.1", + "is-ci": "^2.0.0", + "is-installed-globally": "^0.3.2", + "lazy-ass": "^1.6.0", + "listr": "^0.14.3", + "lodash": "^4.17.19", + "log-symbols": "^3.0.0", + "minimist": "^1.2.5", + "moment": "^2.27.0", + "ospath": "^1.2.2", + "pretty-bytes": "^5.3.0", + "ramda": "~0.26.1", + "request-progress": "^3.0.0", + "supports-color": "^7.1.0", + "tmp": "~0.1.0", + "untildify": "^4.0.0", + "url": "^0.11.0", + "yauzl": "^2.10.0" + } + }, + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, + "execa": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", + "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", + "dev": true, + "requires": { + "cross-spawn": "^6.0.0", + "get-stream": "^4.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" + } + }, "fs-extra": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", - "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", "dev": true, "requires": { - "graceful-fs": "^4.1.2", + "graceful-fs": "^4.2.0", "jsonfile": "^4.0.0", "universalify": "^0.1.0" } + }, + "get-stream": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", + "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", + "dev": true, + "requires": { + "pump": "^3.0.0" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "is-fullwidth-code-point": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", + "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", + "dev": true + }, + "log-symbols": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz", + "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==", + "dev": true, + "requires": { + "chalk": "^2.4.2" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "pixelmatch": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.2.1.tgz", + "integrity": "sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==", + "dev": true, + "requires": { + "pngjs": "^4.0.1" + }, + "dependencies": { + "pngjs": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-4.0.1.tgz", + "integrity": "sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==", + "dev": true + } + } + }, + "string-width": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", + "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", + "dev": true, + "requires": { + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" + } + }, + "strip-ansi": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", + "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", + "dev": true, + "requires": { + "ansi-regex": "^3.0.0" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "tmp": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.1.0.tgz", + "integrity": "sha512-J7Z2K08jbGcdA1kkQpJSqLF6T0tdQqpR2pnSUXsIchbPdTI9v3e85cLW0d6WDhwuAleOV71j2xWs8qMPfK7nKw==", + "dev": true, + "requires": { + "rimraf": "^2.6.3" + } } } }, @@ -6400,6 +6594,15 @@ } } }, + "eslint-plugin-cypress": { + "version": "2.11.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.11.1.tgz", + "integrity": "sha512-MxMYoReSO5+IZMGgpBZHHSx64zYPSPTpXDwsgW7ChlJTF/sA+obqRbHplxD6sBStE+g4Mi0LCLkG4t9liu//mQ==", + "dev": true, + "requires": { + "globals": "^11.12.0" + } + }, "eslint-plugin-es": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz", @@ -7279,6 +7482,11 @@ } } }, + "fontsource-roboto": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/fontsource-roboto/-/fontsource-roboto-3.0.3.tgz", + "integrity": "sha512-kfsC9qAP6XhwnSDAhg2lhWeaUJfLGXZh7GcLxFiz/4lXdkV2pVhWv2Xp9ES3b3BHdc9UuPrWXXLOphzHIStcOw==" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -7914,12 +8122,6 @@ "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", "dev": true }, - "get-stdin": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz", - "integrity": "sha1-Ei4WFZHiH/TFJTAwVpPyDmOTo5g=", - "dev": true - }, "get-stream": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", @@ -9052,16 +9254,6 @@ "html-escaper": "^2.0.0" } }, - "iterm2-version": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/iterm2-version/-/iterm2-version-4.2.0.tgz", - "integrity": "sha512-IoiNVk4SMPu6uTcK+1nA5QaHNok2BMDLjSl5UomrOixe5g4GkylhPwuiGdw00ysSCrXAKNMfFTu+u/Lk5f6OLQ==", - "dev": true, - "requires": { - "app-path": "^3.2.0", - "plist": "^3.0.1" - } - }, "jest": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest/-/jest-24.9.0.tgz", @@ -9259,48 +9451,6 @@ "walker": "^1.0.7" } }, - "jest-image-snapshot": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/jest-image-snapshot/-/jest-image-snapshot-2.8.2.tgz", - "integrity": "sha512-gtKgxfW5ifAikNI+fp0c0o/3byOeOUSmYeAELblGzINEZrDGUYxwUZtn5rNrgVuzjgGMBBsKYv/2gIM6VpzLaw==", - "dev": true, - "requires": { - "chalk": "^1.1.3", - "get-stdin": "^5.0.1", - "lodash": "^4.17.4", - "mkdirp": "^0.5.1", - "pixelmatch": "^4.0.2", - "pngjs": "^3.3.3", - "rimraf": "^2.6.2" - }, - "dependencies": { - "ansi-styles": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true - }, - "chalk": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", - "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, - "requires": { - "ansi-styles": "^2.2.1", - "escape-string-regexp": "^1.0.2", - "has-ansi": "^2.0.0", - "strip-ansi": "^3.0.0", - "supports-color": "^2.0.0" - } - }, - "supports-color": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true - } - } - }, "jest-jasmine2": { "version": "24.9.0", "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz", @@ -10835,7 +10985,8 @@ "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "optional": true }, "normalize-range": { "version": "0.1.2", @@ -11339,15 +11490,6 @@ "node-modules-regexp": "^1.0.0" } }, - "pixelmatch": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz", - "integrity": "sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=", - "dev": true, - "requires": { - "pngjs": "^3.0.0" - } - }, "pkg-dir": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", @@ -11357,25 +11499,6 @@ "find-up": "^3.0.0" } }, - "plist": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.1.tgz", - "integrity": "sha512-GpgvHHocGRyQm74b6FWEZZVRroHKE1I0/BTjAmySaohK+cUn+hZpbqXkc3KWgW3gQYkqcQej35FohcT0FRlkRQ==", - "dev": true, - "requires": { - "base64-js": "^1.2.3", - "xmlbuilder": "^9.0.7", - "xmldom": "0.1.x" - }, - "dependencies": { - "xmlbuilder": { - "version": "9.0.7", - "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz", - "integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=", - "dev": true - } - } - }, "plyr": { "version": "3.5.10", "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.5.10.tgz", @@ -11472,15 +11595,43 @@ } }, "postcss-modules-local-by-default": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz", - "integrity": "sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz", + "integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==", "dev": true, "requires": { "icss-utils": "^4.1.1", - "postcss": "^7.0.16", + "postcss": "^7.0.32", "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.0.0" + "postcss-value-parser": "^4.1.0" + }, + "dependencies": { + "postcss": { + "version": "7.0.32", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz", + "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } } }, "postcss-modules-scope": { @@ -13157,6 +13308,35 @@ "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==", "dev": true }, + "style-loader": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.2.1.tgz", + "integrity": "sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "schema-utils": "^2.6.6" + }, + "dependencies": { + "emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", + "dev": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + } + } + }, "style-search": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", @@ -13871,27 +14051,6 @@ "inherits": "2" } }, - "term-img": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/term-img/-/term-img-4.1.0.tgz", - "integrity": "sha512-DFpBhaF5j+2f7kheKFc1ajsAUUDGOaNPpKPtiIMxlbfud6mvfFZuWGnTRpaujUa5J7yl6cIw/h6nyr4mSsENPg==", - "dev": true, - "requires": { - "ansi-escapes": "^4.1.0", - "iterm2-version": "^4.1.0" - }, - "dependencies": { - "ansi-escapes": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz", - "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==", - "dev": true, - "requires": { - "type-fest": "^0.8.1" - } - } - } - }, "terser": { "version": "4.8.0", "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz", @@ -15502,12 +15661,6 @@ "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==", "dev": true }, - "xmldom": { - "version": "0.1.27", - "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz", - "integrity": "sha1-1QH5ezvbQDr4757MIFcxh6rawOk=", - "dev": true - }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/package.json b/package.json index 612c0f84e..ee196d6c2 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "stylelint:fix": "stylelint src --fix", "cypress": "cypress run", "cypress:gui": "cypress open", - "wait-on": "wait-on -i 500 -t 300000" + "cypress:update-snapshots": "cypress run --env type=base --config screenshotsFolder=cypress/snapshots/base" }, "dependencies": { "@nextcloud/auth": "^1.3.0", @@ -46,6 +46,7 @@ "camelcase": "^6.0.0", "core-js": "^3.6.5", "debounce": "^1.2.0", + "fontsource-roboto": "^3.0.3", "nextcloud-server": "^0.15.10", "path-parse": "^1.0.6", "regenerator-runtime": "^0.13.7", @@ -68,21 +69,23 @@ "@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/preset-env": "^7.11.0", + "@cypress/webpack-preprocessor": "^5.4.5", "@nextcloud/browserslist-config": "^1.0.0", "@nextcloud/eslint-config": "^2.2.0", "@nextcloud/eslint-plugin": "^1.4.0", - "@nextcloud/webpack-vue-config": "^1.2.0", + "@nextcloud/webpack-vue-config": "^1.4.0", "babel-eslint": "^10.1.0", "babel-loader": "^8.1.0", "babel-loader-exclude-node-modules-except": "^1.0.3", "browserslist-config-nextcloud": "0.1.0", - "css-loader": "^3.6.0", + "css-loader": "^4.2.2", "cypress": "^5.0.0", - "cypress-image-snapshot": "^3.1.1", + "cypress-visual-regression": "^1.5.0", "eslint": "^6.8.0", "eslint-config-standard": "^14.1.1", "eslint-import-resolver-webpack": "^0.12.2", "eslint-loader": "^4.0.2", + "eslint-plugin-cypress": "^2.11.1", "eslint-plugin-import": "^2.22.0", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", @@ -92,6 +95,7 @@ "jest": "^24.9.0", "node-sass": "^4.14.1", "sass-loader": "^8.0.2", + "style-loader": "^1.2.1", "stylelint": "^13.6.1", "stylelint-config-recommended-scss": "^4.2.0", "stylelint-scss": "^3.18.0", diff --git a/src/main.js b/src/main.js index e92cb1468..09b0bc0aa 100644 --- a/src/main.js +++ b/src/main.js @@ -42,6 +42,12 @@ __webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-next-line __webpack_public_path__ = generateFilePath('viewer', '', 'js/') +// Inject proper font for cypress visual regression testing +if (isTesting) { + // Import font so CI has the same + import(/* webpackChunkName: 'roboto-font' */'fontsource-roboto') +} + // Init Viewer Service if (window.OCA) { Object.assign(window.OCA, { Viewer: new ViewerService() }) diff --git a/webpack.js b/webpack.js index 7d801703b..b29eb8d9a 100644 --- a/webpack.js +++ b/webpack.js @@ -24,6 +24,11 @@ const config = { 'toastify-js', ]), }, + { + // for cypress roboto import + test: /\.(woff2?)$/, + loader: 'url-loader', + }, ], }, plugins: [