test: add e2e and spec tests

src/components/stepper/step-label/step-label.spec.ts

@@ -1,17 +1,28 @@
-// import { expect, fixture } from '@open-wc/testing';
-// import { html } from 'lit/static-html.js';
-// import './step-label';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './step-label';
 
-// describe('sbb-step-label', () => {
-//   it('renders', async () => {
-//     const root = await fixture(html`<sbb-step-label my-prop="Label"></sbb-step-label>`);
+describe('sbb-step-label', () => {
+  it('renders', async () => {
+    const root = await fixture(html`<sbb-step-label></sbb-step-label>`);
 
-//     expect(root).dom.to.be.equal(`<sbb-step-label my-prop="Label"></sbb-step-label>`);
+    expect(root).dom.to.be.equal(`
+        <sbb-step-label
+            data-action
+            data-button
+            dir="ltr"
+            id="sbb-step-label-0"
+            role="tab"
+            slot="step-label"
+            tabindex="0"
+        ></sbb-step-label>
+    `);
 
-//     expect(root).shadowDom.to.be.equal(`
-//       <div class="sbb-step-label">
-//         Label
-//       </div>
-//     `);
-//   });
-// });
+    expect(root).shadowDom.to.be.equal(`
+        <div class="sbb-step-label">
+            <span class="sbb-step-label__prefix"><slot name="icon"></slot></span>
+            <span class="sbb-step-label__text"><slot></slot></span>
+        </div>
+    `);
+  });
+});

src/components/stepper/step/step.spec.ts

@@ -1,17 +1,21 @@
-// import { expect, fixture } from '@open-wc/testing';
-// import { html } from 'lit/static-html.js';
-// import './step';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import './step';
 
-// describe('sbb-step', () => {
-//   it('renders', async () => {
-//     const root = await fixture(html`<sbb-step my-prop="Label"></sbb-step>`);
+describe('sbb-step', () => {
+  it('renders', async () => {
+    const root = await fixture(html`<sbb-step></sbb-step>`);
 
-//     expect(root).dom.to.be.equal(`<sbb-step my-prop="Label"></sbb-step>`);
+    expect(root).dom.to.be.equal(
+      `<sbb-step id="sbb-step-0" role="tabpanel" slot="step"></sbb-step>`,
+    );
 
-//     expect(root).shadowDom.to.be.equal(`
-//       <div class="sbb-step">
-//         Label
-//       </div>
-//     `);
-//   });
-// });
+    expect(root).shadowDom.to.be.equal(`
+    <div class="sbb-step--wrapper">
+        <div class="sbb-step">
+          <slot></slot>
+        </div>
+    </div>
+    `);
+  });
+});

src/components/stepper/stepper/__snapshots__/stepper.spec.snap.js

@@ -0,0 +1,147 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-stepper renders"] = 
+`<div class="sbb-stepper">
+  <div
+    class="sbb-stepper__labels"
+    role="tablist"
+  >
+    <slot name="step-label">
+    </slot>
+  </div>
+  <div class="sbb-stepper__steps">
+    <slot name="step">
+    </slot>
+  </div>
+</div>
+`;
+/* end snapshot sbb-stepper renders */
+
+snapshots["sbb-tab-group A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "tab",
+      "name": "Test step label 1",
+      "selected": true
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 2"
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 3"
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 4"
+    },
+    {
+      "role": "tabpanel",
+      "name": "",
+      "children": [
+        {
+          "role": "text",
+          "name": "Test step content 1"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tab-group A11y tree Chrome */
+
+snapshots["sbb-tab-group A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "tab",
+      "name": "Test step label 1",
+      "selected": true
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 2"
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 3"
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 4"
+    },
+    {
+      "role": "tabpanel",
+      "name": "",
+      "children": [
+        {
+          "role": "text leaf",
+          "name": "Test step content 1"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tab-group A11y tree Firefox */
+
+snapshots["sbb-tab-group A11y tree Safari"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "tab",
+      "name": "Test step label 1",
+      "selected": true
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 2"
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 3"
+    },
+    {
+      "role": "tab",
+      "name": "Test step label 4"
+    },
+    {
+      "role": "tabpanel",
+      "name": "",
+      "children": [
+        {
+          "role": "text",
+          "name": "Test step content 1"
+        }
+      ]
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-tab-group A11y tree Safari */
+
+snapshots["sbb-stepper A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": ""
+}
+</p>
+`;
+/* end snapshot sbb-stepper A11y tree Chrome */
+