test(sbb-radio-button): enhance ssr test

sbb-design-systems · Oct 23, 2024 · 56d5ba4 · 56d5ba4
1 parent 5331b3d
commit 56d5ba4
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 10 deletions.
diff --git a/src/elements/core/mixins/form-associated-radio-button-mixin.ts b/src/elements/core/mixins/form-associated-radio-button-mixin.ts
@@ -99,6 +99,7 @@ export const SbbFormAssociatedRadioButtonMixin = <T extends Constructor<LitEleme
     public accessor checked: boolean = false;
 
     protected abort = new SbbConnectedAbortController(this);
+    private _didLoad: boolean = false;
 
     protected constructor() {
       super();
@@ -171,6 +172,12 @@ export const SbbFormAssociatedRadioButtonMixin = <T extends Constructor<LitEleme
       }
     }
 
+    protected override firstUpdated(changedProperties: PropertyValues<this>): void {
+      super.firstUpdated(changedProperties);
+      this._didLoad = true;
+      this.updateFocusableRadios();
+    }
+
     /**
      * Called on `value` change
      * If I'm checked, update the value. Otherwise, do nothing.
@@ -195,6 +202,9 @@ export const SbbFormAssociatedRadioButtonMixin = <T extends Constructor<LitEleme
      * - the first non-disabled radio in DOM order;
      */
     protected updateFocusableRadios(): void {
+      if (!this._didLoad) {
+        return;
+      }
       const radios = this._orderedGrouperRadios();
       const checkedIndex = radios.findIndex((r) => r.checked && !r.disabled && !r.formDisabled);
       const focusableIndex =

diff --git a/src/elements/radio-button/radio-button-panel/radio-button-panel.ssr.spec.ts b/src/elements/radio-button/radio-button-panel/radio-button-panel.ssr.spec.ts
@@ -6,18 +6,37 @@ import { ssrHydratedFixture } from '../../core/testing/private.js';
 import { SbbRadioButtonPanelElement } from './radio-button-panel.js';
 
 describe(`sbb-radio-button-panel ssr`, () => {
-  let root: SbbRadioButtonPanelElement;
-
-  beforeEach(async () => {
-    root = await ssrHydratedFixture(
+  it('renders', async () => {
+    const root = await ssrHydratedFixture(
       html`<sbb-radio-button-panel value="Value">Value label</sbb-radio-button-panel>`,
       {
         modules: ['./radio-button-panel.js'],
       },
     );
+    assert.instanceOf(root, SbbRadioButtonPanelElement);
   });
 
-  it('renders', () => {
+  it('renders checked', async () => {
+    const root = await ssrHydratedFixture(
+      html`<sbb-radio-button-panel value="Value" checked>Value label</sbb-radio-button-panel>`,
+      {
+        modules: ['./radio-button-panel.js'],
+      },
+    );
+    assert.instanceOf(root, SbbRadioButtonPanelElement);
+  });
+
+  it('renders standalone group', async () => {
+    const root = await ssrHydratedFixture(
+      html`
+        <sbb-radio-button-panel name="group" value="value 1">Value 1</sbb-radio-button-panel>
+        <sbb-radio-button-panel name="group" value="value 2">Value 2</sbb-radio-button-panel>
+        <sbb-radio-button-panel name="group" value="value 3">Value 3</sbb-radio-button-panel>
+      `,
+      {
+        modules: ['./radio-button-panel.js'],
+      },
+    );
     assert.instanceOf(root, SbbRadioButtonPanelElement);
   });
 });
diff --git a/src/elements/radio-button/radio-button/radio-button.ssr.spec.ts b/src/elements/radio-button/radio-button/radio-button.ssr.spec.ts
@@ -6,18 +6,37 @@ import { ssrHydratedFixture } from '../../core/testing/private.js';
 import { SbbRadioButtonElement } from './radio-button.js';
 
 describe(`sbb-radio-button ssr`, () => {
-  let root: SbbRadioButtonElement;
-
-  beforeEach(async () => {
-    root = await ssrHydratedFixture(
+  it('renders', async () => {
+    const root = await ssrHydratedFixture(
       html`<sbb-radio-button value="Value">Value label</sbb-radio-button>`,
       {
         modules: ['./radio-button.js'],
       },
     );
+    assert.instanceOf(root, SbbRadioButtonElement);
   });
 
-  it('renders', () => {
+  it('renders checked', async () => {
+    const root = await ssrHydratedFixture(
+      html`<sbb-radio-button value="Value" checked>Value label</sbb-radio-button>`,
+      {
+        modules: ['./radio-button.js'],
+      },
+    );
+    assert.instanceOf(root, SbbRadioButtonElement);
+  });
+
+  it('renders standalone group', async () => {
+    const root = await ssrHydratedFixture(
+      html`
+        <sbb-radio-button name="group" value="value 1">Value 1</sbb-radio-button>
+        <sbb-radio-button name="group" value="value 2">Value 2</sbb-radio-button>
+        <sbb-radio-button name="group" value="value 3">Value 3</sbb-radio-button>
+      `,
+      {
+        modules: ['./radio-button.js'],
+      },
+    );
     assert.instanceOf(root, SbbRadioButtonElement);
   });
 });