Skip to content

Commit 287bd5d

Browse files
inokawainokawa
committed
Add unit tests for Solid
1 parent e12e997 commit 287bd5d

File tree

4 files changed

+228
-1
lines changed

4 files changed

+228
-1
lines changed

‎package-lock.json‎

Lines changed: 23 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"scripts": {
4343
"build": "rollup -c",
4444
"tsc": "tsc -p . --noEmit",
45-
"test": "vitest run --project=unit --project=react --project=vue",
45+
"test": "vitest run --project=unit --project=react --project=vue --project=solid",
4646
"lint": "eslint '{src,e2e}/**/*.{js,jsx,ts,tsx}'",
4747
"check:svelte": "svelte-check --tsconfig ./tsconfig.svelte.json",
4848
"storybook": "storybook dev -p 6006",
@@ -80,6 +80,7 @@
8080
"@rollup/plugin-terser": "^0.4.4",
8181
"@rollup/plugin-typescript": "^11.1.6",
8282
"@size-limit/preset-small-lib": "^11.2.0",
83+
"@solidjs/testing-library": "^0.8.10",
8384
"@storybook/addon-docs": "^9.1.7",
8485
"@storybook/addon-vitest": "^9.1.7",
8586
"@storybook/react-vite": "^9.1.7",

‎src/solid/VList.spec.tsx‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/**
2+
* @jsxImportSource solid-js
3+
*/
4+
import { it, expect, describe, afterEach, vi } from "vitest";
5+
import { render as _render, cleanup } from "@solidjs/testing-library";
6+
import { VList } from "./VList";
7+
import { setupResizeJsDom } from "../../scripts/spec";
8+
import { type JSX } from "solid-js";
9+
10+
const ITEM_HEIGHT = 50;
11+
const ITEM_WIDTH = 100;
12+
const VIEWPORT_HEIGHT = ITEM_HEIGHT * 10;
13+
14+
setupResizeJsDom({
15+
itemSize: { width: ITEM_WIDTH, height: ITEM_HEIGHT },
16+
viewportSize: { width: ITEM_WIDTH, height: VIEWPORT_HEIGHT },
17+
});
18+
19+
const range = (length: number) => Array.from({ length }).map((_, i) => i);
20+
21+
const render = (...args: Parameters<typeof _render>) => {
22+
const res = _render(...args);
23+
vi.runAllTicks();
24+
return res;
25+
};
26+
27+
afterEach(cleanup);
28+
29+
it("should pass attributes to element", () => {
30+
const wrapper = render(() => (
31+
<VList
32+
data={range(1)}
33+
id="id"
34+
class="class"
35+
tab-index={0}
36+
role="list"
37+
aria-label="test"
38+
style={{ background: "red" }}
39+
>
40+
{(d) => <div>{d}</div>}
41+
</VList>
42+
));
43+
expect(wrapper.baseElement).toMatchSnapshot();
44+
});
45+
46+
describe("vertical", () => {
47+
it("should render 0 children", () => {
48+
const wrapper = render(() => (
49+
<VList data={[]}>{(d) => <div>{d}</div>}</VList>
50+
));
51+
expect(wrapper.baseElement).toMatchSnapshot();
52+
});
53+
54+
it("should render 1 children", () => {
55+
const wrapper = render(() => (
56+
<VList data={range(1)}>{(d) => <div>{d}</div>}</VList>
57+
));
58+
expect(wrapper.baseElement).toMatchSnapshot();
59+
});
60+
61+
it("should render 5 children", () => {
62+
const wrapper = render(() => (
63+
<VList data={range(5)}>{(d) => <div>{d}</div>}</VList>
64+
));
65+
expect(wrapper.baseElement).toMatchSnapshot();
66+
});
67+
68+
it("should render 100 children", () => {
69+
const wrapper = render(() => (
70+
<VList data={range(100)}>{(d) => <div>{d}</div>}</VList>
71+
));
72+
expect(wrapper.baseElement).toMatchSnapshot();
73+
});
74+
75+
it("should render 1000 children", () => {
76+
const wrapper = render(() => (
77+
<VList data={range(1000)}>{(d) => <div>{d}</div>}</VList>
78+
));
79+
expect(wrapper.baseElement).toMatchSnapshot();
80+
});
81+
82+
it("should render 10000 children", () => {
83+
const wrapper = render(() => (
84+
<VList data={range(10000)}>{(d) => <div>{d}</div>}</VList>
85+
));
86+
expect(wrapper.baseElement).toMatchSnapshot();
87+
});
88+
89+
it("should render component", () => {
90+
const Comp = (props: { children: JSX.Element }) => (
91+
<div>{props.children}</div>
92+
);
93+
const { asFragment } = render(() => (
94+
<VList data={range(3)}>{(d) => <Comp>{d}</Comp>}</VList>
95+
));
96+
expect(asFragment()).toMatchSnapshot();
97+
});
98+
99+
it("should render with given width / height", () => {
100+
const wrapper = render(() => (
101+
<VList data={range(5)} style={{ width: "100px", height: "800px" }}>
102+
{(d) => <div>{d}</div>}
103+
</VList>
104+
));
105+
expect(wrapper.baseElement).toMatchSnapshot();
106+
expect(wrapper.baseElement).toMatchSnapshot();
107+
});
108+
});
109+
110+
describe("horizontal", () => {
111+
it("should render 0 children", () => {
112+
const wrapper = render(() => (
113+
<VList data={[]} horizontal>
114+
{(d) => <div>{d}</div>}
115+
</VList>
116+
));
117+
expect(wrapper.baseElement).toMatchSnapshot();
118+
});
119+
120+
it("should render 1 children", () => {
121+
const wrapper = render(() => (
122+
<VList data={range(1)} horizontal>
123+
{(d) => <div>{d}</div>}
124+
</VList>
125+
));
126+
expect(wrapper.baseElement).toMatchSnapshot();
127+
});
128+
129+
it("should render 5 children", () => {
130+
const wrapper = render(() => (
131+
<VList data={range(5)} horizontal>
132+
{(d) => <div>{d}</div>}
133+
</VList>
134+
));
135+
expect(wrapper.baseElement).toMatchSnapshot();
136+
});
137+
138+
it("should render 100 children", () => {
139+
const wrapper = render(() => (
140+
<VList data={range(100)} horizontal>
141+
{(d) => <div>{d}</div>}
142+
</VList>
143+
));
144+
expect(wrapper.baseElement).toMatchSnapshot();
145+
});
146+
147+
it("should render 1000 children", () => {
148+
const wrapper = render(() => (
149+
<VList data={range(1000)} horizontal>
150+
{(d) => <div>{d}</div>}
151+
</VList>
152+
));
153+
expect(wrapper.baseElement).toMatchSnapshot();
154+
});
155+
156+
it("should render 10000 children", () => {
157+
const wrapper = render(() => (
158+
<VList data={range(10000)} horizontal>
159+
{(d) => <div>{d}</div>}
160+
</VList>
161+
));
162+
expect(wrapper.baseElement).toMatchSnapshot();
163+
});
164+
165+
it("should render component", () => {
166+
const Comp = (props: { children: JSX.Element }) => (
167+
<div>{props.children}</div>
168+
);
169+
const { asFragment } = render(() => (
170+
<VList data={range(3)} horizontal>
171+
{(d) => <Comp>{d}</Comp>}
172+
</VList>
173+
));
174+
expect(asFragment()).toMatchSnapshot();
175+
});
176+
177+
it("should render with given width / height", () => {
178+
const wrapper = render(() => (
179+
<VList
180+
data={range(5)}
181+
style={{ width: "100px", height: "800px" }}
182+
horizontal
183+
>
184+
{(d) => <div>{d}</div>}
185+
</VList>
186+
));
187+
expect(wrapper.baseElement).toMatchSnapshot();
188+
expect(wrapper.baseElement).toMatchSnapshot();
189+
});
190+
});

‎vitest.config.mts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { fileURLToPath } from "node:url";
44
import react from "@vitejs/plugin-react";
55
import vue from "@vitejs/plugin-vue";
66
import vueJsx from "@vitejs/plugin-vue-jsx";
7+
import solid from "vite-plugin-solid";
78
import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
89

910
const dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -39,6 +40,18 @@ export default defineConfig({
3940
setupFiles: ["./scripts/spec-setup.ts"],
4041
},
4142
},
43+
{
44+
plugins: [solid()],
45+
test: {
46+
name: "solid",
47+
dir: "src/solid",
48+
environment: "jsdom",
49+
setupFiles: ["./scripts/spec-setup.ts"],
50+
},
51+
resolve: {
52+
conditions: ["development", "browser"],
53+
},
54+
},
4255
{
4356
extends: true,
4457
plugins: [

0 commit comments

Comments
 (0)