srcdev-nuxt-components 9.6.7 → 9.6.9

package/app/components/05.forms/input-select/stories/InputSelect.stories.ts

@@ -0,0 +1,184 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputSelect from "../InputSelect.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme, IFormMultipleOptions, IOptionsConfig, InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  modelValue: string | number;
+  id: string;
+  name: string;
+  placeholder: string;
+  title: string;
+  required: boolean;
+  fieldHasError: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  options: IOptionsConfig[];
+}
+
+const colourOptions: IOptionsConfig[] = [
+  { id: "1", name: "red", value: "red", label: "Red" },
+  { id: "2", name: "blue", value: "blue", label: "Blue" },
+  { id: "3", name: "green", value: "green", label: "Green" },
+];
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Select/InputSelect",
+  component: InputSelect,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    title: { control: "text", description: "Native tooltip; pass translated copy", table: { category: "Accessibility" } },
+    required: { control: "boolean", table: { category: "Basic" } },
+    fieldHasError: { control: "boolean", table: { category: "States" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    options: {
+      control: "object",
+      description: "Story-only: the `data` array of `v-model:field-data`",
+      table: { category: "Model" },
+    },
+  },
+  args: {
+    modelValue: "",
+    id: "select-default",
+    name: "selectDefault",
+    placeholder: "Choose a colour",
+    title: "Please select an option",
+    required: false,
+    fieldHasError: false,
+    theme: "default",
+    inputVariant: "normal",
+    options: colourOptions,
+  },
+  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:
+          "Bare native `<select>` for the `05.forms` select family: no label, description or error (use `InputSelectField` for those). Options come from `v-model:field-data` (`{ data: IOptionsConfig[] }`), each with an optional decorative `icon`. `placeholder` adds a disabled first option. Where the browser supports `appearance: base-select` the open picker is styled too; elsewhere the native dropdown shows. State is exposed as `data-input-variant`, `data-invalid`, `data-dirty` and `data-active` on `.input-select-wrapper`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputSelect },
+  setup() {
+    const fieldData = computed<IFormMultipleOptions>(() => ({
+      data: args.options,
+      total: args.options.length,
+      skip: 0,
+      limit: args.options.length,
+    }));
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, options: _options, ...rest } = args;
+      return rest;
+    });
+    return { args, componentArgs, fieldData };
+  },
+  template: `
+    <InputSelect v-model="args.modelValue" :field-data="fieldData" v-bind="componentArgs" />
+    <p style="margin-block-start: 1.6rem; font-family: monospace;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithIcons: Story = {
+  args: {
+    options: [
+      { id: "1", name: "email", value: "email", label: "Email", icon: "mdi:email-outline" },
+      { id: "2", name: "phone", value: "phone", label: "Phone", icon: "mdi:phone-outline" },
+      { id: "3", name: "post", value: "post", label: "Post", icon: "mdi:mailbox-outline" },
+    ],
+    placeholder: "Contact preference",
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Options with an `icon`. The icon only shows in browsers that support `appearance: base-select`; the native dropdown shows the label alone.",
+      },
+    },
+  },
+};
+
+export const ErrorState: Story = { args: { fieldHasError: true, theme: "error" }, render };
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    modelValue: "0",
+    placeholder: "Bitte wählen Sie die gewünschte Zustellungsart für Ihre Bestellung aus der folgenden Liste aus",
+    title: "Bitteeineoptionauswählenundanschließendbestätigen",
+    fieldHasError: true,
+    theme: "error",
+    options: [
+      { id: "0", name: "zero", value: "0", label: "0 (falsy-looking value)" },
+      {
+        id: "1",
+        name: "long",
+        value: "long",
+        label: "Expresszustellungmitsendungsverfolgungundversicherungbiszueinemwarenwertvonzehntausendeuro",
+      },
+      { id: "2", name: "url", value: "url", label: "https://example.com/a/very/long/unbroken/url/that/never/wraps/anywhere" },
+      { id: "3", name: "emoji", value: "emoji", label: "🚚 Delivery 📦", icon: "mdi:truck-outline" },
+      { id: "4", name: "html", value: "html", label: "<b>not bold</b> <script>alert(1)</script>" },
+      { id: "5", name: "rtl", value: "rtl", label: "التوصيل السريع إلى باب المنزل" },
+      { id: "6", name: "one", value: "x", label: "x" },
+      { id: "7", name: "empty", value: "empty", label: "" },
+      ...Array.from({ length: 30 }, (_, index) => ({
+        id: `n${index}`,
+        name: `n${index}`,
+        value: `n${index}`,
+        label: `Option ${index + 1}`,
+      })),
+    ],
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "520px" },
+      description: {
+        story:
+          "38 options: a `0` value (selected on load, not the placeholder), long unbroken German and URL labels, emoji, HTML-like text (must render as text), right-to-left text, a single character and an empty label, plus a very long placeholder. Check at every canvas width: the closed select stays inside the dashed outline, and in a `base-select` browser the open picker's long labels wrap instead of running off screen. The empty label renders as a blank row; that's the data, not a bug.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-select/stories/InputSelectField.stories.ts

@@ -0,0 +1,187 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputSelectField from "../InputSelectField.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme, InputUiVariant, IFormMultipleOptions, IOptionsConfig } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  modelValue: string | number;
+  name: string;
+  label: string;
+  placeholder: string;
+  title: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  descriptionText: string;
+  options: IOptionsConfig[];
+}
+
+const colourOptions: IOptionsConfig[] = [
+  { id: "1", name: "red", value: "red", label: "Red" },
+  { id: "2", name: "blue", value: "blue", label: "Blue" },
+  { id: "3", name: "green", value: "green", label: "Green" },
+];
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Select/InputSelectField",
+  component: InputSelectField,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", table: { category: "Basic" } },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    title: { control: "text", description: "Native tooltip; pass translated copy", table: { category: "Accessibility" } },
+    errorMessage: { control: "text", table: { category: "Validation" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    styleClassPassthrough: { control: "object", table: { category: "Styling" } },
+    descriptionText: {
+      control: "text",
+      description: "Story-only: fills the descriptionText slot",
+      table: { category: "Slots" },
+    },
+    options: {
+      control: "object",
+      description: "Story-only: the `data` array of `v-model:field-data`",
+      table: { category: "Model" },
+    },
+  },
+  args: {
+    modelValue: "",
+    name: "colour",
+    label: "Favourite colour",
+    placeholder: "Choose a colour",
+    title: "Please select an option",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    descriptionText: "",
+    options: colourOptions,
+  },
+  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:
+          "Labelled select field: `InputLabel`, an optional description (`descriptionText`/`descriptionHtml` slots, moved after the control for the `outlined` variant), `InputSelect` and an error strip linked through `aria-describedby`. `field-has-error` switches the control to the `error` theme. `style-class-passthrough` lands on the `.input-select-field` root only.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputSelectField },
+  setup() {
+    const fieldData = computed<IFormMultipleOptions>(() => ({
+      data: args.options,
+      total: args.options.length,
+      skip: 0,
+      limit: args.options.length,
+    }));
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, descriptionText: _descriptionText, options: _options, ...rest } = args;
+      return rest;
+    });
+    return { args, componentArgs, fieldData };
+  },
+  template: `
+    <InputSelectField v-model="args.modelValue" :field-data="fieldData" v-bind="componentArgs">
+      <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+    </InputSelectField>
+    <p style="margin-block-start: 1.6rem; font-family: monospace;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithError: Story = {
+  args: { fieldHasError: true, errorMessage: "Please choose a colour" },
+  render,
+};
+
+export const Required: Story = { args: { required: true }, render };
+
+export const WithDescription: Story = { args: { descriptionText: "Pick the colour you like best" }, render };
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const Outlined: Story = {
+  args: { inputVariant: "outlined", descriptionText: "Pick the colour you like best" },
+  render,
+  parameters: { docs: { description: { story: "The `outlined` variant renders the description after the control and error." } } },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    modelValue: "long",
+    label:
+      "🎨 Bevorzugtefarbefürdiegesamtegestaltungderbenutzeroberfläche https://example.com/a/very/long/unbroken/url <b>not bold</b> اللون",
+    descriptionText: "يرجى اختيار لون Wählen Sie bitte die Farbe, die Ihnen für die Oberfläche am besten gefällt.",
+    placeholder: "Bitte wählen Sie eine Farbe aus der folgenden sehr langen Liste aus",
+    errorMessage: "DieausgewähltefarbeistleidernichtverfügbarbitteversuchenSieeserneut",
+    fieldHasError: true,
+    required: true,
+    options: [
+      { id: "0", name: "zero", value: "0", label: "0" },
+      { id: "1", name: "long", value: "long", label: "Dunkelblaugrüngrauschimmerndemitternachtsfarbemitmetallischemglanz" },
+      { id: "2", name: "html", value: "html", label: "<i>italic?</i>" },
+      { id: "3", name: "rtl", value: "rtl", label: "أزرق" },
+      ...Array.from({ length: 20 }, (_, index) => ({
+        id: `n${index}`,
+        name: `n${index}`,
+        value: `n${index}`,
+        label: `Colour ${index + 1}`,
+      })),
+    ],
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "520px" },
+      description: {
+        story:
+          "Long unbroken German, URL, emoji, HTML-like and right-to-left copy in the label, description, placeholder, error and options, with a long unbroken label selected. Check at every canvas width: the label, description and error wrap inside the dashed outline, the select never pushes past it, and markup renders as text.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-select/tests/{InputSelectCore.spec.ts → InputSelect.spec.ts}

@@ -1,7 +1,8 @@
 // https://nuxt.com/docs/getting-started/testing#unit-testing
+import { nextTick } from "vue";
 import type { VueWrapper } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import ComponentUnderTest from "../InputSelectCore.vue";
+import ComponentUnderTest from "../InputSelect.vue";
 
 const initialFieldData = {
   data: [
@@ -30,35 +31,63 @@ const wrapperFactory = (propsData = {}) => {
   });
 };
 
-describe("InputSelectCore", () => {
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
+
+describe("InputSelect", () => {
   it("mounts without error", async () => {
     wrapper = await wrapperFactory();
     expect(wrapper.vm).toBeTruthy();
   });
 
+  it("renders the native select with the .input-select class", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("select.input-select").exists()).toBe(true);
+  });
+
   it("renders an option per fieldData item", async () => {
     wrapper = await wrapperFactory();
-    const options = wrapper.findAll("option");
+    const options = wrapper.findAll("option.input-select-option");
     expect(options.map((o) => o.text())).toEqual(["Red", "Blue"]);
   });
 
   it("binds v-model to the select value", async () => {
     wrapper = await wrapperFactory({ modelValue: "blue" });
-    expect(wrapper.find("select").element.value).toBe("blue");
+    expect((wrapper.find("select").element as HTMLSelectElement).value).toBe("blue");
+  });
+
+  it("selects an option whose value is 0", async () => {
+    wrapper = await wrapperFactory({
+      placeholder: "Pick a number",
+      modelValue: 0,
+      fieldData: { ...initialFieldData, data: [{ id: "0", name: "zero", value: 0, label: "Zero" }] },
+    });
+    expect((wrapper.find("select").element as HTMLSelectElement).selectedOptions[0]?.textContent?.trim()).toBe("Zero");
   });
 
   it("renders a disabled placeholder option when placeholder is set", async () => {
     wrapper = await wrapperFactory({ placeholder: "Choose a colour", modelValue: "" });
-    const placeholderOption = wrapper.find("option.placeholder");
+    const placeholderOption = wrapper.find("option.input-select-option-placeholder");
 
     expect(placeholderOption.exists()).toBe(true);
     expect(placeholderOption.text()).toBe("Choose a colour");
     expect(placeholderOption.attributes("disabled")).toBeDefined();
+    expect((placeholderOption.element as HTMLOptionElement).selected).toBe(true);
   });
 
   it("does not render a placeholder option when placeholder is unset", async () => {
     wrapper = await wrapperFactory();
-    expect(wrapper.find("option.placeholder").exists()).toBe(false);
+    expect(wrapper.find("option.input-select-option-placeholder").exists()).toBe(false);
+  });
+
+  it("renders option labels as text, not markup", async () => {
+    wrapper = await wrapperFactory({
+      fieldData: { ...initialFieldData, data: [{ id: "1", name: "x", value: "x", label: "<b>bold</b>" }] },
+    });
+    expect(wrapper.find("option b").exists()).toBe(false);
+    expect(wrapper.find("option").text()).toBe("<b>bold</b>");
   });
 
   it("sets required attribute when required is true", async () => {
@@ -71,6 +100,22 @@ describe("InputSelectCore", () => {
     expect(wrapper.find("select").attributes("required")).toBeUndefined();
   });
 
+  it("forwards title, defaulting to the English copy", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("select").attributes("title")).toBe("Please select an option");
+
+    await wrapper.setProps({ title: "Veuillez choisir" });
+    expect(wrapper.find("select").attributes("title")).toBe("Veuillez choisir");
+  });
+
+  it("omits aria-describedby when empty and forwards it when set", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("select").attributes("aria-describedby")).toBeUndefined();
+
+    await wrapper.setProps({ ariaDescribedby: "hint-id" });
+    expect(wrapper.find("select").attributes("aria-describedby")).toBe("hint-id");
+  });
+
   it("sets data-theme from the theme prop", async () => {
     wrapper = await wrapperFactory({ theme: "error" });
     expect(wrapper.find(".input-select-wrapper").attributes("data-theme")).toBe("error");
@@ -82,19 +127,30 @@ describe("InputSelectCore", () => {
     expect(wrapper.find("select").attributes("aria-invalid")).toBe("true");
   });
 
-  it("defaults inputVariant to normal", async () => {
+  it("omits data-invalid and aria-invalid by default", async () => {
     wrapper = await wrapperFactory();
-    expect(wrapper.find(".input-select-wrapper").classes()).toContain("normal");
+    expect(wrapper.find(".input-select-wrapper").attributes("data-invalid")).toBeUndefined();
+    expect(wrapper.find("select").attributes("aria-invalid")).toBeUndefined();
   });
 
-  it("applies inputVariant as a class on the wrapper", async () => {
+  it("defaults data-input-variant to normal", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-select-wrapper").attributes("data-input-variant")).toBe("normal");
+  });
+
+  it("sets data-input-variant from inputVariant", async () => {
     wrapper = await wrapperFactory({ inputVariant: "underlined" });
-    expect(wrapper.find(".input-select-wrapper").classes()).toContain("underlined");
+    expect(wrapper.find(".input-select-wrapper").attributes("data-input-variant")).toBe("underlined");
   });
 
-  it("applies styleClassPassthrough to the select", async () => {
+  it("applies styleClassPassthrough to the select and reacts to changes", async () => {
     wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-select-class"] });
     expect(wrapper.find("select").classes()).toContain("custom-select-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["other-class"] });
+    await nextTick();
+    expect(wrapper.find("select").classes()).toContain("other-class");
+    expect(wrapper.find("select").classes()).not.toContain("custom-select-class");
   });
 
   it("sets isActive true on focus and false on blur", async () => {
@@ -114,6 +170,13 @@ describe("InputSelectCore", () => {
     expect(wrapper.emitted("update:isDirty")?.at(-1)).toEqual([true]);
   });
 
+  it("reflects isDirty and isActive as data attributes", async () => {
+    wrapper = await wrapperFactory({ isDirty: true, isActive: true });
+    const root = wrapper.find(".input-select-wrapper");
+    expect(root.attributes("data-dirty")).toBe("");
+    expect(root.attributes("data-active")).toBe("");
+  });
+
   it("renders an icon for an option that has one, hidden from assistive tech", async () => {
     wrapper = await wrapperFactory({
       fieldData: {
@@ -122,7 +185,7 @@ describe("InputSelectCore", () => {
       },
     });
 
-    const icon = wrapper.find(".input-select-core-option-decorator-icon");
+    const icon = wrapper.find(".input-select-option-icon");
     expect(icon.exists()).toBe(true);
     expect(icon.attributes("aria-hidden")).toBe("true");
   });

package/app/components/05.forms/input-select/tests/InputSelectField.spec.ts

@@ -0,0 +1,121 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import { nextTick } from "vue";
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputSelectField.vue";
+
+const initialFieldData = {
+  data: [
+    { id: "1", name: "red", value: "red", label: "Red" },
+    { id: "2", name: "blue", value: "blue", label: "Blue" },
+  ],
+  total: 2,
+  skip: 0,
+  limit: 10,
+};
+
+const initialPropsData = {
+  name: "colour",
+  label: "Colour",
+  errorMessage: "",
+  modelValue: "red",
+  fieldData: initialFieldData,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
+
+describe("InputSelectField", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders .input-select-field as the root", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.classes()).toContain("input-select-field");
+  });
+
+  it("renders the label text, linked to the select", async () => {
+    wrapper = await wrapperFactory({ label: "Favourite colour" });
+    const label = wrapper.find("label");
+    expect(label.text()).toContain("Favourite colour");
+    expect(label.attributes("for")).toBe(wrapper.find("select").attributes("id"));
+  });
+
+  it("renders a native select with an option per fieldData item", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("select").exists()).toBe(true);
+    expect(wrapper.findAll("option").map((o) => o.text())).toEqual(["Red", "Blue"]);
+  });
+
+  it("sets data-invalid on the root when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.attributes("data-invalid")).toBe("");
+  });
+
+  it("renders the error message and links it via aria-describedby", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "Please choose a colour" });
+    expect(wrapper.text()).toContain("Please choose a colour");
+    const describedBy = wrapper.find("select").attributes("aria-describedby") ?? "";
+    expect(describedBy.length).toBeGreaterThan(0);
+  });
+
+  it("renders the descriptionText slot before the select by default", async () => {
+    wrapper = await wrapperFactory({}, { descriptionText: () => "Pick your favourite" });
+    const html = wrapper.html();
+    expect(wrapper.text()).toContain("Pick your favourite");
+    expect(html.indexOf("Pick your favourite")).toBeLessThan(html.indexOf("<select"));
+  });
+
+  it("renders the description after the select for the outlined variant", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "outlined" }, { descriptionText: () => "Pick your favourite" });
+    const html = wrapper.html();
+    expect(html.indexOf("Pick your favourite")).toBeGreaterThan(html.indexOf("<select"));
+  });
+
+  it("sets data-input-variant on the root", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.attributes("data-input-variant")).toBe("underlined");
+  });
+
+  it("applies styleClassPassthrough to its root only and reacts to changes", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: "custom-select" });
+    expect(wrapper.classes()).toContain("custom-select");
+    expect(wrapper.find("select").classes()).not.toContain("custom-select");
+
+    await wrapper.setProps({ styleClassPassthrough: "other-select" });
+    await nextTick();
+    expect(wrapper.classes()).toContain("other-select");
+    expect(wrapper.classes()).not.toContain("custom-select");
+  });
+
+  it("forwards required and title to the native select", async () => {
+    wrapper = await wrapperFactory({ required: true, title: "Choisissez" });
+    expect(wrapper.find("select").attributes("required")).toBeDefined();
+    expect(wrapper.find("select").attributes("title")).toBe("Choisissez");
+  });
+
+  it("applies the error theme to InputSelect when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, theme: "default" });
+    expect(wrapper.find(".input-select-wrapper").attributes("data-theme")).toBe("error");
+  });
+
+  it("defaults data-testid to input-select-field", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.attributes("data-testid")).toBe("input-select-field");
+  });
+});