Merge pull request #2503 from nextcloud/automated/noid/stable28-cypre…

…ss-snapshot-update

.eslintrc.json

@@ -0,0 +1,12 @@
+{
+	"globals": {
+		"appName": true,
+		"appVersion": true,
+		"PLYR_ICONS": true,
+		"oc_defaults": true,
+		"__dirname": true
+	},
+	"extends": [
+		"@nextcloud/eslint-config/typescript"
+	]
+}

.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
@@ -112,7 +112,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 }}

babel.config.js

@@ -1,5 +1,6 @@
 const babelConfig = require('@nextcloud/babel-config')
 
 babelConfig.plugins.push('@babel/plugin-proposal-class-properties')
+babelConfig.plugins.push('@babel/plugin-transform-private-methods')
 
 module.exports = babelConfig

cypress/e2e/a11y.cy.ts

@@ -39,7 +39,7 @@ describe('A11y tests', function() {
 	})
 
 	it('See the title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image2.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image2.jpg')
 	})
 
 	it('Should have rendered the previous video and the next image', function() {

cypress/e2e/actions/sidebar.cy.ts

@@ -64,7 +64,7 @@ describe('Open the sidebar from the viewer and open viewer with sidebar already
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image1.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image1.jpg')
 		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')
 	})

cypress/e2e/audios/audios.cy.ts

@@ -54,7 +54,7 @@ describe('Open mp3 and ogg audio in viewer', function() {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'audio.mp3')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'audio.mp3')
 		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')
 	})

cypress/e2e/images/images-custom-list-loadmore.cy.ts

@@ -130,7 +130,7 @@ describe('Open custom list of images in viewer with pagination', function() {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image1.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image1.jpg')
 		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')
 	})

cypress/e2e/images/images-custom-list.cy.ts

@@ -95,7 +95,7 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image1.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image1.jpg')
 		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')
 	})
@@ -134,7 +134,7 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image3.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image3.jpg')
 		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')
 	})
@@ -160,7 +160,7 @@ describe('Open custom images list in viewer', function() {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image1.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image1.jpg')
 		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')
 	})

cypress/e2e/images/images.cy.ts

@@ -69,7 +69,7 @@ describe('Open images in viewer', function() {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image1.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image1.jpg')
 		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')
 	})

cypress/e2e/mixins/audio.ts

@@ -68,7 +68,7 @@ export default function(fileName = 'audio.ogg', mimeType = 'audio/ogg') {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', fileName)
+		cy.get('body > .viewer .modal-header__name').should('contain', fileName)
 		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')
 	})

cypress/e2e/mixins/image.ts

@@ -70,7 +70,7 @@ export default function(fileName = 'image1.jpg', mimeType = 'image/jpeg', source
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', fileName)
+		cy.get('body > .viewer .modal-header__name').should('contain', fileName)
 		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')
 	})

cypress/e2e/mixins/oddname.ts

@@ -97,7 +97,7 @@ export default function(file, type, sidebar = false) {
 		 */
 		function menuOk() {
 			cy.get('body > .viewer .icon-error').should('not.exist')
-			cy.get('body > .viewer .modal-name').should('contain', placedName)
+			cy.get('body > .viewer .modal-header__name').should('contain', placedName)
 			cy.get('body > .viewer .modal-header button.header-close').should(
 				'be.visible',
 			)

cypress/e2e/mixins/video.ts

@@ -68,7 +68,7 @@ export default function(fileName = 'image1.jpg', mimeType = 'image/jpeg') {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', fileName)
+		cy.get('body > .viewer .modal-header__name').should('contain', fileName)
 		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')
 	})

cypress/e2e/non-dav-files.cy.ts

@@ -67,7 +67,7 @@ describe('Open non-dav files in viewer', function() {
 	})
 
 	it('See the title and close button on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', basename)
+		cy.get('body > .viewer .modal-header__name').should('contain', basename)
 		cy.get('body > .viewer .modal-header button.header-close').should('be.visible')
 	})
 

cypress/e2e/sharing/download-share-disabled.cy.ts

@@ -99,7 +99,7 @@ describe(`Download ${fileName} in viewer`, function() {
 	})
 
 	it('See the title on the viewer header but not the Download nor the menu button', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image1.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image1.jpg')
 		cy.get('body a[download="image1.jpg"]').should('not.exist')
 		cy.get('body > .viewer .modal-header button.action-item__menutoggle').should('not.exist')
 		cy.get('body > .viewer .modal-header button.header-close').should('be.visible')

cypress/e2e/sharing/download-share.cy.ts

@@ -79,7 +79,7 @@ describe(`Download ${fileName} from viewer in link share`, function() {
 	})
 
 	it('See the title and the close icon on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image1.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image1.jpg')
 		cy.get('body > .viewer .modal-header button.header-close').should('be.visible')
 	})
 

cypress/e2e/sharing/files-shares.cy.ts

@@ -81,7 +81,7 @@ describe('See shared folder with link share', function() {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'image1.jpg')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'image1.jpg')
 		cy.get('body > .viewer .modal-header button.header-close').should('be.visible')
 	})
 
@@ -141,7 +141,7 @@ describe('See shared folder with link share', function() {
 		cy.get('body > .viewer .modal-container video').should('have.length', 1)
 		cy.get('body > .viewer button.prev').should('be.visible')
 		cy.get('body > .viewer button.next').should('be.visible')
-		cy.get('body > .viewer .modal-name').should('contain', 'video1.mp4')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'video1.mp4')
 	})
 
 	it('Does not see a loading animation', function() {

cypress/e2e/videos/videos.cy.ts

@@ -54,7 +54,7 @@ describe('Open mp4 videos in viewer', function() {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'video1.mp4')
+		cy.get('body > .viewer .modal-header__name').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')
 	})

cypress/e2e/visual-regression.cy.ts

@@ -46,14 +46,15 @@ describe('Visual regression tests', function() {
 	})
 
 	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', '**/viewer/css/fonts/roboto-*').as('roboto-font')
+		cy.intercept('GET', '**/viewer/js/*roboto_index_css*').as('roboto-font')
 		cy.intercept('GET', '**/core/preview*').as('image1')
 		cy.intercept('GET', '/remote.php/dav/files/*/test-card.mp4').as('video')
 		cy.openFile('test-card.mp4')
@@ -65,7 +66,7 @@ describe('Visual regression tests', function() {
 	})
 
 	it('See the menu icon and title on the viewer header', function() {
-		cy.get('body > .viewer .modal-name').should('contain', 'test-card.mp4')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'test-card.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')
 	})
@@ -124,7 +125,7 @@ describe('Visual regression tests', function() {
 		cy.openFile('test-card.png')
 
 		cy.get('body > .viewer').should('be.visible')
-		cy.get('body > .viewer .modal-name').should('contain', 'test-card.png')
+		cy.get('body > .viewer .modal-header__name').should('contain', 'test-card.png')
 		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 button.prev').should('be.visible')