invoke-prompt-editor-demo/src/components/CategoryFilter.test.tsx

38 lines
1.2 KiB
TypeScript

import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { CategoryFilter } from "./CategoryFilter";
import { $library, Category, LibraryItem } from "../lib/prompt";
const mockOnFiltered = jest.fn();
const library: LibraryItem[] = [
{ id: "1", prompt: "Hello", category: Category.style },
{ id: "2", prompt: "World", category: Category.vibes },
];
describe("CategoryFilter", () => {
beforeEach(() => {
$library.set(library);
});
it("renders checkboxes for each category", () => {
render(<CategoryFilter onFiltered={mockOnFiltered} />);
const checkboxes = screen.getAllByRole("checkbox");
expect(checkboxes).toHaveLength(2);
});
it("filters the library based on checked categories", async () => {
render(<CategoryFilter onFiltered={mockOnFiltered} />);
const styleCheckbox = screen.getByLabelText("style");
const vibesCheckbox = screen.getByLabelText("vibes");
userEvent.click(styleCheckbox);
userEvent.click(vibesCheckbox);
expect(mockOnFiltered).toHaveBeenCalledWith([library[0]]);
});
});