@lumx/react 3.3.1-alpha.0 → 3.3.1

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

@@ -1,128 +1,38 @@
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
+import { render, screen } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
-import { setupTabProviderMocks } from '../tabs/test.mocks';
 import { ProgressTrackerStep, ProgressTrackerStepProps } from './ProgressTrackerStep';
 
 const CLASSNAME = ProgressTrackerStep.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<ProgressTrackerStepProps>;
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: ProgressTrackerStepProps = { label: 'Test Step Label', ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<ProgressTrackerStep {...props} />);
+const setup = (propsOverride: SetupProps = {}) => {
+    const props = { label: 'Test Step Label', ...propsOverride };
+    render(<ProgressTrackerStep {...props} />);
+    const progressTrackerStep = getByClassName(document.body, CLASSNAME);
 
-    return { props, wrapper };
+    return { props, progressTrackerStep };
 };
 
 describe(`<${ProgressTrackerStep.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render', () => {
-            setupTabProviderMocks({ index: 1 });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-
-        it('should render active state', () => {
-            setupTabProviderMocks({ index: 3, isActive: true });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should render complete state', () => {
-            setupTabProviderMocks({ index: 3, isComplete: true });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should render erroneous state', () => {
-            setupTabProviderMocks({ index: 3, hasError: true });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should render active erroneous state', () => {
-            setupTabProviderMocks({ index: 3, isActive: true, hasError: true });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use the given props to add classes', () => {
-            setupTabProviderMocks();
-            const props: any = {
-                isActive: true,
-                hasError: true,
-                isComplete: true,
-            };
-            const { wrapper } = setup(props);
-
-            Object.keys(props).forEach((prop) => {
-                expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: prop, value: props[prop] }));
-            });
-        });
-    });
-
-    // 3. Test events.
-    describe('Events', () => {
-        it('should trigger `onChange` when focused if the provider is configured to do so', () => {
-            const { changeToTab } = setupTabProviderMocks({ shouldActivateOnFocus: true });
-            const { wrapper } = setup({}, false);
-
-            wrapper.simulate('focus');
-            expect(changeToTab).toHaveBeenCalledTimes(1);
-        });
-
-        it('should trigger `onChange` when clicked', () => {
-            const { changeToTab } = setupTabProviderMocks();
-            const { wrapper } = setup({}, false);
-
-            wrapper.simulate('click');
-            expect(changeToTab).toHaveBeenCalledTimes(1);
-        });
-
-        it('should trigger `onChange` when pressing `enter`', () => {
-            const { changeToTab } = setupTabProviderMocks();
-            const { wrapper } = setup({}, false);
-
-            wrapper.simulate('keypress', { key: 'Enter' });
-            expect(changeToTab).toHaveBeenCalledTimes(1);
-        });
-
-        it('should not trigger `onChange` when pressing any other key', () => {
-            const { changeToTab } = setupTabProviderMocks();
-            const { wrapper } = setup({}, false);
-
-            wrapper.simulate('keypress', { key: 'a' });
-            expect(changeToTab).not.toHaveBeenCalled();
-        });
+    it('should render default', () => {
+        const label = 'Step';
+        const { progressTrackerStep } = setup({ label });
+        expect(progressTrackerStep).toBe(screen.queryByRole('tab', { name: label }));
     });
 
     // Common tests suite.
-    commonTestsSuite(
-        (...args: any[]) => {
-            setupTabProviderMocks();
-            return setup(...args);
-        },
-        { className: 'wrapper', prop: 'wrapper' },
-        { className: CLASSNAME },
-    );
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'progressTrackerStep',
+        forwardAttributes: 'progressTrackerStep',
+        forwardRef: 'progressTrackerStep',
+    });
 });

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

@@ -1,73 +1,36 @@
-import { commonTestsSuite, Wrapper } 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 { ProgressTrackerStepPanel, ProgressTrackerStepPanelProps } from './ProgressTrackerStepPanel';
+import React from 'react';
 
-const CLASSNAME = ProgressTrackerStepPanel.className as string;
+import { render, screen } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
 
-// Mock useTabProviderContext.
-jest.mock('../tabs/state', () => {
-    const state = jest.requireActual('../tabs/state');
-    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
-});
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { ProgressTrackerStepPanel, ProgressTrackerStepPanelProps } from './ProgressTrackerStepPanel';
 
-type SetupProps = Partial<ProgressTrackerStepPanelProps>;
+const CLASSNAME = ProgressTrackerStepPanel.className as string;
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: ProgressTrackerStepPanelProps = { ...propsOverride, children: 'Tab panel content' };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<ProgressTrackerStepPanel {...props} />);
+const setup = (propsOverride: Partial<ProgressTrackerStepPanelProps> = {}) => {
+    const props = { ...propsOverride, children: 'Tab panel content' };
+    render(<ProgressTrackerStepPanel {...props} />);
+    const progressTrackerStepPanel = getByClassName(document.body, CLASSNAME);
 
-    return { props, wrapper };
+    return { props, progressTrackerStepPanel };
 };
 
 describe(`<${ProgressTrackerStepPanel.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            setupTabProviderMocks({ index: 1 });
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-
-        it('should render isActive state', () => {
-            setupTabProviderMocks({ index: 2, isActive: true });
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should not render children when not active and lazy', () => {
-            setupTabProviderMocks({ isLazy: true, isActive: false });
-            const { wrapper } = setup();
-            expect(wrapper.find('div').props().children).toBeFalsy();
-        });
-
-        it('should render children when active and lazy', () => {
-            setupTabProviderMocks({ isLazy: true, isActive: true });
-            const { wrapper } = setup();
-            expect(wrapper.find('div').props().children).toBeTruthy();
-        });
-
-        it('should render children when not active and not lazy', () => {
-            setupTabProviderMocks({ isActive: false, isLazy: false });
-            const { wrapper } = setup();
-            expect(wrapper.find('div').props().children).toBeTruthy();
-        });
+    it('should render default', () => {
+        const content = 'Content';
+        const { progressTrackerStepPanel } = setup({ children: content });
+        expect(progressTrackerStepPanel).toBe(screen.queryByRole('tabpanel'));
     });
 
     // Common tests suite.
-    commonTestsSuite(
-        (...args: any[]) => {
-            setupTabProviderMocks();
-            return setup(...args);
-        },
-        { className: 'wrapper', prop: 'wrapper' },
-        { className: CLASSNAME },
-    );
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'progressTrackerStepPanel',
+        forwardRef: 'progressTrackerStepPanel',
+        forwardAttributes: 'progressTrackerStepPanel',
+    });
 });

package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx

@@ -54,7 +54,7 @@ export const ProgressTrackerStepPanel: Comp<ProgressTrackerStepPanelProps, HTMLD
                 id={state?.tabPanelId}
                 className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}
                 role="tabpanel"
-                tabIndex={0}
+                tabIndex={isActive ? 0 : -1}
                 aria-labelledby={state?.tabId}
             >
                 {(!state?.isLazy || isActive) && children}

package/src/components/radio-button/RadioButton.test.tsx

@@ -1,13 +1,11 @@
-import React, { InputHTMLAttributes, LabelHTMLAttributes, ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+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 { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-import { Theme } from '@lumx/react';
-import { RadioButton, RadioButtonProps } from './RadioButton';
+import { RadioButton, RadioButtonProps } from '.';
 
 const CLASSNAME = RadioButton.className as string;
 
@@ -16,108 +14,96 @@ type SetupProps = Partial<RadioButtonProps>;
 /**
  * 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(<RadioButton {...props} />);
-
-    return {
-        helper: wrapper.find(`.${CLASSNAME}__helper`),
-        input: wrapper.find(`input`),
-        label: wrapper.find(`.${CLASSNAME}__label`),
-        props,
-        wrapper,
-    };
+    render(<RadioButton {...props} />);
+
+    const radioButton = getByClassName(document.body, CLASSNAME);
+    const helper = queryByClassName(radioButton, `${CLASSNAME}__helper`);
+    const label = queryByClassName(radioButton, `${CLASSNAME}__label`);
+    const input = getByTagName(radioButton, 'input');
+    return { radioButton, helper, label, input, props };
 };
 
 describe(`<${RadioButton.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const { wrapper, input, helper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-
-            expect(input).toExist();
-            const inputProps: InputHTMLAttributes<HTMLInputElement> = input.props();
-            expect(inputProps.checked).toBeFalsy();
-            expect(inputProps.disabled).toBeFalsy();
-
-            expect(helper).not.toExist();
+    describe('Props', () => {
+        it('should render correctly', () => {
+            const { radioButton, input, label, helper } = setup();
+            expect(radioButton).toBeInTheDocument();
+            expect(radioButton).toHaveClass(CLASSNAME);
+            expect(radioButton).not.toHaveClass('lumx-radio-button--is-disabled');
+            expect(radioButton).toHaveClass('lumx-radio-button--is-unchecked');
+
+            expect(label).not.toBeInTheDocument();
+            expect(helper).not.toBeInTheDocument();
+
+            expect(input).toBeInTheDocument();
+            expect(input).not.toBeChecked();
+            expect(input).not.toBeDisabled();
         });
 
-        it('should render checked, disabled & id', () => {
-            const props = {
-                isChecked: true,
+        it('should render disabled and checked', () => {
+            const { radioButton, input } = setup({
                 isDisabled: true,
-                id: 'inputID',
-            };
-            const { wrapper, input } = setup(props);
-            expect(wrapper).toMatchSnapshot();
-
-            const inputProps: InputHTMLAttributes<HTMLInputElement> = input.props();
-            expect(inputProps.checked).toBe(true);
-            expect(inputProps.disabled).toBe(true);
-            expect(inputProps.id).toEqual(props.id);
+                isChecked: true,
+            });
+            expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
+            expect(radioButton).toHaveClass('lumx-radio-button--is-checked');
+
+            expect(input).toBeChecked();
+            expect(input).toBeDisabled();
         });
 
-        it('should render label & helper', () => {
-            const props = {
-                helper: 'Helper',
-                label: 'Label',
-            };
-            const { wrapper, label, helper, input } = setup(props as Partial<RadioButtonProps>);
-            expect(wrapper).toMatchSnapshot();
-
-            expect(input).toExist();
-            const inputProps: InputHTMLAttributes<HTMLInputElement> = input.props();
-            expect(inputProps.checked).toBeFalsy();
-            expect(inputProps.disabled).toBeFalsy();
-
-            expect(label).toExist();
-            expect(label.contains(props.label)).toBe(true);
-            const labelProps: LabelHTMLAttributes<HTMLLabelElement> = label.props();
-            expect(labelProps.htmlFor).toEqual(inputProps.id);
-
-            expect(helper).toExist();
-            expect(helper.contains(props.helper)).toBe(true);
+        it('should render helper and label', () => {
+            const id = 'radioButton1';
+            const { props, helper, label, input } = setup({
+                id,
+                helper: 'Test helper',
+                label: 'Test label',
+            });
+
+            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);
         });
-    });
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use props for classes', () => {
-            const props = {
-                isChecked: true,
-                isDisabled: true,
-                theme: Theme.dark,
-            };
-            const { wrapper } = setup(props as RadioButtonProps);
-
-            expect(wrapper).toHaveClassName(CLASSNAME);
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isDisabled', value: true }));
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isChecked', value: true }));
-            expect(wrapper).not.toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'isUnchecked', value: true }));
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'theme', value: props.theme }));
+        it('should forward input props', () => {
+            const { props, input } = setup({
+                inputProps: {
+                    'aria-labelledby': 'labelledby-id',
+                },
+            });
+
+            expect(input).toHaveAttribute('aria-labelledby', props.inputProps['aria-labelledby']);
         });
     });
 
-    // 3. Test events.
     describe('Events', () => {
-        // Nothing to do here.
-    });
+        const onChange = jest.fn();
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Nothing to do here.
-    });
+        it('should trigger `onChange` when radioButton is clicked', async () => {
+            const value = 'value';
+            const name = 'name';
+            const { input } = setup({ checked: false, onChange, value, name });
+            expect(input).not.toBeChecked();
+
+            await userEvent.click(input);
 
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
+            expect(onChange).toHaveBeenCalledWith(value, name, expect.any(Object));
+        });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { prop: 'wrapper', className: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'radioButton',
+        forwardAttributes: 'radioButton',
+    });
 });

package/src/components/radio-button/RadioGroup.test.tsx

@@ -1,11 +1,9 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-
-import { RadioButton } from '@lumx/react';
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { RadioGroup, RadioGroupProps } from './RadioGroup';
 
 const CLASSNAME = RadioGroup.className as string;
@@ -15,63 +13,19 @@ type SetupProps = Partial<RadioGroupProps>;
 /**
  * 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 = renderer(<RadioGroup {...props} />);
+    render(<RadioGroup {...props} />);
 
-    return {
-        props,
-        radioButtons: wrapper.find('RadioButton'),
-        wrapper,
-    };
+    const radioGroup = queryByClassName(document.body, CLASSNAME);
+    return { props, radioGroup };
 };
 
 describe(`<${RadioGroup.displayName}>`, () => {
-    // 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 with radio button children', () => {
-            const { wrapper, radioButtons } = setup({
-                children: [
-                    <RadioButton key={0} isChecked label="Label 1" />,
-                    <RadioButton key={1} isChecked={false} label="Label 2" />,
-                ],
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(radioButtons).toExist();
-            expect(radioButtons.length).toBe(2);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        // Nothing to do here.
-    });
-
-    // 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: 'wrapper', className: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'radioGroup',
+        forwardAttributes: 'radioGroup',
+    });
 });