From 56d5ba4195643676f5900f50111e050dcb1a5da1 Mon Sep 17 00:00:00 2001
From: Tommmaso Menga <tommaso.menga-94@hotmail.it>
Date: Wed, 23 Oct 2024 10:03:03 +0200
Subject: [PATCH] test(sbb-radio-button): enhance ssr test

---
 .../form-associated-radio-button-mixin.ts     | 10 +++++++
 .../radio-button-panel.ssr.spec.ts            | 29 +++++++++++++++----
 .../radio-button/radio-button.ssr.spec.ts     | 29 +++++++++++++++----
 3 files changed, 58 insertions(+), 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
index d5b9588ff8..b75acfa8f8 100644
--- 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
index 3cb06155fa..edaf29b1ec 100644
--- 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
index 4ee75ed7fe..c0b9741454 100644
--- 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);
   });
 });