srcdev-nuxt-components 9.6.6 → 9.6.8

package/app/components/05.forms/input-checkbox-radio/stories/InputCheckboxRadio.stories.ts

@@ -1,9 +1,9 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref } from "vue";
-import StorybookComponent from "../InputCheckboxRadio.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputCheckboxRadio from "../InputCheckboxRadio.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
-interface InputCheckboxRadioStoryArgs {
+interface StoryArgs {
   type: "checkbox" | "radio";
   id: string;
   name: string;
@@ -15,9 +15,20 @@ interface InputCheckboxRadioStoryArgs {
   inputVariant: InputUiVariant;
 }
 
-export default {
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const parentNote = `
+  <p style="${storyNoteStyle}">
+    This is the bare control with no label. With a text label it's the
+    <a href="/?path=/story/components-forms-input-checkbox-radio-inputcheckboxradiofield--checkbox" target="_top">InputCheckboxRadioField</a>;
+    drawn as a button or pill it's the
+    <a href="/?path=/story/components-forms-input-checkbox-radio-inputcheckboxradiobutton--option-group" target="_top">InputCheckboxRadioButton</a>.
+  </p>
+`;
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadio",
-  component: StorybookComponent,
+  component: InputCheckboxRadio,
   argTypes: {
     type: {
       control: { type: "select" },
@@ -62,29 +73,45 @@ export default {
     isButton: false,
     inputVariant: "normal",
   },
-} as Meta<InputCheckboxRadioStoryArgs>;
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The checkbox or radio control every form checkbox and radio is built from: a styled square or circle stacked over a hidden native input. It has no label, so pair its `id` with your own `label[for]`, or use `InputCheckboxRadioField` / `InputCheckboxRadioButton`. Slot: `checkedIcon`. No stress story here: the control renders no text, and long-label behaviour is covered by the Field and Button stress stories.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
 
-const Template: StoryFn<InputCheckboxRadioStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+const render = (args: StoryArgs) => ({
+  components: { InputCheckboxRadio },
   setup() {
     const modelValue = ref(false);
     return { args, modelValue };
   },
   template: `
     <div style="margin: 36px;">
-      <StorybookComponent v-bind="args" v-model="modelValue" />
+      ${parentNote}
+      <InputCheckboxRadio v-bind="args" v-model="modelValue" />
     </div>
   `,
 });
 
-export const Checkbox = Template.bind({});
-Checkbox.args = { type: "checkbox" };
+export const Checkbox: Story = { args: { type: "checkbox" }, render };
 
-export const Radio = Template.bind({});
-Radio.args = { type: "radio" };
+export const Radio: Story = { args: { type: "radio" }, render };
 
-export const CheckboxAsDisc = Template.bind({});
-CheckboxAsDisc.args = { type: "checkbox", isButton: true, displayAsDisc: true };
+export const CheckboxAsDisc: Story = {
+  args: { type: "checkbox", isButton: true, displayAsDisc: true },
+  render,
+  parameters: { docs: { description: { story: "`displayAsDisc` rounds a checkbox, but only in button mode (`isButton`)." } } },
+};
 
-export const ErrorState = Template.bind({});
-ErrorState.args = { type: "checkbox", fieldHasError: true, theme: "error" };
+export const ErrorState: Story = {
+  args: { type: "checkbox", fieldHasError: true, theme: "error" },
+  render,
+  parameters: { docs: { description: { story: "`fieldHasError` sets `aria-invalid` on the input and `data-invalid` on the root." } } },
+};

package/app/components/05.forms/input-checkbox-radio/stories/InputCheckboxRadioButton.stories.ts

@@ -1,26 +1,53 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { defineComponent, ref } from "vue";
-import StorybookComponent from "../InputCheckboxRadioButton.vue";
+import type { PropType } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputCheckboxRadioButton from "../InputCheckboxRadioButton.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { OptionsLayout } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
 
-interface InputCheckboxRadioButtonStoryArgs {
+interface StoryArgs {
   type: "checkbox" | "radio";
   label: string;
   isPill: boolean;
   fieldHasError: boolean;
   displayAsDisc: boolean;
   direction: "row" | "row-reverse";
+  optionsLayout: OptionsLayout;
+  options: string[];
 }
 
-export default {
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const parentNote = `
+  <p style="${storyNoteStyle}">
+    The group components draw each option with this when <code>isButton</code> is on, and add the
+    fieldset, legend, description and error: see the
+    <a href="/?path=/story/components-forms-input-checkbox-multiplecheckboxes--buttons" target="_top">MultipleCheckboxes</a>
+    and
+    <a href="/?path=/story/components-forms-input-radio-multipleradiobuttons--buttons" target="_top">MultipleRadiobuttons</a>
+    Buttons stories.
+  </p>
+`;
+
+const serviceOptions = ["Balayage", "Highlights", "Half Head Highlights", "Full Colour", "Lowlights", "Toner & Gloss"];
+
+const layoutStyles: Record<OptionsLayout, string> = {
+  "equal-widths": "display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.8rem;",
+  inline: "display: flex; flex-wrap: wrap; gap: 0.8rem;",
+  block: "display: flex; flex-direction: column; gap: 0.8rem;",
+};
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioButton",
-  component: StorybookComponent,
+  component: InputCheckboxRadioButton,
   argTypes: {
     type: {
       control: { type: "select" },
       options: ["checkbox", "radio"],
       table: { category: "Basic" },
     },
-    label: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", description: "Single-option stories only", table: { category: "Basic" } },
     isPill: { control: "boolean", table: { category: "Styling" } },
     fieldHasError: { control: "boolean", table: { category: "States" } },
     displayAsDisc: { control: "boolean", table: { category: "Styling" } },
@@ -30,6 +57,18 @@ export default {
       description: "row-reverse puts the control on the right",
       table: { category: "Styling" },
     },
+    optionsLayout: {
+      control: { type: "select" },
+      options: ["equal-widths", "inline", "block"],
+      description:
+        "Rendered as `data-options-layout`. In the group stories it also lays out the story's wrapper the way `MultipleCheckboxes` does",
+      table: { category: "Styling" },
+    },
+    options: {
+      control: "object",
+      description: "Story-only: the option labels in the group stories",
+      table: { category: "Story data" },
+    },
   },
   args: {
     type: "checkbox",
@@ -38,93 +77,121 @@ export default {
     fieldHasError: false,
     displayAsDisc: false,
     direction: "row",
+    optionsLayout: "equal-widths",
+    options: serviceOptions,
   },
-} as Meta<InputCheckboxRadioButtonStoryArgs>;
-
-const Template: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(false);
-    return { args, modelValue };
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "One checkbox or radio option drawn as a button or pill: a `<label>` holding the control, a centred label and a decorator icon. `id` is optional and generated with `useId()` when omitted. Props: `type`, `name`, `label`, `trueValue`, `multipleOptions`, `isPill`, `direction`, `displayAsDisc`, `optionsLayout`, `itemIcon`. Slots: `labelContent`, `checkedIcon`, `itemIcon`. Usually used through the `isButton` mode of `MultipleCheckboxes` and `MultipleRadiobuttons`: see the [MultipleCheckboxes Buttons](?path=/story/components-forms-input-checkbox-multiplecheckboxes--buttons) story.",
+      },
+    },
   },
-  template: `
-    <div style="margin: 36px; max-width: 260px;">
-      <StorybookComponent
-        id="single-option"
-        name="single"
-        :type="args.type"
-        :label="args.label"
-        :is-pill="args.isPill"
-        :field-has-error="args.fieldHasError"
-        :display-as-disc="args.displayAsDisc"
-        :direction="args.direction"
-        v-model="modelValue"
-      />
-    </div>
-  `,
-});
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
 
-export const Default = Template.bind({});
+export const Default: Story = {
+  render: (args: StoryArgs) => ({
+    components: { InputCheckboxRadioButton },
+    setup() {
+      const modelValue = ref(false);
+      return { args, modelValue };
+    },
+    template: `
+      ${parentNote}
+      <div style="max-width: 260px;">
+        <InputCheckboxRadioButton
+          name="single"
+          :type="args.type"
+          :label="args.label"
+          :is-pill="args.isPill"
+          :field-has-error="args.fieldHasError"
+          :display-as-disc="args.displayAsDisc"
+          :direction="args.direction"
+          :options-layout="args.optionsLayout"
+          v-model="modelValue"
+        />
+      </div>
+    `,
+  }),
+  argTypes: { options: { table: { disable: true } } },
+};
 
-// "Services of interest" pattern — the actual multi-option checkbox-pill layout this component
-// is normally used in (as opposed to Default's single isolated control).
 // Selection state lives in a child keyed on type, so switching checkbox/radio remounts it with
 // the right empty value (an array for checkboxes, a string for radios). A watch on args.type
 // isn't reliable here: the template sees the new arg, but the watcher doesn't fire.
-const ServiceOptionGroup = defineComponent({
-  components: { StorybookComponent },
+const OptionGroupDemo = defineComponent({
+  components: { InputCheckboxRadioButton },
   props: {
-    type: { type: String as () => "checkbox" | "radio", required: true },
+    type: { type: String as PropType<"checkbox" | "radio">, required: true },
+    options: { type: Array as PropType<string[]>, required: true },
+    optionsLayout: { type: String as PropType<OptionsLayout>, required: true },
     isPill: Boolean,
     fieldHasError: Boolean,
     displayAsDisc: Boolean,
-    direction: { type: String as () => "row" | "row-reverse", default: "row" },
+    direction: { type: String as PropType<"row" | "row-reverse">, default: "row" },
   },
   setup(props) {
-    const services = [
-      "Balayage",
-      "Highlights",
-      "Half Head Highlights",
-      "Full Colour",
-      "Lowlights",
-      "Toner & Gloss",
-    ];
     const selected = ref<string[] | string>(props.type === "checkbox" ? [] : "");
-    return { services, selected };
+    return { selected, layoutStyles };
   },
   template: `
     <div>
-      <div style="margin: 36px; max-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;">
-        <StorybookComponent
-          v-for="service in services"
-          :key="service"
-          :id="'service-' + service"
+      <div :style="layoutStyles[optionsLayout]">
+        <InputCheckboxRadioButton
+          v-for="(option, index) in options"
+          :key="index"
           name="services"
           :type="type"
-          :label="service"
-          :true-value="service"
+          :label="option"
+          :true-value="option"
           :multiple-options="type === 'checkbox'"
           :is-pill="isPill"
           :field-has-error="fieldHasError"
           :display-as-disc="displayAsDisc"
           :direction="direction"
+          :options-layout="optionsLayout"
           v-model="selected"
         />
       </div>
-      <p style="margin: 0 36px; font-family: monospace;">selected: {{ JSON.stringify(selected) }}</p>
+      <p style="margin-block-start: 1.6rem; font-family: monospace; overflow-wrap: anywhere;">selected: {{ JSON.stringify(selected) }}</p>
     </div>
   `,
 });
 
-const OptionGroupTemplate: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) => ({
-  components: { ServiceOptionGroup },
+const renderGroup = (args: StoryArgs) => ({
+  components: { OptionGroupDemo },
   setup() {
     return { args };
   },
   template: `
-    <ServiceOptionGroup
+    ${parentNote}
+    <OptionGroupDemo
       :key="args.type"
       :type="args.type"
+      :options="args.options"
+      :options-layout="args.optionsLayout"
       :is-pill="args.isPill"
       :field-has-error="args.fieldHasError"
       :display-as-disc="args.displayAsDisc"
@@ -133,5 +200,44 @@ const OptionGroupTemplate: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) =
   `,
 });
 
-export const OptionGroup = OptionGroupTemplate.bind({});
-OptionGroup.argTypes = { label: { table: { disable: true } } };
+export const OptionGroup: Story = {
+  render: renderGroup,
+  argTypes: { label: { table: { disable: true } } },
+  parameters: {
+    docs: {
+      description: {
+        story: "A group of options sharing one `name` and model, the way the group components render them. Switch `type` and `optionsLayout`.",
+      },
+    },
+  },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    optionsLayout: "inline",
+    isPill: true,
+    options: [
+      "A",
+      "",
+      "Haarverlängerungsberatungstermindienstleistungspaket",
+      "https://example.com/a/very/long/unbroken/url/that/should/wrap/somewhere",
+      "<b>Not bold</b> & <i>not italic</i>",
+      "💇‍♀️ Colour + cut 🌈",
+      "قص الشعر وتصفيفه",
+      "A conditioning treatment with a scalp massage, a hot towel and a blow-dry finish",
+      ...Array.from({ length: 16 }, (_, index) => `Option ${index + 9}`),
+    ],
+  },
+  render: renderGroup,
+  argTypes: { label: { table: { disable: true } } },
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "24 pill options with an empty label, a single character, a long unbroken German word and URL, HTML-like text, emoji, right-to-left text and a long sentence, laid out inline. Check at every canvas width: no option pokes out of the dashed outline (long labels wrap inside their pill instead), the control and decorator icon keep their size, short labels stay on one line, and markup renders as text. Switch `optionsLayout`, `direction` and `type`.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-checkbox-radio/stories/InputCheckboxRadioField.stories.ts

@@ -1,9 +1,11 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { computed, ref } from "vue";
-import StorybookComponent from "../InputCheckboxRadioField.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputCheckboxRadioField from "../InputCheckboxRadioField.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
 
-interface InputCheckboxRadioFieldStoryArgs {
+interface StoryArgs {
   type: "checkbox" | "radio";
   name: string;
   label: string;
@@ -15,9 +17,22 @@ interface InputCheckboxRadioFieldStoryArgs {
   useLabelSlot: boolean;
 }
 
-export default {
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const parentNote = `
+  <p style="${storyNoteStyle}">
+    Wrapped in a fieldset with a legend, description and error message, this is the
+    <a href="/?path=/story/components-forms-input-checkbox-singlecheckbox--default" target="_top">SingleCheckbox</a>;
+    a data-driven group of them is
+    <a href="/?path=/story/components-forms-input-checkbox-multiplecheckboxes--default" target="_top">MultipleCheckboxes</a>
+    or
+    <a href="/?path=/story/components-forms-input-radio-multipleradiobuttons--default" target="_top">MultipleRadiobuttons</a>.
+  </p>
+`;
+
+const meta: Meta<StoryArgs> = {
   title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioField",
-  component: StorybookComponent,
+  component: InputCheckboxRadioField,
   argTypes: {
     type: { control: { type: "select" }, options: ["checkbox", "radio"], table: { category: "Basic" } },
     name: { control: "text", table: { category: "Basic" } },
@@ -25,7 +40,7 @@ export default {
     required: { control: "boolean", table: { category: "Basic" } },
     useLabelSlot: {
       control: "boolean",
-      description: "Use the labelContent slot (rich label with a link) instead of the label prop",
+      description: "Story-only: use the labelContent slot (rich label with a link) instead of the label prop",
       table: { category: "Slots" },
     },
     fieldHasError: { control: "boolean", description: "Rendered as data-invalid", table: { category: "States" } },
@@ -41,8 +56,9 @@ export default {
     },
     labelColor: {
       control: "color",
-      description: "Sets --input-checkbox-label-color on the story wrapper",
-      table: { category: "Tokens" },
+      description:
+        "**Story control, not a prop.** Sets `--input-checkbox-label-color` on the story wrapper. In your CSS: `.my-form { --input-checkbox-label-color: #333; }`",
+      table: { category: "CSS tokens (story only, set in your CSS)" },
     },
   },
   args: {
@@ -56,10 +72,39 @@ export default {
     labelColor: "",
     useLabelSlot: false,
   },
-} as Meta<InputCheckboxRadioFieldStoryArgs>;
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A `<label>` holding the checkbox or radio control and its text, so the whole row is clickable. It generates its own id with `useId()`. Props: `type`, `name`, `label`, `trueValue`/`falseValue`, `multipleOptions` (array model for a checkbox group), `required`, `fieldHasError`. Slots: `labelContent` (rich label), `checkedIcon`. Usually used through `SingleCheckbox`, `MultipleCheckboxes` or `MultipleRadiobuttons`: see the [SingleCheckbox](?path=/story/components-forms-input-checkbox-singlecheckbox--default) story.",
+      },
+    },
+  },
+};
 
-const Template: StoryFn<InputCheckboxRadioFieldStoryArgs> = (args) => ({
-  components: { StorybookComponent },
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputCheckboxRadioField },
   setup() {
     const modelValue = ref<boolean | string>(false);
     const componentArgs = computed(() => {
@@ -70,24 +115,52 @@ const Template: StoryFn<InputCheckboxRadioFieldStoryArgs> = (args) => ({
     return { args, componentArgs, tokenStyles, modelValue };
   },
   template: `
-    <div style="margin: 36px; max-width: 480px;" :style="tokenStyles">
-      <StorybookComponent v-bind="componentArgs" v-model="modelValue">
+    <div :style="tokenStyles">
+      ${parentNote}
+      <InputCheckboxRadioField v-bind="componentArgs" v-model="modelValue">
         <template v-if="args.useLabelSlot" #labelContent>
           I agree to the&nbsp;<a href="#terms">terms and conditions</a>
         </template>
-      </StorybookComponent>
+      </InputCheckboxRadioField>
       <p style="margin-top: 2rem; font-family: monospace;">modelValue: {{ JSON.stringify(modelValue) }}</p>
     </div>
   `,
 });
 
-export const Checkbox = Template.bind({});
+export const Checkbox: Story = { render };
+
+export const RichLabel: Story = {
+  args: { useLabelSlot: true },
+  render,
+  parameters: { docs: { description: { story: "The `labelContent` slot replaces the `label` prop, here with a link." } } },
+};
 
-export const RichLabel = Template.bind({});
-RichLabel.args = { useLabelSlot: true };
+export const Underlined: Story = {
+  args: { inputVariant: "underlined" },
+  render,
+  parameters: { docs: { description: { story: "`inputVariant=\"underlined\"` squares off the checkbox." } } },
+};
 
-export const Underlined = Template.bind({});
-Underlined.args = { inputVariant: "underlined" };
+export const ErrorState: Story = {
+  args: { fieldHasError: true, theme: "error" },
+  render,
+  parameters: { docs: { description: { story: "`fieldHasError` sets `data-invalid` on the label and `aria-invalid` on the input." } } },
+};
 
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true, theme: "error" };
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    label:
+      "💇‍♀️ Datenschutzgrundverordnungseinwilligungsbestätigungserklärung https://example.com/privacy/policy/with/a/very/long/unbroken/path <b>not bold</b> قص الشعر",
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "A label with emoji at the start, a long unbroken German word and URL, HTML-like text and right-to-left text. Check at every canvas width: the label wraps inside the dashed outline, the control keeps its size instead of being squashed, markup renders as text, and clicking anywhere on the label toggles the control. Also try an empty label and a single character, and switch `type` to `radio`.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-checkbox-radio/tests/InputCheckboxRadio.spec.ts

@@ -1,4 +1,5 @@
-import { describe, it, expect } from "vitest";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import InputCheckboxRadio from "../InputCheckboxRadio.vue";
 
@@ -11,12 +12,22 @@ const defaultProps = {
   modelValue: "unchecked",
 };
 
-const createWrapper = (props = {}, slots = {}) =>
-  mountSuspended(InputCheckboxRadio, {
+const mounted: VueWrapper[] = [];
+
+const createWrapper = async (props = {}, slots = {}) => {
+  const wrapper = await mountSuspended(InputCheckboxRadio, {
     attachTo: document.body,
     props: { ...defaultProps, ...props },
     slots,
   });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
 
 const inputOf = (wrapper: Awaited<ReturnType<typeof createWrapper>>) => wrapper.find("input").element as HTMLInputElement;
 

package/app/components/05.forms/input-checkbox-radio/tests/InputCheckboxRadioButton.spec.ts

@@ -1,4 +1,6 @@
-import { describe, it, expect } from "vitest";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { defineComponent } from "vue";
+import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import InputCheckboxRadioButton from "../InputCheckboxRadioButton.vue";
 
@@ -12,12 +14,22 @@ const defaultProps = {
   multipleOptions: true,
 };
 
-const createWrapper = (props = {}, slots = {}) =>
-  mountSuspended(InputCheckboxRadioButton, {
+const mounted: VueWrapper[] = [];
+
+const createWrapper = async (props = {}, slots = {}) => {
+  const wrapper = await mountSuspended(InputCheckboxRadioButton, {
     attachTo: document.body,
     props: { ...defaultProps, ...props },
     slots,
   });
+  mounted.push(wrapper);
+  return wrapper;
+};
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+  vi.restoreAllMocks();
+});
 
 describe("InputCheckboxRadioButton", () => {
   it("renders a label linked to the inner control by id", async () => {
@@ -27,6 +39,29 @@ describe("InputCheckboxRadioButton", () => {
     expect(wrapper.find("input").attributes("id")).toBe("service-balayage");
   });
 
+  it("generates a space-free id linking label and control when no id is passed", async () => {
+    const wrapper = await createWrapper({ id: undefined });
+    const id = wrapper.find("input").attributes("id");
+
+    expect(id).toBeTruthy();
+    expect(id).not.toMatch(/\s/);
+    expect(wrapper.find("label.input-checkbox-radio-button").attributes("for")).toBe(id);
+  });
+
+  it("generates a different id for each instance", async () => {
+    const Host = defineComponent({
+      components: { InputCheckboxRadioButton },
+      setup: () => ({ props: { ...defaultProps, id: undefined } }),
+      template: `<div><InputCheckboxRadioButton v-bind="props" /><InputCheckboxRadioButton v-bind="props" /></div>`,
+    });
+    const host = await mountSuspended(Host);
+    mounted.push(host);
+    const ids = host.findAll("input").map((input) => input.attributes("id"));
+
+    expect(ids).toHaveLength(2);
+    expect(ids[0]).not.toBe(ids[1]);
+  });
+
   it("renders the label prop, or the labelContent slot in its place", async () => {
     const plain = await createWrapper();
     expect(plain.find(".input-checkbox-radio-button-label").text()).toBe("Balayage");