feat: utils/hooks unit tests

frontend/tests/utils/hooks/useItemListLazyLoad.test.tsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+
+jest.mock('../../../src/static/js/utils/settings/config', () => ({
+    config: jest.fn(() => jest.requireActual('../../tests-constants').sampleMediaCMSConfig),
+}));
+
+jest.mock('../../../src/static/js/utils/classes/', () => ({
+    BrowserCache: jest.fn().mockImplementation(() => ({
+        get: jest.fn(),
+        set: jest.fn(),
+    })),
+}));
+
+let mockListHandler: any;
+let addListItemsSpy = jest.fn();
+const mockRemoveListener = jest.fn();
+
+jest.mock('../../../src/static/js/utils/hooks/useItemList', () => ({
+    useItemList: (props: any, _ref: any) => {
+        mockListHandler = {
+            loadItems: jest.fn(),
+            totalPages: jest.fn().mockReturnValue(props.__totalPages ?? 1),
+            loadedAllItems: jest.fn().mockReturnValue(Boolean(props.__loadedAll ?? true)),
+        };
+        return [
+            props.__items ?? [], // items
+            props.__countedItems ?? 0, // countedItems
+            mockListHandler, // listHandler
+            jest.fn(), // setListHandler
+            jest.fn(), // onItemsLoad
+            jest.fn(), // onItemsCount
+            addListItemsSpy, // addListItems
+        ];
+    },
+}));
+
+jest.mock('../../../src/static/js/utils/stores/', () => ({
+    PageStore: {
+        removeListener: mockRemoveListener,
+    },
+}));
+
+import { useItemListLazyLoad } from '../../../src/static/js/utils/hooks/useItemListLazyLoad';
+
+function HookConsumer(props: any) {
+    const tuple = useItemListLazyLoad(props);
+
+    const [
+        _items,
+        _countedItems,
+        _listHandler,
+        _setListHandler,
+        classname,
+        _onItemsCount,
+        _onItemsLoad,
+        _onWindowScroll,
+        _onDocumentVisibilityChange,
+        _itemsListWrapperRef,
+        _itemsListRef,
+        renderBeforeListWrap,
+        renderAfterListWrap,
+    ] = tuple as any;
+
+    return (
+        <div>
+            <div data-testid="class-list">{classname.list}</div>
+            <div data-testid="class-outer">{classname.listOuter}</div>
+            <div data-testid="render-before">{renderBeforeListWrap()}</div>
+            <div data-testid="render-after">{renderAfterListWrap()}</div>
+        </div>
+    );
+}
+
+function HookConsumerWithRefs(props: any) {
+    const tuple = useItemListLazyLoad(props);
+    const [
+        _items,
+        _countedItems,
+        _listHandler,
+        _setListHandler,
+        classname,
+        _onItemsCount,
+        _onItemsLoad,
+        onWindowScroll,
+        onDocumentVisibilityChange,
+        itemsListWrapperRef,
+        itemsListRef,
+        renderBeforeListWrap,
+        renderAfterListWrap,
+    ] = tuple as any;
+
+    return (
+        <div ref={itemsListWrapperRef}>
+            <div data-testid="class-list">{classname.list}</div>
+            <div data-testid="class-outer">{classname.listOuter}</div>
+            <div ref={itemsListRef} data-testid="list-ref-node" />
+            <div data-testid="render-before">{renderBeforeListWrap()}</div>
+            <div data-testid="render-after">{renderAfterListWrap()}</div>
+            <button data-testid="trigger-visibility" onClick={onDocumentVisibilityChange} type="button">
+                visibility
+            </button>
+            <button data-testid="trigger-scroll" onClick={onWindowScroll} type="button">
+                scroll
+            </button>
+        </div>
+    );
+}
+
+describe('utils/hooks', () => {
+    describe('useItemListLazyLoad', () => {
+        beforeEach(() => {
+            addListItemsSpy = jest.fn();
+            mockRemoveListener.mockClear();
+        });
+
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+
+        test('Computes classname.list and classname.listOuter with optional className prop', () => {
+            const { getByTestId, rerender } = render(<HookConsumer className=" extra  " />);
+            expect(getByTestId('class-outer').textContent).toBe('items-list-outer extra');
+            expect(getByTestId('class-list').textContent).toBe('items-list');
+            rerender(<HookConsumer />);
+            expect(getByTestId('class-outer').textContent).toBe('items-list-outer');
+            expect(getByTestId('class-list').textContent).toBe('items-list');
+        });
+
+        test('Invokes addListItems when items change', () => {
+            const { rerender } = render(<HookConsumer __items={[]} />);
+            expect(addListItemsSpy).toHaveBeenCalledTimes(1);
+            rerender(<HookConsumer __items={[1]} />);
+            expect(addListItemsSpy).toHaveBeenCalledTimes(2);
+        });
+
+        test('Renders nothing in renderBeforeListWrap and renderAfterListWrap', () => {
+            const { getByTestId } = render(
+                <HookConsumer __items={[1]} __countedItems={1} __totalPages={3} __loadedAll={false} />
+            );
+            expect(getByTestId('render-before').textContent).toBe('');
+            expect(getByTestId('render-after').textContent).toBe('');
+        });
+
+        test('Does not call listHandler.loadItems when refs are not attached', () => {
+            render(<HookConsumer __items={[1]} />);
+            expect(mockListHandler.loadItems).not.toHaveBeenCalled();
+        });
+
+        test('Calls listHandler.loadItems when refs are set and scroll threshold is reached', async () => {
+            render(<HookConsumerWithRefs __items={[1]} __loadedAll={false} />);
+            await waitFor(() => {
+                expect(mockListHandler.loadItems).toHaveBeenCalled();
+            });
+        });
+
+        test('Calls PageStore.removeListener when refs are set and loadedAllItems is true', () => {
+            render(<HookConsumerWithRefs __items={[1]} __loadedAll={true} />);
+            expect(mockRemoveListener).toHaveBeenCalledWith('window_scroll', expect.any(Function));
+        });
+
+        test('onDocumentVisibilityChange schedules onWindowScroll when document is visible', () => {
+            jest.useFakeTimers();
+            const setTimeoutSpy = jest.spyOn(globalThis, 'setTimeout');
+            Object.defineProperty(document, 'hidden', { value: false, configurable: true });
+
+            const { getByTestId } = render(<HookConsumerWithRefs __items={[1]} />);
+            fireEvent.click(getByTestId('trigger-visibility'));
+
+            expect(setTimeoutSpy).toHaveBeenCalledWith(expect.any(Function), 10);
+
+            setTimeoutSpy.mockRestore();
+            jest.useRealTimers();
+        });
+
+        test('onDocumentVisibilityChange does nothing when document is hidden', () => {
+            jest.useFakeTimers();
+            const setTimeoutSpy = jest.spyOn(globalThis, 'setTimeout');
+            Object.defineProperty(document, 'hidden', { value: true, configurable: true });
+
+            const { getByTestId } = render(<HookConsumerWithRefs __items={[1]} />);
+            fireEvent.click(getByTestId('trigger-visibility'));
+
+            expect(setTimeoutSpy).toHaveBeenCalledTimes(0);
+
+            setTimeoutSpy.mockRestore();
+            jest.useRealTimers();
+        });
+    });
+});