@qoretechnologies/reqore 0.31.2 → 0.32.0

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,12 @@ test('Renders basic <Collection /> properly', () => {
 });
 
 test('<Collection /> items can be filtered', () => {
+  const fn = jest.fn();
+
   render(
     <ReqoreUIProvider>
       <ReqoreLayoutContent>
-        <ReqoreCollection items={items} filterable />
+        <ReqoreCollection items={items} filterable onQueryChange={fn} />
       </ReqoreLayoutContent>
     </ReqoreUIProvider>
   );
@@ -29,6 +32,7 @@ test('<Collection /> items can be filtered', () => {
     target: { value: 'I have' },
   });
 
+  expect(fn).toHaveBeenCalledWith('I have');
   expect(document.querySelectorAll('.reqore-collection-item').length).toBe(2);
 
   fireEvent.change(document.querySelector('.reqore-input')!, {

package/__tests__/input.test.tsx

@@ -1,57 +1,61 @@
-import { fireEvent, render } from "@testing-library/react";
-import { noop } from "lodash";
-import React from "react";
-import {
-  ReqoreContent,
-  ReqoreInput,
-  ReqoreLayoutContent,
-  ReqoreUIProvider,
-} from "../src";
+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';
 
-test("Renders <Input /> properly", () => {
+beforeAll(() => {
+  Globals.assign({
+    skipAnimation: true,
+  });
+});
+
+test('Renders <Input /> properly', () => {
   render(
     <ReqoreUIProvider>
       <ReqoreLayoutContent>
         <ReqoreContent>
           <ReqoreInput minimal />
           <ReqoreInput disabled />
-          <ReqoreInput size="big" />
+          <ReqoreInput size='big' />
         </ReqoreContent>
       </ReqoreLayoutContent>
     </ReqoreUIProvider>
   );
 
-  expect(document.querySelectorAll(".reqore-input").length).toBe(3);
+  expect(document.querySelectorAll('.reqore-input').length).toBe(3);
   // No clear button
-  expect(document.querySelectorAll(".reqore-clear-input-button").length).toBe(
-    0
-  );
+  expect(document.querySelectorAll('.reqore-clear-input-button').length).toBe(0);
 });
 
-test("Renders <Input /> with clear button properly", () => {
+test('Renders <Input /> with clear button properly', async () => {
+  jest.useFakeTimers();
+
   const fn = jest.fn();
 
   render(
     <ReqoreUIProvider>
       <ReqoreLayoutContent>
         <ReqoreContent>
-          <ReqoreInput minimal onChange={noop} onClearClick={fn} />
+          <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
-  );
+  expect(document.querySelectorAll('.reqore-clear-input-button').length).toBe(1);
 
-  fireEvent.click(document.querySelector(".reqore-clear-input-button"));
+  fireEvent.click(document.querySelector('.reqore-clear-input-button')!);
 
   expect(fn).toHaveBeenCalled();
 });
 
-test("Disabled <Input /> cannot be cleared", () => {
+test('Disabled <Input /> cannot be cleared', () => {
   const fn = jest.fn();
 
   render(
@@ -65,7 +69,396 @@ test("Disabled <Input /> cannot be cleared", () => {
   );
 
   // No clear button
-  expect(document.querySelectorAll(".reqore-clear-input-button").length).toBe(
-    0
+  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();
 });

package/__tests__/multiselect.test.tsx

@@ -40,8 +40,6 @@ test('Renders empty <ReqoreMultiSelect />', () => {
   expect(screen.getByText('No items selected')).toBeTruthy();
   expect(document.querySelectorAll('.reqore-input')?.length).toBe(1);
   expect(document.querySelector('.reqore-input')?.getAttribute('disabled')).toBe(null);
-  // Because input is clearable
-  expect(document.querySelectorAll('.reqore-button').length).toBe(1);
   expect(document.querySelectorAll('.reqore-popover-content').length).toBe(0);
   // No items tag
   expect(document.querySelectorAll('.reqore-tag').length).toBe(1);
@@ -149,13 +147,13 @@ test('Renders <ReqoreMultiSelect /> and items can be searched, opens up the list
 
   expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
   // 4 items + 1 button for clearable input
-  expect(document.querySelectorAll('.reqore-button').length).toBe(5);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(4);
 
   fireEvent.change(document.querySelector('.reqore-input')!, {
     target: { value: 'Nothing' },
   });
 
-  expect(document.querySelectorAll('.reqore-button').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(1);
   expect(screen.getAllByText('No existing items found')).toBeTruthy();
 });
 
@@ -174,13 +172,13 @@ test('Renders <ReqoreMultiSelect /> and items can be searched and created, opens
 
   expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
   // 4 items + 1 button for clearable input
-  expect(document.querySelectorAll('.reqore-button').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(1);
 
   fireEvent.change(document.querySelector('.reqore-input')!, {
     target: { value: 'Existing item' },
   });
 
-  expect(document.querySelectorAll('.reqore-button').length).toBe(6);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(5);
   expect(screen.getAllByText('Create new "Existing item"')).toBeTruthy();
 
   // This has to fail because we do not allow creating items with ENTER key
@@ -201,7 +199,7 @@ test('Renders <ReqoreMultiSelect /> and items can be searched and created, opens
   });
 
   // 6 again because the item is already created, so the Create button is not there
-  expect(document.querySelectorAll('.reqore-button').length).toBe(6);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(5);
 });
 
 test('Renders <ReqoreMultiSelect /> and items can be searched and created using the ENTER key, opens up the list', () => {
@@ -221,14 +219,14 @@ test('Renders <ReqoreMultiSelect /> and items can be searched and created using
 
   expect(document.querySelectorAll('.reqore-popover-content').length).toBe(1);
   // 4 items + 1 button for clearable input
-  expect(document.querySelectorAll('.reqore-button').length).toBe(2);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(1);
 
   fireEvent.focus(document.querySelector('.reqore-input')!);
   fireEvent.change(document.querySelector('.reqore-input')!, {
     target: { value: 'Existing item' },
   });
 
-  expect(document.querySelectorAll('.reqore-button').length).toBe(6);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(5);
   expect(screen.getAllByText('Create new "Existing item"')).toBeTruthy();
 
   // Create the item by pressing ENTER key
@@ -245,7 +243,7 @@ test('Renders <ReqoreMultiSelect /> and items can be searched and created using
   });
 
   // 6 again because the item is already created, so the Create button is not there
-  expect(document.querySelectorAll('.reqore-button').length).toBe(6);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(5);
 
   fireEvent.focus(document.querySelector('.reqore-input')!);
   // Does not create new item if the query is empty