test: add unit tests

Author: vault-developer

README.md

@@ -16,7 +16,6 @@ It visualizes the Call Stack, Web APIs, Tasks, Microtasks, and Render phase.
 ![event-loop-image-1](https://github.com/user-attachments/assets/72b9efe9-1480-49a0-88d5-5c31461a4276)
 ![event-loop-image-2](https://github.com/user-attachments/assets/b6dccbd4-58a0-44ce-a6be-73bbd549b84e)
 
-
 ### Demo:
 
 Feel free to try it here: https://event-loop-explorer.vercel.app/
@@ -52,7 +51,6 @@ npm run dev
 
 ### Future Plans:
 
-- [ ] add unit tests;
 - [ ] handle todos in the codebase;
 - [ ] check js parsing edge cases, including `new Promise((res) => {res(console.log(4))})`;
 - [ ] replace window.confirm with error boundary

app/(main)/header/themeToggle.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { ThemeToggle } from './themeToggle';
+import { useTheme } from 'next-themes';
+
+jest.mock('next-themes', () => ({
+	useTheme: jest.fn(),
+}));
+
+afterEach(cleanup);
+
+describe('ThemeToggle', () => {
+	it('should render Sun and Moon icons', () => {
+		(useTheme as jest.Mock).mockReturnValue({
+			theme: 'dark',
+			setTheme: jest.fn(),
+		});
+		render(<ThemeToggle />);
+
+		const moonIcon = screen.getByTestId('moon-icon');
+		const sunIcon = screen.getByTestId('sun-icon');
+		expect(moonIcon).toBeInTheDocument();
+		expect(sunIcon).toBeInTheDocument();
+	});
+
+	it('should toggle light theme on button click', () => {
+		const setThemeMock = jest.fn();
+		(useTheme as jest.Mock).mockReturnValue({
+			theme: 'light',
+			setTheme: setThemeMock,
+		});
+		render(<ThemeToggle />);
+		const toggleButton = screen.getByRole('button', { name: 'Toggle theme' });
+		fireEvent.click(toggleButton);
+		expect(setThemeMock).toHaveBeenCalledWith('dark');
+	});
+
+	it('should toggle dark theme on button click', () => {
+		const setThemeMock = jest.fn();
+		(useTheme as jest.Mock).mockReturnValue({
+			theme: 'dark',
+			setTheme: setThemeMock,
+		});
+		render(<ThemeToggle />);
+		const toggleButton = screen.getByRole('button', { name: 'Toggle theme' });
+		fireEvent.click(toggleButton);
+		expect(setThemeMock).toHaveBeenCalledWith('light');
+	});
+});

app/(main)/header/themeToggle.tsx

@@ -14,10 +14,12 @@ export function ThemeToggle() {
 			data-testid="theme-toggle"
 		>
 			<Sun
+				data-testid="sun-icon"
 				className="absolute scale-100 dark:scale-0 rotate-0 dark:rotate-90 transition-all size-6"
 				size={24}
 			/>
 			<Moon
+				data-testid="moon-icon"
 				className="absolute scale-0 dark:scale-100 rotate-90 dark:rotate-0 transition-all size-6"
 				size={24}
 			/>

app/(main)/page.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Page from './page';
+
+describe('Page', () => {
+	it('renders without crashing', () => {
+		render(<Page />);
+		expect(screen.getByText('Event loop explorer')).toBeInTheDocument();
+	});
+
+	it('renders all sections', () => {
+		render(<Page />);
+		expect(screen.getByText('Code Editor')).toBeInTheDocument();
+		expect(screen.getByText('Web API')).toBeInTheDocument();
+		expect(
+			screen.getByText('RequestAnimationFrame callbacks')
+		).toBeInTheDocument();
+		expect(screen.getByText('Callstack')).toBeInTheDocument();
+		expect(screen.getByText('Console')).toBeInTheDocument();
+		expect(screen.getByText('Tasks Queue')).toBeInTheDocument();
+		expect(screen.getByText('Microtasks Queue')).toBeInTheDocument();
+		expect(screen.getByText('Event loop')).toBeInTheDocument();
+	});
+});

app/layout.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Layout from './layout';
+
+describe('Layout', () => {
+	it('renders without crashing', () => {
+		render(
+			<Layout>
+				<div>Test Content</div>
+			</Layout>
+		);
+		expect(screen.getByText('Test Content')).toBeInTheDocument();
+	});
+});

components/progressCard.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ProgressCard } from './progressCard';
+
+jest.mock('@/store/store', () => ({
+	useTimeStore: {
+		getState: jest.fn().mockReturnValue({ time: 1000 }),
+	},
+}));
+
+describe('ProgressCard Component', () => {
+	it('should render the component with title', () => {
+		render(<ProgressCard text="Test Title" start={0} end={1000} />);
+		expect(screen.getByText('Test Title')).toBeInTheDocument();
+	});
+});

jest.config.js

@@ -7,7 +7,7 @@ const customJestConfig = {
 	testEnvironment: 'jsdom',
 	collectCoverageFrom: [
 		'{app,components,store,utils}/**/*.{ts,tsx}',
-		'!components/chadcdn',
+		'!components/chadcdn/*.tsx',
 	],
 	testMatch: ['**/*.test.(ts|tsx)'],
 	transform: {

jest.setup.ts

@@ -1 +1,15 @@
 import '@testing-library/jest-dom';
+
+Object.defineProperty(window, 'matchMedia', {
+	writable: true,
+	value: jest.fn().mockImplementation((query) => ({
+		matches: false,
+		media: query,
+		onchange: null,
+		addListener: jest.fn(), // Deprecated
+		removeListener: jest.fn(), // Deprecated
+		addEventListener: jest.fn(),
+		removeEventListener: jest.fn(),
+		dispatchEvent: jest.fn(),
+	})),
+});