@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/button/Button.test.tsx

@@ -1,14 +1,13 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import { mdiCheck, mdiPlus } from '@lumx/icons';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render, screen, within } from '@testing-library/react';
+import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { Emphasis, Icon } from '@lumx/react';
 
-import { mdiCheck, mdiChevronDown, mdiPlus } from '@lumx/icons';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
 import { Button, ButtonProps } from './Button';
 
-const DEFAULT_PROPS = Button.defaultProps as any;
 const CLASSNAME = Button.className as string;
 
 type SetupProps = Partial<ButtonProps>;
@@ -16,137 +15,61 @@ type SetupProps = Partial<ButtonProps>;
 /**
  * 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(<Button {...props} />);
-
-    return {
-        buttonRoot: wrapper.find('ButtonRoot'),
-        icon: wrapper.find('Icon'),
-        props,
-        wrapper,
-    };
+    render(<Button {...props} />);
+    const button = getByClassName(document.body, CLASSNAME);
+    const buttonWrapper = queryByClassName(document.body, 'lumx-button-wrapper');
+    const icons = queryAllByClassName(button, Icon.className as string);
+    return { props, button, buttonWrapper, icons };
 };
 
 describe(`<${Button.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render button with label', () => {
+    describe('Props', () => {
+        it('should render default', () => {
             const label = 'Label';
-            const { buttonRoot, icon, wrapper } = setup({
-                children: label,
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonRoot).toExist();
-
-            expect(icon).not.toExist();
-
-            expect(buttonRoot.contains(label)).toBe(true);
+            const { button, icons } = setup({ children: label });
+            expect(button).toBe(screen.queryByRole('button', { name: label }));
+            expect(button).toHaveAttribute('type', 'button');
+            expect(button.className).toMatchInlineSnapshot(
+                `"lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--size-m lumx-button--theme-light lumx-button--variant-button"`,
+            );
+            expect(icons.length).toBe(0);
         });
 
-        it('should render button with label and right icon', () => {
+        it('should render icons', () => {
             const label = 'Label';
-            const { buttonRoot, icon, wrapper } = setup({
-                children: label,
-                rightIcon: mdiChevronDown,
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonRoot).toExist();
-
-            expect(icon).toExist();
-            expect(icon.length).toEqual(1);
-
-            expect(buttonRoot.contains(label)).toBe(true);
+            const { button, icons } = setup({ children: label, rightIcon: mdiPlus, leftIcon: mdiCheck });
+            expect(button).toHaveTextContent(label);
+            expect(icons.length).toBe(2);
         });
 
-        it('should render button with label and left icon', () => {
+        it('should render link', () => {
             const label = 'Label';
-            const { buttonRoot, icon, wrapper } = setup({
-                children: label,
-                leftIcon: mdiChevronDown,
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonRoot).toExist();
-
-            expect(icon).toExist();
-            expect(icon.length).toEqual(1);
-
-            expect(buttonRoot.contains(label)).toBe(true);
+            const { button } = setup({ children: label, href: 'https://example.com' });
+            expect(button).toBe(screen.queryByRole('link', { name: label }));
         });
 
-        it('should render button with label and icons', () => {
-            const label = 'Label';
-            const { buttonRoot, icon, wrapper } = setup({
-                children: label,
-                leftIcon: mdiCheck,
-                rightIcon: mdiChevronDown,
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonRoot).toExist();
-
-            expect(icon).toExist();
-            expect(icon.length).toEqual(2);
-
-            expect(buttonRoot.contains(label)).toBe(true);
+        it('should render emphasis low', () => {
+            const { button } = setup({ emphasis: Emphasis.low });
+            expect(button.className).toMatchInlineSnapshot(
+                `"lumx-button lumx-button--color-dark lumx-button--emphasis-low lumx-button--size-m lumx-button--variant-button"`,
+            );
         });
-    });
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use default props', () => {
-            const { buttonRoot } = setup();
-
-            const actualProps = buttonRoot.props() as Partial<ButtonProps>;
-            expect(actualProps.variant).toEqual('button');
-            for (const [propName, propValue] of Object.entries(DEFAULT_PROPS)) {
-                expect(actualProps[propName]).toEqual(propValue);
-            }
-        });
-
-        it('should forward any CSS class', () => {
-            const props = {
-                className: 'component component--is-tested',
-            };
-            const { wrapper, buttonRoot } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonRoot).toHaveClassName(props.className);
-        });
-
-        it('should use the given props for class names', () => {
-            const props: Partial<ButtonProps> = {
-                leftIcon: mdiChevronDown,
-                rightIcon: mdiPlus,
-            };
-            const { wrapper, buttonRoot } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonRoot).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasLeftIcon', value: true }));
-            expect(buttonRoot).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'hasRightIcon', value: true }));
+        it('should render hasBackground', () => {
+            const label = 'Label';
+            const { buttonWrapper, button } = setup({ children: label, hasBackground: true });
+            expect(buttonWrapper).toBeInTheDocument();
+            expect(button).toBe(within(buttonWrapper as any).queryByRole('button', { name: label }));
         });
     });
 
-    // 3. Test events.
-    describe('Events', () => {
-        // Nothing to do here.
-    });
-
-    // 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, { prop: 'buttonRoot' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'button',
+        forwardAttributes: 'button',
+        forwardRef: 'button',
+    });
 });

package/src/components/button/ButtonGroup.test.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import React from 'react';
 
 import { mdiPlus } from '@lumx/icons';
 import { Button, IconButton } from '@lumx/react';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+
 import { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 
 const CLASSNAME = ButtonGroup.className as string;
@@ -15,7 +15,7 @@ type SetupProps = Partial<ButtonGroupProps>;
 /**
  * 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: ButtonGroupProps = {
         children: (
             <>
@@ -25,42 +25,19 @@ const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) =
         ),
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<ButtonGroup {...props} />);
 
-    return {
-        group: wrapper.find(`.${CLASSNAME}`),
-        props,
-        wrapper,
-    };
+    render(<ButtonGroup {...props} />);
+    const buttonGroup = getByClassName(document.body, CLASSNAME);
+
+    return { props, buttonGroup };
 };
 
 describe(`<${ButtonGroup.displayName}>`, () => {
-    // 1. Test render via snapshot (default state of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly a group button', () => {
-            const { group, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(group).toExist();
-            expect(group).toHaveClassName(CLASSNAME);
-
-            expect(group.children().length).toEqual(2);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    // N/A
-
-    // 3. Test events.
-    // N/A
-
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    // N/A
-
-    // 5. Test state.
-    // N/A
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'group', prop: 'group' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'buttonGroup',
+        forwardAttributes: 'buttonGroup',
+        forwardRef: 'buttonGroup',
+    });
 });

package/src/components/button/IconButton.stories.tsx

@@ -36,6 +36,13 @@ export const WithImage = {
     args: { image: SQUARE_IMAGES.square1 },
 };
 
+/**
+ * IconButton using a tooltip
+ */
+export const WithTooltip = {
+    args: { icon: mdiSend, label: 'Send a message' },
+};
+
 /**
  * Check icon button style variations (color, states, emphasis, etc.)
  */

package/src/components/button/IconButton.test.tsx

@@ -1,103 +1,62 @@
-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 { mdiClose } from '@lumx/icons';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { Button } from '@lumx/react';
+import { render, screen } from '@testing-library/react';
+import { getByClassName, queryByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
 
 import { IconButton, IconButtonProps } from './IconButton';
 
-const DEFAULT_PROPS = IconButton.defaultProps as any;
-const CLASSNAME = IconButton.className as string;
+const CLASSNAME = Button.className as string;
 
 type SetupProps = Partial<IconButtonProps>;
 
 /**
  * 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(<IconButton {...props} />);
+    render(<IconButton {...props} />);
+    const iconButton = getByClassName(document.body, CLASSNAME);
+    const icon = queryByClassName(iconButton, 'lumx-icon');
+    const img = queryByTagName(iconButton, 'IMG');
 
-    return {
-        buttonRoot: wrapper.find('ButtonRoot'),
-        icon: wrapper.find('Icon'),
-        img: wrapper.find('img'),
-        props,
-        wrapper,
-    };
+    return { props, iconButton, icon, img };
 };
 
 describe(`<${IconButton.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render icon button', () => {
-            const { buttonRoot, icon, img, wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-            expect(buttonRoot).toExist();
-            expect(icon).toExist();
-            expect(img).not.toExist();
-        });
-
-        it('should render icon button with an image', () => {
-            const { buttonRoot, icon, img, wrapper } = setup({ image: 'http://foo.com' });
-            expect(wrapper).toMatchSnapshot();
-            expect(buttonRoot).toExist();
-            expect(icon).not.toExist();
-            expect(img).toExist();
-        });
-
-        it('should render icon button with an image if both props are set', () => {
-            const { buttonRoot, icon, img, wrapper } = setup({ image: 'http://foo.com', icon: mdiClose });
-            expect(wrapper).toMatchSnapshot();
-            expect(buttonRoot).toExist();
-            expect(icon).not.toExist();
-            expect(img).toExist();
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
-        it('should use default props', () => {
-            const { wrapper, buttonRoot } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            const actualProps = buttonRoot.props() as IconButtonProps;
-            expect(actualProps.variant).toEqual('icon');
-            for (const [propName, propValue] of Object.entries(DEFAULT_PROPS)) {
-                expect(actualProps[propName]).toEqual(propValue);
-            }
+        it('should render default', () => {
+            const { iconButton, icon, img } = setup();
+            expect(iconButton).toBeInTheDocument();
+            expect(iconButton.className).toMatchInlineSnapshot(
+                `"lumx-button lumx-button--color-primary lumx-button--emphasis-high lumx-button--size-m lumx-button--theme-light lumx-button--variant-icon"`,
+            );
+
+            expect(icon).toBeInTheDocument();
+            expect(img).not.toBeInTheDocument();
         });
 
-        it('should forward any CSS class', () => {
-            const props = {
-                className: 'component component--is-tested',
-            };
-            const { wrapper, buttonRoot } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(buttonRoot).toHaveClassName(props.className);
+        it('should render label', () => {
+            const label = 'Label';
+            const { iconButton } = setup({ label });
+            expect(iconButton).toBe(screen.queryByRole('button', { name: label }));
         });
-    });
-
-    // 3. Test events.
-    describe('Events', () => {
-        // Nothing to do here.
-    });
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Nothing to do here.
-    });
+        it('should render icon button with an image', () => {
+            const { iconButton, icon, img } = setup({ image: 'http://foo.com' });
 
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
+            expect(iconButton).toBeInTheDocument();
+            expect(icon).not.toBeInTheDocument();
+            expect(img).toBeInTheDocument();
+        });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { prop: 'buttonRoot' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'iconButton',
+        forwardAttributes: 'iconButton',
+        forwardRef: 'iconButton',
+    });
 });

package/src/components/button/IconButton.tsx

@@ -61,7 +61,14 @@ export const IconButton: Comp<IconButtonProps, HTMLButtonElement> = forwardRef((
 
     return (
         <Tooltip label={hideTooltip ? '' : label} {...tooltipProps}>
-            <ButtonRoot ref={ref} {...{ emphasis, size, theme, ...forwardedProps }} aria-label={label} variant="icon">
+            <ButtonRoot
+                ref={ref}
+                {...{ emphasis, size, theme, ...forwardedProps }}
+                aria-label={label}
+                variant="icon"
+                // Remove the aria-describedby added by the tooltip when it is the same text as the aria-label
+                aria-describedby={tooltipProps?.label && tooltipProps?.label === label && undefined}
+            >
                 {image ? (
                     <img
                         // no need to set alt as an aria-label is already set on the button

package/src/components/checkbox/Checkbox.test.tsx

@@ -1,11 +1,10 @@
-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 { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Checkbox, CheckboxProps } from './Checkbox';
 
 const CLASSNAME = Checkbox.className as string;
@@ -15,100 +14,96 @@ type SetupProps = Partial<CheckboxProps>;
 /**
  * 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 = { id: 'fixedId', ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Checkbox {...props} />);
-
-    return {
-        helper: wrapper.find(`.${CLASSNAME}__helper`),
-        label: wrapper.find(`.${CLASSNAME}__label`),
-        props,
-        wrapper,
-    };
+    render(<Checkbox {...props} />);
+
+    const checkbox = getByClassName(document.body, CLASSNAME);
+    const helper = queryByClassName(checkbox, `${CLASSNAME}__helper`);
+    const label = queryByClassName(checkbox, `${CLASSNAME}__label`);
+    const input = getByTagName(checkbox, 'input');
+    return { checkbox, helper, label, input, props };
 };
 
 describe(`<${Checkbox.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
+    describe('Props', () => {
         it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-            expect(wrapper).not.toHaveClassName('lumx-checkbox--is-disabled');
-            expect(wrapper).toHaveClassName('lumx-checkbox--is-unchecked');
-            expect(wrapper.find('input')).toHaveProp('disabled', undefined);
+            const { checkbox, input, label, helper } = setup();
+            expect(checkbox).toBeInTheDocument();
+            expect(checkbox).toHaveClass(CLASSNAME);
+            expect(checkbox).not.toHaveClass('lumx-checkbox--is-disabled');
+            expect(checkbox).toHaveClass('lumx-checkbox--is-unchecked');
+
+            expect(label).not.toBeInTheDocument();
+            expect(helper).not.toBeInTheDocument();
+
+            expect(input).toBeInTheDocument();
+            expect(input).not.toBeChecked();
+            expect(input).not.toBeDisabled();
         });
-    });
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should add a "disabled" and "checked" class names', () => {
-            const { wrapper } = setup({
+        it('should render disabled and checked', () => {
+            const { checkbox, input } = setup({
                 isDisabled: true,
                 isChecked: true,
             });
+            expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
+            expect(checkbox).toHaveClass('lumx-checkbox--is-checked');
 
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'disabled', value: true }));
-            expect(wrapper.find('input')).toHaveProp('disabled', true);
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'checked', value: true }));
+            expect(input).toBeChecked();
+            expect(input).toBeDisabled();
         });
 
-        it('should use the given props', () => {
-            const { helper, label, wrapper } = setup({
+        it('should render helper and label', () => {
+            const id = 'checkbox1';
+            const { props, helper, label, input } = setup({
+                id,
                 helper: 'Test helper',
                 label: 'Test label',
             });
 
-            expect(helper).toExist();
-            expect(label).toExist();
-            expect(wrapper).toMatchSnapshot();
+            expect(helper).toBeInTheDocument();
+            expect(helper).toHaveTextContent(props.helper);
+            expect(helper).toHaveAttribute('id');
+
+            expect(label).toBeInTheDocument();
+            expect(label).toHaveTextContent(props.label);
+            expect(label).toHaveAttribute('for', id);
+
+            expect(input).toHaveAttribute('id', id);
+            expect(input).toHaveAttribute('aria-describedby', helper?.id);
         });
 
-        it('should use the given props while passing custom props to input', () => {
-            const { helper, label, wrapper } = setup({
-                helper: 'Test helper',
-                label: 'Test label',
+        it('should forward input props', () => {
+            const { props, input } = setup({
                 inputProps: {
                     'aria-labelledby': 'labelledby-id',
                 },
             });
 
-            expect(helper).toExist();
-            expect(label).toExist();
-            expect(wrapper).toMatchSnapshot();
+            expect(input).toHaveAttribute('aria-labelledby', props.inputProps['aria-labelledby']);
         });
     });
 
-    // 3. Test events.
     describe('Events', () => {
-        const onChange: jest.Mock = jest.fn();
+        const onChange = jest.fn();
 
-        beforeEach(() => {
-            onChange.mockClear();
-        });
+        it('should trigger `onChange` when checkbox is clicked', async () => {
+            const value = 'value';
+            const name = 'name';
+            const { input } = setup({ checked: false, onChange, value, name });
+            expect(input).not.toBeChecked();
 
-        it('should trigger `onChange` when checkbox is clicked', () => {
-            const { wrapper } = setup({ checked: false, onChange }, false);
-            const checkbox = wrapper.find('input');
+            await userEvent.click(input);
 
-            checkbox.simulate('change');
-            expect(onChange).toHaveBeenCalled();
+            expect(onChange).toHaveBeenCalledWith(true, value, name, expect.any(Object));
         });
     });
 
-    // 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: 'checkbox',
+        forwardAttributes: 'checkbox',
+    });
 });