@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/select/SelectMultiple.test.tsx

@@ -1,405 +1,209 @@
-import React, { ReactElement, RefObject } from 'react';
+import React from 'react';
 
-import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme';
-import 'jest-enzyme';
-
-import { mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
-import { Kind, Theme } from '@lumx/react/components';
+import { Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
-import { Icon } from '@lumx/react/components/icon/Icon';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render, within } from '@testing-library/react';
+import {
+    getAllByClassName,
+    getByClassName,
+    queryAllByClassName,
+    queryByClassName,
+} from '@lumx/react/testing/utils/queries';
+import userEvent from '@testing-library/user-event';
 
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
 import { SelectMultiple, SelectMultipleProps } from './SelectMultiple';
-import { DEFAULT_PROPS } from './WithSelectContext';
 import { SelectVariant } from './constants';
 
 const CLASSNAME = SelectMultiple.className as string;
 
 jest.mock('uid', () => ({ uid: () => 'uid' }));
 
-type SetupProps = Partial<SelectMultipleProps>;
-
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: SetupProps = {}, shallowRendering = true) => {
+const setup = (props: Partial<SelectMultipleProps> = {}) => {
     const setupProps: SelectMultipleProps = {
         children: <span>Select Component</span>,
         value: [],
         ...props,
     };
-
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<SelectMultiple {...setupProps} />);
-
-    return {
-        container: wrapper.find('div').first(),
-        dropdown: wrapper.find(Dropdown),
-        error: wrapper
-            .findWhere(
-                (n: ShallowWrapper | ReactWrapper) => n.name() === 'InputHelper' && n.prop('kind') === Kind.error,
-            )
-            .first(),
-        helper: wrapper.findWhere(
-            (n: ShallowWrapper | ReactWrapper) => n.name() === 'InputHelper' && n.prop('kind') === Kind.info,
-        ),
-        input: wrapper.find('#select-uid:not(SelectMultipleField)').first(),
-        chip: wrapper.find('Chip'),
-        inputWrapper: wrapper.find('.lumx-select__wrapper'),
-        props,
-        wrapper,
-    };
+    render(<SelectMultiple {...setupProps} />);
+    const select = getByClassName(document.body, CLASSNAME);
+    const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
+    const helpers = queryAllByClassName(select, `${CLASSNAME}__helper`);
+    const inputWrapper = queryByClassName(select, `${CLASSNAME}__wrapper`);
+    const chip = !inputWrapper ? queryByClassName(select, Chip.className as string) : null;
+    const valueChips = queryByClassName(select, `${CLASSNAME}__chips`);
+    return { props, select, getDropdown, helpers, inputWrapper, chip, valueChips };
 };
 
 describe(`<SelectMultiple>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-            expect(wrapper).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-
-        it('should render chips', () => {
-            const { wrapper } = setup({
-                variant: SelectVariant.chip,
-            });
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-
     describe('Props', () => {
         it('should have default classNames', () => {
-            const { wrapper, container } = setup();
-            wrapper.update();
+            const { select, inputWrapper, valueChips, chip } = setup();
 
-            expect(container).toHaveClassName(CLASSNAME);
-            expect(container).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: 'theme', value: DEFAULT_PROPS.theme }),
+            expect(inputWrapper).toBeInTheDocument();
+            expect(valueChips).toBeEmptyDOMElement();
+            expect(chip).not.toBeInTheDocument();
+            expect(select.className).toMatchInlineSnapshot(
+                `"lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"`,
             );
-            expect(container).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isEmpty', value: true }));
         });
 
         it('should use the given `theme`', () => {
-            const testedProp = 'theme';
-            const modifiedProps: SetupProps = {
-                [testedProp]: Theme.dark,
-            };
-
-            const { container } = setup(modifiedProps);
-
-            expect(container).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
-            );
-            expect(container).not.toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: DEFAULT_PROPS.theme }),
-            );
+            const { select } = setup({ theme: Theme.dark });
+            expect(select).toHaveClass(`${CLASSNAME}--theme-dark`);
         });
 
         it('should use the given `isValid`', () => {
-            const testedProp = 'isValid';
-            const modifiedProps: SetupProps = {
-                [testedProp]: true,
-            };
-
-            const { container } = setup(modifiedProps);
-
-            expect(container).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
-            );
-        });
-
-        it('should use the given `hasError`', () => {
-            const testedProp = 'hasError';
-            const modifiedProps: SetupProps = {
-                [testedProp]: true,
-            };
-
-            const { container } = setup(modifiedProps);
-
-            expect(container).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
-            );
-        });
-
-        it('should display the given `error`', () => {
-            const { container, error } = setup({
-                error: 'You are not bold!',
-                hasError: true,
-            });
-
-            expect(error).toExist();
-            expect(container).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasError', value: true }));
-        });
-
-        it('should NOT display the given `error`', () => {
-            const { container, error } = setup({
-                error: 'You are not bold!',
-                hasError: false,
-            });
-
-            expect(error).not.toExist();
-            expect(container).not.toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasError', value: true }));
+            const { select } = setup({ isValid: true });
+            expect(select).toHaveClass(`${CLASSNAME}--is-valid`);
         });
 
         it('should use the given `value`', () => {
-            const { container } = setup({
-                value: [''],
-            });
+            const { select, valueChips } = setup({ value: ['val1', 'val2'] });
 
-            expect(container).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasValue', value: true }));
-            expect(container).not.toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isEmpty', value: true }));
-        });
-
-        it('should trigger the given `onDropdownClose` on dropdown close', () => {
-            const onDropdownClose = jest.fn();
-            const { dropdown } = setup({ onDropdownClose });
-
-            const props: any = dropdown.props();
-
-            props.onClose();
-
-            expect(onDropdownClose).toHaveBeenCalled();
+            expect(select).not.toHaveClass(`${CLASSNAME}--is-empty`);
+            expect(select).toHaveClass(`${CLASSNAME}--has-value`);
+            expect(valueChips).not.toBeEmptyDOMElement();
+            expect(within(valueChips as any).queryByText('val1')).toBeInTheDocument();
+            expect(within(valueChips as any).queryByText('val2')).toBeInTheDocument();
         });
 
         it('should pass the given `isOpen` to the dropdown', () => {
-            const isOpen = true;
-            const { dropdown } = setup({ isOpen });
-
-            expect(dropdown).toHaveProp('isOpen', isOpen);
+            const { getDropdown } = setup({ isOpen: true });
+            expect(getDropdown()).toBeInTheDocument();
         });
 
-        it('should display the given `helper`', () => {
-            const { helper } = setup({
-                helper: 'Be bold',
+        describe('helpers', () => {
+            it('should display the given `error`', () => {
+                const { select, helpers, props } = setup({ hasError: true, error: 'You are not bold!' });
+                expect(select).toHaveClass(`${CLASSNAME}--has-error`);
+                expect(helpers.length).toBe(1);
+                expect(helpers[0]).toHaveTextContent(props.error as string);
             });
 
-            expect(helper).toExist();
-        });
+            it('should NOT display the given `error`', () => {
+                const { select, helpers } = setup({
+                    error: 'You are not bold!',
+                    hasError: false,
+                });
+                expect(select).not.toHaveClass(`${CLASSNAME}--has-error`);
+                expect(helpers.length).toBe(0);
+            });
 
-        it('should display the given `helper` and `error`', () => {
-            const { error, helper } = setup({
-                error: 'You are not bold!',
-                hasError: true,
-                helper: 'Be bold',
+            it('should display the given `helper`', () => {
+                const { helpers, props } = setup({ helper: 'Be bold' });
+                expect(helpers.length).toBe(1);
+                expect(helpers[0]).toHaveTextContent(props.helper as string);
             });
 
-            expect(error).toExist();
-            expect(helper).toExist();
+            it('should display the given `helper` and `error`', () => {
+                const { select, helpers, props } = setup({
+                    error: 'You are not bold!',
+                    hasError: true,
+                    helper: 'Be bold',
+                });
+                expect(select).toHaveClass(`${CLASSNAME}--has-error`);
+                expect(helpers.length).toBe(2);
+                expect(helpers[0]).toHaveTextContent(props.error as string);
+                expect(helpers[1]).toHaveTextContent(props.helper as string);
+            });
         });
 
-        it('should have a data-id as prop', () => {
-            const { inputWrapper } = setup(
-                {
-                    'data-id': 'select',
-                },
-                false,
-            );
+        describe('chip variant', () => {
+            it('should render chip variant', () => {
+                const { select, inputWrapper, chip } = setup({ variant: SelectVariant.chip });
+                expect(inputWrapper).not.toBeInTheDocument();
+                expect(chip).toBeInTheDocument();
+                expect(select.className).toMatchInlineSnapshot(
+                    `"lumx-select lumx-select--has-multiple lumx-select lumx-select--is-empty lumx-select--theme-light"`,
+                );
+            });
 
-            expect(inputWrapper.prop('data-id')).toEqual('select');
-        });
+            it('should render chip variant with value', () => {
+                const { select, chip } = setup({ variant: SelectVariant.chip, value: ['val1', 'val2'] });
+                expect(chip).toHaveTextContent('val1 +1');
+                expect(select.className).toMatchInlineSnapshot(
+                    `"lumx-select lumx-select--has-multiple lumx-select lumx-select--has-value lumx-select--theme-light"`,
+                );
+            });
 
-        it('should have a data-id as prop with Chip variant', () => {
-            const { chip } = setup(
-                {
+            it('should forward prop to chip variant', () => {
+                const { chip } = setup({
                     'data-id': 'select',
                     variant: SelectVariant.chip,
-                },
-                false,
-            );
-
-            expect(chip.prop('data-id')).toEqual('select');
+                });
+                expect(chip).toHaveAttribute('data-id', 'select');
+            });
         });
     });
 
-    // 3. Test events.
     describe('Events', () => {
-        const onClick: jest.Mock = jest.fn();
-
-        beforeEach(() => {
-            onClick.mockClear();
-        });
-
         describe('should trigger `onInputClick` when the select button is clicked', () => {
-            it('with input variant', () => {
-                const { input } = setup({ onInputClick: onClick, variant: SelectVariant.input }, false);
-
-                input.simulate('click');
+            it('with input variant', async () => {
+                const onClick = jest.fn();
+                const { inputWrapper } = setup({ onInputClick: onClick, variant: SelectVariant.input });
 
+                await userEvent.click(inputWrapper as any);
                 expect(onClick).toHaveBeenCalled();
             });
 
-            it('with chip variant', () => {
-                const { input } = setup({ onInputClick: onClick, variant: SelectVariant.chip }, false);
-
-                input.simulate('click');
+            it('with chip variant', async () => {
+                const onClick = jest.fn();
+                const { chip } = setup({ onInputClick: onClick, variant: SelectVariant.chip });
 
+                await userEvent.click(chip as any);
                 expect(onClick).toHaveBeenCalled();
             });
         });
 
-        it('should call onClear when an item is clicked with the correct value', () => {
-            const onClear: jest.Mock = jest.fn();
-            const { input } = setup(
-                {
-                    onClear,
-                    value: ['val 1', 'val 2'],
-                    variant: SelectVariant.input,
-                    clearButtonProps: { label: 'Clear' },
-                },
-                false,
-            );
-
-            input.find('Chip').first().simulate('click');
-
-            expect(onClear).toHaveBeenCalled();
-        });
-
-        it('should call onClear when a chip is clicked with the correct value', () => {
-            const value1 = 'Value 1';
-            const value2 = 'Value 2';
-
-            const onClear: jest.Mock = jest.fn();
-            const { input } = setup(
-                {
-                    onClear,
-                    value: [value1, value2],
-                    variant: SelectVariant.chip,
-                    clearButtonProps: { label: 'Clear' },
-                },
-                false,
-            );
-
-            (input.find('Chip').first().props() as any).onAfterClick();
-
-            expect(onClear).toHaveBeenCalled();
-        });
-    });
-
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        describe('Input variant', () => {
-            it('should render a div as the select input', () => {
-                const { dropdown, input } = setup({}, false);
-                const dropdownRef: RefObject<HTMLDivElement> = dropdown.prop('anchorRef');
-                expect(input.type()).toBe('div');
-                // Impossible to get the ref passed to a div so we check if ref.current is matching the input html.
-                expect(input.html()).toEqual(dropdownRef && dropdownRef.current && dropdownRef.current.outerHTML);
+        it('should call onClear when an item is clicked with the correct value', async () => {
+            const onClear = jest.fn();
+            const { valueChips } = setup({
+                onClear,
+                value: ['val 1', 'val 2'],
+                variant: SelectVariant.input,
             });
 
-            describe('Has multiple values', () => {
-                const value1 = 'Value1';
-                const value2 = 'Value2';
-                const value3 = 'Value3';
-                const hasMultipleValues: Partial<SetupProps> = {
-                    value: [value1, value2, value3],
-                    variant: SelectVariant.input,
-                };
-
-                it('should render the values selected in Chips if multiple ', () => {
-                    const { input, props } = setup({ ...hasMultipleValues }, false);
-
-                    expect(input.find(Chip).length).toBe(props.value?.length);
-                    expect(input.find(Chip).at(0).children().text()).toBe(props.value?.[0]);
-                    expect(input.find(Chip).at(1).children().text()).toBe(props.value?.[1]);
-                    expect(input.find(Chip).at(2).children().text()).toBe(props.value?.[2]);
-                });
-            });
+            const clearButtons = getAllByClassName(
+                valueChips as any,
+                `${Chip.className as string}__after--is-clickable`,
+            );
 
-            describe('No value', () => {
-                const placeholder = 'My placeholder';
-                const hasNoValueProps: Partial<SetupProps> = {
-                    placeholder,
-                    value: [],
-                    variant: SelectVariant.input,
-                };
+            expect(clearButtons.length).toBe(2);
 
-                it('should render the placeholder when empty', () => {
-                    const { input } = setup({ ...hasNoValueProps }, false);
+            await userEvent.click(clearButtons[1]);
 
-                    expect(input.find(`.${CLASSNAME}__input-native--placeholder span`).first().text()).toBe(
-                        placeholder,
-                    );
-                });
-            });
+            expect(onClear).toHaveBeenCalledWith(expect.any(Object), 'val 2');
         });
 
-        describe('Chip variant', () => {
-            it('should render a Chip as the select input', () => {
-                const { input } = setup({ variant: SelectVariant.chip }, false);
-
-                expect(input.type()).toEqual(Chip);
-            });
-
-            describe('Has value', () => {
-                const value = 'Value';
-                const hasValueProps: Partial<SetupProps> = {
-                    value: [value],
-                    variant: SelectVariant.chip,
-                };
-
-                it('should render the value', () => {
-                    const label = 'The label';
-                    const { input } = setup(
-                        {
-                            ...hasValueProps,
-                            label,
-                        },
-                        false,
-                    );
-
-                    expect(input.find('.lumx-chip__label').text()).toEqual(value);
-                });
-
-                it('should render a close icon if there is a value', () => {
-                    const { input } = setup({ ...hasValueProps }, false);
-
-                    expect(input.find(Icon).first().prop('icon')).toBe(mdiCloseCircle);
-                });
-            });
-
-            describe('Has multiple values', () => {
-                const value = ['v1', 'v2', 'v3'];
-
-                it('should render the value and additional text if multiple values', () => {
-                    const { input } = setup(
-                        {
-                            label: 'The label',
-                            value,
-                            variant: SelectVariant.chip,
-                        },
-                        false,
-                    );
+        it('should clear all with chip variant', async () => {
+            const value1 = 'Value 1';
+            const value2 = 'Value 2';
 
-                    expect(input.find('.lumx-chip__label').text()).toEqual(`${value[0]}\u00A0+${value.length - 1}`);
-                });
+            const onClear = jest.fn();
+            const { chip } = setup({
+                onClear,
+                value: [value1, value2],
+                variant: SelectVariant.chip,
             });
 
-            describe('No value', () => {
-                const hasNoValue: Partial<SetupProps> = {
-                    value: [],
-                    variant: SelectVariant.chip,
-                };
-
-                it('should render the label', () => {
-                    const label = 'The label';
-                    const { input } = setup({ ...hasNoValue, label }, false);
+            const clearButton = getByClassName(chip as any, `${Chip.className as string}__after--is-clickable`);
 
-                    expect(input.find('.lumx-chip__label').text()).toEqual(label);
-                });
-
-                it('should render a MenuDown icon', () => {
-                    const { input } = setup({ ...hasNoValue }, false);
+            await userEvent.click(clearButton);
 
-                    expect(input.find(Icon).first().prop('icon')).toBe(mdiMenuDown);
-                });
-            });
+            expect(onClear).toHaveBeenCalled();
         });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'select',
+        forwardAttributes: 'inputWrapper',
+        forwardRef: 'select',
+    });
 });

package/src/components/select/WithSelectContext.tsx

@@ -1,15 +1,15 @@
-import React, { Ref, useCallback, useMemo, useRef } from 'react';
-
 import classNames from 'classnames';
+import React, { Ref, useCallback, useMemo, useRef } from 'react';
 import { uid } from 'uid';
 
+import { Placement } from '@lumx/react';
 import { Kind, Theme } from '@lumx/react/components';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
 import { InputHelper } from '@lumx/react/components/input-helper/InputHelper';
+import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
+import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-import { useListenFocus } from '@lumx/react/hooks/useListenFocus';
-import { Placement } from '@lumx/react';
 
 import { CoreSelectProps, SelectVariant } from './constants';
 
@@ -30,6 +30,7 @@ export const WithSelectContext = (
     {
         children,
         className,
+        focusElement,
         isMultiple,
         closeOnClick = !isMultiple,
         disabled,
@@ -58,6 +59,7 @@ export const WithSelectContext = (
     const selectId = useMemo(() => id || `select-${uid()}`, [id]);
     const anchorRef = useRef<HTMLElement>(null);
     const selectRef = useRef<HTMLDivElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
     const isFocus = useListenFocus(anchorRef);
 
     const handleKeyboardNav = useCallback(
@@ -77,6 +79,9 @@ export const WithSelectContext = (
         anchorRef?.current?.blur();
     };
 
+    // Handle focus trap.
+    useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
+
     return (
         <div
             ref={mergeRefs(ref, selectRef)}
@@ -125,6 +130,7 @@ export const WithSelectContext = (
                 placement={Placement.BOTTOM_START}
                 onClose={onClose}
                 onInfiniteScroll={onInfiniteScroll}
+                ref={dropdownRef}
             >
                 {children}
             </Dropdown>

package/src/components/side-navigation/SideNavigation.test.tsx

@@ -1,52 +1,39 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { Theme } from '@lumx/react';
 
 import { SideNavigation, SideNavigationProps } from './SideNavigation';
 
 const CLASSNAME = SideNavigation.className as string;
 
-type SetupProps = Partial<SideNavigationProps>;
-
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<SideNavigation {...props} />);
-
-    return {
-        props,
-        root: wrapper.find(`.${CLASSNAME}`),
-        wrapper,
-    };
+const setup = (props: Partial<SideNavigationProps> = {}) => {
+    render(<SideNavigation {...(props as any)} />);
+    const sideNavigation = getByClassName(document.body, CLASSNAME);
+    return { props, sideNavigation };
 };
 
 describe(`<${SideNavigation.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.
-
-        it('should render correctly', () => {
-            const { root, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(root).toExist();
-            expect(root).toHaveClassName(CLASSNAME);
-        });
+    it('should render default', () => {
+        const { sideNavigation } = setup();
+        expect(sideNavigation.className).toMatchInlineSnapshot(`"lumx-side-navigation"`);
     });
 
-    // 2. Test defaultProps value and important props custom values. => no default props
-
-    // 3. Test events. => no events
-
-    // 4. Test conditions => no conditions
+    it('should render dark theme', () => {
+        const { sideNavigation } = setup({ theme: Theme.dark });
+        expect(sideNavigation.className).toMatchInlineSnapshot(`"lumx-color-font-light-N lumx-side-navigation"`);
+    });
 
-    // 5. Test state => no state
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'root', prop: 'root' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'sideNavigation',
+        forwardAttributes: 'sideNavigation',
+        forwardRef: 'sideNavigation',
+    });
 });