fix(cypress): cypress visual regression and modal name selector

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

.eslintrc.json

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

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

@@ -54,7 +54,7 @@ describe('Visual regression tests', function() {
 	})
 
 	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')
@@ -66,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')
 	})
@@ -125,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')

src/views/Viewer.vue

@@ -1304,7 +1304,7 @@ export default {
 		&.modal-mask {
 			background-color: rgba(255, 255, 255, .92) !important;
 		}
-		:deep(.modal-name),
+		:deep(.modal-header__name),
 		:deep(.modal-header .icons-menu button svg) {
 			color: #000 !important;
 		}
@@ -1314,7 +1314,7 @@ export default {
 		&.modal-mask {
 			background-color: var(--color-main-background) !important;
 		}
-		:deep(.modal-name),
+		:deep(.modal-header__name),
 		:deep(.modal-header .icons-menu) {
 			color: var(--color-main-text) !important;
 
@@ -1327,7 +1327,7 @@ export default {
 	&.image--fullscreen {
 		// Special display mode for images in full screen
 		:deep(.modal-header) {
-			.modal-name {
+			.modal-header__name {
 				// Hide file name
 				opacity: 0;
 			}