forked from nikita/muzika-gromche
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { expect, test } from "vitest";
|
|
import { render } from "vitest-browser-vue";
|
|
import SearchField from "@/components/SearchField.vue";
|
|
|
|
test("default placeholder", async () => {
|
|
const { getByRole } = render(SearchField, {
|
|
props: { modelValue: "" },
|
|
});
|
|
|
|
const searchBox = getByRole("searchbox");
|
|
await expect.element(searchBox).toBeInTheDocument();
|
|
await expect.element(searchBox).toHaveAttribute("placeholder", "Search…");
|
|
});
|
|
|
|
test("custom placeholder", async () => {
|
|
const customPlaceholder = "Hello there";
|
|
const { getByRole } = render(SearchField, {
|
|
props: { placeholder: customPlaceholder, modelValue: "" },
|
|
});
|
|
|
|
const searchBox = getByRole("searchbox");
|
|
await expect.element(searchBox).toBeInTheDocument();
|
|
await expect.element(searchBox)
|
|
.toHaveAttribute("placeholder", customPlaceholder);
|
|
});
|
|
|
|
test("empty search disabled clear button", async () => {
|
|
const { getByRole } = render(SearchField, { props: { modelValue: "" } });
|
|
|
|
const button = getByRole("button", { name: "clear" });
|
|
await expect.element(button).toBeInTheDocument();
|
|
await expect.element(button).toBeDisabled();
|
|
});
|
|
|
|
test("non-empty search enabled clear button", async () => {
|
|
const { getByRole } = render(SearchField, { props: { modelValue: "hello" } });
|
|
|
|
const button = getByRole("button", { name: "clear" });
|
|
await expect.element(button).toBeInTheDocument();
|
|
await expect.element(button).toBeEnabled();
|
|
});
|
|
|
|
test("filling search enables clear button", async () => {
|
|
const { getByRole } = render(SearchField, { props: { modelValue: "" } });
|
|
const searchBox = getByRole("searchbox");
|
|
const button = getByRole("button", { name: "clear" });
|
|
|
|
// simulate user typing into the input
|
|
await searchBox.fill("abc");
|
|
|
|
await expect.element(button).toBeEnabled();
|
|
});
|
|
|
|
test("clear button clears model value", async () => {
|
|
const { getByRole } = render(SearchField, { props: { modelValue: "hello" } });
|
|
const searchBox = getByRole("searchbox");
|
|
const button = getByRole("button", { name: "clear" });
|
|
|
|
// ensure initial state
|
|
await expect.element(searchBox).toBeInTheDocument();
|
|
await expect.element(button).toBeEnabled();
|
|
|
|
// click the clear button and assert the input was cleared
|
|
await button.click();
|
|
|
|
// input should reflect cleared model
|
|
await expect.element(searchBox).toHaveValue("");
|
|
await expect.element(button).toBeDisabled();
|
|
});
|