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

Signed-off-by: Jonas <[email protected]>

Author: mejo-

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

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

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

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

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

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"]')
 })
 
 /**

src/components/Page/LegacyEditor.vue

@@ -11,6 +11,7 @@
 		:show-outline-outside="showOutline"
 		mime="text/markdown"
 		class="file-view active"
+		data-collectives-el="editor"
 		:class="{'sheet-view': !isFullWidthView}"
 		@ready="ready"
 		@outline-toggled="toggleOutlineFromText"

src/components/Page/Reader.vue

@@ -9,6 +9,7 @@
 			<SkeletonLoading v-if="loading('pageContent')" type="text" />
 			<RichTextReader v-else
 				:content="pageContent"
+				data-collectives-el="reader"
 				@click-link="followLink" />
 		</div>
 	</div>