@qoretechnologies/reqore 0.43.0 → 0.45.0

package/__tests__/panel.test.tsx

@@ -1,243 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-import { ReqoreInput, ReqoreLayoutContent, ReqorePanel, ReqoreUIProvider } from '../src';
-
-test('Renders basic <Panel /> properly', () => {
-  render(
-    <div style={{ width: '1000px' }}>
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqorePanel> Panel </ReqorePanel>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    </div>
-  );
-
-  expect(document.querySelectorAll('.reqore-panel').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-panel-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-panel-title').length).toBe(0);
-});
-
-test('Renders basic <Panel /> with title properly', () => {
-  render(
-    <div style={{ width: '1000px' }}>
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqorePanel icon='4KFill' label='Test'>
-            {' '}
-            Panel{' '}
-          </ReqorePanel>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    </div>
-  );
-
-  expect(document.querySelectorAll('.reqore-panel').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-panel-title').length).toBe(1);
-  expect(document.querySelectorAll('span').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-panel-content').length).toBe(1);
-});
-
-test('Renders basic <Panel /> that is collapsed by default and can be expanded', () => {
-  render(
-    <div style={{ width: '1000px' }}>
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqorePanel label='Test' isCollapsed collapsible>
-            {' '}
-            Panel{' '}
-          </ReqorePanel>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    </div>
-  );
-
-  const collapseButton = document.querySelector('.reqore-button');
-
-  expect(document.querySelectorAll('.reqore-panel').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-panel-title').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-panel-content').length).toBe(0);
-  expect(collapseButton).toBeTruthy();
-
-  fireEvent.click(collapseButton!);
-
-  expect(document.querySelectorAll('.reqore-panel-content').length).toBe(1);
-
-  fireEvent.click(collapseButton!);
-
-  expect(document.querySelectorAll('.reqore-panel-content').length).toBe(0);
-});
-
-test('Renders closable <Panel /> properly', () => {
-  const fn = jest.fn();
-
-  render(
-    <div style={{ width: '1000px' }}>
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqorePanel label='Test' onClose={fn}>
-            {' '}
-            Panel{' '}
-          </ReqorePanel>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    </div>
-  );
-
-  const closeButton = document.querySelector('.reqore-button');
-
-  expect(document.querySelectorAll('.reqore-panel').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-panel-title').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-panel-content').length).toBe(1);
-  expect(closeButton).toBeTruthy();
-
-  fireEvent.click(closeButton!);
-
-  expect(fn).toHaveBeenCalled();
-});
-
-test('Renders <Panel /> with actions', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqorePanel
-          label='Test'
-          onClose={fn}
-          actions={[
-            { label: 'Test' },
-            { actions: [{ label: 'Deep', value: 'deep' }] },
-            { as: ReqoreInput },
-            { label: 'hidden', show: false },
-          ]}
-          bottomActions={[
-            { label: 'Test', position: 'left' },
-            { actions: [{ label: 'Deep', value: 'deep' }], position: 'right' },
-            { label: 'hidden', show: false },
-          ]}
-        >
-          {' '}
-          Panel{' '}
-        </ReqorePanel>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-button').length).toBe(5);
-  expect(document.querySelectorAll('.reqore-dropdown-control').length).toBe(2);
-  expect(document.querySelectorAll('.reqore-input').length).toBe(1);
-});
-
-test('Renders <Panel /> without actions group if all actions are not shown', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqorePanel
-          label='Test'
-          actions={[
-            { label: 'Test', show: false },
-            { actions: [{ label: 'Deep', value: 'deep' }], show: false },
-            { as: ReqoreInput, show: false },
-            { label: 'hidden', show: false },
-          ]}
-        >
-          Panel
-        </ReqorePanel>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-control-group').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-button').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-dropdown-control').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-input').length).toBe(0);
-});
-
-test('Renders <Panel /> without title & bottom actions if all actions are not shown, there is no icon, & title is not collapsible', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqorePanel
-          actions={[
-            { label: 'Test', show: false },
-            { actions: [{ label: 'Deep', value: 'deep' }], show: false },
-            { as: ReqoreInput, show: false },
-            { label: 'hidden', show: false },
-            {
-              group: [
-                { label: 'Test 2', show: true },
-                { label: 'Test 3', show: true },
-              ],
-              show: false,
-            },
-          ]}
-          bottomActions={[
-            { label: 'Test', show: false },
-            { actions: [{ label: 'Deep', value: 'deep' }], show: false },
-            { as: ReqoreInput, position: 'right', show: false },
-            { label: 'hidden', show: false },
-            {
-              position: 'right',
-              group: [
-                { label: 'Test 2', show: true },
-                { label: 'Test 3', show: true },
-              ],
-              show: false,
-            },
-          ]}
-        >
-          Panel
-        </ReqorePanel>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-control-group').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-button').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-dropdown-control').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-input').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-panel-title').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-panel-bottom-actions').length).toBe(0);
-});
-
-test('Tooltip on <Panel /> works', () => {
-  jest.useFakeTimers();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqorePanel tooltip='Hello'>Hello</ReqorePanel>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-  fireEvent.mouseEnter(document.querySelectorAll('.reqore-panel')[0]);
-
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-});
-
-test('Custom control props on <Panel />', () => {
-  jest.useFakeTimers();
-  const onClose = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqorePanel
-        onClose={onClose}
-        collapsible
-        closeButtonProps={{ label: 'Close me' }}
-        collapseButtonProps={{ label: 'Collapse me' }}
-      >
-        Hello
-      </ReqorePanel>
-    </ReqoreUIProvider>
-  );
-
-  expect(screen.getAllByText('Close me')).toBeTruthy();
-  expect(screen.getAllByText('Collapse me')).toBeTruthy();
-});

package/__tests__/popover.test.tsx

@@ -1,282 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-import { ReqorePopover, ReqoreUIProvider } from '../src/index';
-
-const SimpleContent = (props: any) => {
-  return (
-    <ReqorePopover
-      component='p'
-      content={props.content || 'Tooltip content'}
-      handler={props.type}
-      delay={props.delay}
-      blur={props.blur}
-      isReqoreComponent
-    >
-      Hover me
-    </ReqorePopover>
-  );
-};
-
-const FullContent = (props: any) => {
-  return (
-    <ReqorePopover
-      component='p'
-      content={props.content || 'test'}
-      placement='right'
-      componentProps={{ onMouseEnter: () => props.fn() }}
-    >
-      Hover me
-    </ReqorePopover>
-  );
-};
-
-beforeAll(() => {
-  jest.useFakeTimers();
-});
-
-test('Shows popover on hover, hides on leave', async () => {
-  render(
-    <ReqoreUIProvider>
-      <SimpleContent />
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.mouseEnter(screen.getByText('Hover me'));
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-
-  fireEvent.mouseLeave(screen.getByText('Hover me'));
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-});
-
-test('Shows popover on click, hides only on click away', async () => {
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <SimpleContent type='click' />
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(screen.getByText('Hover me'));
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-
-  fireEvent.click(screen.getByText('Tooltip content'));
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-
-  fireEvent.click(screen.getByText('Hover me'));
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-});
-
-test('Shows custom content', async () => {
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <SimpleContent content={<h1>Custom title</h1>} />
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.mouseEnter(screen.getByText('Hover me'));
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('h1').length).toBe(1);
-
-  fireEvent.mouseLeave(screen.getByText('Hover me'));
-});
-
-test('Runs callback function', async () => {
-  const fn = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <FullContent fn={fn} />
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.mouseEnter(screen.getByText('Hover me'));
-  jest.advanceTimersByTime(1);
-
-  expect(fn).toHaveBeenCalled();
-
-  fireEvent.mouseLeave(screen.getByText('Hover me'));
-});
-
-test('Shows the popover after a local delay, ignoring global delay', async () => {
-  render(
-    <ReqoreUIProvider options={{ tooltips: { delay: 1000 } }}>
-      <SimpleContent delay={500} />
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.mouseEnter(screen.getByText('Hover me'));
-
-  act(() => {
-    jest.advanceTimersByTime(100);
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-  act(() => {
-    jest.advanceTimersByTime(400);
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-
-  fireEvent.mouseLeave(screen.getByText('Hover me'));
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-});
-
-test('Shows the popover after a global delay', async () => {
-  render(
-    <ReqoreUIProvider options={{ tooltips: { delay: 1000 } }}>
-      <SimpleContent />
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.mouseEnter(screen.getByText('Hover me'));
-
-  act(() => {
-    jest.advanceTimersByTime(500);
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-  act(() => {
-    jest.advanceTimersByTime(500);
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-
-  fireEvent.mouseLeave(screen.getByText('Hover me'));
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-});
-
-test('Shows the popover with blur', async () => {
-  render(
-    <ReqoreUIProvider>
-      <SimpleContent blur={3} />
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.mouseEnter(screen.getByText('Hover me'));
-
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-blur-wrapper').length).toBe(1);
-  expect(document.querySelectorAll('p')[0].classList).toContain('reqore-blur-z-index');
-
-  fireEvent.mouseLeave(screen.getByText('Hover me'));
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-  expect(document.querySelectorAll('.reqore-blur-wrapper').length).toBe(0);
-  expect(document.querySelectorAll('p')[0].classList).not.toContain('reqore-blur-z-index');
-});
-
-test('Does not show the popover with delay if time not reached', async () => {
-  render(
-    <ReqoreUIProvider>
-      <SimpleContent delay={500} />
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.mouseEnter(screen.getByText('Hover me'));
-
-  jest.advanceTimersByTime(100);
-
-  fireEvent.mouseLeave(screen.getByText('Hover me'));
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-  jest.advanceTimersByTime(500);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-});
-
-test('Shows the hoverStay popover after a delay and stays, ', async () => {
-  jest.useFakeTimers();
-
-  render(
-    <ReqoreUIProvider>
-      <SimpleContent delay={500} type='hoverStay' />
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.mouseEnter(screen.getByText('Hover me'));
-
-  act(() => {
-    jest.advanceTimersByTime(100);
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-  act(() => {
-    jest.advanceTimersByTime(400);
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-
-  fireEvent.mouseLeave(screen.getByText('Hover me'));
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-});
-
-test('Correctly passes popover data for non-opened popover', async () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqorePopover
-        component='p'
-        content={'Tooltip content'}
-        passPopoverData={(data) => {
-          fn(data.isOpen());
-        }}
-        isReqoreComponent
-      >
-        Hover me
-      </ReqorePopover>
-    </ReqoreUIProvider>
-  );
-
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-  expect(fn).toHaveBeenCalledWith(false);
-});
-
-test('Correctly passes popover data for opened popover', async () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqorePopover
-        component='p'
-        content={'Tooltip content'}
-        passPopoverData={(data) => {
-          fn(data.isOpen());
-        }}
-        openOnMount
-        isReqoreComponent
-      >
-        Hover me
-      </ReqorePopover>
-    </ReqoreUIProvider>
-  );
-
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(fn).toHaveBeenCalledWith(true);
-});

package/__tests__/radiogroup.test.tsx

@@ -1,47 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import React from 'react';
-import {
-  ReqoreContent,
-  ReqoreLayoutContent,
-  ReqoreRadioGroup,
-  ReqoreUIProvider,
-} from '../src';
-
-test('Renders <Checkbox /> properly', () => {
-  const fn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreRadioGroup
-            size='small'
-            items={[
-              {
-                label: 'Option 1',
-                value: 'opt1',
-              },
-              {
-                label: 'Option 2',
-                value: 'opt2',
-              },
-              {
-                label: 'Option 3',
-                value: 'opt3',
-                labelDetail: <p className='label-detail' />,
-              },
-            ]}
-            onSelectClick={fn}
-          />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-checkbox').length).toBe(3);
-  expect(document.querySelectorAll('.label-detail').length).toBe(1);
-
-  fireEvent.click(document.querySelectorAll('.reqore-checkbox')[1]);
-
-  expect(fn).toHaveBeenCalledWith('opt2');
-});

package/__tests__/setup.js

@@ -1,8 +0,0 @@
-global.console = {
-  ...console,
-  // uncomment to ignore a specific log level
-  debug: jest.fn(),
-  info: jest.fn(),
-  // warn: jest.fn(),
-  error: jest.fn(),
-};