fix(cypress): Adjust and simplify selectors for editor/reader

Signed-off-by: Jonas <[email protected]>
nextcloud · Oct 11, 2023 · d206911 · d206911
1 parent f386902
commit d206911
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 12 deletions.
diff --git a/cypress/e2e/circle-with-group.spec.js b/cypress/e2e/circle-with-group.spec.js
@@ -42,7 +42,8 @@ describe('Pages are accessible via group membership to circle', function() {
 	it('Lists the collective', function() {
 		cy.login('bob')
 		cy.get('.app-navigation').contains('Group Collective').click()
-		cy.get('#text h1').should('contain', 'Welcome to your new collective')
+		cy.getReadOnlyEditor()
+			.find('h1').should('contain', 'Welcome to your new collective')
 		cy.logout()
 	})
 })
diff --git a/cypress/e2e/collective-share.spec.js b/cypress/e2e/collective-share.spec.js
@@ -78,7 +78,8 @@ describe('Collective Share', function() {
 			cy.visit(shareUrl)
 			cy.get('#titleform input').should('have.value', 'Share me')
 			cy.get('button.titleform-button').should('not.exist')
-			cy.get('#text h1').should('contain', 'Welcome to your new collective')
+			cy.getReadOnlyEditor()
+				.find('h1').should('contain', 'Welcome to your new collective')
 			cy.get('.app-content-list-item.toplevel')
 				.find('button.icon.add')
 				.should('not.exist')

diff --git a/cypress/e2e/collective.spec.js b/cypress/e2e/collective.spec.js
@@ -136,7 +136,8 @@ describe('Collective', function() {
 			cy.get('#titleform input').invoke('val').should('contain', randomName)
 			cy.get('#titleform input').should('have.attr', 'disabled')
 			cy.log('Check initial Readme.md')
-			cy.get('#text h1').should('contain', 'Welcome to your new collective')
+			cy.getReadOnlyEditor()
+				.find('h1').should('contain', 'Welcome to your new collective')
 			cy.log('Allows creation of pages')
 			cy.get('.app-content-list-item')
 				.trigger('mouseover')

diff --git a/cypress/e2e/page-details.spec.js b/cypress/e2e/page-details.spec.js
@@ -49,13 +49,15 @@ describe('Page details', function() {
 			cy.log('Show outline in view mode')
 			cy.contains('button', 'Show outline')
 				.click()
-			cy.get('#text-container .editor--toc .editor--toc__item')
+			cy.getReadOnlyEditor()
+				.find('.editor--toc .editor--toc__item')
 				.should('contain', 'Second-Level Heading')
 
 			// Switch to edit mode
 			cy.switchPageMode(1)
 
-			cy.get('.text-editor .editor--toc .editor--toc__item')
+			cy.getEditor()
+				.find('.editor--toc .editor--toc__item')
 				.should('contain', 'Second-Level Heading')
 
 			cy.log('Close outline in edit mode')

diff --git a/cypress/e2e/pages.spec.js b/cypress/e2e/pages.spec.js
@@ -283,28 +283,28 @@ describe('Page', function() {
 		it('Allows to toggle persistent full-width view', function() {
 			cy.visit('/apps/collectives/Our%20Garden/Day%202')
 			cy.get('#titleform').should('have.css', 'max-width', '100%')
-			cy.get('[data-collectives-el="reader"], #read-only-editor').invoke('outerWidth').should('eq', 670)
+			cy.getReadOnlyEditor().invoke('outerWidth').should('eq', 670)
 
 			// Set full width mode
 			cy.get('#titleform .action-item__menutoggle')
 				.click()
 			cy.contains('li.action', 'Full width')
 				.click()
 			cy.get('#titleform').should('have.css', 'max-width', 'none')
-			cy.get('[data-collectives-el="reader"], #read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
+			cy.getReadOnlyEditor().invoke('outerWidth').should('be.greaterThan', 700)
 
 			// Reload to check persistence with browser storage
 			cy.reload()
 			cy.get('#titleform').should('have.css', 'max-width', 'none')
-			cy.get('[data-collectives-el="reader"], #read-only-editor').invoke('outerWidth').should('be.greaterThan', 700)
+			cy.getReadOnlyEditor().invoke('outerWidth').should('be.greaterThan', 700)
 
 			// Unset full width mode
 			cy.get('#titleform .action-item__menutoggle')
 				.click()
 			cy.contains('li.action', 'Full width')
 				.click()
 			cy.get('#titleform').should('have.css', 'max-width', '100%')
-			cy.get('[data-collectives-el="reader"], #read-only-editor').invoke('outerWidth').should('eq', 670)
+			cy.getReadOnlyEditor().invoke('outerWidth').should('eq', 670)
 		})
 	})
 

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -59,14 +59,14 @@ Cypress.Commands.add('logout', () => {
  */
 Cypress.Commands.add('getEditor', (timeout = null) => {
 	timeout = timeout ?? Cypress.config('defaultCommandTimeout')
-	cy.get('[data-collectives-el="editor"] div.ProseMirror, [data-text-el="editor-container"] div.ProseMirror', { timeout })
+	cy.get('[data-collectives-el="editor"]', { timeout })
 })
 
 /**
  * Get the ReadOnlyEditor/RichTextReader component
  */
 Cypress.Commands.add('getReadOnlyEditor', () => {
-	cy.get('[data-collectives-el="reader"] div.ProseMirror, #read-only-editor div.ProseMirror')
+	cy.get('[data-collectives-el="reader"]')
 })
 
 /**

diff --git a/src/components/Page/LegacyTextEditor.vue b/src/components/Page/LegacyTextEditor.vue
@@ -8,7 +8,8 @@
 			id="text-container"
 			:key="'text-' + currentPage.id"
 			:class="{'sheet-view': !isFullWidthView}"
-			:aria-label="t('collectives', 'Page content')">
+			:aria-label="t('collectives', 'Page content')"
+			data-collectives-el="reader">
 			<Reader :key="`reader-${currentPage.id}`"
 				:current-page="currentPage"
 				:page-content="pageContent" />
@@ -17,6 +18,7 @@
 			v-show="showEditor"
 			:key="`editor-${currentPage.id}`"
 			ref="legacyEditor"
+			data-collectives-el="editor"
 			@ready="readyEditor" />
 	</div>
 </template>