50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/app/(main)/sections/callstack.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, screen } from '@testing-library/react';
3 | import '@testing-library/jest-dom';
4 | import { Callstack } from '@/app/(main)/sections/callstack';
5 |
6 | jest.mock('@/store/store', () => ({
7 | useQueueManagerStore: jest
8 | .fn()
9 | .mockImplementation(() => ['stack-1', 'stack-2']),
10 | }));
11 |
12 | describe('Callstack Component', () => {
13 | beforeEach(() => render());
14 |
15 | it('should render the callstack title', () => {
16 | const titleElement = screen.getByText(/Callstack/i);
17 | expect(titleElement).toBeInTheDocument();
18 | });
19 |
20 | it('should render callstacks', () => {
21 | const callstack1 = screen.getByText(/stack-1/i);
22 | const callstack2 = screen.getByText(/stack-2/i);
23 | expect(callstack1).toBeInTheDocument();
24 | expect(callstack2).toBeInTheDocument();
25 | });
26 |
27 | it('should not render the modal by default', async () => {
28 | const descriptionElements = screen.queryAllByText(
29 | /A call stack is a mechanism for an interpreter to keep track of its place/i
30 | );
31 | expect(descriptionElements.length).toBe(0);
32 | });
33 |
34 | it('should render the modal after icon click', async () => {
35 | const modalButton = screen.getByRole('button');
36 | await modalButton.click();
37 | const descriptionElement = screen.getByText(
38 | /A call stack is a mechanism for an interpreter to keep track of its place/i
39 | );
40 | expect(descriptionElement).toBeInTheDocument();
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/app/(main)/sections/callstack.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import { InfoContainer } from '@/components/infoContainer';
3 | import { List } from '@/components/list';
4 | import { Card } from '@/components/card';
5 | import { useQueueManagerStore } from '@/store/store';
6 |
7 | const description = (
8 | <>
9 |
10 | A call stack is a mechanism for an interpreter to keep track of its place
11 | in a script that calls multiple functions — what function is currently
12 | being run and what functions are called from within that function, etc.
13 |
14 |
15 | When a script calls a function, the interpreter adds it to the call stack
16 | and then starts carrying out the function.
17 |
18 |
19 | When the current function is finished, the interpreter takes it off the
20 | stack and resumes execution where it left off in the last code listing.
21 |
22 |
23 | If the stack takes up more space than it was assigned, a "stack
24 | overflow" error is thrown.
25 |
10 | The browser console is a built-in tool within web browsers that allows
11 | developers and users to view and interact with a web page's internal
12 | state.
13 |
14 |
15 | It provides a way to examine error messages, debug JavaScript code, and
16 | monitor network activity, ultimately helping with troubleshooting and
17 | development.
18 |
8 | The event loop is a fundamental concept in browser that manages the
9 | execution of code, handling of events, and updating of the user interface.
10 |
11 |
12 | The event loop continuously checks for and processes events and queued
13 | tasks in a specific order:
14 |
15 |
16 |
1. Execute all synchronous code in the call stack
17 |
18 | 2. Check the microtask queue (e.g., Promise callbacks) and execute all
19 | tasks.
20 |
21 |
22 | 3. Check the macrotask queue (e.g., setTimeout, DOM events) and execute
23 | one task.
24 |
203 | );
204 | };
205 |
--------------------------------------------------------------------------------
/app/(main)/sections/microtasksQueue.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render, screen } from '@testing-library/react';
3 | import '@testing-library/jest-dom';
4 | import { MicrotasksQueue } from '@/app/(main)/sections/microtasksQueue';
5 |
6 | jest.mock('@/store/store', () => ({
7 | useQueueManagerStore: jest.fn().mockImplementation(() => ['ms1', 'ms2']),
8 | }));
9 |
10 | describe('Microtasks Queue Component', () => {
11 | beforeEach(() => render());
12 |
13 | it('should render the microtask title', () => {
14 | const titleElement = screen.getByText(/Microtasks Queue/i);
15 | expect(titleElement).toBeInTheDocument();
16 | });
17 |
18 | it('should render logs', () => {
19 | const ms1 = screen.getByText(/ms1/i);
20 | const ms2 = screen.getByText(/ms2/i);
21 | expect(ms1).toBeInTheDocument();
22 | expect(ms2).toBeInTheDocument();
23 | });
24 |
25 | it('should not render the modal by default', async () => {
26 | const descriptionElements = screen.queryAllByText(
27 | /A microtask is a short function which is executed/i
28 | );
29 | expect(descriptionElements.length).toBe(0);
30 | });
31 |
32 | it('should render the modal after icon click', async () => {
33 | const modalButton = screen.getByRole('button');
34 | await modalButton.click();
35 | const descriptionElement = screen.getByText(
36 | /A microtask is a short function which is executed/i
37 | );
38 | expect(descriptionElement).toBeInTheDocument();
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/app/(main)/sections/microtasksQueue.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import { InfoContainer } from '@/components/infoContainer';
3 | import { Card } from '@/components/card';
4 | import { List } from '@/components/list';
5 | import { useQueueManagerStore } from '@/store/store';
6 |
7 | const description = (
8 | <>
9 |
10 | A microtask is a short function which is executed after the function or
11 | program which created it exits and only if the JavaScript execution stack
12 | is empty, but before returning control to the event loop being used by the
13 | user agent to drive the script's execution environment.
14 |
10 | The window.requestAnimationFrame() method tells the browser you wish to
11 | perform an animation. It requests the browser to call a user-supplied
12 | callback function before the next repaint.
13 |
14 |
15 | The frequency of calls to the callback function will generally match the
16 | display refresh rate. The most common refresh rate is 60hz, (60
17 | cycles/frames per second), though 75hz, 120hz, and 144hz are also widely
18 | used.
19 |
20 |
21 | requestAnimationFrame() calls are paused in most browsers when running in
22 | background tabs or hidden iframes, in order to improve performance and
23 | battery life.
24 |
10 | A task is anything which is scheduled to be run by the standard mechanisms
11 | such as initially starting to run a program, an event being dispatched
12 | asynchronously, or an interval or timeout being fired. These all get
13 | scheduled on the task queue.
14 |
15 |
For example, tasks get added to the task queue when:
16 |
17 |
18 | - a new JavaScript program or subprogram is executed (such as from a
19 | console, or by running the code in a {'