test(sbb-radio-button, sbb-radio-button-group, sbb-radio-button-panel…

…): implement visual spec (#2908)

src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts

@@ -0,0 +1,118 @@
+import { html, type TemplateResult } from 'lit';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffFocus,
+} from '../../core/testing/private.js';
+
+import '../../card/card-badge.js';
+import '../../form-error.js';
+import '../../icon.js';
+import '../../radio-button.js';
+
+const cases = {
+  disabled: [false, true],
+  orientation: ['vertical', 'horizontal'],
+  size: ['m', 's'],
+};
+
+const suffixAndSubtext = (): TemplateResult => html`
+  <span slot="subtext">Subtext</span>
+  <span slot="suffix" style="margin-inline-start: auto; display:flex; align-items:center;">
+    <sbb-icon name="diamond-small" style="margin-inline: var(--sbb-spacing-fixed-2x);"></sbb-icon>
+    <span class="sbb-text-m sbb-text--bold">CHF 8.00</span>
+  </span>
+  <sbb-card-badge>%</sbb-card-badge>
+`;
+
+const radioButtons = (): TemplateResult => html`
+  <sbb-radio-button value="Value one">Value one</sbb-radio-button>
+  <sbb-radio-button value="Value two">Value two</sbb-radio-button>
+  <sbb-radio-button value="Value three" disabled> Value three </sbb-radio-button>
+  <sbb-radio-button value="Value four">Value four</sbb-radio-button>
+`;
+
+const radioButtonPanels = (): TemplateResult => html`
+  <sbb-radio-button-panel value="Value one">Value 1 ${suffixAndSubtext()}</sbb-radio-button-panel>
+  <sbb-radio-button-panel value="Value two">Value 2 ${suffixAndSubtext()}</sbb-radio-button-panel>
+`;
+
+const variants: { name: string; template: TemplateResult }[] = [
+  { name: 'radio-button', template: radioButtons() },
+  { name: 'radio-button-panel', template: radioButtonPanels() },
+];
+
+describe(`sbb-radio-button-group`, () => {
+  describeViewports({ viewports: ['small', 'medium'] }, () => {
+    describeEach(cases, ({ orientation, size, disabled }) => {
+      for (const variant of variants) {
+        describe(variant.name, () => {
+          for (const state of [visualDiffDefault, visualDiffFocus]) {
+            if (!(disabled && state === visualDiffFocus)) {
+              it(
+                state.name,
+                state.with(async (setup) => {
+                  await setup.withFixture(html`
+                    <sbb-radio-button-group
+                      orientation=${orientation}
+                      size=${size}
+                      ?disabled=${disabled}
+                      value="Value one"
+                    >
+                      ${variant.template}
+                    </sbb-radio-button-group>
+                  `);
+                }),
+              );
+            }
+          }
+        });
+      }
+    });
+    for (const variant of variants) {
+      it(
+        `allow-empty-selection=true with ${variant.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`<sbb-radio-button-group allow-empty-selection>
+              ${variant.template}
+            </sbb-radio-button-group>`,
+          );
+        }),
+      );
+    }
+
+    for (const variant of variants) {
+      it(
+        `horizontal-from=medium with ${variant.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`<sbb-radio-button-group orientation="vertical" horizontal-from="medium">
+              ${variant.template}
+            </sbb-radio-button-group>`,
+          );
+        }),
+      );
+    }
+
+    for (const variant of variants) {
+      describe(variant.name, () => {
+        for (const orientation of ['vertical', 'horizontal']) {
+          it(
+            `error message orientation=${orientation}`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                html`<sbb-radio-button-group allow-empty-selection orientation=${orientation}>
+                  ${variant.template}
+                  <sbb-form-error slot="error">This is a required field.</sbb-form-error>
+                </sbb-radio-button-group>`,
+              );
+            }),
+          );
+        }
+      });
+    }
+  });
+});

src/elements/radio-button/radio-button-panel/radio-button-panel.visual.spec.ts

@@ -0,0 +1,61 @@
+import { html, type TemplateResult } from 'lit';
+
+import { describeEach, describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../../icon.js';
+import '../radio-button-panel.js';
+
+const cases = {
+  checked: [true, false],
+  disabled: [false, true],
+  size: ['m', 's'],
+};
+
+const suffixAndSubtext = (size: 's' | 'm' = 'm'): TemplateResult =>
+  html`<span slot="subtext">Subtext</span>
+    <span slot="suffix" style="margin-inline-start: auto; display:flex; align-items:center;">
+      <sbb-icon name="diamond-small" style="margin-inline: var(--sbb-spacing-fixed-2x);"></sbb-icon>
+      <span class="sbb-text-${size} sbb-text--bold"> CHF 40.00 </span>
+    </span>`;
+
+describe(`sbb-radio-button-panel`, () => {
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    describeEach(cases, ({ checked, disabled, size }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-radio-button-panel ?checked=${checked} ?disabled=${disabled} size=${size}>
+              Value ${suffixAndSubtext(size as 's' | 'm')}
+            </sbb-radio-button-panel>
+          `);
+        }),
+      );
+    });
+
+    it(
+      'color=milk',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`
+          <sbb-radio-button-panel checked color="milk">
+            Value ${suffixAndSubtext()}
+          </sbb-radio-button-panel>
+        `);
+      }),
+    );
+
+    for (const color of ['white', 'milk']) {
+      it(
+        `color=${color} borderless=true`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-radio-button-panel borderless color=${color}>
+              Value ${suffixAndSubtext()}
+            </sbb-radio-button-panel>
+          `);
+        }),
+      );
+    }
+    // Focus state is tested in the radio-button-group
+  });
+});

src/elements/radio-button/radio-button/radio-button.visual.spec.ts

@@ -0,0 +1,42 @@
+import { html } from 'lit';
+
+import { describeEach, describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../radio-button.js';
+
+const cases = {
+  size: ['m', 's'],
+  checked: [true, false],
+  disabled: [false, true],
+};
+
+const longLabel =
+  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";
+
+describe(`sbb-radio-button`, () => {
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    describeEach(cases, ({ size, checked, disabled }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-radio-button ?checked=${checked} ?disabled=${disabled} size=${size}>
+              Value
+            </sbb-radio-button>
+          `);
+        }),
+      );
+    });
+
+    it(
+      'long label',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`
+          <sbb-radio-button checked> ${longLabel} </sbb-radio-button>
+        `);
+      }),
+    );
+
+    // Focus state is tested in the radio-button-group
+  });
+});