@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/table/TableRow.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite } from '@lumx/react/testing/utils';
 
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+
+import { render, screen } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { TableRow, TableRowProps } from './TableRow';
 
 const CLASSNAME = TableRow.className as string;
@@ -10,13 +11,32 @@ const CLASSNAME = TableRow.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<TableRowProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<TableRow {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<TableRowProps> = {}) => {
+    render(
+        <table>
+            <tbody>
+                <TableRow {...(props as any)} />
+            </tbody>
+        </table>,
+    );
+    const tableRow = getByClassName(document.body, CLASSNAME);
+    return { props, tableRow };
 };
 
 describe(`<${TableRow.displayName}>`, () => {
+    it('should render default', () => {
+        const content = 'Content';
+        const { tableRow } = setup({ children: <td>{content}</td> });
+        expect(tableRow).toBe(screen.queryByRole('row', { name: content }));
+        expect(tableRow).toHaveAttribute('tabindex', '-1');
+        expect(tableRow).not.toHaveAttribute('aria-disabled');
+    });
+
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'tableRow',
+        forwardAttributes: 'tableRow',
+        forwardRef: 'tableRow',
+    });
 });

package/src/components/tabs/Tab.test.tsx

@@ -1,116 +1,47 @@
-import { mdiCheck } from '@lumx/icons';
-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 { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render, screen } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 
+import { Icon } from '@lumx/react';
+import { mdiPlay } from '@lumx/icons';
 import { Tab, TabProps } from './Tab';
-import { setupTabProviderMocks } from './test.mocks';
 
 const CLASSNAME = Tab.className as string;
 
-// Mock useTabProviderContext.
-jest.mock('./state', () => {
-    const state = jest.requireActual('./state');
-    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
-});
-
 type SetupProps = Partial<TabProps>;
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: TabProps = { label: 'Test Tab Label', ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Tab {...props} />);
-
-    return { props, wrapper };
+const setup = (propsOverride: SetupProps = {}) => {
+    const props = { label: 'Label', ...propsOverride };
+    render(<Tab {...props} />);
+    const tab = getByClassName(document.body, CLASSNAME);
+    const icon = queryByClassName(tab, Icon.className as string);
+    return { props, tab, icon };
 };
 
 describe(`<${Tab.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 icon', () => {
-            setupTabProviderMocks({ index: 2 });
-            const { wrapper } = setup({ icon: mdiCheck });
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should render active state', () => {
-            setupTabProviderMocks({ index: 3, isActive: true });
-            const { wrapper } = setup({});
-            expect(wrapper).toMatchSnapshot();
-        });
+    it('should render default', () => {
+        const label = 'Label';
+        const { tab, icon } = setup({ label });
+        expect(tab).toBe(screen.queryByRole('tab', { name: label }));
+        expect(tab.tagName).toBe('BUTTON');
+        expect(tab).toHaveAttribute('type', 'button');
+        expect(icon).not.toBeInTheDocument();
     });
 
-    // 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,
-                isDisabled: true,
-            };
-            const { wrapper } = setup(props);
-
-            Object.keys(props).forEach((prop) => {
-                expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: prop, value: props[prop] }));
-            });
-        });
+    it('should render icon', () => {
+        const { icon } = setup({ icon: mdiPlay });
+        expect(icon).toBeInTheDocument();
     });
 
-    // 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();
-        });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'tab',
+        forwardAttributes: 'tab',
+        forwardRef: 'tab',
     });
-
-    // Common tests suite.
-    commonTestsSuite(
-        (...args: any[]) => {
-            setupTabProviderMocks();
-            return setup(...args);
-        },
-        { className: 'wrapper', prop: 'wrapper' },
-        { className: CLASSNAME },
-    );
 });

package/src/components/tabs/TabList.test.tsx

@@ -1,80 +1,45 @@
-import { Tab, Alignment } from '@lumx/react';
+import React from 'react';
 
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
+import { Tab } from '@lumx/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render, screen } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
-import { build, oneOf } from 'test-data-bot';
-import { TabList, TabListLayout, TabListProps } from './TabList';
-import { setupTabProviderMocks } from './test.mocks';
+import { TabList, TabListProps } from './TabList';
 
 const CLASSNAME = TabList.className as string;
 
-// Mock useTabProviderContext.
-jest.mock('./state', () => {
-    const state = jest.requireActual('./state');
-    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
-});
-
 type SetupProps = Partial<TabListProps>;
 
 /**
  * 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 tabs = [<Tab key={0} label="Tab 0" />, <Tab key={1} label="Tab 1" />];
     const props: TabListProps = {
         children: tabs,
         'aria-label': 'Tab list',
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<TabList {...props} />);
 
-    return { props, wrapper };
+    render(<TabList {...props} />);
+    const tabList = getByClassName(document.body, CLASSNAME);
+    const links = queryByClassName(tabList, `${CLASSNAME}__links`);
+    return { props, tabList, links };
 };
 
 describe(`<${TabList.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-tabs__links');
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use the given props', () => {
-            const modifiedPropsBuilder: () => SetupProps = build('props').fields({
-                layout: TabListLayout.clustered,
-                position: oneOf(Alignment.center, Alignment.right),
-            });
-
-            const modifiedProps: SetupProps = modifiedPropsBuilder();
-
-            const { wrapper } = setup({ ...modifiedProps });
-
-            Object.keys(modifiedProps).forEach((prop) => {
-                expect(wrapper).toHaveClassName(
-                    getBasicClass({ prefix: CLASSNAME, type: prop, value: modifiedProps[prop] }),
-                );
-            });
-        });
+    it('should render default', () => {
+        const name = 'Tab list';
+        const { links } = setup({ 'aria-label': name });
+        expect(links).toBe(screen.queryByRole('tablist', { name }));
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'tabList',
+        forwardAttributes: 'tabList',
+        forwardRef: 'tabList',
+    });
 });

package/src/components/tabs/TabPanel.test.tsx

@@ -1,74 +1,39 @@
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
+import React from 'react';
+
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { render, screen } from '@testing-library/react';
 
 import { TabPanel, TabPanelProps } from './TabPanel';
-import { setupTabProviderMocks } from './test.mocks';
 
 const CLASSNAME = TabPanel.className as string;
 
-// Mock useTabProviderContext.
-jest.mock('./state', () => {
-    const state = jest.requireActual('./state');
-    return { ...state, useTabProviderContext: jest.fn(), useTabProviderContextState: jest.fn() };
-});
-
 type SetupProps = Partial<TabPanelProps>;
 
 /**
  * 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: TabPanelProps = { ...propsOverride, children: 'Tab panel content' };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<TabPanel {...props} />);
 
-    return { props, wrapper };
+    render(<TabPanel {...props} />);
+    const tabPanel = getByClassName(document.body, CLASSNAME);
+
+    return { props, tabPanel };
 };
 
 describe(`<${TabPanel.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 { tabPanel } = setup({ children: content });
+        expect(tabPanel).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: 'tabPanel',
+        forwardAttributes: 'tabPanel',
+        forwardRef: 'tabPanel',
+    });
 });

package/src/components/tabs/TabPanel.tsx

@@ -53,7 +53,7 @@ export const TabPanel: Comp<TabPanelProps, HTMLDivElement> = forwardRef((props,
             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/tabs/TabProvider.test.tsx

@@ -1,42 +1,163 @@
-import { Tab, TabList, TabPanel, TabProvider } from '@lumx/react';
-import { mount } from 'enzyme';
-import 'jest-enzyme';
 import React from 'react';
 
-describe(`<${TabProvider.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render', () => {
-            const wrapper = mount(
-                <TabProvider>
-                    <TabList aria-label="Tab list">
-                        <Tab label="tab 1" />
-                        <Tab label="tab 1" />
-                    </TabList>
-
-                    <TabPanel>Tab 1 content</TabPanel>
-                    <TabPanel>Tab 2 content</TabPanel>
-                </TabProvider>,
-            );
-            const tabs = wrapper.find(Tab).find('button');
-            const firstTab = tabs.get(0);
-            const secondTab = tabs.get(1);
-
-            const tabPanels = wrapper.find(TabPanel).find('div');
-            const firstTabPanel = tabPanels.get(0);
-            const secondTabPanel = tabPanels.get(1);
-
-            // First tab is selected.
-            expect(firstTab.props['aria-selected']).toBe(true);
-            expect(secondTab.props['aria-selected']).toBe(false);
-
-            // Tab id and tab panel aria-labelledby by should match
-            expect(firstTab.props.id).toBe(firstTabPanel.props['aria-labelledby']);
-            expect(secondTab.props.id).toBe(secondTabPanel.props['aria-labelledby']);
-
-            // Tab panel id and tab aria-controls by should match
-            expect(firstTabPanel.props.id).toBe(firstTab.props['aria-controls']);
-            expect(secondTabPanel.props.id).toBe(secondTab.props['aria-controls']);
+import { Tab, TabList, TabPanel, TabProvider, TabProviderProps } from '@lumx/react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { checkTabActive, query } from '@lumx/react/components/tabs/test-utils';
+
+const setup = (props: Partial<TabProviderProps> = {}) => {
+    render(
+        <TabProvider {...props}>
+            <TabList aria-label="Tab list">
+                <Tab label="Tab 1" />
+                <Tab label="Tab 2" isDisabled />
+                <Tab label="Tab 3" />
+            </TabList>
+
+            <TabPanel>Tab 1 content</TabPanel>
+            <TabPanel>Tab 2 content</TabPanel>
+            <TabPanel>Tab 3 content</TabPanel>
+        </TabProvider>,
+    );
+};
+
+describe(`TabProvider`, () => {
+    describe('default config', () => {
+        it('should render with accessible DOM', () => {
+            setup();
+
+            // Tab list
+            const tabList = query.tabList('Tab list');
+            expect(tabList).toBeInTheDocument();
+            expect(query.tabs(tabList).length).toBe(3);
+
+            // Tab 1
+            const tab1 = query.tab('Tab 1', tabList);
+            expect(tab1).toBeInTheDocument();
+
+            // Tab 2
+            const tab2 = query.tab('Tab 2', tabList);
+            expect(tab2).toBeInTheDocument();
+
+            // Tab 3
+            const tab3 = query.tab('Tab 3', tabList);
+            expect(tab3).toBeInTheDocument();
+
+            // Tab panel 1
+            const tabPanel1 = query.tabPanel('Tab 1');
+            expect(tabPanel1).toBeInTheDocument();
+            expect(tab1).toHaveAttribute('aria-controls', tabPanel1?.id);
+
+            // Tab panel 2
+            const tabPanel2 = query.tabPanel('Tab 2');
+            expect(tabPanel2).toBeInTheDocument();
+            expect(tab2).toHaveAttribute('aria-controls', tabPanel2?.id);
+
+            // Tab panel 3
+            const tabPanel3 = query.tabPanel('Tab 3');
+            expect(tabPanel3).toBeInTheDocument();
+            expect(tab3).toHaveAttribute('aria-controls', tabPanel3?.id);
+
+            // First tab is active
+            checkTabActive('Tab 1');
+        });
+
+        it('should switch tab on click', async () => {
+            setup();
+
+            checkTabActive('Tab 1');
+
+            // Click on second tab (that is disabled) should do nothing
+            await userEvent.click(query.tab('Tab 2'));
+            checkTabActive('Tab 1');
+
+            // Click on third tab should work
+            await userEvent.click(query.tab('Tab 3'));
+            checkTabActive('Tab 3');
+        });
+
+        it('should be navigable with keyboard', async () => {
+            setup();
+
+            checkTabActive('Tab 1');
+
+            // First tab stop on active tab (tab1)
+            await userEvent.tab();
+            expect(query.tab('Tab 1')).toHaveFocus();
+
+            // Second tab stop on active tab panel (tabPanel1)
+            await userEvent.tab();
+            expect(query.tabPanel('Tab 1')).toHaveFocus();
+
+            // Go back to tab1
+            await userEvent.tab({ shift: true });
+            expect(query.tab('Tab 1')).toHaveFocus();
+
+            // Navigate with ArrowRight to go to the next tab (tab2)
+            await userEvent.keyboard('[ArrowRight]');
+            expect(query.tab('Tab 2')).toHaveFocus();
+
+            // Activate tab with Enter should not work on disabled tab
+            await userEvent.keyboard('{Enter}');
+            expect(query.tab('Tab 2')).toHaveFocus();
+            checkTabActive('Tab 1');
+
+            // Navigate with ArrowRight to go to the next tab (tab3)
+            await userEvent.keyboard('[ArrowRight]');
+            expect(query.tab('Tab 3')).toHaveFocus();
+
+            // Activate tab with Enter
+            await userEvent.keyboard('{Enter}');
+            expect(query.tab('Tab 3')).toHaveFocus();
+            checkTabActive('Tab 3');
+
+            // Focus next should go to active tab panel (tabPanel3)
+            await userEvent.tab();
+            expect(query.tabPanel('Tab 3')).toHaveFocus();
+
+            // Go back to tab3
+            await userEvent.tab({ shift: true });
+            expect(query.tab('Tab 3')).toHaveFocus();
+
+            // Navigate with ArrowRight to loop back to the first tab (tab1)
+            await userEvent.keyboard('[ArrowRight]');
+            expect(query.tab('Tab 1')).toHaveFocus();
+
+            // Navigate with ArrowLeft to loop back to the last tab (tab3)
+            await userEvent.keyboard('[ArrowLeft]');
+            expect(query.tab('Tab 3')).toHaveFocus();
+
+            checkTabActive('Tab 3');
+        });
+    });
+
+    describe('not lazy', () => {
+        it('should render tab panel everytime', () => {
+            setup({ isLazy: false });
+            // Check the first tab is active and all panel are loaded
+            checkTabActive('Tab 1', { isLazy: false });
+        });
+    });
+
+    describe('activate on focus', () => {
+        it('should activate tab on focus', async () => {
+            setup({ shouldActivateOnFocus: true });
+
+            checkTabActive('Tab 1');
+
+            await userEvent.tab();
+            expect(query.tab('Tab 1')).toHaveFocus();
+            checkTabActive('Tab 1');
+
+            await userEvent.keyboard('[ArrowRight]');
+            expect(query.tab('Tab 2')).toHaveFocus();
+            // Active tab not changed since tab 2 is disabled
+            checkTabActive('Tab 1');
+
+            await userEvent.keyboard('[ArrowRight]');
+            expect(query.tab('Tab 3')).toHaveFocus();
+            // Active tab changed to tab 3
+            checkTabActive('Tab 3');
         });
     });
 });

package/src/components/tabs/test-utils.ts

@@ -0,0 +1,39 @@
+/* istanbul ignore file */
+
+/**
+ * Test util module. Do not import in production code !
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { screen, within } from '@testing-library/react';
+
+/** RTL queries for tabs */
+export const query = {
+    tabList: (name: string) => screen.getByRole('tablist', { name }),
+    tabs: (tabList?: any) => (tabList ? within(tabList) : screen).getAllByRole('tab'),
+    tab: (name: string, tabList?: any) => (tabList ? within(tabList) : screen).getByRole('tab', { name }),
+    tabPanel: (name: string) => screen.getByRole('tabpanel', { name }),
+};
+
+/** Assert that the given tab is active */
+export const checkTabActive = (activeTabName: string, { isLazy = true } = {}) => {
+    for (const tab of query.tabs()) {
+        const isTabActive = tab.textContent === activeTabName;
+
+        // Tab state
+        expect(tab).toHaveAttribute('aria-selected', String(isTabActive));
+        expect(tab).toHaveAttribute('tabindex', isTabActive ? '0' : '-1');
+
+        const tabPanel = query.tabPanel(tab.textContent as string);
+
+        // Tab panel state
+        expect(tabPanel).toHaveAttribute('tabindex', isTabActive ? '0' : '-1');
+
+        if (!isTabActive && isLazy) {
+            // Tab panel content not rendered when isLazy and not active
+            expect(tabPanel).toBeEmptyDOMElement();
+        } else {
+            expect(tabPanel).not.toBeEmptyDOMElement();
+        }
+    }
+};