@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/uploader/Uploader.test.tsx

@@ -1,14 +1,13 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
+import { render } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import userEvent from '@testing-library/user-event';
+import { mdiPlus } from '@lumx/icons';
 import { Uploader, UploaderProps } from './Uploader';
 
-const DEFAULT_PROPS = Uploader.defaultProps as any;
 const CLASSNAME = Uploader.className as string;
 
 type SetupProps = Partial<UploaderProps>;
@@ -16,72 +15,85 @@ type SetupProps = Partial<UploaderProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
+const setup = (propsOverride: SetupProps = {}) => {
     const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Uploader {...props} />);
 
-    return { props, wrapper };
+    render(<Uploader {...props} />);
+    const uploader = getByClassName(document.body, CLASSNAME);
+    const label = queryByClassName(uploader, `${CLASSNAME}__label`);
+    const icon = queryByClassName(uploader, `${CLASSNAME}__icon`);
+
+    return { props, uploader, label, icon };
 };
 
 describe(`<${Uploader.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        // Here is an example of a basic rendering check, with snapshot.
+    describe('Props', () => {
+        it('should render default', () => {
+            const { uploader } = setup();
+
+            expect(uploader).toHaveClass(CLASSNAME);
+            expect(uploader).toHaveClass('lumx-uploader--aspect-ratio-horizontal');
+            expect(uploader).toHaveClass('lumx-uploader--size-xl');
+            expect(uploader).toHaveClass('lumx-uploader--theme-light');
+            expect(uploader).toHaveClass('lumx-uploader--variant-square');
+        });
 
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
+        it('should render icon', () => {
+            const { icon } = setup({ icon: mdiPlus });
+            expect(icon).toBeInTheDocument();
+        });
 
-            expect(wrapper).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
+        it('should render label', () => {
+            const { label } = setup({ label: 'Label' });
+            expect(label).toBeInTheDocument();
+            expect(label).toHaveTextContent('Label');
         });
-    });
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        // Here are some examples of basic props check.
+        it('should render variant circle', () => {
+            const { uploader } = setup({
+                variant: 'circle',
+                // Ratio should be ignored
+                aspectRatio: 'vertical',
+            });
 
-        it('should use default props', () => {
-            const { wrapper } = setup();
+            expect(uploader).toHaveClass(CLASSNAME);
+            expect(uploader).toHaveClass('lumx-uploader--aspect-ratio-square');
+            expect(uploader).toHaveClass('lumx-uploader--size-xl');
+            expect(uploader).toHaveClass('lumx-uploader--theme-light');
+            expect(uploader).toHaveClass('lumx-uploader--variant-circle');
+        });
 
-            Object.keys(DEFAULT_PROPS).forEach((prop: string) => {
-                expect(wrapper).toHaveClassName(
-                    getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }),
-                );
-            });
+        it('should render variant rounded', () => {
+            const { uploader } = setup({ variant: 'rounded' });
+
+            expect(uploader).toHaveClass(CLASSNAME);
+            expect(uploader).toHaveClass('lumx-uploader--aspect-ratio-horizontal');
+            expect(uploader).toHaveClass('lumx-uploader--size-xl');
+            expect(uploader).toHaveClass('lumx-uploader--theme-light');
+            expect(uploader).toHaveClass('lumx-uploader--variant-rounded');
         });
     });
 
-    // 3. Test events.
     describe('Events', () => {
-        // Here is an example how to check a `onClick` event.
-
-        const onClick: jest.Mock = jest.fn();
+        const onClick = jest.fn();
 
         beforeEach(() => {
             onClick.mockClear();
         });
 
-        it('should trigger `onClick` when clicked', () => {
-            const { wrapper } = setup({ onClick }, false);
+        it('should trigger `onClick` when clicked', async () => {
+            const { uploader } = setup({ onClick });
 
-            wrapper.simulate('click');
+            await userEvent.click(uploader);
 
             expect(onClick).toHaveBeenCalled();
         });
     });
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Nothing to do here.
-    });
-
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'uploader',
+        forwardAttributes: 'uploader',
+    });
 });

package/src/components/user-block/UserBlock.test.tsx

@@ -1,9 +1,11 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render, within } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { Thumbnail } from '@lumx/react';
+import userEvent from '@testing-library/user-event';
 
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
 import { UserBlock, UserBlockProps } from './UserBlock';
 
 const CLASSNAME = UserBlock.className as string;
@@ -11,24 +13,78 @@ const CLASSNAME = UserBlock.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: Partial<UserBlockProps> = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<UserBlockProps> = {}) => {
     const props: UserBlockProps = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<UserBlock {...props} />);
 
-    return { props, wrapper };
+    render(<UserBlock {...props} />);
+    const userBlock = getByClassName(document.body, CLASSNAME);
+    const name = queryByClassName(userBlock, `${CLASSNAME}__name`);
+    const avatar = queryByClassName(userBlock, `${CLASSNAME}__avatar`);
+    const thumbnail = avatar && queryByClassName(avatar, Thumbnail.className as string);
+    const fields = queryByClassName(userBlock, `${CLASSNAME}__fields`);
+
+    return { props, userBlock, name, avatar, thumbnail, fields };
 };
 
 describe(`<${UserBlock.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
+    describe('Props', () => {
         it('should forward name props', () => {
-            const { wrapper } = setup({ name: 'John Doe', nameProps: { 'data-custom-attribute': true } });
+            const { name } = setup({ name: 'John Doe', nameProps: { 'data-custom-attribute': true } });
+
+            expect(name).toHaveAttribute('data-custom-attribute');
+        });
+
+        it('should render button', async () => {
+            const onClick = jest.fn();
+            const { name, thumbnail } = setup({
+                onClick,
+                name: 'John Doe',
+                avatarProps: { image: 'profile-picture.jpg' },
+            });
+
+            // Button name
+            expect(name?.tagName).toBe('BUTTON');
+            await userEvent.click(name as any);
+            expect(onClick).toHaveBeenCalled();
+
+            // Button thumbnail (but excluded from tab stops)
+            expect(thumbnail?.tagName).toBe('BUTTON');
+            expect(thumbnail?.tabIndex).toBe(-1);
+            onClick.mockClear();
+            await userEvent.click(thumbnail as any);
+            expect(onClick).toHaveBeenCalled();
+        });
+
+        it('should render link', async () => {
+            const { props, name, thumbnail } = setup({
+                linkProps: { href: 'https://example.com' },
+                name: 'John Doe',
+                avatarProps: { image: 'profile-picture.jpg' },
+            });
+
+            // Link name
+            expect(name?.tagName).toBe('A');
+            expect(name).toHaveAttribute('href', props.linkProps?.href);
 
-            expect(wrapper.find('.lumx-user-block__name[data-custom-attribute]')).toHaveLength(1);
+            // Link thumbnail (but excluded from tab stops)
+            expect(thumbnail?.tagName).toBe('A');
+            expect(thumbnail?.tabIndex).toBe(-1);
+            expect(thumbnail).toHaveAttribute('href', props.linkProps?.href);
+        });
+
+        it('should render fields', () => {
+            const { fields } = setup({ fields: ['Field 1', 'Field 2'] });
+            expect(fields).toBeInTheDocument();
+            expect(within(fields as any).getByText('Field 1')).toBeInTheDocument();
+            expect(within(fields as any).getByText('Field 2')).toBeInTheDocument();
         });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'userBlock',
+        forwardAttributes: 'userBlock',
+        forwardRef: 'userBlock',
+    });
 });

package/src/hooks/useFocusTrap.ts

@@ -72,10 +72,10 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
         // SETUP:
         if (focusElement && focusZoneElement.contains(focusElement)) {
             // Focus the given element.
-            focusElement.focus();
+            focusElement.focus({ preventScroll: true });
         } else {
             // Focus the first focusable element in the zone.
-            getFirstAndLastFocusable(focusZoneElement).first?.focus();
+            getFirstAndLastFocusable(focusZoneElement).first?.focus({ preventScroll: true });
         }
         FOCUS_TRAPS.register(focusTrap);
 

package/src/testing/utils/commonTestsSuiteRTL.ts

@@ -2,6 +2,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import { GenericProps } from '@lumx/react/utils/type';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import React from 'react';
 
 interface CommonSetup {
     props: GenericProps;
@@ -11,9 +12,10 @@ interface Options<S extends CommonSetup> {
     baseClassName: string;
     forwardClassName?: keyof S;
     forwardAttributes?: keyof S;
+    forwardRef?: keyof S;
 }
 
-type SetupFunction<S extends CommonSetup> = (props?: GenericProps) => S;
+type SetupFunction<S extends CommonSetup> = (props?: GenericProps) => S | Promise<S>;
 
 /**
  * Common tests on components
@@ -24,31 +26,39 @@ export function commonTestsSuiteRTL<S extends CommonSetup>(setup: SetupFunction<
     if (isEmpty(options)) {
         return;
     }
-    const { baseClassName, forwardClassName, forwardAttributes } = options;
+    const { baseClassName, forwardClassName, forwardAttributes, forwardRef } = options;
     describe('Common tests suite', () => {
-        it('should render with base class name', () => {
-            setup();
+        it('should render with base class name', async () => {
+            await setup();
             expect(queryByClassName(document.body, baseClassName)).toBeInTheDocument();
         });
 
         if (forwardClassName) {
-            it('should forward any CSS class', () => {
+            it('should forward any CSS class', async () => {
                 const modifiedProps = {
                     className: 'component component--is-tested',
                 };
-                const wrappers = setup(modifiedProps);
+                const wrappers = await setup(modifiedProps);
                 expect(wrappers[forwardClassName]).toHaveClass(modifiedProps.className);
             });
         }
 
         if (forwardAttributes) {
-            it('should forward any other prop', () => {
+            it('should forward any other prop', async () => {
                 const modifiedProps = {
                     winter: 'is coming',
                 };
-                const wrappers = setup(modifiedProps);
+                const wrappers = await setup(modifiedProps);
                 expect(wrappers[forwardAttributes]).toHaveAttribute('winter', modifiedProps.winter);
             });
         }
+
+        if (forwardRef) {
+            it('should forward ref', async () => {
+                const ref = React.createRef();
+                const wrappers = await setup({ ref });
+                expect(ref.current).toBe(wrappers[forwardRef]);
+            });
+        }
     });
 }

package/src/testing/utils/index.ts

@@ -1,2 +1 @@
-export * from './commonTestsSuite';
 export * from './commonTestsSuiteRTL';

package/src/utils/flattenChildren.ts

@@ -8,6 +8,11 @@ import { isFragment } from 'react-is';
  *
  * @param  children React nodes to flatten.
  * @return Flattened react nodes.
+ * @deprecated This function was used to develop keyboard navigation in the List component,
+ *    but we will replace this with a better method that does not require to hack the children inspection
+ *
+ * TODO: remove List keyboard navigation once we have provided alternative component (Menu, Combobox, etc.),
+ *       remove this function and then remove react-is from the dependencies
  */
 export function flattenChildren(children: ReactNode) {
     function recur(nodes: ReactNode, keys: Key[] = []) {

package/src/components/autocomplete/__snapshots__/Autocomplete.test.tsx.snap

@@ -1,213 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Autocomplete> Props should render correctly when the dropdown is closed 1`] = `
-<div
-  className="lumx-autocomplete"
->
-  <TextField
-    inputRef={[Function]}
-    onChange={[MockFunction]}
-    textFieldRef={
-      {
-        "current": null,
-      }
-    }
-    theme="light"
-    type="text"
-    value=""
-  />
-  <Dropdown
-    anchorRef={
-      {
-        "current": null,
-      }
-    }
-    closeOnClick={false}
-    closeOnClickAway={true}
-    closeOnEscape={true}
-    fitToAnchorWidth={true}
-    fitWithinViewportHeight={true}
-    focusAnchorOnClose={true}
-    isOpen={false}
-    placement="bottom-start"
-    shouldFocusOnOpen={false}
-  >
-    <List
-      isClickable={true}
-      tabIndex={-1}
-    >
-      <ListItem
-        key="losangeles"
-        size="tiny"
-      >
-        <div>
-          Los Angeles
-        </div>
-      </ListItem>
-      <ListItem
-        key="sanfrancisco"
-        size="tiny"
-      >
-        <div>
-          San Francisco
-        </div>
-      </ListItem>
-      <ListItem
-        key="paris"
-        size="tiny"
-      >
-        <div>
-          Paris
-        </div>
-      </ListItem>
-      <ListItem
-        key="montpellier"
-        size="tiny"
-      >
-        <div>
-          Montpellier
-        </div>
-      </ListItem>
-      <ListItem
-        key="bordeaux"
-        size="tiny"
-      >
-        <div>
-          Bordeaux
-        </div>
-      </ListItem>
-      <ListItem
-        key="toulouse"
-        size="tiny"
-      >
-        <div>
-          Toulouse
-        </div>
-      </ListItem>
-      <ListItem
-        key="lyon"
-        size="tiny"
-      >
-        <div>
-          Lyon
-        </div>
-      </ListItem>
-      <ListItem
-        key="montevideo"
-        size="tiny"
-      >
-        <div>
-          Montevideo
-        </div>
-      </ListItem>
-    </List>
-  </Dropdown>
-</div>
-`;
-
-exports[`<Autocomplete> Snapshots and structure should render correctly 1`] = `
-<div
-  className="lumx-autocomplete"
->
-  <TextField
-    inputRef={[Function]}
-    isRequired={true}
-    label="Field label"
-    onChange={[MockFunction]}
-    textFieldRef={
-      {
-        "current": null,
-      }
-    }
-    theme="light"
-    type="text"
-    value=""
-  />
-  <Dropdown
-    anchorRef={
-      {
-        "current": null,
-      }
-    }
-    closeOnClick={false}
-    closeOnClickAway={true}
-    closeOnEscape={true}
-    fitToAnchorWidth={true}
-    fitWithinViewportHeight={true}
-    focusAnchorOnClose={true}
-    isOpen={true}
-    placement="bottom-start"
-    shouldFocusOnOpen={false}
-  >
-    <List
-      isClickable={true}
-      tabIndex={-1}
-    >
-      <ListItem
-        key="losangeles"
-        size="tiny"
-      >
-        <div>
-          Los Angeles
-        </div>
-      </ListItem>
-      <ListItem
-        key="sanfrancisco"
-        size="tiny"
-      >
-        <div>
-          San Francisco
-        </div>
-      </ListItem>
-      <ListItem
-        key="paris"
-        size="tiny"
-      >
-        <div>
-          Paris
-        </div>
-      </ListItem>
-      <ListItem
-        key="montpellier"
-        size="tiny"
-      >
-        <div>
-          Montpellier
-        </div>
-      </ListItem>
-      <ListItem
-        key="bordeaux"
-        size="tiny"
-      >
-        <div>
-          Bordeaux
-        </div>
-      </ListItem>
-      <ListItem
-        key="toulouse"
-        size="tiny"
-      >
-        <div>
-          Toulouse
-        </div>
-      </ListItem>
-      <ListItem
-        key="lyon"
-        size="tiny"
-      >
-        <div>
-          Lyon
-        </div>
-      </ListItem>
-      <ListItem
-        key="montevideo"
-        size="tiny"
-      >
-        <div>
-          Montevideo
-        </div>
-      </ListItem>
-    </List>
-  </Dropdown>
-</div>
-`;

package/src/components/autocomplete/__snapshots__/AutocompleteMultiple.test.tsx.snap

@@ -1,88 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AutocompleteMultiple> Snapshots and structure should render correctly 1`] = `
-<Autocomplete
-  anchorToInput={false}
-  chips={[]}
-  className="lumx-autocomplete-multiple"
-  closeOnClick={false}
-  closeOnClickAway={true}
-  closeOnEscape={true}
-  isOpen={true}
-  isRequired={true}
-  label="Field label"
-  onChange={[MockFunction]}
-  shouldFocusOnClose={false}
-  value=""
->
-  <List
-    isClickable={true}
-    tabIndex={-1}
-  >
-    <ListItem
-      key="losangeles"
-      size="tiny"
-    >
-      <div>
-        Los Angeles
-      </div>
-    </ListItem>
-    <ListItem
-      key="sanfrancisco"
-      size="tiny"
-    >
-      <div>
-        San Francisco
-      </div>
-    </ListItem>
-    <ListItem
-      key="paris"
-      size="tiny"
-    >
-      <div>
-        Paris
-      </div>
-    </ListItem>
-    <ListItem
-      key="montpellier"
-      size="tiny"
-    >
-      <div>
-        Montpellier
-      </div>
-    </ListItem>
-    <ListItem
-      key="bordeaux"
-      size="tiny"
-    >
-      <div>
-        Bordeaux
-      </div>
-    </ListItem>
-    <ListItem
-      key="toulouse"
-      size="tiny"
-    >
-      <div>
-        Toulouse
-      </div>
-    </ListItem>
-    <ListItem
-      key="lyon"
-      size="tiny"
-    >
-      <div>
-        Lyon
-      </div>
-    </ListItem>
-    <ListItem
-      key="montevideo"
-      size="tiny"
-    >
-      <div>
-        Montevideo
-      </div>
-    </ListItem>
-  </List>
-</Autocomplete>
-`;

package/src/components/badge/__snapshots__/Badge.test.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Badge> Snapshots and structure should render correctly 1`] = `
-<div
-  className="lumx-badge lumx-badge--color-primary"
->
-  <span>
-    30
-  </span>
-</div>
-`;