+
{Array.from(hook.selectedMedia).length}
+
{hook.availableMediaIds.length}
+
{String(hook.showConfirmModal)}
+
{hook.confirmMessage}
+
{hook.listKey}
+
{hook.notificationMessage}
+
{String(hook.showNotification)}
+
+ {/* @todo: It doesn't used */}
+ {/*
{hook.notificationType}
*/}
+
+
{String(hook.showPermissionModal)}
+
{hook.permissionType || ''}
+
{String(hook.showPlaylistModal)}
+
{String(hook.showChangeOwnerModal)}
+
{String(hook.showPublishStateModal)}
+
{String(hook.showCategoryModal)}
+
{String(hook.showTagModal)}
+
+
+
+ {(items as any[]).map((_, idx) => (
+
+ ))}
+
+
{String(countedItems)}
+
{items.length}
+
+
{classname.list}
+
{classname.listOuter}
+
{renderBeforeListWrap()}
+
{renderAfterListWrap()}
+
+
{tuple.length}
+
{tuple[0] ? 'yes' : 'no'}
+
{tuple[3] ? 'yes' : 'no'}
+
{typeof tuple[7] === 'function' ? 'yes' : 'no'}
+
+
+
+
+ );
+ };
+
+ const { getByTestId } = render();
+
+ // Should not throw when called
+ const resizeButton = getByTestId('trigger-resize');
+ const sidebarButton = getByTestId('trigger-sidebar');
+
+ expect(() => fireEvent.click(resizeButton)).not.toThrow();
+ expect(() => fireEvent.click(sidebarButton)).not.toThrow();
+ });
+
+ test('winResizeListener updates resizeDate state triggering resize effect', () => {
+ const TestComponent = (props: any) => {
+ const tuple = useItemListInlineSlider(props) as any;
+ const winResizeListener = tuple[7];
+ const wrapperRef = tuple[9];
+
+ return (
+
+
+
+ );
+ };
+
+ const { getByTestId } = render();
+
+ expect(mockInlineSliderInstance.scrollToCurrentSlide).toHaveBeenCalledTimes(1);
+ expect(mockInlineSliderInstance.updateDataStateOnResize).toHaveBeenCalledTimes(0);
+
+ jest.useFakeTimers();
+
+ fireEvent.click(getByTestId('trigger-resize'));
+
+ expect(mockInlineSliderInstance.scrollToCurrentSlide).toHaveBeenCalledTimes(2);
+ expect(mockInlineSliderInstance.updateDataStateOnResize).toHaveBeenCalledTimes(1);
+
+ jest.advanceTimersByTime(200);
+
+ expect(mockInlineSliderInstance.scrollToCurrentSlide).toHaveBeenCalledTimes(3);
+ expect(mockInlineSliderInstance.updateDataStateOnResize).toHaveBeenCalledTimes(2);
+
+ jest.useRealTimers();
+ });
+ });
+});
diff --git a/frontend/tests/utils/hooks/useItemListLazyLoad.test.tsx b/frontend/tests/utils/hooks/useItemListLazyLoad.test.tsx
new file mode 100644
index 00000000..e776b4b5
--- /dev/null
+++ b/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 (
+
+
{classname.list}
+
{classname.listOuter}
+
{renderBeforeListWrap()}
+
{renderAfterListWrap()}
+
+
{classname.list}
+
{classname.listOuter}
+
+
{renderBeforeListWrap()}
+
{renderAfterListWrap()}
+
+
+
+ {/*
{String(countedItems)}
*/}
+ {/*
{Array.isArray(items) ? items.length : 0}
*/}
+
{classname.list}
+
{classname.listOuter}
+ {/*
{listHandler ? 'yes' : 'no'}
*/}
+ {/*
{itemsListWrapperRef.current ? 'set' : 'unset'}
*/}
+ {/*
{itemsListRef.current ? 'set' : 'unset'}
*/}
+
{renderBeforeListWrap()}
+
{renderAfterListWrap()}
+ {/*
+
{sort}
+
{order}
+
{String(isSelected)}
+
+
+
+
+
{containerRef && typeof containerRef === 'object' ? 'ok' : 'bad'}
+
{value}
+
{props.title || 'title'}
,
+ descriptionComponent: () => {props.description || 'desc'}
,
+ thumbnailUrl: props.thumb || 'thumb.jpg',
+ UnderThumbWrapper: ({ children }: any) => {children}
,
+ }),
+}));
+
+function HookConsumer(props: any) {
+ const [TitleComp, DescComp, thumbUrl, UnderThumbComp, EditComp, MetaComp, ViewComp] = useMediaItem(props);
+ // The hook returns functions/components/values. To satisfy TS, render using React.createElement
+ return (
+
+ {typeof TitleComp === 'function' ? React.createElement(TitleComp) : null}
+ {typeof DescComp === 'function' ? React.createElement(DescComp) : null}
+
{typeof thumbUrl === 'string' ? thumbUrl : ''}
+ {typeof UnderThumbComp === 'function'
+ ? React.createElement(
+ UnderThumbComp,
+ null,
+ typeof EditComp === 'function' ? React.createElement(EditComp) : null,
+ typeof MetaComp === 'function' ? React.createElement(MetaComp) : null,
+ typeof ViewComp === 'function' ? React.createElement(ViewComp) : null
+ )
+ : null}
+