fix: chromatic stories, add tests

sbb-design-systems · Mar 22, 2024 · 15d25eb · 15d25eb
1 parent 3e5be5a
commit 15d25eb
Show file tree

Hide file tree

Showing 3 changed files with 253 additions and 23 deletions.
diff --git a/...omplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/...omplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-autocomplete-grid-button Dom"] = 
+snapshots["sbb-autocomplete-grid-button renders Dom"] = 
 `<sbb-autocomplete-grid-button
   aria-disabled="false"
   data-action=""
@@ -13,9 +13,9 @@ snapshots["sbb-autocomplete-grid-button Dom"] =
 >
 </sbb-autocomplete-grid-button>
 `;
-/* end snapshot sbb-autocomplete-grid-button Dom */
+/* end snapshot sbb-autocomplete-grid-button renders Dom */
 
-snapshots["sbb-autocomplete-grid-button ShadowDom"] = 
+snapshots["sbb-autocomplete-grid-button renders ShadowDom"] = 
 `<span class="sbb-action-base sbb-autocomplete-grid-button">
   <slot name="icon">
     <sbb-icon
@@ -28,5 +28,156 @@ snapshots["sbb-autocomplete-grid-button ShadowDom"] =
   </slot>
 </span>
 `;
-/* end snapshot sbb-autocomplete-grid-button ShadowDom */
+/* end snapshot sbb-autocomplete-grid-button renders ShadowDom */
+
+snapshots["sbb-autocomplete-grid-button renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-button renders disabled Dom"] = 
+`<sbb-autocomplete-grid-button
+  aria-disabled="true"
+  data-action=""
+  data-button=""
+  dir="ltr"
+  disabled=""
+  icon-name="pie-small"
+  id="sbb-autocomplete-grid-item-4x1x0"
+  role="button"
+>
+</sbb-autocomplete-grid-button>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders disabled Dom */
+
+snapshots["sbb-autocomplete-grid-button renders A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders A11y tree Firefox */
+
+snapshots["sbb-autocomplete-grid-button renders disabled ShadowDom"] = 
+`<span class="sbb-action-base sbb-autocomplete-grid-button">
+  <slot name="icon">
+    <sbb-icon
+      aria-hidden="true"
+      data-namespace="default"
+      name="pie-small"
+      role="img"
+    >
+    </sbb-icon>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders disabled ShadowDom */
+
+snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Firefox */
+
+snapshots["sbb-autocomplete-grid-button renders negative without icon Dom"] = 
+`<sbb-autocomplete-grid-button
+  aria-disabled="false"
+  data-action=""
+  data-button=""
+  dir="ltr"
+  id="sbb-autocomplete-grid-item-7x1x0"
+  negative=""
+  role="button"
+>
+</sbb-autocomplete-grid-button>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders negative without icon Dom */
+
+snapshots["sbb-autocomplete-grid-button renders negative without icon ShadowDom"] = 
+`<span class="sbb-action-base sbb-autocomplete-grid-button">
+  <slot name="icon">
+  </slot>
+</span>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders negative without icon ShadowDom */
+
+snapshots["sbb-autocomplete-grid-button renders A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders A11y tree Safari */
+
+snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": "",
+      "disabled": true
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Safari */
 
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -1,6 +1,9 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
+import { waitForLitRender } from '../../core/testing';
+import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot';
+
 import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button';
 import '../autocomplete-grid';
 import '../autocomplete-grid-row';
@@ -9,28 +12,103 @@ import '../autocomplete-grid-actions';
 import './autocomplete-grid-button';
 
 describe('sbb-autocomplete-grid-button', () => {
-  let root: SbbAutocompleteGridButtonElement;
-  beforeEach(async () => {
-    root = (
-      await fixture(html`
-        <sbb-autocomplete-grid origin="anchor">
-          <sbb-autocomplete-grid-row>
-            <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
-            <sbb-autocomplete-grid-actions>
-              <sbb-autocomplete-grid-button icon-name="pie-small"></sbb-autocomplete-grid-button>
-            </sbb-autocomplete-grid-actions>
-          </sbb-autocomplete-grid-row>
-        </sbb-autocomplete-grid>
-        <div id="anchor"></div>
-      `)
-    ).querySelector('sbb-autocomplete-grid-button')!;
+  describe('renders', () => {
+    let root: SbbAutocompleteGridButtonElement;
+    beforeEach(async () => {
+      root = (
+        await fixture(html`
+          <sbb-autocomplete-grid origin="anchor">
+            <sbb-autocomplete-grid-row>
+              <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
+              <sbb-autocomplete-grid-actions>
+                <sbb-autocomplete-grid-button icon-name="pie-small"></sbb-autocomplete-grid-button>
+              </sbb-autocomplete-grid-actions>
+            </sbb-autocomplete-grid-row>
+          </sbb-autocomplete-grid>
+          <div id="anchor"></div>
+        `)
+      ).querySelector('sbb-autocomplete-grid-button')!;
+      await waitForLitRender(root);
+    });
+
+    it('Dom', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot(
+      html`<sbb-autocomplete-grid-button icon-name="pie-small"></sbb-autocomplete-grid-button>`,
+    );
   });
 
-  it('Dom', async () => {
-    await expect(root).dom.to.be.equalSnapshot();
+  describe('renders disabled', () => {
+    let root: SbbAutocompleteGridButtonElement;
+    beforeEach(async () => {
+      root = (
+        await fixture(html`
+          <sbb-autocomplete-grid origin="anchor">
+            <sbb-autocomplete-grid-row>
+              <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
+              <sbb-autocomplete-grid-actions>
+                <sbb-autocomplete-grid-button
+                  disabled
+                  icon-name="pie-small"
+                ></sbb-autocomplete-grid-button>
+              </sbb-autocomplete-grid-actions>
+            </sbb-autocomplete-grid-row>
+          </sbb-autocomplete-grid>
+          <div id="anchor"></div>
+        `)
+      ).querySelector('sbb-autocomplete-grid-button')!;
+      await waitForLitRender(root);
+    });
+
+    it('Dom', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+
+    testA11yTreeSnapshot(
+      html`<sbb-autocomplete-grid-button
+        disabled
+        icon-name="pie-small"
+      ></sbb-autocomplete-grid-button>`,
+    );
   });
 
-  it('ShadowDom', async () => {
-    await expect(root).shadowDom.to.be.equalSnapshot();
+  describe('renders negative without icon', () => {
+    let root: SbbAutocompleteGridButtonElement;
+    beforeEach(async () => {
+      root = (
+        await fixture(html`
+          <sbb-form-field negative>
+            <input />
+            <sbb-autocomplete-grid>
+              <sbb-autocomplete-grid-row>
+                <sbb-autocomplete-grid-option value="1">Option 1</sbb-autocomplete-grid-option>
+                <sbb-autocomplete-grid-actions>
+                  <sbb-autocomplete-grid-button></sbb-autocomplete-grid-button>
+                </sbb-autocomplete-grid-actions>
+              </sbb-autocomplete-grid-row>
+            </sbb-autocomplete-grid>
+          </sbb-form-field>
+        `)
+      ).querySelector('sbb-autocomplete-grid-button')!;
+      await waitForLitRender(root);
+    });
+
+    it('Dom', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
   });
 });
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -318,6 +318,7 @@ const Template = (args: Args): TemplateResult => html`
       ?negative=${args.negative}
       ?borderless=${args.borderless}
       ?floating-label=${args.floatingLabel}
+      data-testid="form-field"
     >
       <input
         placeholder="Placeholder"