test(time-picker): add unit tests

tests/TimePicker.test.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-  import {
-    TimePicker,
-    TimePickerSelect,
-    SelectItem,
-  } from "carbon-components-svelte";
-</script>
-
-<TimePicker
-  spellcheck={false}
-  labelText="Cron job"
-  placeholder="hh:mm"
-  on:paste
->
-  <TimePickerSelect value="PM">
-    <SelectItem value="am" text="AM" />
-    <SelectItem value="pm" text="PM" />
-  </TimePickerSelect>
-  <TimePickerSelect value="PDT">
-    <SelectItem value="pdt" text="PDT" />
-    <SelectItem value="gmt" text="GMT" />
-  </TimePickerSelect>
-</TimePicker>
-
-<TimePicker light labelText="Cron job" placeholder="hh:mm">
-  <TimePickerSelect value="PM">
-    <SelectItem value="am" text="AM" />
-    <SelectItem value="pm" text="PM" />
-  </TimePickerSelect>
-  <TimePickerSelect value="PDT">
-    <SelectItem value="pdt" text="PDT" />
-    <SelectItem value="gmt" text="GMT" />
-  </TimePickerSelect>
-</TimePicker>
-
-<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
-  <TimePickerSelect value="PM">
-    <SelectItem value="am" text="AM" />
-    <SelectItem value="pm" text="PM" />
-  </TimePickerSelect>
-  <TimePickerSelect value="PDT">
-    <SelectItem value="pdt" text="PDT" />
-    <SelectItem value="gmt" text="GMT" />
-  </TimePickerSelect>
-</TimePicker>
-
-<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
-  <TimePickerSelect value="PM">
-    <SelectItem value="am" text="AM" />
-    <SelectItem value="pm" text="PM" />
-  </TimePickerSelect>
-  <TimePickerSelect value="PDT">
-    <SelectItem value="pdt" text="PDT" />
-    <SelectItem value="gmt" text="GMT" />
-  </TimePickerSelect>
-</TimePicker>
-
-<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
-  <TimePickerSelect value="PM" disabled>
-    <SelectItem value="am" text="AM" />
-    <SelectItem value="pm" text="PM" />
-  </TimePickerSelect>
-  <TimePickerSelect value="PDT" disabled>
-    <SelectItem value="pdt" text="PDT" />
-    <SelectItem value="gmt" text="GMT" />
-  </TimePickerSelect>
-</TimePicker>

tests/TimePicker/TimePicker.test.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import {
+    TimePicker,
+    TimePickerSelect,
+    SelectItem,
+  } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
+
+  export let size: ComponentProps<TimePicker>["size"] = undefined;
+  export let value: ComponentProps<TimePicker>["value"] = "";
+  export let placeholder: ComponentProps<TimePicker>["placeholder"] = "hh:mm";
+  export let pattern: ComponentProps<TimePicker>["pattern"] =
+    "(1[012]|[1-9]):[0-5][0-9](\\s)?";
+  export let maxlength: ComponentProps<TimePicker>["maxlength"] = 5;
+  export let light: ComponentProps<TimePicker>["light"] = false;
+  export let disabled: ComponentProps<TimePicker>["disabled"] = false;
+  export let labelText: ComponentProps<TimePicker>["labelText"] = "Time";
+  export let hideLabel: ComponentProps<TimePicker>["hideLabel"] = false;
+  export let invalid: ComponentProps<TimePicker>["invalid"] = false;
+  export let invalidText: ComponentProps<TimePicker>["invalidText"] = "";
+  export let id: ComponentProps<TimePicker>["id"] = "ccs-test";
+  export let name: ComponentProps<TimePicker>["name"] = "test-time";
+  export let ref: ComponentProps<TimePicker>["ref"] = null;
+</script>
+
+<TimePicker
+  {size}
+  bind:value
+  {placeholder}
+  {pattern}
+  {maxlength}
+  {light}
+  {disabled}
+  {labelText}
+  {hideLabel}
+  {invalid}
+  {invalidText}
+  {id}
+  {name}
+  {ref}
+  on:change={() => {
+    console.log("change");
+  }}
+  on:input={() => {
+    console.log("input");
+  }}
+  on:keydown={() => {
+    console.log("keydown");
+  }}
+  on:keyup={() => {
+    console.log("keyup");
+  }}
+  on:focus={() => {
+    console.log("focus");
+  }}
+  on:blur={() => {
+    console.log("blur");
+  }}
+>
+  <TimePickerSelect value="pm">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="pdt">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>

tests/TimePicker/TimePicker.test.ts

@@ -0,0 +1,182 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import TimePicker from "./TimePicker.test.svelte";
+import TimePickerCustom from "./TimePickerCustom.test.svelte";
+
+describe("TimePicker", () => {
+  it("should render with default props", () => {
+    render(TimePicker);
+
+    const input = screen.getByRole("textbox");
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute("name", "test-time");
+    expect(input).toHaveAttribute("placeholder", "hh:mm");
+    expect(input).toHaveAttribute("pattern", "(1[012]|[1-9]):[0-5][0-9](\\s)?");
+    expect(input).toHaveAttribute("maxlength", "5");
+    expect(screen.getByText("Time")).toBeInTheDocument();
+    expect(screen.getByText("AM")).toBeInTheDocument();
+    expect(screen.getByText("PM")).toBeInTheDocument();
+    expect(screen.getByText("PDT")).toBeInTheDocument();
+    expect(screen.getByText("GMT")).toBeInTheDocument();
+  });
+
+  it("should handle different sizes", () => {
+    (["sm", "xl"] as const).forEach((size) => {
+      const { container } = render(TimePicker, {
+        props: { size },
+      });
+
+      expect(container.querySelector(".bx--time-picker")).toHaveClass(
+        `bx--time-picker--${size}`,
+      );
+      container.remove();
+    });
+  });
+
+  it("should handle light variant", () => {
+    render(TimePicker, { props: { light: true } });
+
+    const timePicker = screen.getByRole("textbox").closest(".bx--time-picker");
+    expect(timePicker).toHaveClass("bx--time-picker--light");
+  });
+
+  it("should handle disabled state", () => {
+    render(TimePicker, { props: { disabled: true } });
+
+    const input = screen.getByRole("textbox");
+    expect(input).toBeDisabled();
+    expect(screen.getByText("Time")).toHaveClass("bx--label--disabled");
+  });
+
+  it("should handle invalid state", () => {
+    render(TimePicker, {
+      props: { invalid: true, invalidText: "Invalid time" },
+    });
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveClass("bx--text-input--invalid");
+    expect(input).toHaveAttribute("data-invalid");
+    expect(screen.getByText("Invalid time")).toHaveClass(
+      "bx--form-requirement",
+    );
+  });
+
+  it("should handle hidden label", () => {
+    render(TimePicker, { props: { hideLabel: true } });
+
+    expect(screen.getByText("Time")).toHaveClass("bx--visually-hidden");
+  });
+
+  it("should handle custom id", () => {
+    render(TimePicker, { props: { id: "custom-id" } });
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("id", "custom-id");
+    expect(screen.getByText("Time")).toHaveAttribute("for", "custom-id");
+  });
+
+  it("should handle custom name", () => {
+    render(TimePicker, { props: { name: "custom-name" } });
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("name", "custom-name");
+  });
+
+  it("should handle custom placeholder", () => {
+    render(TimePicker, { props: { placeholder: "Enter time" } });
+
+    expect(screen.getByRole("textbox")).toHaveAttribute(
+      "placeholder",
+      "Enter time",
+    );
+  });
+
+  it("should handle custom pattern", () => {
+    render(TimePicker, { props: { pattern: "custom-pattern" } });
+
+    expect(screen.getByRole("textbox")).toHaveAttribute(
+      "pattern",
+      "custom-pattern",
+    );
+  });
+
+  it("should handle custom maxlength", () => {
+    render(TimePicker, { props: { maxlength: 10 } });
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("maxlength", "10");
+  });
+
+  it("should handle value binding", async () => {
+    render(TimePicker);
+
+    const input = screen.getByRole("textbox");
+    await user.type(input, "10:30");
+    expect(input).toHaveValue("10:30");
+  });
+
+  it("should handle change event", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(TimePicker);
+
+    const input = screen.getByRole("textbox");
+    await user.type(input, "10:30");
+    expect(consoleLog).toHaveBeenCalledWith("focus");
+    expect(consoleLog).toHaveBeenCalledWith("input");
+    await user.keyboard("{Enter}");
+    expect(consoleLog).toHaveBeenCalledWith("keydown");
+    expect(consoleLog).toHaveBeenCalledWith("input");
+
+    expect(input).toHaveValue("10:30");
+    await user.keyboard("{Tab}");
+    expect(consoleLog).toHaveBeenCalledWith("change");
+  });
+
+  it("should handle focus and blur events", async () => {
+    const consoleLog = vi.spyOn(console, "log");
+    render(TimePicker);
+
+    const input = screen.getByRole("textbox");
+    await user.tab();
+    expect(input).toHaveFocus();
+    expect(consoleLog).toHaveBeenCalledWith("focus");
+
+    await user.tab();
+    expect(input).not.toHaveFocus();
+    expect(consoleLog).toHaveBeenCalledWith("blur");
+  });
+
+  it("should handle disabled state with events", async () => {
+    render(TimePicker, { props: { disabled: true } });
+
+    const input = screen.getByRole("textbox");
+    await user.type(input, "10:30");
+    expect(input).toHaveValue("");
+  });
+
+  it("should handle invalid state with helper text", () => {
+    render(TimePicker, {
+      props: {
+        invalid: true,
+        invalidText: "Invalid time",
+      },
+    });
+
+    expect(screen.getByText("Invalid time")).toBeInTheDocument();
+  });
+
+  it("should handle label text slot", () => {
+    render(TimePickerCustom);
+
+    const label = screen.getByText("Custom Label Text");
+    expect(label).toBeInTheDocument();
+    expect(label.tagName).toBe("SPAN");
+  });
+
+  it("should handle TimePickerSelect components", () => {
+    render(TimePicker);
+
+    const selects = screen.getAllByRole("combobox");
+    expect(selects).toHaveLength(2);
+    expect(selects[0]).toHaveValue("pm");
+    expect(selects[1]).toHaveValue("pdt");
+  });
+});

tests/TimePicker/TimePickerCustom.test.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import {
+    TimePicker,
+    TimePickerSelect,
+    SelectItem,
+  } from "carbon-components-svelte";
+</script>
+
+<TimePicker labelText="Custom label">
+  <span slot="labelText">Custom Label Text</span>
+  <TimePickerSelect value="pm">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="pdt">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>