test: add tests (#52)

## Motivation

adds test for hooks
also sets up workflows for PRs

## Issues closed

closes #22

.github/workflows/test-client.yml

@@ -0,0 +1,26 @@
+name: Client Tests
+
+on:
+  push:
+    branches: [ alpha, beta, rc, main ]
+  pull_request:
+    types: [ opened, synchronize ]
+    branches: [ alpha, beta, rc, main ]
+
+jobs:
+  test-client:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm install
+      - name: Run Client tests
+        run: npm run test:client

.github/workflows/test-e2e.yml

@@ -0,0 +1,26 @@
+name: e2e Tests
+
+on:
+  push:
+    branches: [ alpha, beta, rc, main ]
+  pull_request:
+    types: [opened, synchronize]
+    branches: [ alpha, beta, rc, main ]
+
+jobs:
+  test-e2e:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm install
+      - name: Run e2e tests
+        run: npm run test:e2e

.github/workflows/test-electron.yml

@@ -0,0 +1,26 @@
+name: Electron Tests
+
+on:
+  push:
+    branches: [ alpha, beta, rc, main ]
+  pull_request:
+    types: [opened, synchronize]
+    branches: [ alpha, beta, rc, main ]
+
+jobs:
+  test-electron:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm install
+      - name: Run Electron tests
+        run: npm run test:electron

.gitignore

@@ -27,3 +27,4 @@ live-canvas-generate-image-output.png.tmp.png
 
 # test
 coverage
+playwright-report

jest.config.client.ts

@@ -0,0 +1,41 @@
+import { defaults } from "jest-config";
+
+// Adjust the import path to your tsconfig.json file
+
+const jestConfig = {
+	...defaults,
+	roots: ["<rootDir>/src/client"],
+	testMatch: ["**/?(*.)test.ts?(x)"],
+	transform: {
+		"^.+\\.(t|j)sx?$": [
+			"@swc/jest",
+			{
+				jsc: {
+					transform: {
+						react: {
+							runtime: "automatic",
+						},
+					},
+				},
+			},
+		],
+	},
+	moduleNameMapper: {
+		"@/(.*)": "<rootDir>/src/client/$1",
+		"#/(.*)": "<rootDir>/src/shared/$1",
+	},
+	collectCoverage: true,
+	coverageDirectory: "./coverage",
+	coverageProvider: "v8",
+	coverageReporters: ["lcov", "text", "json"],
+	coverageThreshold: {
+		global: {
+			lines: 80,
+		},
+	},
+	testEnvironment: "jsdom",
+	transformIgnorePatterns: ["/node_modules/"],
+	extensionsToTreatAsEsm: [".ts", ".tsx"],
+};
+
+export default jestConfig;

jest.config.ts → jest.config.electron.ts

@@ -4,10 +4,10 @@ import { defaults } from "jest-config";
 
 const jestConfig = {
 	...defaults,
-	testMatch: ["**/?(*.)test.ts?(x)"],
-	testPathIgnorePatterns: [".e2e."],
+	roots: ["<rootDir>/src/electron"],
+	testMatch: ["**/?(*.)test.ts"],
 	transform: {
-		"^.+\\.(t|j)sx?$": "@swc/jest",
+		"^.+\\.ts$": ["@swc/jest"],
 	},
 	moduleNameMapper: {
 		"@/(.*)": "<rootDir>/src/electron/future/$1",
@@ -23,8 +23,8 @@ const jestConfig = {
 		},
 	},
 	transformIgnorePatterns: ["/node_modules/"],
-	extensionsToTreatAsEsm: [".ts", ".tsx"],
-	setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+	extensionsToTreatAsEsm: [".ts"],
+	setupFilesAfterEnv: ["<rootDir>/jest.setup.electron.ts"],
 };
 
 export default jestConfig;

jest.setup.ts → jest.setup.electron.ts

@@ -1,11 +1,4 @@
 jest.mock("electron", () => {
-	const mockBrowserWindow = jest.fn().mockImplementation(() => ({
-		loadURL: jest.fn(),
-		on: jest.fn(),
-		once: jest.fn(),
-		close: jest.fn(),
-	}));
-
 	const mockWebContents = {
 		send: jest.fn(),
 	};
@@ -17,8 +10,13 @@ jest.mock("electron", () => {
 		close: jest.fn(),
 		webContents: mockWebContents,
 	};
-
-	mockBrowserWindow.getFocusedWindow = jest.fn(() => mockFocusedWindow);
+	const mockBrowserWindow = jest.fn().mockImplementation(() => ({
+		loadURL: jest.fn(),
+		on: jest.fn(),
+		once: jest.fn(),
+		close: jest.fn(),
+		getFocusedWindow: jest.fn(() => mockFocusedWindow),
+	}));
 
 	return {
 		BrowserWindow: mockBrowserWindow,

package.json

@@ -21,9 +21,11 @@
     "toc": "npx markdown-toc README.md -i",
     "tsc:noEmit": "tsc --noEmit",
     "caption:test": "ts-node-esm main/captions/misc.ts",
-    "test:unit": "jest --runInBand --config jest.config.ts --verbose",
+    "test:electron": "jest --runInBand --config jest.config.electron.ts --verbose",
+    "test:client": "jest --runInBand --config jest.config.client.ts --verbose",
     "pretest:e2e": "nextron build --no-pack",
-    "test:e2e": "npx playwright test"
+    "test:e2e:local": "npx playwright test",
+    "test:e2e": "xvfb-run --auto-servernum --server-args=\"-screen 0 1280x960x24\" -- npx playwright test"
   },
   "dependencies": {
     "electron-context-menu": "3.6.1",

playwright/index.test.ts

@@ -7,7 +7,9 @@ let page: Page;
 
 test.beforeAll(async () => {
 	// Use  package.main
-	electronApp = await electron.launch({ args: ["."] });
+	electronApp = await electron.launch({
+		args: ["."],
+	});
 	const isPackaged = await electronApp.evaluate(async ({ app }) => app.isPackaged);
 
 	expect(isPackaged).toBe(false);

src/client/ions/hooks/__tests__/color-scheme.test.tsx

@@ -0,0 +1,38 @@
+import type { Mode } from "@mui/system/cssVars/useCurrentColorScheme";
+import { renderHook, act } from "@testing-library/react";
+
+import { useSsrColorScheme } from "../color-scheme";
+
+function createMockUseColorScheme(initialMode = "system") {
+	let internalMode = initialMode;
+
+	return jest.fn().mockImplementation(() => ({
+		mode: internalMode,
+		setMode(newMode: Mode) {
+			internalMode = newMode;
+		},
+	}));
+}
+
+jest.mock("@mui/joy/styles", () => ({
+	useColorScheme: createMockUseColorScheme(),
+}));
+
+describe("useSsrColorScheme", () => {
+	it("should set initial mode to 'system'", () => {
+		const { result } = renderHook(() => useSsrColorScheme());
+		expect(result.current.mode).toBe("system");
+	});
+
+	it("should change mode when setMode is called", () => {
+		const { result, rerender } = renderHook(() => useSsrColorScheme()); // Get the rerender function
+
+		act(() => {
+			result.current.setMode("light");
+		});
+
+		rerender();
+
+		expect(result.current.mode).toBe("light");
+	});
+});

src/client/ions/hooks/__tests__/columns.test.tsx

@@ -0,0 +1,30 @@
+// UseColumns.test.tsx
+import { extendTheme, ThemeProvider } from "@mui/joy/styles";
+import { render } from "@testing-library/react";
+import React from "react";
+import "@testing-library/jest-dom";
+
+import { useColumns } from "../columns"; // Adjust the import path as necessary
+
+// Mock component to utilize the useColumns hook
+function MockComponent({ xs, sm, md, lg }: { xs: number; sm: number; md: number; lg: number }) {
+	const columns = useColumns({ xs, sm, md, lg });
+	return <div data-testid="column-count">{columns}</div>;
+}
+
+describe("useColumns", () => {
+	const theme = extendTheme(); // Use your custom theme if you have one
+
+	function renderWithTheme(properties: { xs: number; sm: number; md: number; lg: number }) {
+		return render(
+			<ThemeProvider theme={theme}>
+				<MockComponent {...properties} />
+			</ThemeProvider>
+		);
+	}
+
+	it("should return xs value for initial render", () => {
+		const { getByTestId } = renderWithTheme({ xs: 2, sm: 4, md: 6, lg: 8 });
+		expect(getByTestId("column-count")).toHaveTextContent("2");
+	});
+});