1import type { ReactNode } from "react";
2import { renderToStaticMarkup } from "react-dom/server";
3import { describe, expect, it, vi } from "vite-plus/test";
4
5vi.mock("../ui/button", () => ({
6 Button: ({ children }: { readonly children?: ReactNode }) => <button>{children}</button>,
7}));
8
9vi.mock("../ui/dialog", () => {
10 const Container = ({ children }: { readonly children?: ReactNode }) => <div>{children}</div>;
11 return {
12 Dialog: Container,
13 DialogDescription: Container,
14 DialogFooter: Container,
15 DialogHeader: Container,
16 DialogPanel: Container,
17 DialogPopup: Container,
18 DialogTitle: Container,
19 };
20});
21
22vi.mock("../ui/input", () => ({ Input: () => <input /> }));
23vi.mock("../ui/scroll-area", () => ({
24 ScrollArea: ({ children }: { readonly children?: ReactNode }) => <div>{children}</div>,
25}));
26vi.mock("../ui/toggle-group", () => ({
27 Toggle: ({ children, value }: { readonly children?: ReactNode; readonly value: string }) => (
28 <button data-value={value}>{children}</button>
29 ),
30 ToggleGroup: ({
31 children,
32 value,
33 }: {
34 readonly children?: ReactNode;
35 readonly value: readonly string[];
36 }) => <div data-current={value.join(",")}>{children}</div>,
37}));
38
39import { ProjectIconPickerDialog } from "./ProjectIconPickerDialog";
40
41describe("ProjectIconPickerDialog", () => {
42 it("shows icons first and selects them for an automatic project", () => {
43 const markup = renderToStaticMarkup(
44 <ProjectIconPickerDialog
45 current={null}
46 projectName="Test"
47 open
48 onOpenChange={() => {}}
49 onSelect={() => {}}
50 />,
51 );
52
53 expect(markup).toContain('data-current="lucide"');
54 expect(markup.indexOf(">Icons<")).toBeLessThan(markup.indexOf(">Emoji<"));
55 expect(markup).toContain('aria-label="Icon color"');
56 });
57});