Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
This commit is contained in:
John Molakvoæ 2022-04-29 11:03:36 +02:00
Родитель 5649cd500f
Коммит 1f007fac96
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 60C25B8C072916CF
15 изменённых файлов: 297 добавлений и 5 удалений

10
.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

9
.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

Просмотреть файл

@ -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
}

Просмотреть файл

@ -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
"

Просмотреть файл

@ -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')
})
})

Просмотреть файл

@ -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
}
})
}

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.3 MiB

Двоичные данные
cypress/snapshots/base/visual-regression.spec.js/image-base.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.3 MiB

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 601 KiB

Двоичные данные
cypress/snapshots/base/visual-regression.spec.js/video-base.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 601 KiB

Просмотреть файл

@ -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)
})

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

122
package-lock.json сгенерированный
Просмотреть файл

@ -22,6 +22,7 @@
"@skjnldsv/vue-plyr": "^7.0.1-alpha.0",
"camelcase": "^6.3.0",
"debounce": "^1.2.1",
"fontsource-roboto": "^4.0.0",
"nextcloud-server": "^0.15.10",
"path-parse": "^1.0.7",
"vue": "^2.6.14",
@ -38,6 +39,7 @@
"@nextcloud/webpack-vue-config": "^5.0.0",
"babel-loader-exclude-node-modules-except": "^1.2.1",
"cypress": "^9.6.0",
"cypress-visual-regression": "^1.7.0",
"eslint-plugin-cypress": "^2.12.1",
"jest": "^27.5.1",
"wait-on": "^6.0.1"
@ -6368,6 +6370,20 @@
"node": ">=12.0.0"
}
},
"node_modules/cypress-visual-regression": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/cypress-visual-regression/-/cypress-visual-regression-1.7.0.tgz",
"integrity": "sha512-ORWiKAAlSPEyeObrRV0UoLYT7u0//bwgi4MGen/pWu0ByZbsvh+4xY2wOBj5d8kToek5qxKD+yT1+juHRRgK0w==",
"dev": true,
"dependencies": {
"pixelmatch": "^5.2.1",
"pngjs": "^6.0.0",
"sanitize-filename": "^1.6.3"
},
"peerDependencies": {
"cypress": ">=5.6.0"
}
},
"node_modules/cypress/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@ -8637,6 +8653,12 @@
}
}
},
"node_modules/fontsource-roboto": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/fontsource-roboto/-/fontsource-roboto-4.0.0.tgz",
"integrity": "sha512-zD6L8nvdWRcwSgp4ojxFchG+MPj8kXXQKDEAH9bfhbxy+lkpvpC1WgAK0lCa4dwobv+hvAe0uyHaawcgH7WH/g==",
"deprecated": "Package relocated. Please install and migrate to @fontsource/roboto."
},
"node_modules/foreach": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@ -13875,6 +13897,18 @@
"node": ">= 6"
}
},
"node_modules/pixelmatch": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.3.0.tgz",
"integrity": "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==",
"dev": true,
"dependencies": {
"pngjs": "^6.0.0"
},
"bin": {
"pixelmatch": "bin/pixelmatch"
}
},
"node_modules/pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -13969,6 +14003,15 @@
"url-polyfill": "^1.1.12"
}
},
"node_modules/pngjs": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz",
"integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==",
"dev": true,
"engines": {
"node": ">=12.13.0"
}
},
"node_modules/popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
@ -15035,6 +15078,15 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
"node_modules/sanitize-filename": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.3.tgz",
"integrity": "sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==",
"dev": true,
"dependencies": {
"truncate-utf8-bytes": "^1.0.0"
}
},
"node_modules/sass": {
"version": "1.50.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.50.0.tgz",
@ -16668,6 +16720,15 @@
"node": ">=8"
}
},
"node_modules/truncate-utf8-bytes": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
"integrity": "sha1-QFkjkJWS1W94pYGENLC3hInKXys=",
"dev": true,
"dependencies": {
"utf8-byte-length": "^1.0.1"
}
},
"node_modules/tsconfig-paths": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@ -16958,6 +17019,12 @@
"integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
"dev": true
},
"node_modules/utf8-byte-length": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",
"integrity": "sha1-9F8VDExm7uloGGUFq5P8u4rWv2E=",
"dev": true
},
"node_modules/util": {
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
@ -23445,6 +23512,17 @@
}
}
},
"cypress-visual-regression": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/cypress-visual-regression/-/cypress-visual-regression-1.7.0.tgz",
"integrity": "sha512-ORWiKAAlSPEyeObrRV0UoLYT7u0//bwgi4MGen/pWu0ByZbsvh+4xY2wOBj5d8kToek5qxKD+yT1+juHRRgK0w==",
"dev": true,
"requires": {
"pixelmatch": "^5.2.1",
"pngjs": "^6.0.0",
"sanitize-filename": "^1.6.3"
}
},
"dash-ast": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/dash-ast/-/dash-ast-1.0.0.tgz",
@ -25084,6 +25162,11 @@
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
"integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
},
"fontsource-roboto": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/fontsource-roboto/-/fontsource-roboto-4.0.0.tgz",
"integrity": "sha512-zD6L8nvdWRcwSgp4ojxFchG+MPj8kXXQKDEAH9bfhbxy+lkpvpC1WgAK0lCa4dwobv+hvAe0uyHaawcgH7WH/g=="
},
"foreach": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@ -29041,6 +29124,15 @@
"integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==",
"dev": true
},
"pixelmatch": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.3.0.tgz",
"integrity": "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==",
"dev": true,
"requires": {
"pngjs": "^6.0.0"
}
},
"pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@ -29113,6 +29205,12 @@
"url-polyfill": "^1.1.12"
}
},
"pngjs": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz",
"integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==",
"dev": true
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
@ -29919,6 +30017,15 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
"sanitize-filename": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/sanitize-filename/-/sanitize-filename-1.6.3.tgz",
"integrity": "sha512-y/52Mcy7aw3gRm7IrcGDFx/bCk4AhRh2eI9luHOQM86nZsqwiRkkq2GekHXBBD+SmPidc8i2PqtYZl+pWJ8Oeg==",
"dev": true,
"requires": {
"truncate-utf8-bytes": "^1.0.0"
}
},
"sass": {
"version": "1.50.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.50.0.tgz",
@ -31198,6 +31305,15 @@
"dev": true,
"peer": true
},
"truncate-utf8-bytes": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
"integrity": "sha1-QFkjkJWS1W94pYGENLC3hInKXys=",
"dev": true,
"requires": {
"utf8-byte-length": "^1.0.1"
}
},
"tsconfig-paths": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@ -31437,6 +31553,12 @@
"resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
"integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
},
"utf8-byte-length": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz",
"integrity": "sha1-9F8VDExm7uloGGUFq5P8u4rWv2E=",
"dev": true
},
"util": {
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",

Просмотреть файл

@ -34,6 +34,7 @@
"stylelint:fix": "stylelint src --fix",
"cypress": "TESTING=true cypress run",
"cypress:gui": "TESTING=true cypress open",
"cypress:update-snapshots": "cypress run --env type=base --spec cypress/integration/visual-regression.spec.js --config screenshotsFolder=cypress/snapshots/base",
"wait-on": "wait-on -i 500 -t 300000"
},
"dependencies": {
@ -50,6 +51,7 @@
"@skjnldsv/vue-plyr": "^7.0.1-alpha.0",
"camelcase": "^6.3.0",
"debounce": "^1.2.1",
"fontsource-roboto": "^4.0.0",
"nextcloud-server": "^0.15.10",
"path-parse": "^1.0.7",
"vue": "^2.6.14",
@ -73,6 +75,7 @@
"@nextcloud/webpack-vue-config": "^5.0.0",
"babel-loader-exclude-node-modules-except": "^1.2.1",
"cypress": "^9.6.0",
"cypress-visual-regression": "^1.7.0",
"eslint-plugin-cypress": "^2.12.1",
"jest": "^27.5.1",
"wait-on": "^6.0.1"

Просмотреть файл

@ -32,6 +32,12 @@ Vue.mixin({
},
})
// Inject proper font for cypress visual regression testing
if (isTesting) {
// Import font so CI has the same
import(/* webpackChunkName: 'roboto-font' */'fontsource-roboto')
}
Vue.prototype.OC = OC
Vue.prototype.OCA = OCA