@qoretechnologies/reqore 0.32.3 → 0.34.0

package/__tests__/collection.test.tsx

@@ -1,8 +1,9 @@
 import '@testing-library/jest-dom/extend-expect';
-import { fireEvent, render } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
 import { ReqoreCollection, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
-import items from '../src/mock/collectionData';
+import items, { bigCollection } from '../src/mock/collectionData';
 
 test('Renders basic <Collection /> properly', () => {
   render(
@@ -35,16 +36,21 @@ test('<Collection /> items can be filtered', () => {
 
   expect(fn).not.toHaveBeenCalled();
 
-  jest.runAllTimers();
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
 
   expect(fn).toHaveBeenCalledWith('I have');
+
   expect(document.querySelectorAll('.reqore-collection-item').length).toBe(2);
 
   fireEvent.change(document.querySelector('.reqore-input')!, {
     target: { value: 'asg' },
   });
 
-  jest.runAllTimers();
+  act(() => {
+    jest.runAllTimers();
+  });
 
   expect(document.querySelectorAll('.reqore-collection-item').length).toBe(0);
   expect(document.querySelectorAll('.reqore-message').length).toBe(1);
@@ -53,12 +59,49 @@ test('<Collection /> items can be filtered', () => {
     target: { value: 'secret' },
   });
 
-  jest.runAllTimers();
+  act(() => {
+    jest.runAllTimers();
+  });
 
   expect(document.querySelectorAll('.reqore-collection-item').length).toBe(1);
   expect(document.querySelectorAll('.reqore-message').length).toBe(0);
 });
 
+test('<Collection /> filter is properly removed by the clear button', () => {
+  const fn = jest.fn();
+  jest.useFakeTimers();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreCollection items={items} filterable onQueryChange={fn} />
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(9);
+
+  fireEvent.change(document.querySelector('.reqore-input')!, {
+    target: { value: 'I have' },
+  });
+
+  expect(fn).not.toHaveBeenCalled();
+
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
+
+  expect(fn).toHaveBeenCalledWith('I have');
+
+  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(2);
+
+  fireEvent.click(document.querySelector('.reqore-clear-input-button')!);
+
+  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(9);
+  // Expect the input value to be empty
+  expect(document.querySelector('.reqore-input')?.getAttribute('value')).toBe('');
+});
+
 test('<Collection /> shows no data message when empty', () => {
   render(
     <ReqoreUIProvider>
@@ -90,3 +133,99 @@ test('<Collection /> can be sorted', () => {
 
   expect(firstNewItem?.querySelector('h3')?.textContent).toBe('This item is not flat');
 });
+
+test('<Collection /> has default paging', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreCollection items={bigCollection} paging='buttons' />
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
+});
+
+test('<Collection /> has list paging', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreCollection items={bigCollection} paging='list' />
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-dropdown-control').length).toBe(1);
+  expect(screen.getAllByText('1 / 10')).toBeTruthy();
+});
+
+test('<Collection /> has infinite paging', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreCollection items={bigCollection} paging='infinite' />
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(2);
+  expect(screen.getAllByText('90')).toBeTruthy();
+
+  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(10);
+
+  fireEvent.click(document.querySelectorAll('.reqore-button')[1]);
+
+  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(20);
+});
+
+test('<Collection /> has custom paging', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreCollection
+          items={bigCollection}
+          paging={{
+            itemsPerPage: 50,
+            infinite: true,
+            autoLoadMore: true,
+            showLabels: true,
+            loadMoreLabel: 'Scroll to load more',
+          }}
+        />
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(50);
+  expect(screen.getAllByText('Scroll to load more')).toBeTruthy();
+  expect(screen.getAllByText('50')).toBeTruthy();
+
+  mockAllIsIntersecting(true);
+
+  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(100);
+});
+
+test('<Collection /> has 2 paging controls', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreCollection
+          items={bigCollection}
+          paging={{
+            itemsPerPage: 10,
+            showPagesAs: 'list',
+            pageControlsPosition: 'both',
+          }}
+        />
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(11);
+  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(10);
+});

package/__tests__/containers/paging.test.tsx

@@ -0,0 +1,106 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import {
+  ReqoreContent,
+  ReqoreControlGroup,
+  ReqoreLayoutContent,
+  ReqorePaginationContainer,
+  ReqoreTag,
+  ReqoreUIProvider,
+} from '../../src';
+import { tableData as data } from '../../src/mock/tableData';
+
+test('Renders default <PaginationContainer />', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqorePaginationContainer<any> items={data} type='buttons'>
+            {(items) => (
+              <ReqoreControlGroup vertical>
+                {items.map((item) => (
+                  <ReqoreTag label={`${item.firstName} ${item.lastName}`} />
+                ))}
+              </ReqoreControlGroup>
+            )}
+          </ReqorePaginationContainer>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-button')[0]?.getAttribute('disabled')).toBe('');
+  expect(document.querySelectorAll('.reqore-button').length).toBe(102);
+
+  fireEvent.click(document.querySelectorAll('.reqore-button')[100]);
+
+  expect(screen.getAllByText('Rodd Solly')).toBeTruthy();
+  expect(document.querySelectorAll('.reqore-button')[101]?.getAttribute('disabled')).toBe('');
+});
+
+test('Renders default <PaginationContainer /> with both control wrappers', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqorePaginationContainer<any> items={data} type={{ pageControlsPosition: 'both' }}>
+            {(items) => (
+              <ReqoreControlGroup vertical>
+                {items.map((item) => (
+                  <ReqoreTag label={`${item.firstName} ${item.lastName}`} />
+                ))}
+              </ReqoreControlGroup>
+            )}
+          </ReqorePaginationContainer>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-button')[0]?.getAttribute('disabled')).toBe('');
+  expect(document.querySelectorAll('.reqore-button').length).toBe(204);
+
+  fireEvent.click(document.querySelectorAll('.reqore-button')[100]);
+
+  expect(screen.getAllByText('Rodd Solly')).toBeTruthy();
+
+  expect(document.querySelectorAll('.reqore-button')[101]?.getAttribute('disabled')).toBe('');
+  expect(document.querySelectorAll('.reqore-button')[203]?.getAttribute('disabled')).toBe('');
+});
+
+test('Renders default <PaginationContainer /> with both control wrappers, one included in children', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqorePaginationContainer<any>
+            items={data}
+            type={{ pageControlsPosition: 'both', includeBottomControls: false }}
+          >
+            {(items, Controls, { includeBottomControls }) => (
+              <ReqoreControlGroup vertical>
+                {items.map((item) => (
+                  <ReqoreTag label={`${item.firstName} ${item.lastName}`} />
+                ))}
+                {!includeBottomControls && <Controls />}
+              </ReqoreControlGroup>
+            )}
+          </ReqorePaginationContainer>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-button')[0]?.getAttribute('disabled')).toBe('');
+  expect(document.querySelectorAll('.reqore-button').length).toBe(204);
+
+  fireEvent.click(document.querySelectorAll('.reqore-button')[100]);
+
+  expect(screen.getAllByText('Rodd Solly')).toBeTruthy();
+
+  expect(document.querySelectorAll('.reqore-button')[101]?.getAttribute('disabled')).toBe('');
+  expect(document.querySelectorAll('.reqore-button')[203]?.getAttribute('disabled')).toBe('');
+});

package/__tests__/hooks/useLatestZIndex.test.tsx

@@ -0,0 +1,10 @@
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import { ReqoreUIProvider, useLatestZIndex } from '../../src';
+
+test('useLatestZIndex returns incremental z indexes', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result } = renderHook(() => useLatestZIndex(), { wrapper });
+
+  expect(result.current).toEqual(9002);
+});

package/__tests__/hooks/useReqorePaging.test.tsx

@@ -0,0 +1,255 @@
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { ReqoreUIProvider, useReqorePaging } from '../../src';
+import { IReqorePagingOptions } from '../../src/hooks/usePaging';
+import { tableData as data } from '../../src/mock/tableData';
+
+test('useReqorePaging returns all pages', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result } = renderHook(
+    ({ items }) =>
+      useReqorePaging({
+        items,
+      }),
+    { wrapper, initialProps: { items: data } }
+  );
+
+  expect(result.current.pages.length).toEqual(100);
+  expect(result.current.pageCount).toEqual(100);
+  expect(result.current.renderControls).toEqual(true);
+});
+
+test('useReqorePaging with default start page', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result } = renderHook(
+    ({ items }) =>
+      useReqorePaging({
+        items,
+        startPage: 11,
+        pagesToShow: 5,
+      }),
+    { wrapper, initialProps: { items: data } }
+  );
+
+  expect(result.current.pageCount).toEqual(100);
+  expect(result.current.currentPage).toEqual(11);
+  expect(result.current.pages.length).toEqual(7);
+  expect(result.current.pages[0]).toEqual(1);
+  expect(result.current.pages[1]).toEqual(9);
+  expect(result.current.pages[5]).toEqual(13);
+  expect(result.current.pages[6]).toEqual(100);
+});
+
+test('useReqorePaging specified number of pages', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result } = renderHook(
+    ({ items }) =>
+      useReqorePaging({
+        items,
+        pagesToShow: 5,
+      }),
+    { wrapper, initialProps: { items: data } }
+  );
+
+  expect(result.current.allPages.length).toEqual(100);
+  expect(result.current.pages!.length).toEqual(6);
+  expect(result.current.pages![0]).toEqual(1);
+  expect(result.current.pages![4]).toEqual(5);
+
+  act(() => {
+    result.current.setPage(8);
+  });
+
+  expect(result.current.pages![1]).toEqual(6);
+  expect(result.current.pages![5]).toEqual(10);
+
+  act(() => {
+    result.current.last();
+  });
+
+  expect(result.current.pages![1]).toEqual(96);
+  expect(result.current.pages![5]).toEqual(100);
+});
+
+test('useReqorePaging returns 1 page when items are empty', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result } = renderHook(
+    ({ items }) =>
+      useReqorePaging({
+        items,
+      }),
+    { wrapper, initialProps: { items: [] } }
+  );
+
+  expect(result.current.pages.length).toEqual(1);
+  expect(result.current.renderControls).toEqual(false);
+});
+
+test('useReqorePaging returns correct number of rounded pages', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result } = renderHook(
+    ({ itemsPerPage, items }) =>
+      useReqorePaging({
+        items,
+        itemsPerPage,
+      }),
+    { wrapper, initialProps: { itemsPerPage: 13, items: data } }
+  );
+
+  expect(result.current.pages.length).toEqual(77);
+});
+
+test('useReqorePaging returns items per page', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result } = renderHook(
+    ({ itemsPerPage, items }) =>
+      useReqorePaging({
+        items,
+        itemsPerPage,
+      }),
+    { wrapper, initialProps: { itemsPerPage: 10, items: data } }
+  );
+
+  expect(result.current.pages.length).toEqual(100);
+  expect(result.current.items.length).toEqual(10);
+});
+
+test('useReqorePaging returns new items and pages when size of data change, current page is set to 1', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result, rerender } = renderHook(
+    ({ itemsPerPage, items }) =>
+      useReqorePaging({
+        items,
+        itemsPerPage,
+      }),
+    { wrapper, initialProps: { itemsPerPage: 10, items: data } }
+  );
+
+  expect(result.current.pages.length).toEqual(100);
+  expect(result.current.items.length).toEqual(10);
+
+  act(() => {
+    result.current.setPage(5);
+  });
+
+  expect(result.current.currentPage).toEqual(5);
+
+  rerender({ itemsPerPage: 15, items: data.slice(0, 30) });
+
+  expect(result.current.pages.length).toEqual(2);
+  expect(result.current.items.length).toEqual(15);
+  expect(result.current.currentPage).toEqual(1);
+});
+
+test('useReqorePaging does not return new items and pages when data change', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result, rerender } = renderHook(
+    ({ itemsPerPage, items }: IReqorePagingOptions<any>) =>
+      useReqorePaging({
+        items,
+        itemsPerPage,
+      }),
+    { wrapper, initialProps: { itemsPerPage: 10, items: data } as IReqorePagingOptions<any> }
+  );
+
+  expect(result.current.pages.length).toEqual(100);
+  expect(result.current.items.length).toEqual(10);
+
+  act(() => {
+    result.current.setPage(5);
+  });
+
+  rerender({ items: [...data] });
+
+  expect(result.current.pages.length).toEqual(100);
+  expect(result.current.items.length).toEqual(10);
+  expect(result.current.currentPage).toEqual(5);
+});
+
+test('useReqorePaging page navigation works correctly', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result } = renderHook(
+    ({ itemsPerPage, items }: IReqorePagingOptions<any>) =>
+      useReqorePaging({
+        items,
+        itemsPerPage,
+        infinite: true,
+      }),
+    { wrapper, initialProps: { itemsPerPage: 10, items: data } as IReqorePagingOptions<any> }
+  );
+
+  expect(result.current.pages.length).toEqual(100);
+  expect(result.current.items.length).toEqual(10);
+
+  act(() => {
+    result.current.setPage(2);
+  });
+
+  expect(result.current.currentPage).toEqual(2);
+
+  act(() => {
+    result.current.next();
+  });
+
+  expect(result.current.currentPage).toEqual(3);
+
+  act(() => {
+    result.current.last();
+  });
+
+  expect(result.current.isLastPage).toEqual(true);
+  expect(result.current.currentPage).toEqual(100);
+
+  act(() => {
+    result.current.back();
+  });
+
+  expect(result.current.currentPage).toEqual(99);
+
+  act(() => {
+    result.current.first();
+  });
+
+  expect(result.current.isFirstPage).toEqual(true);
+  expect(result.current.currentPage).toEqual(1);
+});
+
+test('useReqorePaging returns correct number of items with infinite loading', () => {
+  const wrapper = ({ children }: any) => <ReqoreUIProvider>{children}</ReqoreUIProvider>;
+  const { result } = renderHook(
+    ({ itemsPerPage, items }: IReqorePagingOptions<any>) =>
+      useReqorePaging({
+        items,
+        itemsPerPage,
+        infinite: true,
+      }),
+    { wrapper, initialProps: { itemsPerPage: 10, items: data } as IReqorePagingOptions<any> }
+  );
+
+  expect(result.current.pages.length).toEqual(100);
+  expect(result.current.items.length).toEqual(10);
+
+  act(() => {
+    result.current.setPage(2);
+  });
+
+  expect(result.current.pages.length).toEqual(100);
+  expect(result.current.items.length).toEqual(20);
+
+  act(() => {
+    result.current.setPage(5);
+  });
+
+  expect(result.current.items.length).toEqual(50);
+  expect(result.current.itemsLeft).toEqual(950);
+  expect(result.current.renderControls).toEqual(true);
+
+  act(() => {
+    result.current.last();
+  });
+
+  expect(result.current.items.length).toEqual(1000);
+  expect(result.current.itemsLeft).toEqual(0);
+  expect(result.current.renderControls).toEqual(false);
+});

package/__tests__/hooks/useTheme.test.tsx

@@ -0,0 +1,31 @@
+import { renderHook } from '@testing-library/react';
+import { ReqoreColors } from '../../src';
+import { DEFAULT_THEME } from '../../src/constants/theme';
+import { useReqoreTheme } from '../../src/hooks/useTheme';
+
+test('useReqoreTheme should return the default theme', () => {
+  const { result } = renderHook(() => useReqoreTheme());
+
+  expect(result.current).toEqual(DEFAULT_THEME);
+});
+
+test('useReqoreTheme should return modified main intent color, original color is preserved', () => {
+  const { result } = renderHook(() => useReqoreTheme('main', { main: 'info' }));
+
+  expect(result.current.main).toEqual(ReqoreColors.BLUE);
+  expect(result.current.originalMain).toEqual(ReqoreColors.DARK_THEME);
+});
+
+test('useReqoreTheme should return modified main custom color, original color is preserved', () => {
+  const { result } = renderHook(() => useReqoreTheme('main', { main: '#7fbb26' }));
+
+  expect(result.current.main).toEqual('#7fbb26');
+  expect(result.current.originalMain).toEqual(ReqoreColors.DARK_THEME);
+});
+
+test('useReqoreTheme should return modified main color if intent is passed, original color is preserved', () => {
+  const { result } = renderHook(() => useReqoreTheme('main', { main: '#7fbb26' }, 'info'));
+
+  expect(result.current.main).toEqual(ReqoreColors.BLUE);
+  expect(result.current.originalMain).toEqual(ReqoreColors.DARK_THEME);
+});