prototypey.org - atproto lexicon typescript toolkit - mirror https://github.com/tylersayshi/prototypey
add vitest testing setup to site package with component tests
+186
-2
+7
-2
packages/site/package.json
+7
-2
packages/site/package.json
···
6
6
"scripts": {
7
7
"dev": "vite",
8
8
"build": "tsc && vite build",
9
-
"preview": "vite preview"
9
+
"preview": "vite preview",
10
+
"test": "vitest"
10
11
},
11
12
"dependencies": {
12
13
"@monaco-editor/react": "^4.6.0",
···
16
17
"react-dom": "^18.3.1"
17
18
},
18
19
"devDependencies": {
20
+
"@testing-library/react": "^16.1.0",
21
+
"@testing-library/user-event": "^14.5.2",
19
22
"@types/react": "^18.3.18",
20
23
"@types/react-dom": "^18.3.5",
21
24
"@vitejs/plugin-react": "^4.3.4",
25
+
"jsdom": "^25.0.1",
22
26
"typescript": "5.8.3",
23
-
"vite": "^6.0.5"
27
+
"vite": "^6.0.5",
28
+
"vitest": "^3.2.4"
24
29
}
25
30
}
+40
packages/site/tests/components/Editor.test.tsx
+40
packages/site/tests/components/Editor.test.tsx
···
1
+
import { describe, it, expect, vi } from "vitest";
2
+
import { render, screen } from "@testing-library/react";
3
+
import { userEvent } from "@testing-library/user-event";
4
+
import { Editor } from "../../src/components/Editor";
5
+
6
+
vi.mock("@monaco-editor/react", () => ({
7
+
default: ({ value, onChange }: any) => (
8
+
<textarea
9
+
data-testid="monaco-editor"
10
+
value={value}
11
+
onChange={(e) => onChange(e.target.value)}
12
+
/>
13
+
),
14
+
}));
15
+
16
+
describe("Editor", () => {
17
+
it("renders with input label", () => {
18
+
const mockOnChange = vi.fn();
19
+
render(<Editor value="" onChange={mockOnChange} />);
20
+
expect(screen.getByText("Input")).toBeInTheDocument();
21
+
});
22
+
23
+
it("calls onChange when value changes", async () => {
24
+
const mockOnChange = vi.fn();
25
+
render(<Editor value="" onChange={mockOnChange} />);
26
+
27
+
const editor = screen.getByTestId("monaco-editor");
28
+
await userEvent.type(editor, "test");
29
+
30
+
expect(mockOnChange).toHaveBeenCalled();
31
+
});
32
+
33
+
it("displays the provided value", () => {
34
+
const mockOnChange = vi.fn();
35
+
render(<Editor value="const x = 1" onChange={mockOnChange} />);
36
+
37
+
const editor = screen.getByTestId("monaco-editor");
38
+
expect(editor).toHaveValue("const x = 1");
39
+
});
40
+
});
+18
packages/site/tests/components/Header.test.tsx
+18
packages/site/tests/components/Header.test.tsx
···
1
+
import { describe, it, expect } from "vitest";
2
+
import { render, screen } from "@testing-library/react";
3
+
import { Header } from "../../src/components/Header";
4
+
5
+
describe("Header", () => {
6
+
it("renders the title", () => {
7
+
render(<Header />);
8
+
expect(screen.getByText("prototypekit")).toBeInTheDocument();
9
+
expect(screen.getByText("at://")).toBeInTheDocument();
10
+
});
11
+
12
+
it("renders the description", () => {
13
+
render(<Header />);
14
+
expect(
15
+
screen.getByText("Type-safe lexicon inference for ATProto schemas"),
16
+
).toBeInTheDocument();
17
+
});
18
+
});
+61
packages/site/tests/components/OutputPanel.test.tsx
+61
packages/site/tests/components/OutputPanel.test.tsx
···
1
+
import { describe, it, expect, vi } from "vitest";
2
+
import { render, screen } from "@testing-library/react";
3
+
import { userEvent } from "@testing-library/user-event";
4
+
import { OutputPanel } from "../../src/components/OutputPanel";
5
+
6
+
vi.mock("@monaco-editor/react", () => ({
7
+
default: ({ value }: any) => <div data-testid="monaco-editor">{value}</div>,
8
+
}));
9
+
10
+
describe("OutputPanel", () => {
11
+
const mockOutput = {
12
+
json: '{"test": "value"}',
13
+
typeInfo: "type Test = { test: string }",
14
+
error: "",
15
+
};
16
+
17
+
it("renders JSON Output tab by default", () => {
18
+
render(<OutputPanel output={mockOutput} />);
19
+
expect(screen.getByText("JSON Output")).toBeInTheDocument();
20
+
expect(screen.getByText("Type Info")).toBeInTheDocument();
21
+
});
22
+
23
+
it("displays json content by default", () => {
24
+
render(<OutputPanel output={mockOutput} />);
25
+
expect(screen.getByText('{"test": "value"}')).toBeInTheDocument();
26
+
});
27
+
28
+
it("switches to Type Info tab when clicked", async () => {
29
+
render(<OutputPanel output={mockOutput} />);
30
+
31
+
const typeInfoTab = screen.getByText("Type Info");
32
+
await userEvent.click(typeInfoTab);
33
+
34
+
expect(
35
+
screen.getByText("type Test = { test: string }"),
36
+
).toBeInTheDocument();
37
+
});
38
+
39
+
it("displays error message when error exists", () => {
40
+
const errorOutput = {
41
+
json: "",
42
+
typeInfo: "",
43
+
error: "Something went wrong",
44
+
};
45
+
46
+
render(<OutputPanel output={errorOutput} />);
47
+
expect(screen.getByText(/Error:/)).toBeInTheDocument();
48
+
expect(screen.getByText(/Something went wrong/)).toBeInTheDocument();
49
+
});
50
+
51
+
it("does not display monaco editor when error exists", () => {
52
+
const errorOutput = {
53
+
json: "",
54
+
typeInfo: "",
55
+
error: "Something went wrong",
56
+
};
57
+
58
+
render(<OutputPanel output={errorOutput} />);
59
+
expect(screen.queryByTestId("monaco-editor")).not.toBeInTheDocument();
60
+
});
61
+
});
+49
packages/site/tests/components/Playground.test.tsx
+49
packages/site/tests/components/Playground.test.tsx
···
1
+
import { describe, it, expect, vi } from "vitest";
2
+
import { render, screen, waitFor } from "@testing-library/react";
3
+
import { Playground } from "../../src/components/Playground";
4
+
5
+
vi.mock("@monaco-editor/react", () => ({
6
+
default: ({ value, onChange }: any) => (
7
+
<textarea
8
+
data-testid="monaco-editor"
9
+
value={value}
10
+
onChange={(e) => onChange(e.target.value)}
11
+
/>
12
+
),
13
+
}));
14
+
15
+
describe("Playground", () => {
16
+
it("renders Editor and OutputPanel components", () => {
17
+
render(<Playground />);
18
+
19
+
expect(screen.getByText("Input")).toBeInTheDocument();
20
+
expect(screen.getByText("JSON Output")).toBeInTheDocument();
21
+
expect(screen.getByText("Type Info")).toBeInTheDocument();
22
+
});
23
+
24
+
it("starts with default code in editor", () => {
25
+
render(<Playground />);
26
+
27
+
const editors = screen.getAllByTestId("monaco-editor");
28
+
const inputEditor = editors[0];
29
+
30
+
expect(inputEditor).toHaveValue(
31
+
expect.stringContaining('lx.namespace("app.bsky.actor.profile"'),
32
+
);
33
+
});
34
+
35
+
it("evaluates code and displays output", async () => {
36
+
render(<Playground />);
37
+
38
+
await waitFor(
39
+
() => {
40
+
const editors = screen.getAllByTestId("monaco-editor");
41
+
const outputEditor = editors.find(
42
+
(e) => e.textContent && e.textContent.includes("{"),
43
+
);
44
+
expect(outputEditor).toBeDefined();
45
+
},
46
+
{ timeout: 1000 },
47
+
);
48
+
});
49
+
});