@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/dialog/Dialog.test.tsx

@@ -1,69 +1,70 @@
-import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
+import { Dialog, DialogProps } from '@lumx/react/components/dialog/Dialog';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render, screen } from '@testing-library/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import userEvent from '@testing-library/user-event';
 
 const CLASSNAME = Dialog.className as string;
 
-// Mock out the useIntersectionObserver hook since it can't work with Jest/Enzyme.
-jest.mock('@lumx/react/hooks/useIntersectionObserver', () => ({
-    useIntersectionObserver: () => new Map(),
-}));
-
-type SetupProps = Partial<DialogProps>;
-
 /**
  * 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 = renderer(<Dialog isOpen {...props} />);
-    const dialog = wrapper.find(`.${CLASSNAME}`);
-
-    return { props, wrapper, dialog };
+const setup = (props: Partial<DialogProps> = {}) => {
+    render(<Dialog isOpen {...props} />);
+    const dialog = queryByClassName(document.body, CLASSNAME);
+    const container = dialog && queryByClassName(dialog, `${CLASSNAME}__container`);
+    return { props, dialog, container };
 };
 
 describe(`<${Dialog.displayName}>`, () => {
-    // 3. Test events.
-    describe('Events', () => {
-        const keyDown = (key: string) => new KeyboardEvent('keydown', { key } as any);
+    it('should render default', () => {
+        const { dialog, container } = setup();
+        expect(dialog).toBeInTheDocument();
+        expect(container).toBe(screen.queryByRole('dialog'));
+        expect(container).toHaveAttribute('aria-modal', 'true');
+    });
 
-        it('should trigger `onClose` when pressing `escape` key', () => {
+    describe('Events', () => {
+        it('should trigger `onClose` when pressing `escape` key', async () => {
             const onClose = jest.fn();
-            setup({ isOpen: true, onClose }, false);
+            setup({ isOpen: true, onClose });
 
-            document.body.dispatchEvent(keyDown('Escape'));
+            await userEvent.keyboard('[Escape]');
             expect(onClose).toHaveBeenCalled();
         });
 
-        it('should not trigger `onClose` when pressing any other key', () => {
+        it('should not trigger `onClose` when pressing any other key', async () => {
             const onClose = jest.fn();
-            setup({ isOpen: true, onClose }, false);
+            setup({ isOpen: true, onClose });
 
-            document.body.dispatchEvent(keyDown('a'));
+            await userEvent.keyboard('a');
             expect(onClose).not.toHaveBeenCalled();
         });
 
-        it('should not trigger `onClose` when pressing `escape` key with `preventAutoClose` set to `true`', () => {
+        it('should not trigger `onClose` when pressing `escape` key with `preventAutoClose` set to `true`', async () => {
             const onClose = jest.fn();
-            setup({ isOpen: true, onClose, preventAutoClose: true }, false);
+            setup({ isOpen: true, onClose, preventAutoClose: true });
 
-            document.body.dispatchEvent(keyDown('Escape'));
+            await userEvent.keyboard('[Escape]');
             expect(onClose).not.toHaveBeenCalled();
         });
 
-        it('should not trigger `onClose` when pressing `escape` key with `preventCloseOnEscape` set to `true`', () => {
+        it('should not trigger `onClose` when pressing `escape` key with `preventCloseOnEscape` set to `true`', async () => {
             const onClose = jest.fn();
-            setup({ isOpen: true, onClose, preventCloseOnEscape: true }, false);
+            setup({ isOpen: true, onClose, preventCloseOnEscape: true });
 
-            document.body.dispatchEvent(keyDown('Escape'));
+            await userEvent.keyboard('[Escape]');
             expect(onClose).not.toHaveBeenCalled();
         });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'dialog', prop: 'dialog' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardAttributes: 'dialog',
+        forwardRef: 'dialog',
+        forwardClassName: 'dialog',
+    });
 });

package/src/components/divider/Divider.test.tsx

@@ -1,15 +1,11 @@
-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 { Theme } from '@lumx/react';
+import { render, screen } from '@testing-library/react';
 import { Divider, DividerProps } from './Divider';
 
-const DEFAULT_PROPS = Divider.defaultProps as any;
 const CLASSNAME = Divider.className as string;
 
 type SetupProps = Partial<DividerProps>;
@@ -17,77 +13,35 @@ type SetupProps = Partial<DividerProps>;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: DividerProps = {
-        children: 'Label',
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Divider {...props} />);
+const setup = (propsOverride: SetupProps = {}) => {
+    const props: DividerProps = { ...propsOverride };
+
+    render(<Divider {...props} />);
+    const divider = screen.queryByRole('separator');
 
-    return {
-        hr: wrapper.find('hr'),
-        props,
-        wrapper,
-    };
+    return { props, divider };
 };
 
 describe(`<${Divider.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { hr, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(hr).toExist();
-            expect(hr).toHaveClassName(CLASSNAME);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
-        it('should use default props', () => {
-            const { hr } = setup();
-
-            Object.keys(DEFAULT_PROPS).forEach((prop: string) => {
-                expect(hr).toHaveClassName(
-                    getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }),
-                );
-            });
+        it('should render default', () => {
+            const { divider } = setup();
+            expect(divider).toBeInTheDocument();
+            expect(divider).toHaveClass(CLASSNAME);
+            expect(divider).toHaveClass(`${CLASSNAME}--theme-light`);
         });
 
-        it('should use the given `theme`', () => {
-            const testedProp = 'theme';
-            const modifiedProps: SetupProps = {
-                [testedProp]: Theme.dark,
-            };
-
-            const { hr } = setup(modifiedProps);
-
-            expect(hr).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
-            );
-            expect(hr).not.toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: DEFAULT_PROPS[testedProp] }),
-            );
+        it('should render dark Theme', () => {
+            const { divider } = setup({ theme: Theme.dark });
+            expect(divider).toHaveClass(`${CLASSNAME}--theme-dark`);
         });
     });
 
-    // 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, { className: 'hr', prop: 'hr' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'divider',
+        forwardAttributes: 'divider',
+        forwardRef: 'divider',
+    });
 });

package/src/components/dropdown/Dropdown.test.tsx

@@ -1,10 +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 { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import userEvent from '@testing-library/user-event';
 import { Dropdown, DropdownProps } from './Dropdown';
 
 const CLASSNAME = Dropdown.className as string;
@@ -12,7 +12,7 @@ const CLASSNAME = Dropdown.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: Partial<DropdownProps> = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<DropdownProps> = {}) => {
     const anchorRef = React.createRef<HTMLButtonElement>();
     const props: DropdownProps = {
         anchorRef,
@@ -20,78 +20,47 @@ const setup = ({ ...propsOverride }: Partial<DropdownProps> = {}, shallowRenderi
         isOpen: true,
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Dropdown {...props} />);
-    return {
-        props,
-        wrapper,
-    };
+    render(<Dropdown {...props} />);
+    const dropDown = queryByClassName(document.body, CLASSNAME);
+    return { props, dropDown };
 };
 
 describe(`<${Dropdown.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-    });
-
-    // 3. Test events.
     describe('Events', () => {
-        const onClose: jest.Mock = jest.fn();
-        let eventListeners: {
-            keydown?(evt: any): void;
-        };
-
-        beforeEach(() => {
-            document.body.addEventListener = jest.fn((type, cb) => {
-                (eventListeners as any)[type] = cb;
+        it('should trigger `onClose` when pressing `escape` key', async () => {
+            const onClose = jest.fn();
+            setup({
+                closeOnEscape: true,
+                onClose,
+                isOpen: true,
             });
-            eventListeners = {};
-            onClose.mockClear();
-        });
 
-        it('should trigger `onClose` when pressing `escape` key', () => {
-            setup(
-                {
-                    closeOnEscape: true,
-                    onClose,
-                    isOpen: true,
-                },
-                false,
-            );
-
-            eventListeners.keydown?.({ key: 'Escape' });
+            await userEvent.keyboard('[Escape]');
             expect(onClose).toHaveBeenCalled();
         });
 
-        it('should not trigger `onClose` when pressing any other key', () => {
-            setup({ isOpen: true, onClose, closeOnEscape: true }, false);
+        it('should not trigger `onClose` when pressing any other key', async () => {
+            const onClose = jest.fn();
+            setup({ isOpen: true, onClose, closeOnEscape: true });
 
-            eventListeners.keydown?.({ key: 'a' });
+            await userEvent.keyboard('a');
             expect(onClose).not.toHaveBeenCalled();
         });
 
-        it('should not trigger `onClose` when pressing `escape` key with `closeOnEscape` set to `false`', () => {
-            setup({ isOpen: true, onClose, closeOnEscape: false }, false);
+        it('should not trigger `onClose` when pressing `escape` key with `closeOnEscape` set to `false`', async () => {
+            const onClose = jest.fn();
+            setup({ isOpen: true, onClose, closeOnEscape: false });
 
-            eventListeners.keydown?.({ key: 'Escape' });
+            await userEvent.keyboard('[Escape]');
             expect(onClose).not.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: 'dropDown',
+        forwardAttributes: 'dropDown',
+        forwardRef: 'dropDown',
+    });
 });

package/src/components/expansion-panel/ExpansionPanel.test.tsx

@@ -4,17 +4,16 @@ import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { queryByRole, render } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
+
 import { ExpansionPanel, ExpansionPanelProps } from '.';
 
 const CLASSNAME = ExpansionPanel.className as string;
 
-type SetupProps = Partial<ExpansionPanelProps>;
-
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}) => {
-    const props: ExpansionPanelProps = {
+const setup = (propsOverride: Partial<ExpansionPanelProps> = {}) => {
+    const props = {
         toggleButtonProps: { label: 'Toggle' },
         ...propsOverride,
     };
@@ -76,9 +75,9 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onOpen: jest.Mock = jest.fn();
-        const onClose: jest.Mock = jest.fn();
-        const onToggleOpen: jest.Mock = jest.fn();
+        const onOpen = jest.fn();
+        const onClose = jest.fn();
+        const onToggleOpen = jest.fn();
 
         beforeEach(onOpen.mockClear);
         beforeEach(onClose.mockClear);
@@ -112,5 +111,10 @@ describe(`<${ExpansionPanel.displayName}>`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'element', forwardAttributes: 'element' });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+        forwardRef: 'element',
+    });
 });

package/src/components/flag/Flag.test.tsx

@@ -1,11 +1,10 @@
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
+import React from 'react';
 
 import { ColorPalette, Theme } from '@lumx/react';
 import { mdiAbTesting } from '@lumx/icons';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
 
 import { Flag, FlagProps } from './Flag';
 
@@ -14,66 +13,42 @@ const CLASSNAME = Flag.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propOverrides: Partial<FlagProps> = {}, shallowRendering = true) => {
-    const props = {
-        label: 'default',
-        ...propOverrides,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<Flag {...props} />);
+const setup = (propOverrides: Partial<FlagProps> = {}) => {
+    const props = { label: 'default', ...propOverrides };
 
-    return {
-        props,
-        iconEl: wrapper.find('Icon'),
-        wrapper,
-    };
+    render(<Flag {...props} />);
+    const flag = getByClassName(document.body, CLASSNAME);
+    const icon = queryByClassName(flag, `${CLASSNAME}__icon`);
+
+    return { props, flag, icon };
 };
 
 describe(`<${Flag.displayName} />`, () => {
-    describe('Conditions', () => {
-        it('should use the icon', () => {
-            const { iconEl } = setup({ icon: mdiAbTesting });
-
-            expect(iconEl).toBeDefined();
-            expect(iconEl.prop('icon')).toEqual(mdiAbTesting);
+    describe('Props', () => {
+        it('should render default', () => {
+            const { flag, icon } = setup();
+            expect(flag).toBeInTheDocument();
+            expect(flag).toHaveClass(CLASSNAME);
+            expect(flag).toHaveClass(`${CLASSNAME}--color-dark`);
+            expect(icon).not.toBeInTheDocument();
         });
 
-        it('should have correct default color', () => {
-            const { wrapper } = setup({});
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: ColorPalette.dark,
-                }),
-            );
+        it('should render icon', () => {
+            const { icon } = setup({ icon: mdiAbTesting });
+            expect(icon).toBeInTheDocument();
         });
 
-        it('should switch color with theme', () => {
-            const { wrapper } = setup({ theme: Theme.dark });
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: ColorPalette.light,
-                }),
-            );
+        it('should render dark theme', () => {
+            const { flag } = setup({ theme: Theme.dark });
+            expect(flag).toHaveClass(`${CLASSNAME}--color-light`);
         });
 
-        it('should use the color', () => {
-            const color = ColorPalette.green;
-            const { wrapper } = setup({ icon: mdiAbTesting, color });
-
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: color,
-                }),
-            );
+        it('should render custom color', () => {
+            const { flag } = setup({ color: ColorPalette.red });
+            expect(flag).toHaveClass(`${CLASSNAME}--color-red`);
         });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'flag', forwardAttributes: 'flag' });
 });