test: add tests

sbb-design-systems · Apr 23, 2024 · 6538e88 · 6538e88
1 parent e057e42
commit 6538e88
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 7 deletions.
diff --git a/src/components/accordion/__snapshots__/accordion.spec.snap.js b/src/components/accordion/__snapshots__/accordion.spec.snap.js
@@ -2,16 +2,18 @@
 export const snapshots = {};
 
 snapshots["sbb-accordion renders - Dom"] = 
-`<sbb-accordion>
+`<sbb-accordion size="l">
   <sbb-expansion-panel
     data-accordion=""
     data-accordion-first=""
+    size="l"
   >
     <sbb-expansion-panel-header
       aria-controls="sbb-expansion-panel-content-1"
       aria-expanded="false"
       data-action=""
       data-button=""
+      data-size="l"
       data-slot-names="unnamed"
       dir="ltr"
       id="sbb-expansion-panel-header-1"
@@ -24,6 +26,7 @@ snapshots["sbb-accordion renders - Dom"] =
     <sbb-expansion-panel-content
       aria-hidden="true"
       aria-labelledby="sbb-expansion-panel-header-1"
+      data-size="l"
       id="sbb-expansion-panel-content-1"
       role="region"
       slot="content"
@@ -34,12 +37,14 @@ snapshots["sbb-accordion renders - Dom"] =
   <sbb-expansion-panel
     data-accordion=""
     data-accordion-last=""
+    size="l"
   >
     <sbb-expansion-panel-header
       aria-controls="sbb-expansion-panel-content-2"
       aria-expanded="false"
       data-action=""
       data-button=""
+      data-size="l"
       data-slot-names="unnamed"
       dir="ltr"
       id="sbb-expansion-panel-header-2"
@@ -52,6 +57,7 @@ snapshots["sbb-accordion renders - Dom"] =
     <sbb-expansion-panel-content
       aria-hidden="true"
       aria-labelledby="sbb-expansion-panel-header-2"
+      data-size="l"
       id="sbb-expansion-panel-content-2"
       role="region"
       slot="content"

diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts
@@ -46,9 +46,15 @@ describe(`sbb-accordion ${fixture.name}`, () => {
 
     expect(panels[0]).to.have.attribute('data-accordion-first');
     expect(panels[0]).to.have.attribute('data-accordion');
+    expect(panels[0]).to.have.attribute('size');
+    expect(panels[0].size).to.be.equal('l');
     expect(panels[1]).to.have.attribute('data-accordion');
+    expect(panels[1]).to.have.attribute('size');
+    expect(panels[1].size).to.be.equal('l');
     expect(panels[2]).to.have.attribute('data-accordion');
     expect(panels[2]).to.have.attribute('data-accordion-last');
+    expect(panels[2]).to.have.attribute('size');
+    expect(panels[2].size).to.be.equal('l');
   });
 
   it('should set accordion context on expansion panel when removing and adding expansion-panels', async () => {
@@ -108,6 +114,16 @@ describe(`sbb-accordion ${fixture.name}`, () => {
     ).to.be.equal('H6');
   });
 
+  it('should dynamically update size prop', async () => {
+    element.size = 's';
+    await waitForLitRender(element);
+    const panels = Array.from(element.querySelectorAll('sbb-expansion-panel'));
+    expect(panels.length).to.be.equal(3);
+    expect(panels[0].size).to.be.equal('s');
+    expect(panels[1].size).to.be.equal('s');
+    expect(panels[2].size).to.be.equal('s');
+  });
+
   it('should close others when expanding and multi = false', async () => {
     const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen);
     const panelOne: SbbExpansionPanelElement =

diff --git a/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
@@ -2,12 +2,13 @@
 export const snapshots = {};
 
 snapshots["sbb-expansion-panel renders Dom"] = 
-`<sbb-expansion-panel>
+`<sbb-expansion-panel size="l">
   <sbb-expansion-panel-header
     aria-controls="sbb-expansion-panel-content-1"
     aria-expanded="false"
     data-action=""
     data-button=""
+    data-size="l"
     data-slot-names="unnamed"
     dir="ltr"
     id="sbb-expansion-panel-header-1"
@@ -20,6 +21,7 @@ snapshots["sbb-expansion-panel renders Dom"] =
   <sbb-expansion-panel-content
     aria-hidden="true"
     aria-labelledby="sbb-expansion-panel-header-1"
+    data-size="l"
     id="sbb-expansion-panel-content-1"
     role="region"
     slot="content"
@@ -47,15 +49,19 @@ snapshots["sbb-expansion-panel renders ShadowDom"] =
 /* end snapshot sbb-expansion-panel renders ShadowDom */
 
 snapshots["sbb-expansion-panel renders with level set Dom"] = 
-`<sbb-expansion-panel title-level="4">
+`<sbb-expansion-panel
+  size="l"
+  title-level="4"
+>
   <sbb-expansion-panel-header
-    aria-controls="sbb-expansion-panel-content-3"
+    aria-controls="sbb-expansion-panel-content-5"
     aria-expanded="false"
     data-action=""
     data-button=""
+    data-size="l"
     data-slot-names="unnamed"
     dir="ltr"
-    id="sbb-expansion-panel-header-3"
+    id="sbb-expansion-panel-header-5"
     role="button"
     slot="header"
     tabindex="0"
@@ -64,8 +70,9 @@ snapshots["sbb-expansion-panel renders with level set Dom"] =
   </sbb-expansion-panel-header>
   <sbb-expansion-panel-content
     aria-hidden="true"
-    aria-labelledby="sbb-expansion-panel-header-3"
-    id="sbb-expansion-panel-content-3"
+    aria-labelledby="sbb-expansion-panel-header-5"
+    data-size="l"
+    id="sbb-expansion-panel-content-5"
     role="region"
     slot="content"
   >
@@ -123,3 +130,50 @@ snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
 `;
 /* end snapshot sbb-expansion-panel renders with level set A11y tree Chrome */
 
+snapshots["sbb-expansion-panel renders size s Dom"] = 
+`<sbb-expansion-panel size="s">
+  <sbb-expansion-panel-header
+    aria-controls="sbb-expansion-panel-content-3"
+    aria-expanded="false"
+    data-action=""
+    data-button=""
+    data-size="s"
+    data-slot-names="unnamed"
+    dir="ltr"
+    id="sbb-expansion-panel-header-3"
+    role="button"
+    slot="header"
+    tabindex="0"
+  >
+    Header
+  </sbb-expansion-panel-header>
+  <sbb-expansion-panel-content
+    aria-hidden="true"
+    aria-labelledby="sbb-expansion-panel-header-3"
+    data-size="s"
+    id="sbb-expansion-panel-content-3"
+    role="region"
+    slot="content"
+  >
+    Content
+  </sbb-expansion-panel-content>
+</sbb-expansion-panel>
+`;
+/* end snapshot sbb-expansion-panel renders size s Dom */
+
+snapshots["sbb-expansion-panel renders size s ShadowDom"] = 
+`<div class="sbb-expansion-panel">
+  <div class="sbb-expansion-panel__header">
+    <slot name="header">
+    </slot>
+  </div>
+  <div class="sbb-expansion-panel__content-wrapper">
+    <span class="sbb-expansion-panel__content">
+      <slot name="content">
+      </slot>
+    </span>
+  </div>
+</div>
+`;
+/* end snapshot sbb-expansion-panel renders size s ShadowDom */
+
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts
@@ -39,11 +39,13 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
     expect(header).to.have.attribute('id', 'sbb-expansion-panel-header-2');
     expect(header).to.have.attribute('aria-controls', 'sbb-expansion-panel-content-2');
     expect(header).to.have.attribute('data-icon');
+    expect(header).to.have.attribute('data-size', 'l');
 
     const content = element.querySelector('sbb-expansion-panel-content');
     expect(content).to.have.attribute('id', 'sbb-expansion-panel-content-2');
     expect(content).to.have.attribute('aria-labelledby', `sbb-expansion-panel-header-2`);
     expect(content).to.have.attribute('data-icon-space');
+    expect(content).to.have.attribute('data-size', 'l');
   });
 
   it('has slotted elements with the correct properties when id are set', async () => {
@@ -130,4 +132,23 @@ describe(`sbb-expansion-panel with ${fixture.name}`, () => {
     expect(header.disabled).to.be.equal(false);
     expect(header).not.to.have.attribute('aria-disabled');
   });
+
+  it('size property is proxied to children', async () => {
+    const header: SbbExpansionPanelHeaderElement =
+      element.querySelector<SbbExpansionPanelHeaderElement>('sbb-expansion-panel-header')!;
+    const content: SbbExpansionPanelContentElement =
+      element.querySelector<SbbExpansionPanelContentElement>('sbb-expansion-panel-content')!;
+    expect(header).to.have.attribute('data-size', 'l');
+    expect(content).to.have.attribute('data-size', 'l');
+
+    element.size = 's';
+    await waitForLitRender(element);
+    expect(header).to.have.attribute('data-size', 's');
+    expect(content).to.have.attribute('data-size', 's');
+
+    element.size = 'l';
+    await waitForLitRender(element);
+    expect(header).to.have.attribute('data-size', 'l');
+    expect(content).to.have.attribute('data-size', 'l');
+  });
 });
diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts
@@ -31,6 +31,27 @@ describe(`sbb-expansion-panel`, () => {
     });
   });
 
+  describe('renders size s', () => {
+    let element: SbbExpansionPanelElement;
+
+    beforeEach(async () => {
+      element = await fixture(html`
+        <sbb-expansion-panel size="s">
+          <sbb-expansion-panel-header>Header</sbb-expansion-panel-header>
+          <sbb-expansion-panel-content>Content</sbb-expansion-panel-content>
+        </sbb-expansion-panel>
+      `);
+    });
+
+    it('Dom', async () => {
+      await expect(element).dom.to.be.equalSnapshot();
+    });
+
+    it('ShadowDom', async () => {
+      await expect(element).shadowDom.to.be.equalSnapshot();
+    });
+  });
+
   describe('renders with level set', () => {
     let element: SbbExpansionPanelElement;