@qoretechnologies/reqore 0.44.0 → 0.45.0

package/__tests__/tabs.test.tsx

@@ -1,321 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import React, { useState } from 'react';
-import { ReqoreLayoutContent, ReqoreTabs, ReqoreTabsContent, ReqoreUIProvider } from '../src';
-
-test('Renders full <Tabs /> properly', () => {
-  render(
-    <div style={{ width: '1000px' }}>
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreTabs
-            tabs={[
-              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
-              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
-              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3' },
-              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
-              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
-            ]}
-          >
-            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
-          </ReqoreTabs>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    </div>
-  );
-
-  expect(document.querySelectorAll('.reqore-tabs-list').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-tabs').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(5);
-  expect(document.querySelectorAll('.reqore-tabs-content').length).toBe(1);
-  expect(screen.getByText('Tab 1 content')).toBeTruthy();
-});
-
-test('Renders shortened <Tabs /> properly', () => {
-  const fn = jest.fn();
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreTabs
-            _testWidth={300}
-            onTabChange={fn}
-            tabs={[
-              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
-              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
-              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3' },
-              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
-              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
-            ]}
-          >
-            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
-          </ReqoreTabs>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(2);
-  expect(document.querySelectorAll('.reqore-tabs-list-item-menu').length).toBe(1);
-
-  fireEvent.mouseEnter(document.querySelector('.reqore-tabs-list-item-menu')!);
-
-  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(4);
-
-  fireEvent.click(document.querySelectorAll('.reqore-menu-item')[0]);
-
-  expect(fn).toBeCalledTimes(1);
-  expect(fn).toBeCalledWith('tab2');
-});
-
-test('Can select hidden <Tabs /> when shortened', () => {
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreTabs
-            _testWidth={300}
-            tabs={[
-              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
-              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
-              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3' },
-              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
-              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
-            ]}
-          >
-            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
-          </ReqoreTabs>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(2);
-  expect(document.querySelectorAll('.reqore-tabs-list-item-menu').length).toBe(1);
-});
-
-test('Default active tab can be specified', () => {
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreTabs
-            tabs={[
-              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
-              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
-              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3' },
-              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
-              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
-            ]}
-            activeTab='tab4'
-          >
-            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
-          </ReqoreTabs>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  expect(screen.getByText('Tab 4 content')).toBeTruthy();
-});
-
-test('Changes tab and runs callback', () => {
-  const cb = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreTabs
-            tabs={[
-              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
-              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
-              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3' },
-              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
-              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
-            ]}
-            onTabChange={cb}
-          >
-            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
-          </ReqoreTabs>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelectorAll('.reqore-tabs-list-item')[2]);
-
-  expect(screen.getByText('Tab 3 content')).toBeTruthy();
-  expect(cb).toHaveBeenCalledWith('tab3');
-  expect(document.querySelectorAll('.reqore-tabs-list-item-active').length).toBe(1);
-});
-
-test('Does not change tab and run callback when disabled', () => {
-  const cb = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreTabs
-            tabs={[
-              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
-              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
-              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3', disabled: true },
-              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
-              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
-            ]}
-            onTabChange={cb}
-          >
-            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
-          </ReqoreTabs>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelectorAll('.reqore-tabs-list-item')[2]);
-
-  expect(screen.getByText('Tab 1 content')).toBeTruthy();
-  expect(cb).not.toHaveBeenCalled();
-  expect(document.querySelectorAll('.reqore-tabs-list-item-active').length).toBe(1);
-});
-
-test('Does not change tab when mounted and active tab is set', () => {
-  const cb = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreTabs
-            tabs={[
-              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
-              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
-              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3', disabled: true },
-              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
-              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
-            ]}
-            activeTab={'tab4'}
-            onTabChange={cb}
-          >
-            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
-          </ReqoreTabs>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  expect(cb).not.toHaveBeenCalled();
-});
-
-test('Changes tab programatically and runs callback', () => {
-  const cb = jest.fn();
-
-  const Component = () => {
-    const [activeTab, setActiveTab] = useState('tab1');
-
-    return (
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreTabs
-            tabs={[
-              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
-              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
-              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3', disabled: true },
-              { label: 'Tab 4', icon: 'Home3Line', id: 'tab4' },
-              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
-            ]}
-            onTabChange={cb}
-            activeTab={activeTab}
-          >
-            <ReqoreTabsContent tabId='tab1'>
-              <button onClick={() => setActiveTab('tab2')}>Change active tab</button>
-            </ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
-          </ReqoreTabs>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  };
-
-  act(() => {
-    render(<Component />);
-  });
-
-  fireEvent.click(screen.getByText('Change active tab'));
-
-  expect(screen.getByText('Tab 2 content')).toBeTruthy();
-  expect(cb).toHaveBeenCalled();
-});
-
-test('Closable tab can be closed if not disabled', () => {
-  const cb = jest.fn();
-
-  act(() => {
-    render(
-      <ReqoreUIProvider>
-        <ReqoreLayoutContent>
-          <ReqoreTabs
-            tabs={[
-              { label: 'Tab 1', icon: 'Home3Line', id: 'tab1' },
-              { label: 'Tab 2', icon: 'Home3Line', id: 'tab2' },
-              { label: 'Tab 3', icon: 'Home3Line', id: 'tab3', disabled: true },
-              {
-                label: 'Tab 4',
-                icon: 'Home3Line',
-                id: 'tab4',
-                onCloseClick: cb,
-              },
-              { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
-            ]}
-            onTabChange={cb}
-          >
-            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
-          </ReqoreTabs>
-        </ReqoreLayoutContent>
-      </ReqoreUIProvider>
-    );
-  });
-
-  fireEvent.click(document.querySelectorAll('.reqore-tabs-list-item-close')[0]);
-
-  expect(cb).toHaveBeenCalledWith('tab4');
-  expect(screen.getByText('Tab 1 content')).toBeTruthy();
-});

package/__tests__/tag.test.tsx

@@ -1,160 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { noop } from 'lodash';
-import React from 'react';
-import {
-  ReqoreContent,
-  ReqoreControlGroup,
-  ReqoreLayoutContent,
-  ReqoreTag,
-  ReqoreTagGroup,
-  ReqoreUIProvider,
-} from '../src';
-
-test('Renders <Tag /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreControlGroup minimal>
-            <ReqoreTag icon='24HoursLine' rightIcon='4KLine' onClick={noop} onRemoveClick={noop} />
-            <ReqoreTag
-              icon='24HoursLine'
-              rightIcon='4KLine'
-              onClick={noop}
-              onRemoveClick={noop}
-              size='big'
-            />
-            <ReqoreTag
-              icon='24HoursLine'
-              rightIcon='4KLine'
-              onClick={noop}
-              onRemoveClick={noop}
-              size='small'
-            />
-          </ReqoreControlGroup>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-tag').length).toBe(3);
-});
-
-test('Renders <Tag /> group properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreControlGroup minimal>
-            <ReqoreTagGroup>
-              <ReqoreTag
-                icon='24HoursLine'
-                rightIcon='4KLine'
-                onClick={noop}
-                onRemoveClick={noop}
-                label='Label'
-              />
-              <ReqoreTag
-                icon='24HoursLine'
-                rightIcon='4KLine'
-                onClick={noop}
-                onRemoveClick={noop}
-                size='big'
-              />
-              <ReqoreTag
-                icon='24HoursLine'
-                rightIcon='4KLine'
-                onClick={noop}
-                onRemoveClick={noop}
-                size='small'
-                label='Wazzup'
-              />
-            </ReqoreTagGroup>
-          </ReqoreControlGroup>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-tag').length).toBe(3);
-  expect(document.querySelectorAll('.reqore-tag-group').length).toBe(1);
-});
-
-test('Renders <Tag /> without remove button if disabled', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreControlGroup minimal>
-            <ReqoreTagGroup>
-              <ReqoreTag
-                icon='24HoursLine'
-                rightIcon='4KLine'
-                onClick={noop}
-                onRemoveClick={noop}
-                label='Label'
-                disabled
-              />
-            </ReqoreTagGroup>
-          </ReqoreControlGroup>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  expect(document.querySelectorAll('.reqore-tag-remove').length).toBe(0);
-});
-
-test('Fires onClick and onRemoveClick <Tag /> events', () => {
-  const clickFn = jest.fn();
-  const removeClickFn = jest.fn();
-
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreControlGroup minimal>
-            <ReqoreTagGroup>
-              <ReqoreTag
-                icon='24HoursLine'
-                rightIcon='4KLine'
-                label='Test'
-                onClick={clickFn}
-                onRemoveClick={removeClickFn}
-              />
-            </ReqoreTagGroup>
-          </ReqoreControlGroup>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.click(document.querySelector('.reqore-tag-content'));
-
-  expect(clickFn).toHaveBeenCalledTimes(1);
-  expect(removeClickFn).not.toHaveBeenCalled();
-
-  fireEvent.click(document.querySelector('.reqore-tag-remove'));
-
-  expect(clickFn).toHaveBeenCalledTimes(1);
-  expect(removeClickFn).toHaveBeenCalledTimes(1);
-});
-
-test('Renders <Tag /> with the label key', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreControlGroup minimal>
-            <ReqoreTagGroup>
-              <ReqoreTag icon='24HoursLine' rightIcon='4KLine' label='Label' labelKey='label key' />
-            </ReqoreTagGroup>
-          </ReqoreControlGroup>
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  // Get the label key by text from screen
-  expect(screen.getByText('label key')).toBeTruthy();
-});