71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { render, screen, fireEvent } from "@testing-library/svelte";
|
|
import { describe, expect, it } from "vitest";
|
|
import SelectFont from "$components/ui/SelectFont.svelte";
|
|
|
|
describe("SelectFont.svelte", () => {
|
|
const fonts = [
|
|
"Arial",
|
|
"Verdana",
|
|
"Georgia",
|
|
"Times New Roman",
|
|
"Courier New",
|
|
"Impact",
|
|
"Comic Sans MS",
|
|
"Trebuchet MS",
|
|
];
|
|
|
|
it("should render with initial value", () => {
|
|
const { container } = render(SelectFont, {
|
|
props: {
|
|
value: "Arial",
|
|
},
|
|
});
|
|
|
|
const select = container.querySelector(".select-input");
|
|
expect(select).toBeInTheDocument();
|
|
expect(select).toHaveValue("Arial");
|
|
});
|
|
|
|
it("should render all font options", () => {
|
|
render(SelectFont, {
|
|
props: {
|
|
value: "Arial",
|
|
},
|
|
});
|
|
|
|
fonts.forEach(font => {
|
|
const options = screen.queryAllByText(font);
|
|
expect(options.length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
|
|
it("should update value on change", async () => {
|
|
const { container } = render(SelectFont, {
|
|
props: {
|
|
value: "Arial",
|
|
},
|
|
});
|
|
|
|
const select = container.querySelector(".select-input");
|
|
await fireEvent.change(select, { target: { value: "Verdana" } });
|
|
|
|
expect(select).toHaveValue("Verdana");
|
|
});
|
|
|
|
it("should select different fonts", async () => {
|
|
const { container } = render(SelectFont, {
|
|
props: {
|
|
value: "Arial",
|
|
},
|
|
});
|
|
|
|
const select = container.querySelector(".select-input");
|
|
|
|
await fireEvent.change(select, { target: { value: "Georgia" } });
|
|
expect(select).toHaveValue("Georgia");
|
|
|
|
await fireEvent.change(select, { target: { value: "Impact" } });
|
|
expect(select).toHaveValue("Impact");
|
|
});
|
|
});
|