mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 09:51:36 +00:00
test(time-picker): add unit tests
This commit is contained in:
Eric Liu
parent
ec7d798783
commit
6e62ce5416
4 changed files with 269 additions and 67 deletions
|
|
@ -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>
|
||||
68
tests/TimePicker/TimePicker.test.svelte
Normal file
68
tests/TimePicker/TimePicker.test.svelte
Normal file
|
|
@ -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>
|
||||
182
tests/TimePicker/TimePicker.test.ts
Normal file
182
tests/TimePicker/TimePicker.test.ts
Normal file
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
19
tests/TimePicker/TimePickerCustom.test.svelte
Normal file
19
tests/TimePicker/TimePickerCustom.test.svelte
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue