@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/mosaic/Mosaic.test.tsx

@@ -1,89 +1,73 @@
-import { Mosaic, MosaicProps } from '@lumx/react/components/mosaic/Mosaic';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import React from 'react';
 
-import React, { ReactElement } from 'react';
-import { Theme } from '..';
+import { Mosaic, MosaicProps } from '@lumx/react/components/mosaic/Mosaic';
+import { render, screen, within } from '@testing-library/react';
+import { getByClassName, queryAllByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { Thumbnail } from '@lumx/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import range from 'lodash/range';
+import userEvent from '@testing-library/user-event';
 
 const CLASSNAME = Mosaic.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<MosaicProps>;
-
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
-    const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<Mosaic {...props} />);
-
-    return {
-        thumbnails: wrapper.find('Thumbnail'),
-        props,
-        wrapper,
-    };
+const setup = (props: Partial<MosaicProps> = {}) => {
+    render(<Mosaic thumbnails={[]} {...props} />);
+    const mosaic = getByClassName(document.body, CLASSNAME);
+    const thumbnails = queryAllByClassName(mosaic, Thumbnail.className as string);
+    const overlay = queryByClassName(mosaic, `${CLASSNAME}__overlay`);
+    return { props, mosaic, thumbnails, overlay };
 };
 
+const generateThumbnails = (count: number) =>
+    range(1, count + 1).map((i) => ({
+        image: `https://example.com/image${i}.png`,
+        alt: '',
+    }));
+
 describe(`<${Mosaic.displayName}>`, () => {
-    describe('Props', () => {
-        it('should pass theme prop to Thumbnails', () => {
-            const expectedTheme = Theme.dark;
-            const { thumbnails } = setup({
-                theme: expectedTheme,
-                thumbnails: [
-                    { alt: 'image0', image: 'image/file/path/0' },
-                    { alt: 'image1', image: 'image/file/path/1' },
-                    { alt: 'image2', image: 'image/file/path/2' },
-                    { alt: 'image3', image: 'image/file/path/3' },
-                ],
-            });
-            thumbnails.forEach((thumbnail: Wrapper) => {
-                expect(thumbnail.prop('theme')).toBe(expectedTheme);
-            });
+    it.each([1, 2, 3, 4])('should render %s thumbnail', async (count) => {
+        const { mosaic, thumbnails } = setup({
+            thumbnails: generateThumbnails(count),
         });
+        expect(mosaic).toHaveClass(`${CLASSNAME}--has-${count}-thumbnail${count > 1 ? 's' : ''}`);
+        expect(thumbnails.length).toBe(count);
+        for (const thumbnail of thumbnails) {
+            expect(within(thumbnail).queryByRole('img')).toBeInTheDocument();
+        }
     });
 
-    describe('Events', () => {
-        it('should keep Thumbnail onClick', () => {
-            const onClick = jest.fn();
-            const { thumbnails } = setup({
-                thumbnails: [
-                    { alt: 'image0', image: 'image/file/path/0', onClick },
-                    { alt: 'image1', image: 'image/file/path/1' },
-                    { alt: 'image2', image: 'image/file/path/2' },
-                    { alt: 'image3', image: 'image/file/path/3' },
-                ],
-            });
-            thumbnails.forEach((thumbnail: Wrapper) => {
-                thumbnail.simulate('click');
-            });
-            expect(onClick).toHaveBeenCalledTimes(1);
+    it('should render more than 4 thumbnails', () => {
+        const { mosaic, thumbnails, overlay } = setup({
+            thumbnails: generateThumbnails(6),
         });
+        expect(mosaic).toHaveClass(`${CLASSNAME}--has-4-thumbnails`);
+        expect(thumbnails.length).toBe(4);
+        expect(overlay).toBeInTheDocument();
+        expect(overlay).toHaveTextContent('+2');
+    });
 
-        it('should handle both Thumbnail onClick and Mosaic onImageClick', () => {
-            const onImageClick = jest.fn();
-            const onClick = jest.fn();
-            const { thumbnails } = setup({
-                onImageClick,
-                thumbnails: [
-                    { alt: 'image0', image: 'image/file/path/0', onClick },
-                    { alt: 'image1', image: 'image/file/path/1' },
-                    { alt: 'image2', image: 'image/file/path/2' },
-                    { alt: 'image3', image: 'image/file/path/3' },
-                ],
-            });
-            thumbnails.forEach((thumbnail: Wrapper) => {
-                thumbnail.simulate('click');
-            });
-            expect(onClick).toHaveBeenCalledTimes(1);
-            expect(onImageClick).toHaveBeenCalledTimes(4);
+    it('should render clickable', async () => {
+        const onClick = jest.fn();
+        const onImageClick = jest.fn();
+        const { thumbnails } = setup({
+            thumbnails: generateThumbnails(6),
+            onImageClick,
+            onClick,
         });
+
+        expect(screen.queryAllByRole('button').length).toBe(thumbnails.length);
+
+        // Click the third image
+        await userEvent.click(thumbnails[2]);
+        expect(onImageClick).toHaveBeenCalledWith(2);
+        expect(onClick).toHaveBeenCalled();
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'mosaic',
+        forwardAttributes: 'mosaic',
+        forwardRef: 'mosaic',
+    });
 });

package/src/components/notification/Notification.test.tsx

@@ -1,108 +1,77 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import noop from 'lodash/noop';
 import { Kind } from '@lumx/react';
-import { Wrapper } from '@lumx/react/testing/utils';
+import { render, within } 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 { Notification, NotificationProps } from './Notification';
 
 const CLASSNAME = Notification.className as string;
 
-type SetupProps = Partial<NotificationProps>;
-
 /**
  * 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(<Notification {...props} />);
-
-    const notification: Wrapper = wrapper.find('.lumx-notification');
-    const icon: Wrapper = wrapper.find('.lumx-notification__icon');
-    const content: Wrapper = wrapper.find('.lumx-notification__content');
-    const action: Wrapper = wrapper.find('.lumx-notification__action');
+const setup = (props: Partial<NotificationProps> = {}) => {
+    render(<Notification isOpen type={Kind.info} {...props} />);
+    const notification = queryByClassName(document.body, CLASSNAME);
 
-    return { action, content, icon, notification, props, wrapper };
-};
-
-const properties = {
-    error: {
-        content: 'Error',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.error,
-    },
-    info: {
-        content: 'Info',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.info,
-    },
-    infoWithCallback: {
-        onActionClick: noop,
-        actionLabel: 'Undo',
-        content: 'Info with callback',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.info,
-    },
-    success: {
-        content: 'Success',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.success,
-    },
+    const icon = notification && queryByClassName(notification, `${CLASSNAME}__icon`);
+    const action = notification && queryByClassName(notification, `${CLASSNAME}__action`);
+    const actionButton = action && within(action).queryByRole('button');
 
-    warning: {
-        content: 'Warning',
-        onClick: noop,
-        isOpen: true,
-        type: Kind.warning,
-    },
+    return { action, actionButton, icon, notification, props };
 };
 
 describe(`<${Notification.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const { wrapper, notification } = setup(properties.info);
-            expect(wrapper).toMatchSnapshot();
+    it('should not render without type', () => {
+        const { notification } = setup({ type: undefined });
+        expect(notification).not.toBeInTheDocument();
+    });
 
-            expect(notification).toExist();
+    it('should not render when closed', () => {
+        const { notification } = setup({ isOpen: false });
+        expect(notification).not.toBeInTheDocument();
+    });
 
-            expect(notification).toHaveClassName(CLASSNAME);
-            expect(notification).toHaveClassName(`${CLASSNAME}--color-dark`);
-        });
+    it('should render content', () => {
+        const content = 'Content';
+        const { notification, icon } = setup({ content });
+        expect(notification).toBeInTheDocument();
+        expect(notification).toHaveTextContent(content);
+        expect(icon).toBeInTheDocument();
+    });
 
-        it('should render nothing since the notification is closed', () => {
-            const { wrapper, notification } = setup({ ...properties.info, isOpen: false });
-            expect(wrapper).toMatchSnapshot();
+    it('should render content & action', async () => {
+        const onClick = jest.fn();
+        const onActionClick = jest.fn();
+        const content = 'Content';
+        const actionLabel = 'actionLabel';
+        const { notification, action, actionButton } = setup({ content, actionLabel, onClick, onActionClick });
 
-            expect(notification).not.toExist();
-        });
-    });
+        expect(notification).toBeInTheDocument();
+        expect(notification).toHaveTextContent(content);
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        // Nothing to do here.
-    });
+        expect(action).toBeInTheDocument();
+        expect(actionButton).toBeInTheDocument();
+        expect(actionButton).toHaveTextContent(actionLabel);
 
-    // 3. Test events.
-    describe('Events', () => {
-        // Nothing to do here.
-    });
+        // Click action button
+        await userEvent.click(actionButton as any);
+        expect(onActionClick).toHaveBeenCalled();
+        expect(onClick).not.toHaveBeenCalled();
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Nothing to do here.
+        // Click notification
+        await userEvent.click(notification as any);
+        expect(onClick).toHaveBeenCalled();
     });
 
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'notification',
+        forwardAttributes: 'notification',
+        forwardRef: 'notification',
     });
 });

package/src/components/popover/Popover.tsx

@@ -173,18 +173,16 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
          * unless specifically requested not to.
          */
         if (isFocusedWithin.current && focusAnchorOnClose) {
-            if (parentElement?.current) {
-                parentElement?.current.focus();
-            }
-
-            const firstFocusable = anchorRef?.current && getFirstAndLastFocusable(anchorRef?.current).first;
-            if (firstFocusable) {
+            let elementToFocus = parentElement?.current;
+            if (!elementToFocus && anchorRef?.current) {
                 // Focus the first focusable element in anchor.
-                firstFocusable.focus();
-            } else {
+                elementToFocus = getFirstAndLastFocusable(anchorRef.current).first;
+            }
+            if (!elementToFocus) {
                 // Fallback on the anchor element.
-                anchorRef?.current?.focus();
+                elementToFocus = anchorRef?.current;
             }
+            elementToFocus?.focus({ preventScroll: true });
         }
 
         onClose();

package/src/components/progress-tracker/ProgressTracker.test.tsx

@@ -1,57 +1,44 @@
+import React from 'react';
+
 import { ProgressTrackerStep } from '@lumx/react';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { render, within } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
-import { setupTabProviderMocks } from '../tabs/test.mocks';
 import { ProgressTracker, ProgressTrackerProps } from './ProgressTracker';
 
 const CLASSNAME = ProgressTracker.className as string;
 
-// Mock useTabProviderContext.
-jest.mock('../tabs/state', () => {
-    const state = jest.requireActual('../tabs/state');
-    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
-});
-
 type SetupProps = Partial<ProgressTrackerProps>;
 
 /**
  * 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 steps = [<ProgressTrackerStep key={0} label="Step 0" />, <ProgressTrackerStep key={1} label="Step 1" />];
-    const props: ProgressTrackerProps = {
+    const props = {
         children: steps,
         'aria-label': 'Steps',
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<ProgressTracker {...props} />);
+    render(<ProgressTracker {...props} />);
+    const progressTracker = getByClassName(document.body, CLASSNAME);
 
-    return { props, wrapper };
+    return { props, progressTracker };
 };
 
 describe(`<${ProgressTracker.displayName}>`, () => {
-    beforeEach(() => {
-        setupTabProviderMocks();
-    });
-
-    // 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).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-
-            expect(wrapper.childAt(0)).toExist();
-            expect(wrapper.childAt(0)).toHaveClassName('lumx-progress-tracker__steps');
-        });
+    it('should render default', () => {
+        const label = 'Steps';
+        const { progressTracker } = setup({ 'aria-label': label });
+        expect(within(progressTracker).queryByRole('tablist', { name: label })).toBeInTheDocument();
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'progressTracker',
+        forwardAttributes: 'progressTracker',
+        forwardRef: 'progressTracker',
+    });
 });

package/src/components/progress-tracker/ProgressTrackerProvider.test.tsx

@@ -1,42 +1,67 @@
-import { ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel } from '@lumx/react';
-import { mount } from 'enzyme';
-import 'jest-enzyme';
 import React from 'react';
 
+import {
+    ProgressTracker,
+    ProgressTrackerProvider,
+    ProgressTrackerProviderProps,
+    ProgressTrackerStep,
+    ProgressTrackerStepPanel,
+} from '@lumx/react';
+
+import { render } from '@testing-library/react';
+import { checkTabActive, query } from '../tabs/test-utils';
+
+const setup = (props: Partial<ProgressTrackerProviderProps> = {}) =>
+    render(
+        <ProgressTrackerProvider {...props}>
+            <ProgressTracker aria-label="Progress tracker steps">
+                <ProgressTrackerStep label="Step 1" />
+                <ProgressTrackerStep label="Step 2" />
+            </ProgressTracker>
+
+            <ProgressTrackerStepPanel>Progress tracker step 1 content</ProgressTrackerStepPanel>
+            <ProgressTrackerStepPanel>Progress tracker step 2 content</ProgressTrackerStepPanel>
+        </ProgressTrackerProvider>,
+    );
+
 describe(`<${ProgressTrackerProvider.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render', () => {
-            const wrapper = mount(
-                <ProgressTrackerProvider>
-                    <ProgressTracker aria-label="Progress tracker steps">
-                        <ProgressTrackerStep label="step 1" />
-                        <ProgressTrackerStep label="step 1" />
-                    </ProgressTracker>
-
-                    <ProgressTrackerStepPanel>Progress tracker step 1 content</ProgressTrackerStepPanel>
-                    <ProgressTrackerStepPanel>Progress tracker step 2 content</ProgressTrackerStepPanel>
-                </ProgressTrackerProvider>,
-            );
-            const steps = wrapper.find(ProgressTrackerStep).find('button');
-            const firstProgressTrackerStep = steps.get(0);
-            const secondProgressTrackerStep = steps.get(1);
-
-            const stepPanels = wrapper.find(ProgressTrackerStepPanel).find('div');
-            const firstProgressTrackerStepPanel = stepPanels.get(0);
-            const secondProgressTrackerStepPanel = stepPanels.get(1);
-
-            // First step is selected.
-            expect(firstProgressTrackerStep.props['aria-selected']).toBe(true);
-            expect(secondProgressTrackerStep.props['aria-selected']).toBe(false);
-
-            // ProgressTrackerStep id and step panel aria-labelledby by should match
-            expect(firstProgressTrackerStep.props.id).toBe(firstProgressTrackerStepPanel.props['aria-labelledby']);
-            expect(secondProgressTrackerStep.props.id).toBe(secondProgressTrackerStepPanel.props['aria-labelledby']);
-
-            // ProgressTrackerStep panel id and step aria-controls by should match
-            expect(firstProgressTrackerStepPanel.props.id).toBe(firstProgressTrackerStep.props['aria-controls']);
-            expect(secondProgressTrackerStepPanel.props.id).toBe(secondProgressTrackerStep.props['aria-controls']);
+    describe('default config', () => {
+        it('should render aria tab pattern', () => {
+            setup();
+
+            // Step list
+            const tabList = query.tabList('Progress tracker steps');
+            expect(tabList).toBeInTheDocument();
+            expect(query.tabs(tabList).length).toBe(2);
+
+            // Step 1
+            const tab1 = query.tab('Step 1', tabList);
+            expect(tab1).toBeInTheDocument();
+
+            // Step 2
+            const tab2 = query.tab('Step 2', tabList);
+            expect(tab2).toBeInTheDocument();
+
+            // Step panel 1
+            const tabPanel1 = query.tabPanel('Step 1');
+            expect(tabPanel1).toBeInTheDocument();
+            expect(tab1).toHaveAttribute('aria-controls', tabPanel1?.id);
+
+            // Step panel 2
+            const tabPanel2 = query.tabPanel('Step 2');
+            expect(tabPanel2).toBeInTheDocument();
+            expect(tab2).toHaveAttribute('aria-controls', tabPanel2?.id);
+
+            // First step is active
+            checkTabActive('Step 1');
+        });
+    });
+
+    describe('not lazy', () => {
+        it('should render panel content', () => {
+            setup({ isLazy: false });
+
+            checkTabActive('Step 1', { isLazy: false });
         });
     });
 });