test(date-picker): add unit tests

tests/DatePicker.test.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-  import {
-    DatePicker,
-    DatePickerSkeleton,
-    DatePickerInput,
-  } from "carbon-components-svelte";
-  import { Russian } from "flatpickr/dist/l10n/ru.js";
-</script>
-
-<DatePicker
-  locale={Russian}
-  datePickerType="single"
-  flatpickrProps={{ static: true }}
-  on:change
->
-  <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" on:paste />
-</DatePicker>
-
-<DatePicker
-  locale="az"
-  on:change={(e) => {
-    console.log(e.detail);
-  }}
->
-  <DatePickerInput
-    labelText="Date of birth"
-    helperText="Example: 01/12/1990"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-
-<DatePicker>
-  <DatePickerInput
-    hideLabel
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-
-<DatePicker light>
-  <DatePickerInput labelText="Date of birth" placeholder="mm/dd/yyyy" />
-</DatePicker>
-
-<DatePicker>
-  <DatePickerInput
-    size="xl"
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-
-<DatePicker>
-  <DatePickerInput
-    size="sm"
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-
-<DatePicker>
-  <DatePickerInput
-    invalid
-    invalidText="Invalid date"
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-
-<DatePicker>
-  <DatePickerInput
-    disabled
-    labelText="Date of birth"
-    placeholder="mm/dd/yyyy"
-  />
-</DatePicker>
-
-<DatePicker valueFrom="" valueTo="" datePickerType="single">
-  <DatePickerInput labelText="Schedule a meeting" placeholder="mm/dd/yyyy" />
-</DatePicker>
-
-<DatePickerSkeleton />

tests/DatePicker/DatePicker.test.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
+
+  export let datePickerType: ComponentProps<DatePicker>["datePickerType"] =
+    "simple";
+  export let value = "";
+  export let valueFrom = "";
+  export let valueTo = "";
+  export let dateFormat = "m/d/Y";
+  export let maxDate: ComponentProps<DatePicker>["maxDate"] = null;
+  export let minDate: ComponentProps<DatePicker>["minDate"] = null;
+  export let locale: ComponentProps<DatePicker>["locale"] = "en";
+  export let short = false;
+  export let light = false;
+  export let flatpickrProps: ComponentProps<DatePicker>["flatpickrProps"] = {
+    static: true,
+  };
+  export let disabled = false;
+  export let invalid = false;
+  export let invalidText = "";
+  export let warn = false;
+  export let warnText = "";
+  export let helperText = "";
+  export let hideLabel = false;
+</script>
+
+<DatePicker
+  {datePickerType}
+  {value}
+  {valueFrom}
+  {valueTo}
+  {dateFormat}
+  {maxDate}
+  {minDate}
+  {locale}
+  {short}
+  {light}
+  {flatpickrProps}
+  on:change={(e) => {
+    console.log("change", e.detail);
+  }}
+>
+  <DatePickerInput
+    labelText="Date"
+    placeholder="mm/dd/yyyy"
+    {disabled}
+    {invalid}
+    {invalidText}
+    {warn}
+    {warnText}
+    {helperText}
+    {hideLabel}
+  />
+</DatePicker>

tests/DatePicker/DatePicker.test.ts

@@ -0,0 +1,105 @@
+import { render, screen } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import DatePicker from "./DatePicker.test.svelte";
+import DatePickerRange from "./DatePickerRange.test.svelte";
+
+describe("DatePicker", () => {
+  it("renders with default props", async () => {
+    render(DatePicker);
+
+    const input = screen.getByLabelText("Date");
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute("placeholder", "mm/dd/yyyy");
+
+    await user.type(input, "01/01/2023");
+    expect(input).toHaveValue("01/01/2023");
+  });
+
+  it("renders light variant", () => {
+    const { container } = render(DatePicker, { light: true });
+
+    const wrapper = container.querySelector(".bx--date-picker");
+    expect(wrapper).toHaveClass("bx--date-picker--light");
+  });
+
+  it("renders short variant", () => {
+    const { container } = render(DatePicker, { short: true });
+
+    const wrapper = container.querySelector(".bx--date-picker");
+    expect(wrapper).toHaveClass("bx--date-picker--short");
+  });
+
+  it("renders single mode", async () => {
+    const { container } = render(DatePicker, { datePickerType: "single" });
+
+    const input = screen.getByLabelText("Date");
+    expect(input).toHaveAttribute("placeholder", "mm/dd/yyyy");
+
+    const wrapper = container.querySelector(".bx--date-picker");
+    expect(wrapper).toHaveClass("bx--date-picker--single");
+
+    expect(
+      screen.queryByLabelText("calendar-container"),
+    ).not.toBeInTheDocument();
+    await user.click(input);
+    expect(screen.getByLabelText("calendar-container")).toBeInTheDocument();
+  });
+
+  it("renders range mode", async () => {
+    const { container } = render(DatePickerRange);
+
+    const inputStart = screen.getByLabelText("Start date");
+    const inputEnd = screen.getByLabelText("End date");
+
+    expect(inputStart).toHaveAttribute("placeholder", "mm/dd/yyyy");
+    expect(inputEnd).toHaveAttribute("placeholder", "mm/dd/yyyy");
+
+    const wrapper = container.querySelector(".bx--date-picker");
+    expect(wrapper).toHaveClass("bx--date-picker--range");
+
+    expect(
+      screen.queryByLabelText("calendar-container"),
+    ).not.toBeInTheDocument();
+    await user.click(inputStart);
+    expect(screen.getByLabelText("calendar-container")).toBeInTheDocument();
+  });
+
+  it("handles disabled state", () => {
+    render(DatePicker, { disabled: true });
+    const input = screen.getByPlaceholderText("mm/dd/yyyy");
+    expect(input).toBeDisabled();
+  });
+
+  it("handles invalid state", () => {
+    const { container } = render(DatePicker, {
+      invalid: true,
+      invalidText: "Invalid date",
+    });
+    expect(screen.getByText("Invalid date")).toBeInTheDocument();
+    const wrapper = container.querySelector(".bx--date-picker-input__wrapper");
+    expect(wrapper).toHaveClass("bx--date-picker-input__wrapper--invalid");
+  });
+
+  it("handles warning state", () => {
+    const { container } = render(DatePicker, {
+      warn: true,
+      warnText: "Warning message",
+    });
+    expect(screen.getByText("Warning message")).toBeInTheDocument();
+    const wrapper = container.querySelector(".bx--date-picker-input__wrapper");
+    expect(wrapper).toHaveClass("bx--date-picker-input__wrapper--warn");
+  });
+
+  it("handles helper text", () => {
+    render(DatePicker, { helperText: "Helper message" });
+    expect(screen.getByText("Helper message")).toBeInTheDocument();
+  });
+
+  it("handles hidden label", () => {
+    render(DatePicker, { hideLabel: true });
+    const input = screen.getByLabelText("Date");
+    expect(input).toHaveAttribute("placeholder", "mm/dd/yyyy");
+    expect(screen.getByText("Date")).toHaveClass("bx--visually-hidden");
+  });
+});

tests/DatePicker/DatePickerRange.test.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker datePickerType="range" on:change>
+  <DatePickerInput labelText="Start date" placeholder="mm/dd/yyyy" />
+  <DatePickerInput labelText="End date" placeholder="mm/dd/yyyy" />
+</DatePicker>