test: add tests covering basic functionality (#2)

* test: added basic tests for component utilizing context

* test: refactor component test, remove separate mocks file

* refactor: move tests directory in src

bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = "./happydom.ts"

happydom.ts

@@ -0,0 +1,3 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+
+GlobalRegistrator.register();

package.json

@@ -32,14 +32,17 @@
 	"devDependencies": {
 		"@biomejs/biome": "1.7.1",
 		"@changesets/cli": "^2.27.1",
+		"@happy-dom/global-registrator": "^14.10.1",
+		"@testing-library/react": "^15.0.7",
+		"@testing-library/user-event": "^14.5.2",
 		"@types/bun": "^1.1.0",
 		"@types/lodash": "^4.17.0",
+		"@types/react": "^18.2.20",
+		"react": "^18.2.0",
 		"tsup": "^8.0.2",
 		"type-testing": "^0.2.0",
 		"typescript": "^5.4.5",
-		"zustand": "^4.5.2",
-		"@types/react": "^18.2.20",
-		"react": "^18.2.0"
+		"zustand": "^4.5.2"
 	},
 	"peerDependencies": {
 		"zustand": ">= 4",

src/tests/component.test.tsx

@@ -0,0 +1,96 @@
+import { afterEach, expect, test } from 'bun:test';
+import { cleanup, render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { create } from 'zustand';
+import { createZustandContext } from '../context';
+
+type Cat = string;
+
+type CatStore = {
+	cats: Cat[];
+	addCat: (cat: Cat) => void;
+	removeCat: (cat: Cat) => void;
+};
+
+const allCats = ['Salem', 'Mimo', 'Tapi'];
+const newCat = 'Millie';
+
+const [CatsProvider, useCatsStore] = createZustandContext((initialState: { cats: Cat[] }) =>
+	create<CatStore>((set) => ({
+		cats: initialState.cats,
+		addCat: (cat) => set((state) => ({ cats: [...state.cats, cat] })),
+		removeCat: (cat) => set((state) => ({ cats: state.cats.filter((c) => c !== cat) })),
+	})),
+);
+
+const CatsList = () => {
+	const cats = useCatsStore((state) => state.cats);
+	const addCat = useCatsStore((state) => state.addCat);
+	const removeCat = useCatsStore((state) => state.removeCat);
+
+	return (
+		<div>
+			<ul>
+				{cats.map((cat) => (
+					<li key={cat}>{cat}</li>
+				))}
+			</ul>
+			<button type="button" onClick={() => addCat(newCat)}>
+				Add new cat
+			</button>
+			<button type="button" onClick={() => removeCat(newCat)}>
+				Remove new cat
+			</button>
+		</div>
+	);
+};
+
+afterEach(cleanup);
+
+test('should initialize state correctly', () => {
+	render(
+		<CatsProvider initialValue={{ cats: allCats }}>
+			<CatsList />
+		</CatsProvider>,
+	);
+
+	for (const cat of allCats) {
+		expect(screen.getByText(cat)).toBeTruthy();
+	}
+});
+
+test('should add new cat', async () => {
+	const user = userEvent.setup();
+
+	render(
+		<CatsProvider initialValue={{ cats: allCats }}>
+			<CatsList />
+		</CatsProvider>,
+	);
+
+	await user.click(screen.getByRole('button', { name: 'Add new cat' }));
+
+	for (const cat of allCats) {
+		expect(screen.getByText(cat)).toBeTruthy();
+	}
+
+	expect(screen.getByText(newCat)).toBeTruthy();
+});
+
+test('should remove added cat', async () => {
+	const user = userEvent.setup();
+
+	render(
+		<CatsProvider initialValue={{ cats: allCats }}>
+			<CatsList />
+		</CatsProvider>,
+	);
+
+	await user.click(screen.getByRole('button', { name: 'Remove new cat' }));
+
+	for (const cat of allCats) {
+		expect(screen.getByText(cat)).toBeTruthy();
+	}
+
+	expect(screen.queryByText(newCat)).toBeFalsy();
+});