@qoretechnologies/reqore 0.44.0 → 0.45.0

package/__tests__/collection.test.tsx

@@ -1,243 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
-import { ReqoreCollection, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
-import items, { bigCollection } from '../src/mock/collectionData';
-
-test('Renders basic <Collection /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreCollection items={items} />
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-collection').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(9);
-});
-
-test('<Collection /> items can be filtered', () => {
-  const fn = jest.fn();
-  jest.useFakeTimers();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreCollection items={items} filterable onQueryChange={fn} />
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  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.change(document.querySelector('.reqore-input')!, {
-    target: { value: 'asg' },
-  });
-
-  act(() => {
-    jest.runAllTimers();
-  });
-
-  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-message').length).toBe(1);
-
-  fireEvent.change(document.querySelector('.reqore-input')!, {
-    target: { value: 'secret' },
-  });
-
-  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 /> filter is focused when a shortcut is pressed', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreCollection
-          items={items}
-          filterable
-          onQueryChange={fn}
-          inputProps={{ focusRules: { type: 'keypress', shortcut: 'letters' } }}
-        />
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelector('.reqore-input')).not.toHaveFocus();
-  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(9);
-
-  fireEvent.keyDown(document, {
-    key: 'f',
-    code: 102,
-    charCode: 102,
-  });
-
-  expect(fn).not.toHaveBeenCalled();
-
-  expect(document.querySelector('.reqore-input')).toHaveFocus();
-});
-
-test('<Collection /> shows no data message when empty', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreCollection items={[]} filterable />
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-message').length).toBe(1);
-});
-
-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(2);
-  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(3);
-  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', () => {
-  const onPageChange = jest.fn();
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreCollection
-          items={bigCollection}
-          paging={{
-            itemsPerPage: 50,
-            infinite: true,
-            autoLoadMore: true,
-            showLabels: true,
-            loadMoreLabel: 'Scroll to load more',
-            onPageChange,
-          }}
-        />
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-button').length).toBe(3);
-  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(onPageChange).toHaveBeenCalledWith(2, { isFirst: false, isLast: 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

@@ -1,138 +0,0 @@
-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('');
-});
-
-test('Renders default <PaginationContainer /> with onPageChange callback', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqorePaginationContainer<any>
-            items={data}
-            type={{ onPageChange: fn, infinite: true }}
-          >
-            {(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);
-
-  fireEvent.click(document.querySelectorAll('.reqore-button')[0]);
-
-  expect(fn).toBeCalledTimes(1);
-  expect(fn).toBeCalledWith(2, { isFirst: false, isLast: false });
-});

package/__tests__/control_group.test.tsx

@@ -1,32 +0,0 @@
-import { render } from '@testing-library/react';
-import {
-  ReqoreButton,
-  ReqoreContent,
-  ReqoreControlGroup,
-  ReqoreInput,
-  ReqoreLayoutContent,
-  ReqoreUIProvider,
-} from '../src';
-
-test('Renders <ControlGroup /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreControlGroup>
-            <ReqoreInput minimal />
-            <ReqoreButton>Hello</ReqoreButton>
-            <ReqoreInput disabled />
-            <ReqoreInput size='big' />
-            <ReqoreButton>Hello</ReqoreButton>
-            <ReqoreButton>Hello</ReqoreButton>
-          </ReqoreControlGroup>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input').length).toBe(3);
-  expect(document.querySelectorAll('.reqore-button').length).toBe(3);
-  expect(document.querySelectorAll('.reqore-control-group').length).toBe(1);
-});

package/__tests__/drawer.test.tsx

@@ -1,140 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import React from 'react';
-import {
-  ReqoreButton,
-  ReqoreContent,
-  ReqoreDrawer,
-  ReqoreLayoutContent,
-  ReqoreUIProvider,
-} from '../src';
-
-test('Does not render <Drawer /> if not open', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer>Hello</ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(0);
-});
-
-test('Renders opened <Drawer /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer isOpen>Hello</ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-});
-
-test('Renders hidable <Drawer /> properly', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer isOpen hidable onHideToggle={fn} isHidden>
-            Hello
-          </ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-drawer-hide-button').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-close-button').length).toBe(0);
-
-  fireEvent.click(document.querySelector('.reqore-drawer-hide-button')!);
-
-  expect(fn).toHaveBeenCalledWith(false);
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-
-  fireEvent.click(document.querySelector('.reqore-drawer-hide-button')!);
-
-  expect(fn).toHaveBeenLastCalledWith(true);
-  expect(fn).toHaveBeenCalledTimes(2);
-});
-
-test('Renders closable <Drawer /> properly', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent style={{ width: 800 }}>
-          <ReqoreDrawer isOpen onClose={fn}>
-            Hello
-          </ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-close-button').length).toBe(1);
-
-  fireEvent.click(document.querySelector('.reqore-drawer-close-button')!);
-
-  expect(fn).toHaveBeenCalled();
-});
-
-test('Renders <Drawer /> with interactive backdrop', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer isOpen onClose={fn} hasBackdrop>
-            Hello
-          </ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-drawer').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-close-button').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-drawer-backdrop').length).toBe(1);
-
-  fireEvent.click(document.querySelector('.reqore-drawer-backdrop')!);
-
-  expect(fn).toHaveBeenCalled();
-});
-
-const CustomDrawer = () => {
-  const [count, setCount] = React.useState(0);
-
-  return (
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreDrawer isOpen hasBackdrop actions={[{ label: `Count is ${count}` }]}>
-            <ReqoreButton onClick={() => setCount(count + 1)}>Click me</ReqoreButton>
-          </ReqoreDrawer>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-};
-
-test('<Drawer /> actions are changed properly', () => {
-  const { getAllByText } = render(<CustomDrawer />);
-
-  expect(getAllByText('Count is 0')[0]).toBeTruthy();
-
-  fireEvent.click(getAllByText('Click me')[0]);
-
-  expect(getAllByText('Count is 1')[0]).toBeTruthy();
-});