fix: label text should be clickable to toggle snapshot highlight (#21122

) * update component * update test * update component test * remove unused label text * add cursor:pointer styles to label
cypress-io · Apr 20, 2022 · b8ba111 · b8ba111 · cypress-bot · Apr 20, 2022
1 parent ccfee1e
commit b8ba111
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/packages/app/cypress/e2e/runner/runner.ui.cy.ts b/packages/app/cypress/e2e/runner/runner.ui.cy.ts
@@ -1,4 +1,5 @@
 import { loadSpec } from './support/spec-loader'
+import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
 
 describe('src/cypress/runner', () => {
   describe('tests finish with correct state', () => {
@@ -110,8 +111,10 @@ describe('src/cypress/runner', () => {
       .click()
       .should('have.class', 'command-is-pinned')
 
+      const { highlightsLabel } = defaultMessages.runner.snapshot
+
       // disable highlights
-      cy.get('[id="toggle-highlights"]')
+      cy.findByLabelText(highlightsLabel)
       .should('have.attr', 'aria-checked', 'true')
       .click()
       .should('have.attr', 'aria-checked', 'false')
@@ -123,7 +126,8 @@ describe('src/cypress/runner', () => {
       .click()
       .should('have.class', 'command-is-pinned')
 
-      cy.get('[id="toggle-highlights"]').should('have.attr', 'aria-checked', 'true')
+      cy.findByLabelText(highlightsLabel)
+      .should('have.attr', 'aria-checked', 'true')
     })
 
     it('correctly resets named snapshot toggle state when pinning new command', () => {

diff --git a/packages/app/src/runner/SnapshotControls.cy.tsx b/packages/app/src/runner/SnapshotControls.cy.tsx
@@ -2,6 +2,7 @@ import SnapshotControls from './SnapshotControls.vue'
 import { autSnapshot } from '../../cypress/support/fixtures'
 import { useSnapshotStore } from './snapshot-store'
 import { createEventManager, createTestAutIframe } from '../../cypress/component/support/ctSupport'
+import { defaultMessages } from '@cy/i18n'
 
 const snapshotWithSnapshots = { ...autSnapshot }
 const snapshotPinned = { ...autSnapshot, snapshots: [] }
@@ -91,9 +92,7 @@ describe('SnapshotControls', { viewportHeight: 200, viewportWidth: 500 }, () =>
 
     mountSnapshotControls(eventManager, autIframe)
     cy.get('body')
-    .findByText('Highlights')
-    .should('be.visible')
-    .findByLabelText('Toggle highlights')
+    .findByLabelText(defaultMessages.runner.snapshot.highlightsLabel)
     .click({ force: true })
   })
 

diff --git a/packages/app/src/runner/SnapshotHighlightControls.vue b/packages/app/src/runner/SnapshotHighlightControls.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="rounded flex font-medium bg-gray-900 py-2px px-12px text-gray-200 text-14px leading-20px gap-8px items-center">
-    <label
-      class="hidden"
-      for="toggle-highlights"
-    >{{ t('runner.snapshot.toggleHighlights') }}</label>
     <Switch
       name="toggle-highlights"
       :value="props.value"
       size="sm"
       @update="emits('toggle')"
     />
-    {{ t('runner.snapshot.highlightsLabel') }}
+    <label
+      for="toggle-highlights"
+      class="cursor-pointer"
+    >{{ t('runner.snapshot.highlightsLabel') }}
+    </label>
   </div>
 </template>
 

diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
@@ -637,7 +637,6 @@
       "troubleRendering": "if you're having trouble rendering your components properly."
     },
     "snapshot": {
-      "toggleHighlights": "Toggle highlights",
       "highlightsLabel": "Highlights",
       "testsRunningError": "Cannot show Snapshot while tests are running",
       "snapshotMissingError": "The snapshot is missing. Displaying current state of the DOM.",