@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/generic-block/GenericBlock.test.tsx

@@ -1,8 +1,9 @@
 import React, { createRef } 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 } from '@testing-library/react';
+
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import { GenericBlock, GenericBlockProps } from '.';
 
 const CLASSNAME = GenericBlock.className as string;
@@ -10,122 +11,121 @@ const CLASSNAME = GenericBlock.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (props: Partial<GenericBlockProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<GenericBlock {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<GenericBlockProps> = {}) => {
+    render(<GenericBlock {...(props as any)} />);
+    const genericBlock = getByClassName(document.body, CLASSNAME);
+    const figure = queryByClassName(genericBlock, 'lumx-generic-block__figure');
+    const content = queryByClassName(genericBlock, 'lumx-generic-block__content');
+    const actions = queryByClassName(genericBlock, 'lumx-generic-block__actions');
+    return { props, genericBlock, figure, content, actions };
 };
 
 describe(`<${GenericBlock.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        it('should render default', () => {
-            const wrapper = shallow(
-                <GenericBlock figure="figure" actions="actions">
-                    Content
-                </GenericBlock>,
+    describe('Props', () => {
+        it('should render content', () => {
+            const { genericBlock, content, figure, actions } = setup({ children: 'Content' });
+            expect(genericBlock).toBeInTheDocument();
+            expect(genericBlock.className).toMatchInlineSnapshot(
+                `"lumx-generic-block lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-big"`,
             );
 
-            expect(wrapper.prop('gap')).toBe('big');
-            expect(wrapper.prop('orientation')).toBe('horizontal');
-
-            const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toHaveLength(1);
-
-            const content = wrapper.find('.lumx-generic-block__content');
-            expect(content).toHaveLength(1);
-            expect(content.prop('fillSpace')).toBe(true);
-            expect(content.prop('orientation')).toBe('vertical');
+            expect(content).toBeInTheDocument();
+            expect(content).toHaveTextContent('Content');
+            expect(content?.className).toMatchInlineSnapshot(
+                `"lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--fill-space"`,
+            );
 
-            const actions = wrapper.find('.lumx-generic-block__actions');
-            expect(actions).toHaveLength(1);
+            expect(figure).not.toBeInTheDocument();
+            expect(actions).not.toBeInTheDocument();
         });
 
         it('should forward vAlign & hAlign', () => {
-            const wrapper = shallow(
-                <GenericBlock figure="figure" actions="actions" vAlign="left" hAlign="bottom">
-                    Content
-                </GenericBlock>,
+            const { genericBlock, figure, content, actions } = setup({
+                children: 'Content',
+                figure: 'Figure',
+                actions: 'Actions',
+                vAlign: 'left',
+                hAlign: 'bottom',
+            });
+
+            expect(genericBlock?.className).toMatchInlineSnapshot(
+                `"lumx-generic-block lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom lumx-flex-box--gap-big"`,
+            );
+            expect(figure?.className).toMatchInlineSnapshot(
+                `"lumx-generic-block__figure lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom"`,
+            );
+            expect(content?.className).toMatchInlineSnapshot(
+                `"lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom lumx-flex-box--fill-space"`,
+            );
+            expect(actions?.className).toMatchInlineSnapshot(
+                `"lumx-generic-block__actions lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom"`,
             );
-
-            expect(wrapper.prop('vAlign')).toBe('left');
-            expect(wrapper.prop('hAlign')).toBe('bottom');
-
-            const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toHaveLength(1);
-            expect(figure.prop('vAlign')).toBe('left');
-            expect(figure.prop('hAlign')).toBe('bottom');
-
-            const content = wrapper.find('.lumx-generic-block__content');
-            expect(content).toHaveLength(1);
-            expect(content.prop('vAlign')).toBe('left');
-            expect(content.prop('hAlign')).toBe('bottom');
-
-            const actions = wrapper.find('.lumx-generic-block__actions');
-            expect(actions).toHaveLength(1);
-            expect(actions.prop('vAlign')).toBe('left');
-            expect(actions.prop('hAlign')).toBe('bottom');
         });
 
         it('should combine figure props', () => {
-            const wrapper = shallow(
-                <GenericBlock figure="Figure 1" figureProps={{ className: 'figure1', vAlign: 'left' }}>
+            const { figure, content, actions } = setup({
+                figure: 'Figure 1',
+                figureProps: { className: 'figure1', vAlign: 'left' },
+                children: (
                     <GenericBlock.Figure className="figure2" fillSpace>
                         Figure 2
                     </GenericBlock.Figure>
-                </GenericBlock>,
-            );
+                ),
+            });
 
-            const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toHaveClassName('figure1');
-            expect(figure).toHaveClassName('figure2');
-            expect(figure.prop('fillSpace')).toBe(true);
-            expect(figure.prop('vAlign')).toBe('left');
-            expect(figure).toHaveText('Figure 1Figure 2');
+            // Merged class names
+            expect(figure?.className).toMatchInlineSnapshot(
+                `"figure1 figure2 lumx-generic-block__figure lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--fill-space"`,
+            );
+            // Merged content
+            expect(figure).toHaveTextContent('Figure 1Figure 2');
 
-            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
-            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
+            expect(content).not.toBeInTheDocument();
+            expect(actions).not.toBeInTheDocument();
         });
 
         it('should combine content props', () => {
-            const wrapper = shallow(
-                <GenericBlock contentProps={{ className: 'content1', vAlign: 'left' }}>
-                    Content 1
-                    <GenericBlock.Content className="content2" fillSpace>
+            const { figure, content, actions } = setup({
+                children: [
+                    'Content 1',
+                    <GenericBlock.Content key="content" className="content2" fillSpace>
                         Content 2
-                    </GenericBlock.Content>
-                </GenericBlock>,
+                    </GenericBlock.Content>,
+                ],
+                contentProps: { className: 'content1', vAlign: 'left' },
+            });
+
+            // Merged class names
+            expect(content?.className).toMatchInlineSnapshot(
+                `"content1 content2 lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-left lumx-flex-box--fill-space"`,
             );
+            // Merged content
+            expect(content).toHaveTextContent('Content 2Content 1');
 
-            const content = wrapper.find('.lumx-generic-block__content');
-            expect(content).toHaveClassName('content1');
-            expect(content).toHaveClassName('content2');
-            expect(content.prop('fillSpace')).toBe(true);
-            expect(content.prop('vAlign')).toBe('left');
-            expect(content).toHaveText('Content 2Content 1');
-
-            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
-            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
+            expect(figure).not.toBeInTheDocument();
+            expect(actions).not.toBeInTheDocument();
         });
 
         it('should combine actions props', () => {
-            const wrapper = shallow(
-                <GenericBlock actions="Actions 1" actionsProps={{ className: 'actions1', vAlign: 'left' }}>
+            const { figure, content, actions } = setup({
+                actions: 'Actions 1',
+                actionsProps: { className: 'actions1', vAlign: 'left' },
+                children: (
                     <GenericBlock.Actions className="actions2" fillSpace>
                         Actions 2
                     </GenericBlock.Actions>
-                </GenericBlock>,
-            );
+                ),
+            });
 
-            const actions = wrapper.find('.lumx-generic-block__actions');
-            expect(actions).toHaveClassName('actions1');
-            expect(actions).toHaveClassName('actions2');
-            expect(actions.prop('fillSpace')).toBe(true);
-            expect(actions.prop('vAlign')).toBe('left');
-            expect(actions).toHaveText('Actions 1Actions 2');
+            // Merged class names
+            expect(actions?.className).toMatchInlineSnapshot(
+                `"actions1 actions2 lumx-generic-block__actions lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--fill-space"`,
+            );
+            // Merged content
+            expect(actions).toHaveTextContent('Actions 1Actions 2');
 
-            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
-            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
+            expect(content).not.toBeInTheDocument();
+            expect(figure).not.toBeInTheDocument();
         });
 
         it('should forward refs', () => {
@@ -133,7 +133,7 @@ describe(`<${GenericBlock.displayName}>`, () => {
             const figureRef = createRef<HTMLDivElement>();
             const contentRef = createRef<HTMLDivElement>();
             const actionsRef = createRef<HTMLDivElement>();
-            shallow(
+            render(
                 <GenericBlock ref={rootRef}>
                     <GenericBlock.Figure ref={figureRef} />
                     <GenericBlock.Content ref={contentRef} />
@@ -148,5 +148,9 @@ describe(`<${GenericBlock.displayName}>`, () => {
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'genericBlock',
+        forwardAttributes: 'genericBlock',
+    });
 });

package/src/components/grid-column/GridColumn.stories.tsx

@@ -14,7 +14,7 @@ const gapSizes: Array<GridColumnProps['gap']> = [Size.tiny, Size.regular, Size.b
 const getItems = (nb: number) =>
     range(nb).map((key) => (
         // eslint-disable-next-line react/jsx-key
-        <div style={genericBlockStyle}>
+        <div key={key} style={genericBlockStyle}>
             <h2>Column {key}</h2>
             <p>{loremIpsum('tiny')}</p>
         </div>
@@ -26,7 +26,7 @@ export default {
     argTypes: {
         nbItems: { control: 'number', min: 0 },
         gap: getSelectArgType(gapSizes),
-        itemMinWidth: { control: 'number', defaultValue: 200 },
+        itemMinWidth: { control: 'number' },
         maxColumns: { control: 'number' },
     },
     args: GridColumn.defaultProps,
@@ -42,5 +42,5 @@ export const Default = {};
  * Grid column with max 4 columns (responsive)
  */
 export const Columns = {
-    args: { maxColumns: 4 },
+    args: { maxColumns: 4, itemMinWidth: 200 },
 };

package/src/components/icon/Icon.test.tsx

@@ -1,14 +1,11 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { build, fake, oneOf } from 'test-data-bot';
-
-import { mdiCheck, mdiPlus } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Size } from '@lumx/react';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
+import { mdiAlertCircle } from '@lumx/icons';
+import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
+import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
 import { Icon, IconProps } from './Icon';
 
 const CLASSNAME = Icon.className as string;
@@ -18,85 +15,104 @@ type SetupProps = Partial<IconProps>;
 /**
  * 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: IconProps = {
         icon: 'mdiPlus',
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Icon {...props} />);
-
-    return {
-        i: wrapper.find('i'),
-        path: wrapper.find('path'),
-        svg: wrapper.find('svg'),
-        props,
-        wrapper,
-    };
+    render(<Icon {...props} />);
+    const i = getByClassName(document.body, CLASSNAME);
+    const svg = getByTagName(i, 'svg');
+    const path = getByTagName(svg, 'path');
+
+    return { i, svg, path, props };
 };
 
 describe(`<${Icon.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { i, path, svg, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
+    describe('Props', () => {
+        it('should render default', () => {
+            const { i, svg, path, props } = setup();
 
-            expect(i).toExist();
-            expect(i).toHaveClassName(CLASSNAME);
+            expect(i).toBeInTheDocument();
+            expect(i).toHaveClass(CLASSNAME);
+            expect(i?.className).toMatchInlineSnapshot(`"lumx-icon lumx-icon--no-shape lumx-icon--path"`);
 
-            expect(svg).toExist();
-            expect(path).toExist();
-        });
+            expect(svg).toBeInTheDocument();
+            expect(svg).toHaveAttribute('aria-hidden', 'true');
+            expect(svg).not.toHaveAttribute('role');
 
-        it('should render color & color variant', () => {
-            const { wrapper } = setup({ color: ColorPalette.primary, colorVariant: ColorVariant.D1 });
-            expect(wrapper).toMatchSnapshot();
+            expect(path).toBeInTheDocument();
+            expect(path).toHaveAttribute('d', props.icon);
         });
-    });
 
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it("shouldn't use any default props", () => {
-            const { i } = setup();
+        it('should adapt svg with alternate text', () => {
+            const { svg, props } = setup({ alt: 'Alternate text' });
+            expect(svg).toHaveAttribute('aria-label', props.alt);
+            expect(svg).not.toHaveAttribute('aria-hidden');
+            expect(svg).toHaveAttribute('role');
+        });
 
-            ['color', 'size'].forEach((prop: string) => {
-                expect(i).not.toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: prop, value: '' }));
+        describe('size', () => {
+            it('should render size', () => {
+                const { i } = setup({ size: Size.s });
+                expect(i).toHaveClass('lumx-icon--size-s');
             });
-        });
 
-        it('should use the given props', () => {
-            const modifiedPropsBuilder: () => SetupProps = build('props').fields({
-                color: fake((fakeData: any) => fakeData.commerce.color()),
-                icon: oneOf(mdiPlus, mdiCheck),
-                size: oneOf(...Object.values(Size)),
+            it('should adapt xxs size with hasShape', () => {
+                const { i } = setup({ hasShape: true, size: Size.xxs });
+                expect(i).toHaveClass('lumx-icon--size-s');
             });
 
-            const modifiedProps: SetupProps = modifiedPropsBuilder();
+            it('should adapt xs size with hasShape', () => {
+                const { i } = setup({ hasShape: true, size: Size.xs });
+                expect(i).toHaveClass('lumx-icon--size-s');
+            });
 
-            const { i, path } = setup({ ...modifiedProps });
+            it('should adapt xxl size with hasShape', () => {
+                const { i } = setup({ hasShape: true, size: Size.xxl });
+                expect(i).toHaveClass('lumx-icon--size-xl');
+            });
 
-            Object.keys(modifiedProps).forEach((prop: string) => {
-                if (prop === 'icon') {
-                    expect(path).toHaveProp('d', modifiedProps[prop]);
-                } else {
-                    expect(i).toHaveClassName(
-                        getBasicClass({ prefix: CLASSNAME, type: prop, value: modifiedProps[prop] }),
-                    );
-                }
+            it('should add default size with hasShape', () => {
+                const { i } = setup({ hasShape: true });
+                expect(i).toHaveClass('lumx-icon--size-m');
             });
         });
-    });
 
-    // 3. Test events.
-    // N/A
+        describe('color', () => {
+            it('should render color and color variant', () => {
+                const { i } = setup({
+                    color: ColorPalette.primary,
+                    colorVariant: ColorVariant.D1,
+                });
+                expect(i).toHaveClass('lumx-icon--color-primary lumx-icon--color-variant-D1');
+            });
+
+            it('should improve yellow icon color contrast with alert circle icon', () => {
+                const { i } = setup({
+                    color: ColorPalette.yellow,
+                    icon: mdiAlertCircle,
+                });
+                expect(i).toHaveClass('lumx-icon--color-yellow lumx-icon--has-dark-layer');
+            });
+
+            it('should set a default color on dark theme', () => {
+                const { i } = setup({ theme: Theme.dark });
+                expect(i).toHaveClass('lumx-icon--color-light lumx-icon--theme-dark');
+            });
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    // N/A
+            it('should set a default color on has shape', () => {
+                const { i } = setup({ hasShape: true });
+                expect(i).toHaveClass('lumx-icon--color-dark lumx-icon--has-shape');
+            });
 
-    // 5. Test state.
-    // N/A
+            it('should set a default color variant on has shape & dark color', () => {
+                const { i } = setup({ color: ColorPalette.dark, hasShape: true });
+                expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
+            });
+        });
+    });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'i', prop: 'i' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'i', forwardAttributes: 'i' });
 });

package/src/components/index.ts

@@ -146,8 +146,6 @@ export type Typography = TypographyInterface | TypographyCustom;
 export const AspectRatio = {
     /** Intrinsic content ratio. */
     original: 'original',
-    /** Ratio 3:1 */
-    panoramic: 'panoramic',
     /** Ratio 16:9 */
     wide: 'wide',
     /** Ratio 3:2 */

package/src/components/inline-list/InlineList.test.tsx

@@ -1,41 +1,54 @@
 import React from 'react';
 
-import { shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render, screen, within } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { InlineList, InlineListProps } from '.';
 
+const CLASSNAME = InlineList.className as string;
+
 const setup = (props: Partial<InlineListProps> = {}) => {
-    const wrapper = shallow(<InlineList {...props} />);
-    return { props, wrapper };
+    render(<InlineList {...props} />);
+    const inlineList = queryByClassName(document.body, CLASSNAME);
+    return { props, inlineList };
 };
 
 describe(`<${InlineList.displayName}>`, () => {
     describe('Snapshots and structure', () => {
         it('should render default', () => {
-            const { wrapper } = setup({ children: ['Some text', 'Some other text'] });
-            expect(wrapper).toHaveDisplayName('ul');
-            expect(wrapper.prop('className')).toBe(InlineList.className);
-            expect(wrapper.find('li')).toHaveLength(2);
+            const { inlineList } = setup({ children: ['Some text', 'Some other text'] });
+
+            expect(inlineList).toBeInTheDocument();
+
+            const list = screen.getByRole('list');
+            expect(list).toBeInTheDocument();
+
+            const listItems = within(list).queryAllByRole('listitem');
+            expect(listItems.length).toBe(2);
+            expect(listItems[0]).toHaveTextContent('Some text');
+            expect(listItems[1]).toHaveTextContent('Some other text');
         });
 
         it('should render with typography', () => {
-            const { wrapper } = setup({ typography: 'body2', children: 'Some text' });
-            expect(wrapper).toHaveClassName('lumx-typography-body2');
+            const { inlineList } = setup({ typography: 'body2', children: 'Some text' });
+            expect(inlineList).toHaveClass('lumx-typography-body2');
         });
 
         it('should render with color', () => {
-            const { wrapper } = setup({ color: 'blue', children: 'Some text' });
-            expect(wrapper).toHaveClassName('lumx-color-font-blue-N');
+            const { inlineList } = setup({ color: 'blue', children: 'Some text' });
+            expect(inlineList).toHaveClass('lumx-color-font-blue-N');
         });
 
         it('should render with color and variant', () => {
-            const { wrapper } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
-            expect(wrapper).toHaveClassName('lumx-color-font-blue-D2');
+            const { inlineList } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
+            expect(inlineList).toHaveClass('lumx-color-font-blue-D2');
         });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: InlineList.className });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'inlineList',
+        forwardAttributes: 'inlineList',
+    });
 });