@qoretechnologies/reqore 0.43.0 → 0.45.0

package/__tests__/input.test.tsx

@@ -1,482 +0,0 @@
-import { Globals } from '@react-spring/web';
-import '@testing-library/jest-dom/extend-expect';
-import { fireEvent, render } from '@testing-library/react';
-import { noop } from 'lodash';
-import React from 'react';
-import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
-import { ReqoreContent, ReqoreInput, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
-
-beforeAll(() => {
-  Globals.assign({
-    skipAnimation: true,
-  });
-});
-
-test('Renders <Input /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput minimal />
-          <ReqoreInput disabled />
-          <ReqoreInput size='big' />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input').length).toBe(3);
-  // No clear button
-  expect(document.querySelectorAll('.reqore-clear-input-button').length).toBe(0);
-});
-
-test('Renders <Input /> with clear button properly', async () => {
-  jest.useFakeTimers();
-
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput minimal onChange={noop} onClearClick={fn} value='test' />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  jest.advanceTimersByTime(1000);
-
-  // No clear button
-  expect(document.querySelectorAll('.reqore-clear-input-button').length).toBe(1);
-
-  fireEvent.click(document.querySelector('.reqore-clear-input-button')!);
-
-  expect(fn).toHaveBeenCalled();
-});
-
-test('Disabled <Input /> cannot be cleared', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput minimal onChange={noop} onClearClick={fn} disabled />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  // No clear button
-  expect(document.querySelectorAll('.reqore-clear-input-button').length).toBe(0);
-});
-
-test('Readonly <Input /> cannot be cleared', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput minimal onChange={noop} onClearClick={fn} readOnly />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  // No clear button
-  expect(document.querySelectorAll('.reqore-clear-input-button').length).toBe(0);
-});
-
-test('<Input /> gets automatically focused', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'auto' }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('Readonly <Input /> does not get automatically focused', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'auto' }} readOnly />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-});
-
-test('Disabled <Input /> does not get automatically focused', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'auto' }} disabled />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-});
-
-test("<Input /> gets automatically focused if it's out of viewport", () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <div style={{ height: '100vh' }} />
-          <ReqoreInput focusRules={{ type: 'auto' }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test("<Input /> does not get automatically focused if it's out of viewport", () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <div style={{ height: '100vh' }} />
-          <ReqoreInput focusRules={{ type: 'auto', viewportOnly: true }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  mockAllIsIntersecting(false);
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-});
-
-test('<Input /> gets automatically focused if its inside of viewport', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'auto', viewportOnly: true }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  mockAllIsIntersecting(true);
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('<Input /> gets focused after any letter is pressed', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: 'letters' }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: 'a',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('<Input /> gets focused after any letter is pressed 2', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: 'letters' }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: '2',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: 'L',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('<Input /> gets focused after any digit is pressed', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: 'numbers' }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: '1',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('<Input /> gets focused after any digit is pressed 2', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: 'numbers' }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: 'u',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: '0',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('<Input /> gets focused after any digit or letter is pressed', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: ['numbers', 'letters'] }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: 'm',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('<Input /> gets focused after any digit or letter is pressed 2', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: ['numbers', 'letters'] }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: '5',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('<Input /> gets focused after a specified shortcut is pressed', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: 's' }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: 'u',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: '0',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: 's',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test("<Input /> does not get focused after a specified shortcut is pressed if it's not in Viewport, get's focused when in viewport", () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: 's', viewportOnly: true }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  mockAllIsIntersecting(false);
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: 's',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  mockAllIsIntersecting(true);
-
-  fireEvent.keyDown(document, {
-    key: 's',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('<Input /> does not get focused when typing in another input', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: 's' }} />
-          <ReqoreInput focusRules={{ type: 'auto' }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-  expect(document.querySelectorAll('.reqore-input')[1]).toHaveFocus();
-
-  fireEvent.keyDown(document.querySelectorAll('.reqore-input')[1], {
-    key: 's',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-  expect(document.querySelectorAll('.reqore-input')[1]).toHaveFocus();
-});
-
-test('Readonly <Input /> does not get focused when shortcut is pressed', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: 'letters' }} readOnly />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: 'q',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-});
-
-test('Disabled <Input /> does not get focused when shortcut is pressed', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput focusRules={{ type: 'keypress', shortcut: 'numbers' }} readOnly />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: '8',
-  });
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-});
-
-test('<Input /> is cleared when focused', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreInput
-            focusRules={{ type: 'keypress', shortcut: 'letters', clearOnFocus: true }}
-            value='this is a test'
-            onChange={fn}
-          />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-input')[0]).not.toHaveFocus();
-
-  fireEvent.keyDown(document, {
-    key: 'h',
-  });
-
-  expect(fn).toHaveBeenNthCalledWith(1, { target: { value: '' } });
-  expect(document.querySelectorAll('.reqore-input')[0]).toHaveFocus();
-});
-
-test('Tooltip on <Input /> works', () => {
-  jest.useFakeTimers();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreInput value='this is a test' tooltip='test' />
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-  fireEvent.mouseEnter(document.querySelectorAll('.reqore-input')[0]);
-
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-});

package/__tests__/layout.test.tsx

@@ -1,37 +0,0 @@
-import { render } from "@testing-library/react";
-import React from "react";
-import {
-  ReqoreContent,
-  ReqoreHeader,
-  ReqoreLayoutContent,
-  ReqoreNavbarDivider,
-  ReqoreNavbarGroup,
-  ReqoreNavbarItem,
-  ReqoreUIProvider,
-} from "../src";
-
-test("Renders Layout properly", () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreHeader>
-          <ReqoreNavbarGroup>
-            <ReqoreNavbarItem>Logo</ReqoreNavbarItem>
-          </ReqoreNavbarGroup>
-          <ReqoreNavbarGroup position="right">
-            <ReqoreNavbarItem>Item</ReqoreNavbarItem>
-            <ReqoreNavbarDivider />
-            <ReqoreNavbarItem>Item 2</ReqoreNavbarItem>
-          </ReqoreNavbarGroup>
-        </ReqoreHeader>
-        <ReqoreContent>
-          <h1>Hello</h1>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll(".reqore-layout-wrapper").length).toBe(1);
-  expect(document.querySelectorAll(".reqore-layout-content").length).toBe(1);
-  expect(document.querySelectorAll("h1").length).toBe(1);
-});

package/__tests__/menu.test.tsx

@@ -1,65 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import React from 'react';
-import { ReqoreMenu, ReqoreMenuDivider, ReqoreMenuItem, ReqoreUIProvider } from '../src/index';
-
-test('Renders <Menu /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreMenu>
-        <ReqoreMenuItem> Item 1 </ReqoreMenuItem>
-        <ReqoreMenuItem> Item 2 </ReqoreMenuItem>
-        <ReqoreMenuDivider label='Divider' />
-        <ReqoreMenuItem label={2.5} />
-        <ReqoreMenuItem> Item 3 </ReqoreMenuItem>
-        <ReqoreMenuItem> Item 4 </ReqoreMenuItem>
-      </ReqoreMenu>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(5);
-  expect(document.querySelectorAll('.reqore-menu-divider').length).toBe(1);
-});
-
-test('<Menu /> item can be clicked', () => {
-  const itemCb = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreMenu>
-        <ReqoreMenuItem> Item 1 </ReqoreMenuItem>
-        <ReqoreMenuItem onClick={itemCb}>Item 2</ReqoreMenuItem>
-        <ReqoreMenuDivider label='Divider' />
-        <ReqoreMenuItem> Item 3 </ReqoreMenuItem>
-        <ReqoreMenuItem> Item 4 </ReqoreMenuItem>
-      </ReqoreMenu>
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.click(document.querySelectorAll('.reqore-menu-item')[1]);
-
-  expect(itemCb).toHaveBeenCalled();
-});
-
-test('<Menu /> item has right clickable button', () => {
-  const iconCb = jest.fn();
-  const itemCb = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreMenu>
-        <ReqoreMenuItem> Item 1 </ReqoreMenuItem>
-        <ReqoreMenuItem onClick={itemCb} rightIcon='24HoursFill' onRightIconClick={iconCb}>
-          Item 2
-        </ReqoreMenuItem>
-        <ReqoreMenuDivider label='Divider' />
-        <ReqoreMenuItem> Item 3 </ReqoreMenuItem>
-        <ReqoreMenuItem> Item 4 </ReqoreMenuItem>
-      </ReqoreMenu>
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.click(document.querySelectorAll('.reqore-menu-item-right-icon')[0]);
-
-  expect(iconCb).toHaveBeenCalled();
-  expect(itemCb).not.toHaveBeenCalled();
-});

package/__tests__/messages.test.tsx

@@ -1,79 +0,0 @@
-import { act, fireEvent, render } from '@testing-library/react';
-import React from 'react';
-import { ReqoreMessage, ReqoreUIProvider } from '../src/index';
-
-beforeAll(() => {
-  jest.useFakeTimers();
-});
-
-test('Renders <Message /> properly', async () => {
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreMessage intent='info'> Hello </ReqoreMessage>
-        <ReqoreMessage intent='success'> Hello </ReqoreMessage>
-        <ReqoreMessage intent='pending'> Hello </ReqoreMessage>
-        <ReqoreMessage intent='warning'> Hello </ReqoreMessage>
-        <ReqoreMessage intent='danger'> Hello </ReqoreMessage>
-      </ReqoreUIProvider>
-    );
-  });
-
-  expect(document.querySelectorAll('.reqore-message').length).toBe(5);
-});
-
-test('Runs onFinish on message after duration', async () => {
-  const fn = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreMessage intent='info' duration={3000} onFinish={fn}>
-          {' '}
-          Hello{' '}
-        </ReqoreMessage>
-      </ReqoreUIProvider>
-    );
-  });
-
-  act(() => jest.runAllTimers());
-
-  expect(fn).toHaveBeenCalled();
-});
-
-test('Runs onClose when closed', async () => {
-  const fn = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreMessage intent='info' onClose={fn}>
-          {' '}
-          Hello{' '}
-        </ReqoreMessage>
-      </ReqoreUIProvider>
-    );
-  });
-
-  act(() => jest.advanceTimersByTime(1000));
-
-  fireEvent.click(document.querySelector('.reqore-message-close'));
-
-  expect(fn).toHaveBeenCalledWith();
-});
-
-test('Tooltip on <Message /> works', async () => {
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreMessage tooltip='Hello'>Hello</ReqoreMessage>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.mouseEnter(document.querySelectorAll('.reqore-message')[0]);
-
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-});