improved cypress element selectors according to best practices

Signed-off-by: Elizabeth Danzberger <[email protected]>
nextcloud · Feb 21, 2024 · e421f44 · e421f44
1 parent 2e5975e
commit e421f44
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/cypress/e2e/nodes/CodeBlock.spec.js b/cypress/e2e/nodes/CodeBlock.spec.js
@@ -42,7 +42,7 @@ describe('Front matter support', function() {
 			cy.getContent().find('code').eq(1).find('.hljs-string').eq(0).contains('"bar"')
 			cy.getContent().find('code').eq(1).find('.hljs-keyword').eq(1).contains('function')
 
-			cy.getContent().find('.code-block').eq(1).find('.view-switch > button').click()
+			cy.getContent().find('.code-block').eq(1).find('[data-cy="copy-code"]').click()
 
 			// Copy code to clipboard
 			cy.getContent().find('code').eq(1).invoke('text')
@@ -56,7 +56,7 @@ describe('Front matter support', function() {
 				)
 
 			// Remove language
-			cy.getContent().find('.code-block').eq(1).find('.view-switch div div button').click()
+			cy.getContent().find('.code-block').eq(1).find('[data-cy="code-action-group"]').find('div:first-child').click()
 			// FIXME: Label behaviour changed, should be back once https://github.com/nextcloud-libraries/nextcloud-vue/pull/4484 is merged
 			// cy.get('.action-input__text-label').contains('Code block language')
 			cy.get('.input-field__input:visible').clear()
@@ -66,7 +66,7 @@ describe('Front matter support', function() {
 			cy.getContent().find('code').eq(1).find('.hljs-keyword').should('not.exist')
 
 			// Re-add language
-			cy.getContent().find('.code-block').eq(1).find('.view-switch div div button').click()
+			cy.getContent().find('.code-block').eq(1).find('[data-cy="code-action-group"]').find('div:first-child').click()
 			cy.get('.input-field__input:visible').type('javascript')
 
 			cy.getContent().find('code').eq(1).find('.hljs-keyword').eq(0).contains('const')

diff --git a/src/nodes/CodeBlockView.vue b/src/nodes/CodeBlockView.vue
@@ -4,6 +4,7 @@
 			<div class="view-switch">
 				<NcActions :aria-label="t('text', 'Copy code block')">
 					<NcActionButton v-if="hasCode"
+						data-cy="copy-code"
 						:aria-label="t('text', 'Copy code')"
 						:close-after-click="false"
 						@click="copyCode">
@@ -15,8 +16,11 @@
 					</NcActionButton>
 				</NcActions>
 
-				<NcActions v-if="isEditable" :aria-label="t('text', 'Code block options')">
-					<NcActionInput :label="t('text', 'Code block language')"
+				<NcActions v-if="isEditable"
+					data-cy="code-action-group"
+					:aria-label="t('text', 'Code block options')">
+					<NcActionInput
+						:label="t('text', 'Code block language')"
 						:value="type"
 						:show-trailing-button="false"
 						:placeholder="t('text', 'e.g. php, javascript, json…')"