@qoretechnologies/reqore 0.31.2 → 0.32.2

package/.github/workflows/tests.yml

@@ -51,7 +51,9 @@ jobs:
         run: yarn test:ci
       - name: Build test
         id: build_test
-        run: yarn build:test
+        run: |
+           yarn build
+           rm -rf dist
       - name: Publish to Chromatic
         id: chromatic_publish
         uses: chromaui/action@v1

package/__tests__/breadcrumbs.test.tsx

@@ -1,23 +1,19 @@
-import { act, render } from "@testing-library/react";
-import React from "react";
-import {
-  ReqoreBreadcrumbs,
-  ReqoreLayoutContent,
-  ReqoreUIProvider,
-} from "../src";
-
-test("Renders full <Breadcrumbs /> properly", () => {
+import { act, fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { ReqoreBreadcrumbs, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
+
+test('Renders full <Breadcrumbs /> properly', () => {
   render(
-    <div style={{ width: "1000px" }}>
+    <div style={{ width: '1000px' }}>
       <ReqoreUIProvider>
         <ReqoreLayoutContent>
           <ReqoreBreadcrumbs
             items={[
-              { label: "Page 1", icon: "Home3Line" },
-              { label: "Page 2", icon: "Home3Line" },
-              { label: "Page 3", icon: "Home3Line" },
-              { label: "Page 4", icon: "Home3Line" },
-              { label: "Page 5", icon: "Home3Line" },
+              { label: 'Page 1', icon: 'Home3Line' },
+              { label: 'Page 2', icon: 'Home3Line' },
+              { label: 'Page 3', icon: 'Home3Line' },
+              { label: 'Page 4', icon: 'Home3Line' },
+              { label: 'Page 5', icon: 'Home3Line' },
             ]}
           />
         </ReqoreLayoutContent>
@@ -25,13 +21,11 @@ test("Renders full <Breadcrumbs /> properly", () => {
     </div>
   );
 
-  expect(document.querySelectorAll(".reqore-breadcrumbs-wrapper").length).toBe(
-    1
-  );
-  expect(document.querySelectorAll(".reqore-breadcrumbs-item").length).toBe(5);
+  expect(document.querySelectorAll('.reqore-breadcrumbs-wrapper').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-breadcrumbs-item').length).toBe(5);
 });
 
-test("Renders shortened <Breadcrumbs /> properly", () => {
+test('Renders shortened <Breadcrumbs /> properly', () => {
   act(() => {
     render(
       <ReqoreUIProvider>
@@ -39,11 +33,11 @@ test("Renders shortened <Breadcrumbs /> properly", () => {
           <ReqoreBreadcrumbs
             _testWidth={300}
             items={[
-              { label: "Page 1", icon: "Home3Line" },
-              { label: "Page 2", icon: "Home3Line" },
-              { label: "Page 3", icon: "Home3Line" },
-              { label: "Page 4", icon: "Home3Line" },
-              { label: "Page 5", icon: "Home3Line" },
+              { label: 'Page 1', icon: 'Home3Line' },
+              { label: 'Page 2', icon: 'Home3Line' },
+              { label: 'Page 3', icon: 'Home3Line' },
+              { label: 'Page 4', icon: 'Home3Line' },
+              { label: 'Page 5', icon: 'Home3Line' },
             ]}
           />
         </ReqoreLayoutContent>
@@ -51,8 +45,32 @@ test("Renders shortened <Breadcrumbs /> properly", () => {
     );
   });
 
-  expect(document.querySelectorAll(".reqore-breadcrumbs-wrapper").length).toBe(
-    1
+  expect(document.querySelectorAll('.reqore-breadcrumbs-wrapper').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-breadcrumbs-item').length).toBe(2);
+});
+
+test('Tooltip on <Breadcrumbs /> works', () => {
+  jest.useFakeTimers();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreBreadcrumbs
+        items={[
+          { label: 'Page 1', icon: 'Home3Line' },
+          { label: 'Page 2', icon: 'Home3Line', tooltip: 'Tooltip' },
+          { label: 'Page 3', icon: 'Home3Line' },
+          { label: 'Page 4', icon: 'Home3Line' },
+          { label: 'Page 5', icon: 'Home3Line' },
+        ]}
+      />
+    </ReqoreUIProvider>
   );
-  expect(document.querySelectorAll(".reqore-breadcrumbs-item").length).toBe(2);
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
+
+  fireEvent.mouseEnter(document.querySelectorAll('.reqore-breadcrumbs-item')[1]);
+
+  jest.advanceTimersByTime(1);
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
 });

package/__tests__/button.test.tsx

@@ -169,3 +169,21 @@ test('Renders <Button /> with a Tag props badge', () => {
 
   expect(document.querySelectorAll('.reqore-button-badge').length).toBe(1);
 });
+
+test('Tooltip on <Button /> works', () => {
+  jest.useFakeTimers();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreButton tooltip='test'>Click</ReqoreButton>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
+
+  fireEvent.mouseEnter(document.querySelectorAll('.reqore-button')[0]);
+
+  jest.advanceTimersByTime(1);
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
+});

package/__tests__/checkbox.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { ReqoreCheckbox, ReqoreContent, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
 
@@ -25,3 +25,21 @@ test('Renders <Checkbox /> properly', () => {
   expect(screen.getByText('Yes')).toBeTruthy();
   expect(screen.getByText('No')).toBeTruthy();
 });
+
+test('Tooltip on <Checkbox /> works', () => {
+  jest.useFakeTimers();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreCheckbox label='With Text' asSwitch onText='Yes' offText='No' tooltip='test' />
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
+
+  fireEvent.mouseEnter(document.querySelectorAll('.reqore-checkbox')[0]);
+
+  jest.advanceTimersByTime(1);
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
+});

package/__tests__/collection.test.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom/extend-expect';
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { ReqoreCollection, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
@@ -17,10 +18,13 @@ test('Renders basic <Collection /> properly', () => {
 });
 
 test('<Collection /> items can be filtered', () => {
+  const fn = jest.fn();
+  jest.useFakeTimers();
+
   render(
     <ReqoreUIProvider>
       <ReqoreLayoutContent>
-        <ReqoreCollection items={items} filterable />
+        <ReqoreCollection items={items} filterable onQueryChange={fn} />
       </ReqoreLayoutContent>
     </ReqoreUIProvider>
   );
@@ -29,12 +33,19 @@ test('<Collection /> items can be filtered', () => {
     target: { value: 'I have' },
   });
 
+  expect(fn).not.toHaveBeenCalled();
+
+  jest.runAllTimers();
+
+  expect(fn).toHaveBeenCalledWith('I have');
   expect(document.querySelectorAll('.reqore-collection-item').length).toBe(2);
 
   fireEvent.change(document.querySelector('.reqore-input')!, {
     target: { value: 'asg' },
   });
 
+  jest.runAllTimers();
+
   expect(document.querySelectorAll('.reqore-collection-item').length).toBe(0);
   expect(document.querySelectorAll('.reqore-message').length).toBe(1);
 
@@ -42,6 +53,8 @@ test('<Collection /> items can be filtered', () => {
     target: { value: 'secret' },
   });
 
+  jest.runAllTimers();
+
   expect(document.querySelectorAll('.reqore-collection-item').length).toBe(1);
   expect(document.querySelectorAll('.reqore-message').length).toBe(0);
 });

package/__tests__/icon.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { ReqoreContent, ReqoreIcon, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
 
@@ -33,3 +33,21 @@ test('Renders empty <Icon /> if icon does not exist', () => {
   expect(document.querySelector('.reqore-icon').textContent).toBe('');
   expect(document.querySelectorAll('svg').length).toBe(0);
 });
+
+test('Tooltip on <Icon /> works', () => {
+  jest.useFakeTimers();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreIcon icon='24HoursLine' tooltip='test' />
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
+
+  fireEvent.mouseEnter(document.querySelectorAll('.reqore-icon')[0]);
+
+  jest.advanceTimersByTime(1);
+
+  expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
+});