@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/input-helper/InputHelper.test.tsx

@@ -1,10 +1,10 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import React from 'react';
 
 import { Kind, Theme } from '@lumx/react';
-import { Wrapper } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+import { INPUT_HELPER_CONFIGURATION } from '@lumx/react/components/input-helper/constants';
 import { InputHelper, InputHelperProps } from './InputHelper';
 
 const CLASSNAME = InputHelper.className as string;
@@ -14,94 +14,34 @@ type SetupProps = Partial<InputHelperProps>;
 /**
  * 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: Wrapper = renderer(<InputHelper {...props} />);
-    const helper: Wrapper = wrapper.find('.lumx-input-helper');
-
-    return { helper, props, wrapper };
-};
+    render(<InputHelper {...props} />);
+    const helper = getByClassName(document.body, CLASSNAME);
 
-const properties = {
-    error: {
-        children: 'Error',
-        kind: Kind.error,
-    },
-    info: {
-        children: 'Info',
-        kind: Kind.info,
-    },
-    success: {
-        children: 'Success',
-        kind: Kind.success,
-    },
-    warning: {
-        children: 'Warning',
-        kind: Kind.warning,
-    },
+    return { helper, props };
 };
 
 describe(`<${InputHelper.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const children = 'The helper text';
-            const { wrapper, helper } = setup({ children });
-
-            expect(wrapper).toMatchSnapshot();
-            expect(helper).toExist();
-            expect(helper).toHaveClassName(CLASSNAME);
-            expect(helper).toHaveClassName(`${CLASSNAME}--theme-light`);
-            expect(helper).toHaveText(children);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
-        it('should render info', () => {
-            const { helper } = setup(properties.info);
-            expect(helper).toHaveText(properties.info.children);
-        });
-        it('should render error', () => {
-            const { helper } = setup(properties.error);
-            expect(helper).toIncludeText(properties.error.children);
-        });
-        it('should render valid', () => {
-            const { helper } = setup(properties.success);
-            expect(helper).toIncludeText(properties.success.children);
-        });
-        it('should render warning', () => {
-            const { helper } = setup(properties.warning);
-            expect(helper).toIncludeText(properties.warning.children);
+        it('should render text', () => {
+            const { props, helper } = setup({ children: 'helper text' });
+
+            expect(helper).toHaveTextContent(props.children);
+            expect(helper.className).toMatchInlineSnapshot(`"lumx-input-helper lumx-input-helper--theme-light"`);
         });
 
         it('should render dark theme', () => {
-            const { helper } = setup({ ...properties.info, theme: Theme.dark });
-            expect(helper).toHaveClassName(CLASSNAME);
-            expect(helper).toHaveClassName(`${CLASSNAME}--theme-dark`);
+            const { helper } = setup({ theme: Theme.dark });
+            expect(helper).toHaveClass('lumx-input-helper--theme-dark');
         });
 
-        it('should render custom className', () => {
-            const className = 'my-class__test';
-            const { helper } = setup({ ...properties.info, className });
-            expect(helper).toHaveClassName(CLASSNAME);
-            expect(helper).toHaveClassName(className);
+        it.each(Object.values(Kind))('should render kind %s', (kind) => {
+            const { helper } = setup({ kind });
+            const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
+            if (color) expect(helper).toHaveClass(`${CLASSNAME}--color-${color}`);
         });
     });
 
-    // 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.
-    });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'helper', forwardAttributes: 'helper' });
 });

package/src/components/input-label/InputLabel.test.tsx

@@ -1,10 +1,9 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import React from 'react';
 
 import { Theme } from '@lumx/react';
-import { Wrapper } from '@lumx/react/testing/utils';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { InputLabel, InputLabelProps } from './InputLabel';
 
 const CLASSNAME = InputLabel.className as string;
@@ -14,73 +13,32 @@ type SetupProps = Partial<InputLabelProps>;
 /**
  * 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 = { htmlFor: 'id', ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<InputLabel {...props} />);
-    const label: Wrapper = wrapper.find('.lumx-input-label');
+    render(<InputLabel {...props} />);
+    const label = getByClassName(document.body, CLASSNAME);
 
-    return { label, props, wrapper };
+    return { label, props };
 };
 
 describe(`<${InputLabel.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render defaults', () => {
-            const children = 'The Label text';
-            const { wrapper, label } = setup({ children });
-
-            expect(wrapper).toMatchSnapshot();
-            expect(label).toExist();
-            expect(label).toHaveClassName(CLASSNAME);
-            expect(label).toHaveClassName(`${CLASSNAME}--theme-light`);
-            expect(label).toHaveText(children);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
-        it('should render children', () => {
-            const children = (
-                <span>
-                    The label<strong>*</strong>
-                </span>
-            );
-
-            const { label } = setup({
-                children,
+        it('should render text', () => {
+            const { label, props } = setup({
+                children: 'Some label text',
                 htmlFor: '123',
             });
-            expect(label).toContainReact(children);
-            expect(label).toHaveProp('htmlFor', '123');
+            expect(label).toHaveTextContent(props.children);
+            expect(label).toHaveAttribute('for', props.htmlFor);
         });
 
-        it('should render dark theme', () => {
-            const { label } = setup({ children: 'The label', theme: Theme.dark });
-            expect(label).toHaveClassName(CLASSNAME);
-            expect(label).toHaveClassName(`${CLASSNAME}--theme-dark`);
+        it('should render dark theme & required', () => {
+            const { label } = setup({ children: 'The label', theme: Theme.dark, isRequired: true });
+            expect(label).toHaveClass(CLASSNAME);
+            expect(label).toHaveClass(`${CLASSNAME}--theme-dark`);
+            expect(label).toHaveClass(`${CLASSNAME}--is-required`);
         });
-
-        it('should render custom className', () => {
-            const className = 'my-class__test';
-            const { label } = setup({ children: 'The label', className });
-            expect(label).toHaveClassName(CLASSNAME);
-            expect(label).toHaveClassName(className);
-        });
-    });
-
-    // 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.
-    });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'label', forwardAttributes: 'label' });
 });

package/src/components/lightbox/Lightbox.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import 'jest-enzyme';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
+
 import { Lightbox, LightboxProps } from './Lightbox';
 
 const CLASSNAME = Lightbox.className as string;
@@ -21,5 +21,6 @@ describe(`<${Lightbox.displayName}>`, () => {
         baseClassName: CLASSNAME,
         forwardClassName: 'lightbox',
         forwardAttributes: 'lightbox',
+        forwardRef: 'lightbox',
     });
 });

package/src/components/link/Link.test.tsx

@@ -1,60 +1,76 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
+import React from 'react';
 
 import { ColorPalette, ColorVariant, Typography } from '@lumx/react';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render, screen } from '@testing-library/react';
+import { mdiCheck, mdiPlus } from '@lumx/icons';
 import { Link, LinkProps } from './Link';
 
 const CLASSNAME = Link.className as string;
 
-type SetupProps = Partial<LinkProps>;
-
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: LinkProps = {
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Link {...props} />);
-
-    return { props, wrapper };
+const setup = (props: LinkProps = {}) => {
+    render(<Link {...props} />);
+    const link = getByClassName(document.body, CLASSNAME);
+    const content = queryByClassName(link, `${CLASSNAME}__content`);
+    const rightIcon = queryByClassName(link, `${CLASSNAME}__right-icon`);
+    const leftIcon = queryByClassName(link, `${CLASSNAME}__left-icon`);
+
+    return { props, link, content, rightIcon, leftIcon };
 };
 
 describe(`<${Link.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper } = setup({ href: 'https://google.com' });
-            expect(wrapper).toMatchSnapshot();
+    describe('Props', () => {
+        it('should render link', () => {
+            const name = 'Link';
+            const { props, link, rightIcon, leftIcon } = setup({ href: 'https://example.com', children: name });
+
+            expect(link).toBe(screen.queryByRole('link', { name }));
+            expect(link).toHaveAttribute('href', props.href);
+            expect(link.className).toMatchInlineSnapshot(`"lumx-link"`);
+
+            expect(rightIcon).not.toBeInTheDocument();
+            expect(leftIcon).not.toBeInTheDocument();
         });
 
         it('should render color & color variant', () => {
-            const { wrapper } = setup({
+            const { link } = setup({
                 href: 'https://google.com',
                 color: ColorPalette.primary,
                 colorVariant: ColorVariant.D1,
             });
-            expect(wrapper).toMatchSnapshot();
+            expect(link.className).toMatchInlineSnapshot(
+                `"lumx-link lumx-link--color-primary lumx-link--color-variant-D1"`,
+            );
         });
 
         it('should render typography', () => {
-            const { wrapper } = setup({ href: 'https://google.com', typography: Typography.title });
-            expect(wrapper).toMatchSnapshot();
+            const { content } = setup({ href: 'https://google.com', typography: Typography.title });
+            expect(content?.className).toMatchInlineSnapshot(`undefined`);
+        });
+
+        it('should render a button', () => {
+            const name = 'Link';
+            const onClick = jest.fn();
+            const { link } = setup({ onClick, children: name });
+            expect(link).toBe(screen.queryByRole('button', { name }));
         });
 
-        it('should render a button if href attribute is missing', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
+        it('should render with icons', () => {
+            const { rightIcon, leftIcon } = setup({ rightIcon: mdiPlus, leftIcon: mdiCheck });
+            expect(rightIcon).toBeInTheDocument();
+            expect(leftIcon).toBeInTheDocument();
         });
     });
 
     // Common tests suite.
-    commonTestsSuite(
-        setup,
-        { className: 'wrapper', prop: 'wrapper' },
-        { className: CLASSNAME, prop: 'href', propValue: 'https://google.com' },
-    );
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardAttributes: 'link',
+        forwardClassName: 'link',
+        forwardRef: 'link',
+    });
 });

package/src/components/link-preview/LinkPreview.test.tsx

@@ -1,16 +1,14 @@
-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 { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils/className';
 import { Link, Thumbnail } from '@lumx/react';
+import { render, screen, within } from '@testing-library/react';
+import { getByClassName, queryByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
 
 import { Size, Theme } from '..';
 import { LinkPreview, LinkPreviewProps } from './LinkPreview';
 
-const DEFAULT_PROPS = LinkPreview.defaultProps as any;
 const CLASSNAME = LinkPreview.className as string;
 
 type SetupProps = Partial<LinkPreviewProps>;
@@ -18,46 +16,47 @@ type SetupProps = Partial<LinkPreviewProps>;
 /**
  * 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: Wrapper = renderer(<LinkPreview {...props} />);
-
-    return {
-        thumbnail: wrapper.find(Thumbnail),
-        title: wrapper.find(`.${CLASSNAME}__title`),
-        description: wrapper.find(`.${CLASSNAME}__description`),
-        link: wrapper.find(`.${CLASSNAME}__link`).find(Link),
-        props,
-        wrapper,
-    };
+
+    render(<LinkPreview {...props} />);
+    const linkPreview = getByClassName(document.body, CLASSNAME);
+    const thumbnail = queryByClassName(linkPreview, Thumbnail.className as string);
+    const title = queryByClassName(linkPreview, `${CLASSNAME}__title`);
+    const description = queryByClassName(linkPreview, `${CLASSNAME}__description`);
+    const link = queryAllByClassName(linkPreview, `${CLASSNAME}__link`)?.[1];
+
+    return { props, linkPreview, thumbnail, title, description, link };
 };
 
 describe(`<${LinkPreview.displayName}>`, () => {
     it('should render with default props', () => {
-        const { wrapper, thumbnail, title, link, description } = setup();
-        expect(wrapper).toHaveClassName(CLASSNAME);
-
-        ['size', 'theme'].forEach((type) => {
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type, value: DEFAULT_PROPS[type] }));
-        });
-        expect(thumbnail).not.toExist();
-        expect(title).not.toExist();
-        expect(link).toExist();
-        expect(link).toHaveProp('tabIndex', undefined);
-        expect(description).not.toExist();
+        const { linkPreview, thumbnail, title, link, description } = setup();
+        expect(linkPreview).toHaveClass(CLASSNAME);
+        expect(linkPreview).toHaveClass(`${CLASSNAME}--size-regular`);
+        expect(linkPreview).toHaveClass(`${CLASSNAME}--theme-light`);
+
+        expect(thumbnail).not.toBeInTheDocument();
+        expect(title).not.toBeInTheDocument();
+        expect(link).toBeInTheDocument();
+        expect(link).not.toHaveAttribute('tabindex');
+        expect(description).not.toBeInTheDocument();
     });
 
     it('should render with only the title', () => {
-        const { title, link } = setup({ title: 'Title' });
+        const { props, title, link } = setup({ title: 'Title', link: 'https://example.com' });
 
-        expect(title).toExist();
-        expect(link).toExist();
-        expect(link).toHaveProp('tabIndex', '-1');
+        expect(title).toBe(screen.queryByRole('heading', { name: props.title }));
+        const titleLink = within(title as any).queryByRole('link');
+        expect(titleLink).toBeInTheDocument();
+        expect(titleLink).toHaveAttribute('href', props.link);
+
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('tabindex', '-1');
     });
 
     it('should render with complete props', () => {
-        const { wrapper, thumbnail, title, link, description, props } = setup({
+        const { linkPreview, thumbnail, title, link, description, props } = setup({
             size: Size.big,
             theme: Theme.dark,
             thumbnailProps: { image: 'https://example.com/thumbnail.jpg', alt: '' },
@@ -68,35 +67,36 @@ describe(`<${LinkPreview.displayName}>`, () => {
         });
 
         const validateLink = (linkElement: any) => {
-            expect(linkElement).toHaveProp('href', props.link);
+            expect(linkElement).toHaveAttribute('href', props.link);
             // Props forwarding
-            expect(linkElement).toHaveProp('data-custom-attr', 'true');
+            expect(linkElement).toHaveAttribute('data-custom-attr', 'true');
         };
 
-        expect(wrapper).toExist();
+        expect(linkPreview).toBeInTheDocument();
+        expect(linkPreview).toHaveClass(`${CLASSNAME}--size-big`);
+        expect(linkPreview).toHaveClass(`${CLASSNAME}--theme-dark`);
 
         // Thumbnail
-        expect(thumbnail).toExist();
-        validateLink((thumbnail as any).dive());
+        expect(thumbnail).toBeInTheDocument();
+        validateLink(thumbnail);
 
         // Title
-        expect(title).toHaveText(props.title);
-        validateLink(title.find(Link));
+        expect(title).toHaveTextContent(props.title);
+        validateLink(within(title as any).queryByRole('link'));
 
         // Link
-        expect(link).toHaveText(props.link);
-        validateLink(link.find(Link));
+        expect(link).toHaveTextContent(props.link);
+        validateLink(link);
 
         // Description
-        expect(description).toHaveText(props.description);
-
-        // Size prop applied
-        expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'size', value: props.size }));
-
-        // Dark theme applied
-        expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'theme', value: Theme.dark }));
+        expect(description).toHaveTextContent(props.description);
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'linkPreview',
+        forwardAttributes: 'linkPreview',
+        forwardRef: 'linkPreview',
+    });
 });

package/src/components/message/Message.test.tsx

@@ -1,9 +1,10 @@
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { Kind } from '@lumx/react';
-import { getBasicClass } from '@lumx/react/utils/className';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { mdiAbTesting } from '@lumx/icons';
 import { Message, MessageProps } from './Message';
 
 const CLASSNAME = Message.className as string;
@@ -13,64 +14,42 @@ type SetupProps = Partial<MessageProps>;
 /**
  * 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: Wrapper = renderer(
-        <Message {...props}>
-            <span>Lorem Ipsum</span>
-        </Message>,
-    );
-    const message: Wrapper = wrapper.find('div').first();
-
-    return { message, props, wrapper };
+    render(<Message {...props} />);
+    const message = getByClassName(document.body, CLASSNAME);
+    const icon = queryByClassName(message, `${CLASSNAME}__icon`);
+    return { message, icon, props };
 };
 
 describe(`<${Message.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        // Here is an example of a basic rendering check, with snapshot.
-
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
-        // Here are some examples of basic props check.
-
-        it('should use the given `kind`', () => {
-            const testedProp = 'kind';
-            const modifiedProps: Partial<MessageProps> = {
-                [testedProp]: Kind.success,
-            };
+        it('should render default', () => {
+            const { message, icon } = setup({ children: 'Message text' });
+            expect(message).toBeInTheDocument();
+            expect(message.className).toMatchInlineSnapshot(`"lumx-message"`);
+            expect(message).toHaveTextContent('Message text');
 
-            const { message } = setup(modifiedProps);
-
-            expect(message).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'color', value: `green` }));
+            expect(icon).not.toBeInTheDocument();
         });
-    });
 
-    // 3. Test events.
-    describe('Events', () => {
-        // Nothing to do here.
-    });
+        it('should render hasBackground', () => {
+            const { message } = setup({ hasBackground: true });
+            expect(message).toHaveClass(`${CLASSNAME}--has-background`);
+        });
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Nothing to do here.
-    });
+        it('should render icon', () => {
+            const { icon } = setup({ icon: mdiAbTesting });
+            expect(icon).toBeInTheDocument();
+        });
 
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
+        it.each(Object.values(Kind))('should render kind %s', (kind) => {
+            const { message, icon } = setup({ kind });
+            expect(message.className).toEqual(expect.stringMatching(/\blumx-message--color-\w+\b/));
+            expect(icon).toBeInTheDocument();
+        });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'message', forwardAttributes: 'message' });
 });