feat: utils/hooks unit tests

2026-02-08 08:22:59 -05:00 · 2026-02-07 18:39:24 +02:00
parent 9f9dd699b2
commit c2043fafa1
14 changed files with 2819 additions and 1 deletions
--- a/frontend/tests/utils/hooks/useItemList.test.tsx
+++ b/frontend/tests/utils/hooks/useItemList.test.tsx
@@ -0,0 +1,124 @@
+import React, { createRef } from 'react';
+import { render } from '@testing-library/react';
+
+// Stub style imports used by the hook so Jest doesn't try to parse SCSS
+jest.mock('../../../src/static/js/components/item-list/ItemList.scss', () => ({}), { virtual: true });
+
+jest.mock('../../../src/static/js/components/item-list/includes/itemLists/initItemsList', () => ({
+    __esModule: true,
+    default: jest.fn((_lists: any[]) => [{ appendItems: jest.fn() }]),
+}));
+
+import initItemsList from '../../../src/static/js/components/item-list/includes/itemLists/initItemsList';
+import { useItemList } from '../../../src/static/js/utils/hooks/useItemList';
+
+function HookConsumer(props: any) {
+    const listRef = createRef<HTMLDivElement>();
+    const [items, countedItems, listHandler, setListHandler, onItemsLoad, onItemsCount, addListItems] = useItemList(
+        props,
+        listRef
+    ) as any[];
+
+    return (
+        <div>
+            <div ref={listRef} data-testid="list" className="list">
+                {(items as any[]).map((_, idx) => (
+                    <div key={idx} className="item" data-testid={`itm-${idx}`} />
+                ))}
+            </div>
+            <div data-testid="counted">{String(countedItems)}</div>
+            <div data-testid="len">{items.length}</div>
+            <button data-testid="load-call" onClick={() => onItemsLoad([1, 2])} />
+            <button data-testid="count-call" onClick={() => onItemsCount(5)} />
+            <button data-testid="add-call" onClick={() => addListItems()} />
+            <button data-testid="set-handler" onClick={() => setListHandler({ foo: 'bar' })} />
+            <div data-testid="has-handler">{listHandler ? 'yes' : 'no'}</div>
+        </div>
+    );
+}
+
+describe('utils/hooks', () => {
+    describe('useItemList', () => {
+        beforeEach(() => {
+            jest.clearAllMocks();
+        });
+
+        test('Initial state: empty items and not counted', () => {
+            const { getByTestId } = render(<HookConsumer />);
+            expect(getByTestId('counted').textContent).toBe('false');
+            expect(getByTestId('len').textContent).toBe('0');
+            expect(getByTestId('has-handler').textContent).toBe('no');
+        });
+
+        test('onItemsLoad updates items and renders item nodes', () => {
+            const { getByTestId, getByTestId: $ } = render(<HookConsumer />);
+            (getByTestId('load-call') as HTMLButtonElement).click();
+            expect(getByTestId('len').textContent).toBe('2');
+            expect($('itm-0')).toBeTruthy();
+            expect($('itm-1')).toBeTruthy();
+        });
+
+        test('onItemsCount marks countedItems true and triggers callback if provided', () => {
+            const cb = jest.fn();
+            const { getByTestId } = render(<HookConsumer itemsCountCallback={cb} />);
+            (getByTestId('count-call') as HTMLButtonElement).click();
+            expect(getByTestId('counted').textContent).toBe('true');
+            expect(cb).toHaveBeenCalledWith(5);
+        });
+
+        test('addListItems initializes itemsListInstance and appends only new items', () => {
+            const mockInit = initItemsList as jest.Mock;
+
+            const { getByTestId, rerender } = render(<HookConsumer />);
+
+            const itemsLen = getByTestId('len') as HTMLDivElement;
+            const addBtn = getByTestId('add-call') as HTMLButtonElement;
+            const loadBtn = getByTestId('load-call') as HTMLButtonElement;
+
+            expect(itemsLen.textContent).toBe('0');
+            loadBtn.click();
+            expect(itemsLen.textContent).toBe('2');
+
+            expect(mockInit).toHaveBeenCalledTimes(0);
+            addBtn.click();
+            expect(mockInit).toHaveBeenCalledTimes(1);
+
+            expect(mockInit.mock.results[0].value[0].appendItems).toHaveBeenCalledTimes(2);
+
+            loadBtn.click();
+            expect(itemsLen.textContent).toBe('2');
+
+            addBtn.click();
+            expect(mockInit).toHaveBeenCalledTimes(2);
+            expect(mockInit.mock.results[1].value[0].appendItems).toHaveBeenCalledTimes(2);
+
+            rerender(<HookConsumer />);
+
+            addBtn.click();
+            expect(mockInit).toHaveBeenCalledTimes(3);
+            expect(mockInit.mock.results[2].value[0].appendItems).toHaveBeenCalledTimes(2);
+        });
+
+        test('addListItems does nothing when there are no .item elements in the ref', () => {
+            // Render, do not call onItemsLoad, then call addListItems
+            const mockInit = initItemsList as jest.Mock;
+            const { getByTestId } = render(<HookConsumer />);
+            (getByTestId('add-call') as HTMLButtonElement).click();
+            expect(mockInit).not.toHaveBeenCalled();
+        });
+
+        test('itemsLoadCallback is invoked when items change', () => {
+            const itemsLoadCallback = jest.fn();
+            const { getByTestId } = render(<HookConsumer itemsLoadCallback={itemsLoadCallback} />);
+            (getByTestId('load-call') as HTMLButtonElement).click();
+            expect(itemsLoadCallback).toHaveBeenCalledTimes(1);
+        });
+
+        test('setListHandler updates listHandler', () => {
+            const { getByTestId } = render(<HookConsumer />);
+            expect(getByTestId('has-handler').textContent).toBe('no');
+            (getByTestId('set-handler') as HTMLButtonElement).click();
+            expect(getByTestId('has-handler').textContent).toBe('yes');
+        });
+    });
+});