test(core): add more unit tests

Author: vault-developer

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Header } from './header';
+
+describe('Header Component', () => {
+	beforeEach(() => render(<Header />));
+
+	it('should render the header title', () => {
+		const titleElement = screen.getByText(/Event loop explorer/i);
+		expect(titleElement).toBeInTheDocument();
+	});
+
+	it('should render the GitHub link', () => {
+		const githubLink = screen.getByRole('link');
+		expect(githubLink).toBeInTheDocument();
+		expect(githubLink).toHaveAttribute(
+			'href',
+			'https://github.com/vault-developer/event-loop-explorer'
+		);
+	});
+
+	it('should render the ThemeToggle component', () => {
+		const themeToggle = screen.getByTestId('theme-toggle');
+		expect(themeToggle).toBeInTheDocument();
+	});
+});

app/(main)/header/themeToggle.tsx

@@ -7,7 +7,12 @@ export function ThemeToggle() {
 	const onToggle = () => setTheme(theme === 'light' ? 'dark' : 'light');
 
 	return (
-		<Button variant="ghost" size="iconBig" onClick={onToggle}>
+		<Button
+			variant="ghost"
+			size="iconBig"
+			onClick={onToggle}
+			data-testid="theme-toggle"
+		>
 			<Sun
 				className="absolute scale-100 dark:scale-0 rotate-0 dark:rotate-90 transition-all size-6"
 				size={24}

app/(main)/page.tsx

@@ -3,7 +3,7 @@
 import { Header } from './header/header';
 import { Configurator } from '@/app/(main)/sections/configurator/configurator';
 import { WebApi } from '@/app/(main)/sections/webApi';
-import { RequestAnimationFrame } from '@/app/(main)/sections/requestAnimaitionFrame';
+import { RequestAnimationFrame } from '@/app/(main)/sections/requestAnimationFrame';
 import { Callstack } from '@/app/(main)/sections/callstack';
 import { Console } from '@/app/(main)/sections/console';
 import { TasksQueue } from '@/app/(main)/sections/tasksQueue';

app/(main)/sections/callstack.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Callstack } from '@/app/(main)/sections/callstack';
+
+jest.mock('@/store/store', () => ({
+	useQueueManagerStore: jest
+		.fn()
+		.mockImplementation(() => ['stack-1', 'stack-2']),
+}));
+
+describe('Callstack Component', () => {
+	beforeEach(() => render(<Callstack />));
+
+	it('should render the callstack title', () => {
+		const titleElement = screen.getByText(/Callstack/i);
+		expect(titleElement).toBeInTheDocument();
+	});
+
+	it('should render callstacks', () => {
+		const callstack1 = screen.getByText(/stack-1/i);
+		const callstack2 = screen.getByText(/stack-2/i);
+		expect(callstack1).toBeInTheDocument();
+		expect(callstack2).toBeInTheDocument();
+	});
+
+	it('should not render the modal by default', async () => {
+		const descriptionElements = screen.queryAllByText(
+			/A call stack is a mechanism for an interpreter to keep track of its place/i
+		);
+		expect(descriptionElements.length).toBe(0);
+	});
+
+	it('should render the modal after icon click', async () => {
+		const modalButton = screen.getByRole('button');
+		await modalButton.click();
+		const descriptionElement = screen.getByText(
+			/A call stack is a mechanism for an interpreter to keep track of its place/i
+		);
+		expect(descriptionElement).toBeInTheDocument();
+	});
+});

app/(main)/sections/console.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { Console } from './console';
+
+jest.mock('@/store/store', () => ({
+	useQueueManagerStore: jest.fn().mockImplementation(() => ['log1', 'log2']),
+}));
+
+describe('Console Component', () => {
+	beforeEach(() => render(<Console />));
+
+	it('should render the console title', () => {
+		const titleElement = screen.getByText(/Console/i);
+		expect(titleElement).toBeInTheDocument();
+	});
+
+	it('should render logs', () => {
+		const log1 = screen.getByText(/log1/i);
+		const log2 = screen.getByText(/log2/i);
+		expect(log1).toBeInTheDocument();
+		expect(log2).toBeInTheDocument();
+	});
+
+	it('should not render the modal by default', async () => {
+		const descriptionElements = screen.queryAllByText(
+			/The browser console is a built-in tool/i
+		);
+		expect(descriptionElements.length).toBe(0);
+	});
+
+	it('should render the modal after icon click', async () => {
+		const modalButton = screen.getByRole('button');
+		await modalButton.click();
+		const descriptionElement = screen.getByText(
+			/The browser console is a built-in tool/i
+		);
+		expect(descriptionElement).toBeInTheDocument();
+	});
+});

app/(main)/sections/microtasksQueue.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MicrotasksQueue } from '@/app/(main)/sections/microtasksQueue';
+
+jest.mock('@/store/store', () => ({
+	useQueueManagerStore: jest.fn().mockImplementation(() => ['ms1', 'ms2']),
+}));
+
+describe('Microtasks Queue Component', () => {
+	beforeEach(() => render(<MicrotasksQueue />));
+
+	it('should render the microtask title', () => {
+		const titleElement = screen.getByText(/Microtasks Queue/i);
+		expect(titleElement).toBeInTheDocument();
+	});
+
+	it('should render logs', () => {
+		const ms1 = screen.getByText(/ms1/i);
+		const ms2 = screen.getByText(/ms2/i);
+		expect(ms1).toBeInTheDocument();
+		expect(ms2).toBeInTheDocument();
+	});
+
+	it('should not render the modal by default', async () => {
+		const descriptionElements = screen.queryAllByText(
+			/A microtask is a short function which is executed/i
+		);
+		expect(descriptionElements.length).toBe(0);
+	});
+
+	it('should render the modal after icon click', async () => {
+		const modalButton = screen.getByRole('button');
+		await modalButton.click();
+		const descriptionElement = screen.getByText(
+			/A microtask is a short function which is executed/i
+		);
+		expect(descriptionElement).toBeInTheDocument();
+	});
+});

app/(main)/sections/requestAnimationFrame.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { RequestAnimationFrame } from '@/app/(main)/sections/requestAnimationFrame';
+
+jest.mock('@/store/store', () => ({
+	useQueueManagerStore: jest.fn().mockImplementation(() => ['raf1', 'raf2']),
+}));
+
+describe('RequestAnimationFrame Callbacks Component', () => {
+	beforeEach(() => render(<RequestAnimationFrame />));
+
+	it('should render the requestAnimationFrame title', () => {
+		const titleElement = screen.getByText(/RequestAnimationFrame callbacks/i);
+		expect(titleElement).toBeInTheDocument();
+	});
+
+	it('should render elements', () => {
+		const raf1 = screen.getByText(/raf1/i);
+		const raf2 = screen.getByText(/raf2/i);
+		expect(raf1).toBeInTheDocument();
+		expect(raf2).toBeInTheDocument();
+	});
+
+	it('should not render the modal by default', async () => {
+		const descriptionElements = screen.queryAllByText(
+			/The window.requestAnimationFrame\(\) method tells the browser/i
+		);
+		expect(descriptionElements.length).toBe(0);
+	});
+
+	it('should render the modal after icon click', async () => {
+		const modalButton = screen.getByRole('button');
+		await modalButton.click();
+		const descriptionElement = screen.getByText(
+			/The window.requestAnimationFrame\(\) method tells the browser/i
+		);
+		expect(descriptionElement).toBeInTheDocument();
+	});
+});

…ain)/sections/requestAnimaitionFrame.tsx …main)/sections/requestAnimationFrame.tsxapp/(main)/sections/requestAnimaitionFrame.tsx renamed to app/(main)/sections/requestAnimationFrame.tsx app/(main)/sections/requestAnimaitionFrame.tsx renamed to app/(main)/sections/requestAnimationFrame.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { TasksQueue } from '@/app/(main)/sections/tasksQueue';
+
+jest.mock('@/store/store', () => ({
+	useQueueManagerStore: jest.fn().mockImplementation(() => ['task1', 'task2']),
+}));
+
+describe('Tasks Queue Component', () => {
+	beforeEach(() => render(<TasksQueue />));
+
+	it('should render the task title', () => {
+		const titleElement = screen.getByText(/Tasks Queue/i);
+		expect(titleElement).toBeInTheDocument();
+	});
+
+	it('should render logs', () => {
+		const task1 = screen.getByText(/task1/i);
+		const task2 = screen.getByText(/task2/i);
+		expect(task1).toBeInTheDocument();
+		expect(task2).toBeInTheDocument();
+	});
+
+	it('should not render the modal by default', async () => {
+		const descriptionElements = screen.queryAllByText(
+			/A task is anything which is scheduled to be run/i
+		);
+		expect(descriptionElements.length).toBe(0);
+	});
+
+	it('should render the modal after icon click', async () => {
+		const modalButton = screen.getByRole('button');
+		await modalButton.click();
+		const descriptionElement = screen.getByText(
+			/A task is anything which is scheduled to be run/i
+		);
+		expect(descriptionElement).toBeInTheDocument();
+	});
+});

app/(main)/sections/tasksQueue.test.tsx

@@ -29,7 +29,11 @@ export function InfoContainer({
 			<div className="flex items-center justify-between gap-2">
 				<h3>{title}</h3>
 				<Modal title={title} description={description}>
-					<Button variant="ghost" size="iconSmall">
+					<Button
+						variant="ghost"
+						size="iconSmall"
+						data-testid="info-container-button"
+					>
 						<Info className="size-5" />
 					</Button>
 				</Modal>