prototypey.org - atproto lexicon typescript toolkit - mirror https://github.com/tylersayshi/prototypey

fix ui tests

Tyler 7e744630 3f8ba0c9

+102 -25
+1
packages/site/package.json
··· 17 17 "react-dom": "^18.3.1" 18 18 }, 19 19 "devDependencies": { 20 + "@testing-library/jest-dom": "^6.9.1", 20 21 "@testing-library/react": "^16.1.0", 21 22 "@testing-library/user-event": "^14.5.2", 22 23 "@types/react": "^18.3.18",
+27 -4
packages/site/tests/components/Editor.test.tsx
··· 11 11 onChange={(e) => onChange(e.target.value)} 12 12 /> 13 13 ), 14 + loader: { 15 + init: vi.fn(() => 16 + Promise.resolve({ 17 + languages: { 18 + typescript: { 19 + typescriptDefaults: { 20 + setCompilerOptions: vi.fn(), 21 + setDiagnosticsOptions: vi.fn(), 22 + addExtraLib: vi.fn(), 23 + }, 24 + ScriptTarget: { ES2020: 7 }, 25 + ModuleResolutionKind: { NodeJs: 2 }, 26 + ModuleKind: { ESNext: 99 }, 27 + }, 28 + }, 29 + }), 30 + ), 31 + }, 14 32 })); 15 33 16 34 describe("Editor", () => { 17 - it("renders with input label", () => { 35 + it("renders with input label", async () => { 18 36 const mockOnChange = vi.fn(); 19 37 render(<Editor value="" onChange={mockOnChange} />); 20 38 expect(screen.getByText("Input")).toBeInTheDocument(); 39 + 40 + // Wait for loader to complete 41 + await screen.findByTestId("monaco-editor"); 21 42 }); 22 43 23 44 it("calls onChange when value changes", async () => { 24 45 const mockOnChange = vi.fn(); 25 46 render(<Editor value="" onChange={mockOnChange} />); 26 47 27 - const editor = screen.getByTestId("monaco-editor"); 48 + // Wait for loader to complete 49 + const editor = await screen.findByTestId("monaco-editor"); 28 50 await userEvent.type(editor, "test"); 29 51 30 52 expect(mockOnChange).toHaveBeenCalled(); 31 53 }); 32 54 33 - it("displays the provided value", () => { 55 + it("displays the provided value", async () => { 34 56 const mockOnChange = vi.fn(); 35 57 render(<Editor value="const x = 1" onChange={mockOnChange} />); 36 58 37 - const editor = screen.getByTestId("monaco-editor"); 59 + // Wait for loader to complete 60 + const editor = await screen.findByTestId("monaco-editor"); 38 61 expect(editor).toHaveValue("const x = 1"); 39 62 }); 40 63 });
+3 -15
packages/site/tests/components/OutputPanel.test.tsx
··· 14 14 error: "", 15 15 }; 16 16 17 - it("renders JSON Output tab by default", () => { 17 + it("renders Output header", () => { 18 18 render(<OutputPanel output={mockOutput} />); 19 - expect(screen.getByText("JSON Output")).toBeInTheDocument(); 20 - expect(screen.getByText("Type Info")).toBeInTheDocument(); 19 + expect(screen.getByText("Output")).toBeInTheDocument(); 21 20 }); 22 21 23 - it("displays json content by default", () => { 22 + it("displays json content", () => { 24 23 render(<OutputPanel output={mockOutput} />); 25 24 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 25 }); 38 26 39 27 it("displays error message when error exists", () => {
+10 -6
packages/site/tests/components/Playground.test.tsx
··· 51 51 render(<Playground />); 52 52 53 53 expect(screen.getByText("Input")).toBeInTheDocument(); 54 - expect(screen.getByText("JSON Output")).toBeInTheDocument(); 55 - expect(screen.getByText("Type Info")).toBeInTheDocument(); 54 + expect(screen.getByText("Output")).toBeInTheDocument(); 56 55 }); 57 56 58 - it("starts with default code in editor", () => { 57 + it("starts with default code in editor", async () => { 59 58 render(<Playground />); 60 59 60 + // Wait for editors to be ready 61 + await waitFor(() => { 62 + expect(screen.getAllByTestId("monaco-editor").length).toBeGreaterThan(0); 63 + }); 64 + 61 65 const editors = screen.getAllByTestId("monaco-editor"); 62 - const inputEditor = editors[0]; 66 + const inputEditor = editors[0] as HTMLTextAreaElement; 63 67 64 - expect(inputEditor).toHaveValue( 65 - expect.stringContaining('lx.namespace("app.bsky.actor.profile"'), 68 + expect(inputEditor.value).toContain( 69 + 'lx.namespace("app.bsky.actor.profile"', 66 70 ); 67 71 }); 68 72
+1
packages/site/tests/setup.ts
··· 1 1 import { vi } from "vitest"; 2 + import "@testing-library/jest-dom/vitest"; 2 3 3 4 global.fetch = vi.fn( 4 5 () =>
+60
pnpm-lock.yaml
··· 85 85 specifier: ^18.3.1 86 86 version: 18.3.1(react@18.3.1) 87 87 devDependencies: 88 + '@testing-library/jest-dom': 89 + specifier: ^6.9.1 90 + version: 6.9.1 88 91 '@testing-library/react': 89 92 specifier: ^16.1.0 90 93 version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.26))(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) ··· 114 117 version: 3.2.4(@types/node@24.0.4)(esbuild@0.25.10)(jiti@2.6.1)(jsdom@25.0.1) 115 118 116 119 packages: 120 + 121 + '@adobe/css-tools@4.4.4': 122 + resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==} 117 123 118 124 '@ark/attest@0.49.0': 119 125 resolution: {integrity: sha512-LYAJe4iwgA4GY+WLcSZ2ObTgr7F9lSwoQm4hR+B5ko0TfB3gqolXv04hA+7UtoP5HrGR1lVS+0DdwtWNnaSGnQ==} ··· 671 677 resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==} 672 678 engines: {node: '>=18'} 673 679 680 + '@testing-library/jest-dom@6.9.1': 681 + resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==} 682 + engines: {node: '>=14', npm: '>=6', yarn: '>=1'} 683 + 674 684 '@testing-library/react@16.3.0': 675 685 resolution: {integrity: sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==} 676 686 engines: {node: '>=18'} ··· 972 982 resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} 973 983 engines: {node: '>= 8'} 974 984 985 + css.escape@1.5.1: 986 + resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} 987 + 975 988 cssstyle@4.6.0: 976 989 resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==} 977 990 engines: {node: '>=18'} ··· 1024 1037 dom-accessibility-api@0.5.16: 1025 1038 resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==} 1026 1039 1040 + dom-accessibility-api@0.6.3: 1041 + resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} 1042 + 1027 1043 dts-resolver@2.1.2: 1028 1044 resolution: {integrity: sha512-xeXHBQkn2ISSXxbJWD828PFjtyg+/UrMDo7W4Ffcs7+YWCquxU8YjV1KoxuiL+eJ5pg3ll+bC6flVv61L3LKZg==} 1029 1045 engines: {node: '>=20.18.0'} ··· 1281 1297 resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} 1282 1298 engines: {node: '>=0.8.19'} 1283 1299 1300 + indent-string@4.0.0: 1301 + resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==} 1302 + engines: {node: '>=8'} 1303 + 1284 1304 inherits@2.0.4: 1285 1305 resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} 1286 1306 ··· 1484 1504 resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} 1485 1505 engines: {node: '>= 0.6'} 1486 1506 1507 + min-indent@1.0.1: 1508 + resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==} 1509 + engines: {node: '>=4'} 1510 + 1487 1511 minimatch@3.1.2: 1488 1512 resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} 1489 1513 ··· 1615 1639 readdirp@4.1.2: 1616 1640 resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==} 1617 1641 engines: {node: '>= 14.18.0'} 1642 + 1643 + redent@3.0.0: 1644 + resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==} 1645 + engines: {node: '>=8'} 1618 1646 1619 1647 require-directory@2.1.1: 1620 1648 resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} ··· 1768 1796 resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} 1769 1797 engines: {node: '>=8'} 1770 1798 1799 + strip-indent@3.0.0: 1800 + resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==} 1801 + engines: {node: '>=8'} 1802 + 1771 1803 strip-json-comments@3.1.1: 1772 1804 resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} 1773 1805 engines: {node: '>=8'} ··· 2008 2040 engines: {node: '>=10'} 2009 2041 2010 2042 snapshots: 2043 + 2044 + '@adobe/css-tools@4.4.4': {} 2011 2045 2012 2046 '@ark/attest@0.49.0(typescript@5.8.3)': 2013 2047 dependencies: ··· 2486 2520 picocolors: 1.1.1 2487 2521 pretty-format: 27.5.1 2488 2522 2523 + '@testing-library/jest-dom@6.9.1': 2524 + dependencies: 2525 + '@adobe/css-tools': 4.4.4 2526 + aria-query: 5.3.0 2527 + css.escape: 1.5.1 2528 + dom-accessibility-api: 0.6.3 2529 + picocolors: 1.1.1 2530 + redent: 3.0.0 2531 + 2489 2532 '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.26))(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': 2490 2533 dependencies: 2491 2534 '@babel/runtime': 7.28.4 ··· 2844 2887 path-key: 3.1.1 2845 2888 shebang-command: 2.0.0 2846 2889 which: 2.0.2 2890 + 2891 + css.escape@1.5.1: {} 2847 2892 2848 2893 cssstyle@4.6.0: 2849 2894 dependencies: ··· 2879 2924 2880 2925 dom-accessibility-api@0.5.16: {} 2881 2926 2927 + dom-accessibility-api@0.6.3: {} 2928 + 2882 2929 dts-resolver@2.1.2: {} 2883 2930 2884 2931 dunder-proto@1.0.1: ··· 3165 3212 3166 3213 imurmurhash@0.1.4: {} 3167 3214 3215 + indent-string@4.0.0: {} 3216 + 3168 3217 inherits@2.0.4: {} 3169 3218 3170 3219 is-extglob@2.1.1: {} ··· 3335 3384 dependencies: 3336 3385 mime-db: 1.52.0 3337 3386 3387 + min-indent@1.0.1: {} 3388 + 3338 3389 minimatch@3.1.2: 3339 3390 dependencies: 3340 3391 brace-expansion: 1.1.12 ··· 3442 3493 3443 3494 readdirp@4.1.2: {} 3444 3495 3496 + redent@3.0.0: 3497 + dependencies: 3498 + indent-string: 4.0.0 3499 + strip-indent: 3.0.0 3500 + 3445 3501 require-directory@2.1.1: {} 3446 3502 3447 3503 resolve-from@4.0.0: {} ··· 3583 3639 strip-ansi@6.0.1: 3584 3640 dependencies: 3585 3641 ansi-regex: 5.0.1 3642 + 3643 + strip-indent@3.0.0: 3644 + dependencies: 3645 + min-indent: 1.0.1 3586 3646 3587 3647 strip-json-comments@3.1.1: {} 3588 3648