test: respect state element for visual focus tests (#3080)

sbb-design-systems · Sep 17, 2024 · 26d4d5a · 26d4d5a
1 parent 154b430
commit 26d4d5a
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 63 deletions.
diff --git a/src/elements/core/testing/private/visual-regression-snapshot.ts b/src/elements/core/testing/private/visual-regression-snapshot.ts
@@ -113,8 +113,19 @@ export const visualDiffFocus: VisualDiffState = {
   with(setup: (setup: VisualDiffSetupBuilder) => void | Promise<void>): Mocha.Func {
     return async function (this: Mocha.Context) {
       const builder = await runSetupWithViewport(setup, this.test?.ctx?.['requestViewport']);
-      builder.snapshotElement.focus();
+
+      // We create a focusable element (<a>) right before the state element.
+      // We can tab once to land on the desired element.
+      const link = document.createElement(`a`);
+      link.href = '#';
+      link.classList.add('sbb-screen-reader-only');
+      // We need to copy the slot so we can ensure it's landing at the right position
+      link.slot = builder.stateElement.slot;
+      builder.stateElement.insertAdjacentElement('beforebegin', link);
+      link.focus();
       await sendKeys({ press: tabKey });
+      link.remove();
+
       await visualDiff(builder.snapshotElement, imageName(this.test!));
     };
   },

diff --git a/src/elements/datepicker/datepicker-next-day/datepicker-next-day.visual.spec.ts b/src/elements/datepicker/datepicker-next-day/datepicker-next-day.visual.spec.ts
@@ -1,12 +1,10 @@
-import { sendKeys } from '@web/test-runner-commands';
 import { html, nothing } from 'lit';
 
-import { tabKey } from '../../core/testing/private/keys.js';
 import {
   describeEach,
   describeViewports,
   visualDiffDefault,
-  visualRegressionFixture,
+  visualDiffFocus,
 } from '../../core/testing/private.js';
 
 import './datepicker-next-day.js';
@@ -20,51 +18,37 @@ describe(`sbb-datepicker-next-day`, () => {
   };
 
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
-    it(
-      `standalone`,
-      visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(html`<sbb-datepicker-next-day></sbb-datepicker-next-day>`);
-      }),
-    );
-
-    describeEach(cases, ({ negative, value }) => {
-      let root: HTMLElement;
-
-      beforeEach(async () => {
-        root = await visualRegressionFixture(
-          html`
-            <sbb-form-field ?negative=${negative}>
-              <input value=${value || nothing} />
-              <sbb-datepicker></sbb-datepicker>
-              <sbb-datepicker-next-day></sbb-datepicker-next-day>
-            </sbb-form-field>
-          `,
-          { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined },
-        );
-      });
-
+    for (const state of [visualDiffDefault, visualDiffFocus]) {
       it(
-        `with form-field`,
-        visualDiffDefault.with(async (setup) => {
-          setup.withSnapshotElement(root);
+        `standalone ${state.name}`,
+        state.with(async (setup) => {
+          await setup.withFixture(html`<sbb-datepicker-next-day></sbb-datepicker-next-day>`);
         }),
       );
 
-      it(
-        `with form-field focus`,
-        visualDiffDefault.with(async (setup) => {
-          setup.withSnapshotElement(root);
-
-          if (value) {
-            // Focus input so that with a tab press it should land on next day
-            setup.snapshotElement.querySelector('input')!.focus();
-          } else {
-            setup.snapshotElement.focus();
-          }
-
-          await sendKeys({ press: tabKey });
-        }),
-      );
-    });
+      describeEach(cases, ({ negative, value }) => {
+        it(
+          `with form-field ${state.name}`,
+          state.with(async (setup) => {
+            await setup.withFixture(
+              html`
+                <sbb-form-field ?negative=${negative}>
+                  <input value=${value || nothing} />
+                  <sbb-datepicker></sbb-datepicker>
+                  <sbb-datepicker-next-day></sbb-datepicker-next-day>
+                </sbb-form-field>
+              `,
+              { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined },
+            );
+
+            if (value) {
+              setup.withStateElement(
+                setup.snapshotElement.querySelector('sbb-datepicker-next-day')!,
+              );
+            }
+          }),
+        );
+      });
+    }
   });
 });
diff --git a/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.visual.spec.ts b/src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.visual.spec.ts
@@ -42,6 +42,12 @@ describe(`sbb-datepicker-previous-day`, () => {
               `,
               { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined },
             );
+
+            if (value) {
+              setup.withStateElement(
+                setup.snapshotElement.querySelector('sbb-datepicker-previous-day')!,
+              );
+            }
           }),
         );
       });

diff --git a/src/elements/form-field/form-field/form-field.visual.spec.ts b/src/elements/form-field/form-field/form-field.visual.spec.ts
@@ -1,8 +1,5 @@
-import { sendKeys } from '@web/test-runner-commands';
 import { html, nothing, type TemplateResult } from 'lit';
 
-import type { SbbMiniButtonElement } from '../../button/mini-button.js';
-import { tabKey } from '../../core/testing/private/keys.js';
 import {
   describeEach,
   describeViewports,
@@ -221,19 +218,15 @@ describe(`sbb-form-field`, () => {
 
                 it(
                   `slot=buttons focus`,
-                  visualDiffDefault.with(async (setup) => {
+                  visualDiffFocus.with(async (setup) => {
                     const templateResult: TemplateResult = html`${template(args)}
                     ${buttonsAndPopover(args)}`;
                     await setup.withFixture(html`${formField(args, templateResult)}`, {
                       backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
                       focusOutlineDark: negative,
                       forcedColors,
                     });
-                    (
-                      setup.snapshotElement.querySelector(name)!
-                        .nextElementSibling as SbbMiniButtonElement
-                    ).focus();
-                    await sendKeys({ press: tabKey });
+                    setup.withStateElement(setup.snapshotElement.querySelector('sbb-mini-button')!);
                   }),
                 );
               });

diff --git a/src/elements/header/header/header.visual.spec.ts b/src/elements/header/header/header.visual.spec.ts
@@ -1,8 +1,10 @@
-import { sendKeys } from '@web/test-runner-commands';
 import { html, type TemplateResult } from 'lit';
 
-import { tabKey } from '../../core/testing/private/keys.js';
-import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+import {
+  describeViewports,
+  visualDiffDefault,
+  visualDiffFocus,
+} from '../../core/testing/private.js';
 
 import './header.js';
 import '../header-link.js';
@@ -64,14 +66,13 @@ describe(`sbb-header`, () => {
       describe(logoOrSignet, () => {
         it(
           'focus',
-          visualDiffDefault.with(async (setup) => {
+          visualDiffFocus.with(async (setup) => {
             await setup.withFixture(template(false, logoOrSignet === 'signet' ? 's' : 'm'), {
               padding: '0',
             });
-            setup.snapshotElement.querySelector<HTMLAnchorElement>(`a[slot='logo']`)!.focus();
-            // We focus the logo and then tab left and right again to activate the focus visible state on the link
-            await sendKeys({ press: `Shift+${tabKey}` });
-            await sendKeys({ press: tabKey });
+            setup.withStateElement(
+              setup.snapshotElement.querySelector<HTMLAnchorElement>(`a[slot='logo']`)!,
+            );
           }),
         );
       });