@lumx/react 3.3.1-alpha.0 → 3.3.1

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

@@ -1,359 +1,190 @@
-import React, { ReactElement, RefObject } from 'react';
+import React from 'react';
 
-import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme';
-import 'jest-enzyme';
-
-import { Kind, Theme } from '@lumx/react/components';
+import { Theme } from '@lumx/react/components';
 import { Chip } from '@lumx/react/components/chip/Chip';
-import { Icon } from '@lumx/react/components/icon/Icon';
-
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-import { mdiCloseCircle, mdiMenuDown } from '@lumx/icons';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';
+import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render, within } from '@testing-library/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import userEvent from '@testing-library/user-event';
+
 import { Select, SelectProps, SelectVariant } from './Select';
-import { DEFAULT_PROPS } from './WithSelectContext';
 
 const CLASSNAME = Select.className as string;
 
 jest.mock('uid', () => ({ uid: () => 'uid' }));
 
-type SetupProps = Partial<SelectProps>;
-
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<SelectProps> = {}) => {
     const props: SelectProps = {
         children: <span>Select Component</span>,
         value: '',
         ...propsOverride,
     };
-
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: ShallowWrapper | ReactWrapper = renderer(<Select {...props} />);
-
-    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(SelectField)').first(),
-        chip: wrapper.find('Chip'),
-        inputWrapper: wrapper.find('.lumx-select__wrapper'),
-        props,
-        wrapper,
-    };
+    render(<Select {...props} />);
+    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 = queryByClassName(select, Chip.className as string);
+    return { props, select, getDropdown, helpers, inputWrapper, chip };
 };
 
 describe(`<${Select.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { container, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(container).toExist();
-            expect(container).toHaveClassName(CLASSNAME);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
         it('should have default classNames', () => {
-            const { wrapper, container } = setup();
-            wrapper.update();
-
-            expect(container).toHaveClassName(CLASSNAME);
-            expect(container).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: 'theme', value: DEFAULT_PROPS.theme }),
+            const { select, getDropdown } = setup();
+            expect(getDropdown()).not.toBeInTheDocument();
+            expect(select.className).toMatchInlineSnapshot(
+                `"lumx-select lumx-select--has-unique 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] }),
-            );
+            const { select } = setup({ isValid: true });
+            expect(select).toHaveClass(`${CLASSNAME}--is-valid`);
         });
 
         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({ hasError: true });
+            expect(select).toHaveClass(`${CLASSNAME}--has-error`);
         });
 
         it('should use the given `value`', () => {
-            const testedProp = 'value';
-            const modifiedProps: SetupProps = {
-                [testedProp]: 'val1',
-            };
-
-            const { container } = setup(modifiedProps);
-
-            expect(container).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasUnique', value: true }));
-            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();
+            const { select, inputWrapper, props } = setup({ value: 'val1' });
+            expect(select).toHaveClass(`${CLASSNAME}--has-unique`);
+            expect(select).toHaveClass(`${CLASSNAME}--has-value`);
+            expect(select).not.toHaveClass(`${CLASSNAME}--is-empty`);
+            expect(inputWrapper).toHaveTextContent(props.value);
         });
 
         it('should pass the given `isOpen` to the dropdown', () => {
-            const isOpen = true;
-            const { dropdown } = setup({ isOpen });
-
-            expect(dropdown).toHaveProp('isOpen', isOpen);
-        });
-
-        it('should display the given `helper`', () => {
-            const { helper } = setup({
-                helper: 'Be bold',
+            const { getDropdown } = setup({ isOpen: true });
+            expect(getDropdown()).toBeInTheDocument();
+        });
+        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,
-            );
+            const { inputWrapper } = setup({ 'data-id': 'select' });
+            expect(inputWrapper).toHaveAttribute('data-id', 'select');
+        });
+
+        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-unique 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, props } = setup({ variant: SelectVariant.chip, value: 'val1' });
+                expect(chip).toHaveTextContent(props.value);
+                expect(select.className).toMatchInlineSnapshot(
+                    `"lumx-select lumx-select--has-unique 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();
+        it('should trigger `onDropdownClose` on escape', async () => {
+            const onDropdownClose = jest.fn();
+            const { getDropdown } = setup({ isOpen: true, onDropdownClose });
 
-        beforeEach(() => {
-            onClick.mockClear();
+            const dropdown = getDropdown();
+            expect(dropdown).toBeInTheDocument();
+
+            await userEvent.keyboard('[Escape]');
+            expect(onDropdownClose).toHaveBeenCalled();
         });
 
         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 clear icon is clicked in select input', () => {
+        it('should call onClear when clear icon is clicked in select input', async () => {
             const value = 'Value';
-            const onClear: jest.Mock = jest.fn();
-            const { input } = setup({ value, onClear, clearButtonProps: { label: 'Clear' } }, false);
-
-            input.find('[aria-label="Clear"]').first().simulate('click');
-            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);
-            });
+            const onClear = jest.fn();
+            const { select, props } = setup({ value, onClear, clearButtonProps: { label: 'Clear' } });
 
-            describe('Has value', () => {
-                const value = 'Value';
-                const hasValueProps: Partial<SetupProps> = {
-                    value,
-                    variant: SelectVariant.input,
-                };
+            const clearButton = within(select).getByRole('button', { name: props.clearButtonProps?.label });
 
-                it('should render the value selected if not multiple ', () => {
-                    const { input } = setup({ ...hasValueProps }, false);
-
-                    expect(input.find(`.${CLASSNAME}__input-native span`).first().text()).toBe(value);
-                });
-            });
-
-            describe('No value', () => {
-                const placeholder = 'My placeholder';
-                const hasNoValueProps: Partial<SetupProps> = {
-                    placeholder,
-                    value: '',
-                    variant: SelectVariant.input,
-                };
-
-                it('should render the placeholder when empty', () => {
-                    const { input } = setup({ ...hasNoValueProps }, false);
-
-                    expect(input.find(`.${CLASSNAME}__input-native--placeholder span`).first().text()).toBe(
-                        placeholder,
-                    );
-                });
-            });
-        });
-
-        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,
-                    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('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);
-
-                    expect(input.find('.lumx-chip__label').text()).toEqual(label);
-                });
-
-                it('should render a MenuDown icon', () => {
-                    const { input } = setup({ ...hasNoValue }, false);
-
-                    expect(input.find(Icon).first().prop('icon')).toBe(mdiMenuDown);
-                });
-            });
+            await userEvent.click(clearButton);
+            expect(onClear).toHaveBeenCalled();
         });
     });
 
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'select',
+        forwardAttributes: 'inputWrapper',
+        forwardRef: 'select',
+    });
 });

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

@@ -1,9 +1,20 @@
 /* istanbul ignore file */
 import { mdiTram } from '@lumx/icons/';
-import { Chip, List, ListItem, SelectMultiple, Size } from '@lumx/react';
+import {
+    Chip,
+    Dialog,
+    List,
+    ListDivider,
+    ListItem,
+    ListSubheader,
+    SelectMultiple,
+    Size,
+    TextField,
+    Toolbar,
+} from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
-import React, { MouseEventHandler, SyntheticEvent, useState } from 'react';
+import React, { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default { title: 'LumX components/select/Select Multiple' };
@@ -225,3 +236,95 @@ export const ChipsCustomSelectMultiple = ({ theme }: any) => {
         </SelectMultiple>
     );
 };
+
+/**
+ * Test select focus trap (focus is contained inside the dialog then inside the select dropdown)
+ */
+export const SelectWithinADialog = ({ theme }: any) => {
+    const searchFieldRef = useRef(null);
+
+    const [searchText, setSearchText] = useState<string>();
+    const [values, setValues] = useState<string[]>([]);
+    const [isOpen, closeSelect, , toggleSelect] = useBooleanState(false);
+
+    const clearSelected = (event: SyntheticEvent, value: string) => {
+        event.stopPropagation();
+        setValues(value ? values.filter((val) => val !== value) : []);
+    };
+
+    const selectItem = (item: string) => () => {
+        if (values.includes(item)) {
+            return;
+        }
+
+        closeSelect();
+        setValues([...values, item]);
+    };
+
+    const filteredChoices =
+        searchText && searchText.length > 0 ? CHOICES.filter((choice) => choice.includes(searchText)) : CHOICES;
+
+    return (
+        <>
+            <Dialog isOpen>
+                <header>
+                    <Toolbar label={<span className="lumx-typography-title">Dialog header</span>} />
+                </header>
+                <div className="lumx-spacing-padding-horizontal-huge lumx-spacing-padding-bottom-huge">
+                    {/* Testing hidden input do not count in th focus trap*/}
+                    <input hidden type="file" />
+                    <input type="hidden" />
+
+                    <div className="lumx-spacing-margin-bottom-huge">The select should capture the focus on open.</div>
+
+                    <SelectMultiple
+                        isOpen={isOpen}
+                        value={values}
+                        onClear={clearSelected}
+                        clearButtonProps={{ label: 'Clear' }}
+                        label={LABEL}
+                        placeholder={PLACEHOLDER}
+                        theme={theme}
+                        onInputClick={toggleSelect}
+                        onDropdownClose={closeSelect}
+                        icon={mdiTram}
+                        focusElement={searchFieldRef}
+                    >
+                        <List isClickable>
+                            <>
+                                <ListSubheader>
+                                    <TextField
+                                        clearButtonProps={{ label: 'Clear' }}
+                                        placeholder="Search"
+                                        role="searchbox"
+                                        inputRef={searchFieldRef}
+                                        onChange={setSearchText}
+                                        value={searchText}
+                                    />
+                                </ListSubheader>
+                                <ListDivider role="presentation" />
+                            </>
+
+                            {filteredChoices.length > 0
+                                ? filteredChoices.map((choice) => (
+                                      <ListItem
+                                          isSelected={values.includes(choice)}
+                                          key={choice}
+                                          onItemSelected={selectItem(choice)}
+                                          size={Size.tiny}
+                                      >
+                                          {choice}
+                                      </ListItem>
+                                  ))
+                                : [
+                                      <ListItem key={0} size={Size.tiny}>
+                                          No data
+                                      </ListItem>,
+                                  ]}
+                        </List>
+                    </SelectMultiple>
+                </div>
+            </Dialog>
+        </>
+    );
+};