@qoretechnologies/reqore 0.43.0 → 0.45.0

package/__tests__/dropdown.test.tsx

@@ -1,381 +0,0 @@
-import { fireEvent, render } from '@testing-library/react';
-import { useEffect, useState } from 'react';
-import { act } from 'react-dom/test-utils';
-import {
-  ReqoreContent,
-  ReqoreDropdown,
-  ReqoreInput,
-  ReqoreLayoutContent,
-  ReqoreUIProvider,
-} from '../src';
-import { IReqoreInputProps } from '../src/components/Input';
-
-beforeAll(() => {
-  jest.setTimeout(30000);
-});
-
-test('Renders <Dropdown /> properly', () => {
-  jest.useFakeTimers();
-  act(() => {
-    jest.advanceTimersByTime(1);
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'howareya',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'disabled',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelector('.reqore-button')?.getAttribute('disabled')).toBe(null);
-  expect(document.querySelectorAll('.reqore-button').length).toBe(4);
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
-});
-
-test('Renders disabled <Dropdown /> when items are empty', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-
-  expect(document.querySelector('.reqore-button')?.getAttribute('disabled')).toBe('');
-});
-
-test('Renders disabled <Dropdown /> when items are not empty & disabled prop is true', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              label='Disabled with items'
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'howareya',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'disabled',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-              disabled
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  expect(document.querySelector('.reqore-button')?.getAttribute('disabled')).toBe('');
-});
-
-test('Renders <Dropdown /> with custom component and custom handler', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              component={ReqoreInput}
-              handler='focus'
-              useTargetWidth
-              width={500}
-              placeholder='Focus me to see some crazy stuff'
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'asg',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'hhhhh',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  const component = document.querySelector('.reqore-input');
-
-  if (component) {
-    fireEvent.focus(component);
-    jest.advanceTimersByTime(1);
-  }
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
-});
-
-test('Renders <Dropdown /> is opened by default', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown<IReqoreInputProps>
-              component={ReqoreInput}
-              handler='focus'
-              isDefaultOpen
-              useTargetWidth
-              width={500}
-              placeholder='Focus me to see some crazy stuff'
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'asg',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'hhhhh',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-    jest.advanceTimersByTime(1);
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(3);
-});
-
-test('Renders <Dropdown /> and calls a function on item click, closes the dropdown', () => {
-  jest.useFakeTimers();
-  const onClick = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                  onClick,
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-    jest.advanceTimersByTime(1);
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(1);
-
-  fireEvent.click(document.querySelector('.reqore-menu-item')!);
-  expect(onClick).toHaveBeenCalledWith(
-    expect.objectContaining({
-      selected: true,
-      label: 'Hello',
-      value: 'hello',
-      icon: 'SunCloudyLine',
-      onClick,
-    })
-  );
-});
-expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-test('Renders filterable <Dropdown /> and filters items correctly', () => {
-  jest.useFakeTimers();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <ReqoreDropdown
-              filterable
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'howareya',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'disabled',
-                  icon: 'StopCircleLine',
-                },
-                {
-                  value: 'onlyvalue',
-                  icon: 'StopCircleLine',
-                },
-              ]}
-            />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-  jest.advanceTimersByTime(1);
-  fireEvent.change(document.querySelector('.reqore-input')!, {
-    target: { value: 'how' },
-  });
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(1);
-
-  fireEvent.change(document.querySelector('.reqore-input')!, {
-    target: { value: '' },
-  });
-
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(4);
-
-  // Search in value only
-  fireEvent.change(document.querySelector('.reqore-input')!, {
-    target: { value: 'onlyvalue' },
-  });
-
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(1);
-
-  fireEvent.change(document.querySelector('.reqore-input')!, {
-    target: { value: 'asfd' },
-  });
-
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(0);
-});
-
-const MultiSelectDropdown = ({ onChange }) => {
-  const [selected, setSelected] = useState<string[]>([]);
-
-  useEffect(() => {
-    onChange(selected);
-  }, [selected]);
-
-  return (
-    <ReqoreDropdown
-      multiSelect
-      onItemSelect={({ value }) => setSelected([...selected, value])}
-      items={[
-        {
-          label: 'Item 1',
-          value: 'item-1',
-          selected: selected.includes('item-1'),
-        },
-        {
-          label: 'Item 2',
-          value: 'item-2',
-          selected: selected.includes('item-2'),
-        },
-      ]}
-    />
-  );
-};
-
-test('Renders <Dropdown /> and updates its items when state changes, does not close dropdown', () => {
-  const fn = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreContent>
-            <MultiSelectDropdown onChange={fn} />
-          </ReqoreContent>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelector('.reqore-button')!);
-
-  expect(document.querySelectorAll('.reqore-button').length).toBe(3);
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(2);
-
-  fireEvent.click(document.querySelectorAll('.reqore-menu-item')[0]);
-  expect(fn).toHaveBeenNthCalledWith(2, ['item-1']);
-
-  fireEvent.click(document.querySelectorAll('.reqore-menu-item')[1]);
-  expect(fn).toHaveBeenNthCalledWith(3, ['item-1', 'item-2']);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-});

package/__tests__/effect.test.tsx

@@ -1,70 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import {
-  ReqoreContent,
-  ReqoreEffect,
-  ReqoreLayoutContent,
-  ReqoreTextEffect,
-  ReqoreUIProvider,
-} from '../src';
-
-test('Renders <ReqoreEffect /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreEffect
-            as='div'
-            effect={{
-              gradient: {
-                type: 'radial',
-                shape: 'circle',
-                colors: {
-                  0: 'danger:lighten:2',
-                  100: 'info:darken:1',
-                },
-              },
-              spaced: 10,
-              uppercase: true,
-              weight: 'bold',
-              color: 'main',
-            }}
-          >
-            This is a test
-          </ReqoreEffect>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-effect').length).toBe(1);
-});
-
-test('Renders <ReqoreTextEffect /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreTextEffect
-            as='p'
-            effect={{
-              gradient: {
-                colors: {
-                  0: '#ff0000',
-                  100: '#00ff00',
-                },
-              },
-              spaced: 10,
-              uppercase: true,
-              weight: 'thin',
-            }}
-          >
-            This is a test
-          </ReqoreTextEffect>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-text-effect').length).toBe(1);
-});

package/__tests__/heading.test.tsx

@@ -1,58 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-import {
-  ReqoreH1,
-  ReqoreH2,
-  ReqoreH3,
-  ReqoreH4,
-  ReqoreH5,
-  ReqoreH6,
-  ReqoreUIProvider,
-} from '../src';
-
-test('<Heading /> renders properly', () => {
-  jest.useFakeTimers();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreH1>H1</ReqoreH1>
-      <ReqoreH2>H2</ReqoreH2>
-      <ReqoreH3>H3</ReqoreH3>
-      <ReqoreH4>H4</ReqoreH4>
-      <ReqoreH5>H5</ReqoreH5>
-      <ReqoreH6>H6</ReqoreH6>
-    </ReqoreUIProvider>
-  );
-
-  expect(screen.getAllByText('H1')).toBeTruthy();
-  expect(screen.getAllByText('H2')).toBeTruthy();
-  expect(screen.getAllByText('H3')).toBeTruthy();
-  expect(screen.getAllByText('H4')).toBeTruthy();
-  expect(screen.getAllByText('H5')).toBeTruthy();
-  expect(screen.getAllByText('H6')).toBeTruthy();
-
-  expect(document.querySelectorAll('h1').length).toBe(1);
-  expect(document.querySelectorAll('h2').length).toBe(1);
-  expect(document.querySelectorAll('h3').length).toBe(1);
-  expect(document.querySelectorAll('h4').length).toBe(1);
-  expect(document.querySelectorAll('h5').length).toBe(1);
-  expect(document.querySelectorAll('h6').length).toBe(1);
-});
-
-test('Tooltip on <Heading /> works', () => {
-  jest.useFakeTimers();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreH3 tooltip='test'>Test</ReqoreH3>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
-
-  fireEvent.mouseEnter(document.querySelectorAll('h3')[0]);
-
-  jest.advanceTimersByTime(1);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-});

package/__tests__/helpers/colors.test.tsx

@@ -1,18 +0,0 @@
-import { hexAToRGBA, shouldDarken } from '../../src/helpers/colors';
-
-test('Tests whether a color should be darkened', () => {
-  expect(shouldDarken('#000000')).toBe(false);
-  expect(shouldDarken('#ffffff')).toBe(true);
-  expect(shouldDarken('#00000020')).toBe(false);
-  expect(shouldDarken('rgba(255, 255, 255, 0.1)')).toBe(true);
-});
-
-test('Transforms hex color with alpha to rgba', () => {
-  expect(hexAToRGBA('#000000')).toEqual('rgba(0, 0, 0, 1.00)');
-  expect(hexAToRGBA('#000')).toEqual('rgba(0, 0, 0, 1.00)');
-  expect(hexAToRGBA('#333')).toEqual('rgba(51, 51, 51, 1.00)');
-  expect(hexAToRGBA('#00000050')).toEqual('rgba(0, 0, 0, 0.31)');
-  expect(hexAToRGBA('#00000000')).toEqual('rgba(0, 0, 0, 0.00)');
-  expect(hexAToRGBA('rgb(0, 0, 0)')).toEqual('rgb(0, 0, 0)');
-  expect(hexAToRGBA('rgba(0, 0, 0, 1)')).toEqual('rgba(0, 0, 0, 1)');
-});

package/__tests__/helpers/table.test.tsx

@@ -1,67 +0,0 @@
-import {
-  getColumnsByPinType,
-  getColumnsCount,
-  getOnlyShownColumns,
-  hasHiddenColumns,
-  updateColumnData,
-} from '../../src/components/Table/helpers';
-import { testColumns } from '../../src/mock/tableData';
-
-test('Updates top level column width', () => {
-  const columns = [...testColumns];
-
-  expect(columns[0].width).toBe(50);
-
-  const newColumns = updateColumnData(columns, 'id', 'resizedWidth', 100);
-
-  expect(newColumns[0].width).toBe(50);
-  expect(newColumns[0].resizedWidth).toBe(100);
-});
-
-test('Updates group level column width', () => {
-  const columns = [...testColumns];
-
-  expect(columns[1].header!.columns![0].width).toBe(150);
-
-  const newColumns = updateColumnData(columns, 'firstName', 'resizedWidth', 250);
-
-  expect(newColumns[1].header!.columns![0].width).toBe(150);
-  expect(newColumns[1].header!.columns![0].resizedWidth).toBe(250);
-});
-
-test('Filters out hidden columns', () => {
-  const columns = [...testColumns];
-
-  expect(getColumnsCount(columns)).toBe(8);
-
-  columns[1].header!.columns![0].show = false;
-  columns[1].header!.columns![1].show = false;
-  columns[3].show = false;
-  columns[4].header!.columns![1].show = false;
-
-  const newColumns = getOnlyShownColumns(columns);
-
-  expect(getColumnsCount(newColumns)).toBe(4);
-  expect(hasHiddenColumns(columns)).toBe(true);
-  expect(hasHiddenColumns(newColumns)).toBe(false);
-  expect(newColumns[1].dataId).toBe('address');
-});
-
-test('Returns pinned columns', () => {
-  const columns = [...testColumns];
-
-  expect(getColumnsCount(columns)).toBe(8);
-
-  columns[1].header!.columns![1].pin = 'left';
-  columns[0].pin = 'left';
-  columns[4].header!.columns![0].pin = 'right';
-  columns[4].header!.columns![1].pin = 'right';
-
-  const leftPinColumns = getColumnsByPinType(columns, 'left');
-  const rightPinColumns = getColumnsByPinType(columns, 'right');
-  const mainColumns = getColumnsByPinType(columns, 'main');
-
-  expect(getColumnsCount(leftPinColumns)).toBe(2);
-  expect(getColumnsCount(rightPinColumns)).toBe(2);
-  expect(getColumnsCount(mainColumns)).toBe(4);
-});

package/__tests__/hooks/useLatestZIndex.test.tsx

@@ -1,10 +0,0 @@
-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);
-});