@lumx/react 3.3.1-alpha.0 → 3.3.1

package/package.json

@@ -7,35 +7,41 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.3.1-alpha.0",
-        "@lumx/icons": "^3.3.1-alpha.0",
+        "@lumx/core": "^3.3.1",
+        "@lumx/icons": "^3.3.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
-        "react-is": "^16.13.0",
+        "react-is": ">=16.13.0",
         "react-popper": "^2.2.4",
         "uid": "^2.0.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.20.2",
+        "@babel/core": "^7.18.13",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-proposal-export-default-from": "^7.18.10",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+        "@babel/plugin-proposal-object-rest-spread": "^7.18.9",
         "@babel/plugin-proposal-optional-chaining": "^7.18.9",
         "@babel/plugin-proposal-private-methods": "^7.18.6",
         "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-env": "^7.18.10",
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.18.6",
         "@rollup/plugin-commonjs": "^15.0.0",
         "@rollup/plugin-node-resolve": "9.0.0",
+        "@storybook/addon-a11y": "^7.0.20",
+        "@storybook/addon-essentials": "^7.0.20",
+        "@storybook/addon-interactions": "^7.0.20",
+        "@storybook/blocks": "^7.0.20",
+        "@storybook/react": "^7.0.20",
+        "@storybook/react-vite": "^7.0.20",
+        "@storybook/testing-library": "^0.0.14-next.2",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^14.4.3",
         "@types/body-scroll-lock": "^2.6.1",
         "@types/classnames": "^2.2.9",
-        "@types/enzyme": "^3.10.12",
         "@types/jest": "^29.2.1",
         "@types/lodash": "^4.14.149",
         "@types/react": "^16.9.11",
@@ -46,17 +52,14 @@
         "babel-loader": "^8.0.6",
         "chromatic": "^6.0.6",
         "core-js": "^3.6.4",
-        "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.4",
-        "enzyme-to-json": "^3.5.0",
         "focus-visible": "^5.0.2",
         "glob": "^7.1.6",
         "install-peers-cli": "^2.2.0",
         "is-ci": "^2.0.0",
         "jest": "29.1.2",
         "jest-environment-jsdom": "29.1.2",
-        "jest-enzyme": "^7.1.2",
-        "react-dom": "16.13.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
         "rollup": "2.26.10",
         "rollup-plugin-analyzer": "^3.3.0",
         "rollup-plugin-babel": "^4.4.0",
@@ -66,9 +69,11 @@
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-ts-paths-resolve": "^1.3.0",
         "rollup-plugin-typescript-paths": "^1.2.2",
-        "test-data-bot": "^0.8.0",
+        "storybook": "^7.0.20",
         "tsconfig-paths-webpack-plugin": "^3.3.0",
         "typescript": "^4.1.2",
+        "vite": "^4.2.1",
+        "vite-tsconfig-paths": "^4.0.7",
         "yargs": "^15.4.1",
         "yarn": "^1.19.1"
     },
@@ -76,8 +81,8 @@
         "lodash": "4.17.21",
         "moment": ">= 2",
         "moment-range": "^4.0.2",
-        "react": "^16.13.0",
-        "react-dom": "^16.13.0"
+        "react": ">= 16.13.0",
+        "react-dom": ">= 16.13.0"
     },
     "description": "The official LumApps Design System (LumX) for React applications",
     "engines": {
@@ -108,10 +113,9 @@
         "build": "rollup -c",
         "prepare": "install-peers || exit 0",
         "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
-        "storybook": "yarn start:storybook",
-        "start:storybook": "cd storybook && ./start",
-        "build:storybook": "cd storybook && ./build"
+        "start:storybook": "storybook dev -p 9000",
+        "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.3.1-alpha.0"
+    "version": "3.3.1"
 }

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -1,181 +1,94 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { List, ListItem, Size } from '@lumx/react';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { Autocomplete, AutocompleteProps } from './Autocomplete';
+import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
+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 { CITIES as suggestions } from './__mockData__';
+import { Autocomplete, AutocompleteProps } from './Autocomplete';
 
 const CLASSNAME = Autocomplete.className as string;
 
-type SetupProps = Partial<AutocompleteProps>;
-
-interface Suggestion {
-    id: string;
-    text: string;
-}
-
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
-    const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-
-    const wrapper: Wrapper = renderer(<Autocomplete {...props} />);
-
-    const textField: Wrapper = wrapper.find('TextField');
-    const dropdown: Wrapper = wrapper.find('Dropdown');
-
-    return { dropdown, props, textField, wrapper };
+const setup = (props: Partial<AutocompleteProps> = {}) => {
+    render(
+        <Autocomplete {...(props as any)}>
+            <List>
+                {suggestions.map((suggestion) => (
+                    <ListItem size={Size.tiny} key={suggestion.id}>
+                        <div>{suggestion.text}</div>
+                    </ListItem>
+                ))}
+            </List>
+        </Autocomplete>,
+    );
+    const autocomplete = getByClassName(document.body, CLASSNAME);
+    const textField = getByClassName(autocomplete, TextField.className as string);
+    const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
+    const inputNative = getByTagName(autocomplete, 'input');
+    return { props, textField, getDropdown, autocomplete, inputNative };
 };
 
 describe(`<${Autocomplete.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, textField, dropdown } = setup({
-                children: (
-                    <List isClickable>
-                        {suggestions.map((suggestion: Suggestion) => (
-                            <ListItem size={Size.tiny} key={suggestion.id}>
-                                <div>{suggestion.text}</div>
-                            </ListItem>
-                        ))}
-                    </List>
-                ),
-                label: 'Field label',
-                isOpen: true,
-                isRequired: true,
-                onChange: jest.fn(),
-                value: '',
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-
-            expect(wrapper).toHaveClassName(CLASSNAME);
-
-            expect(textField).toHaveLength(1);
-            expect(dropdown).toHaveLength(1);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
-        it('should use default props', () => {
-            const { wrapper } = setup();
+        it('should render default', () => {
+            const { autocomplete, textField, getDropdown } = setup();
 
-            expect(wrapper).toHaveClassName(CLASSNAME);
+            expect(autocomplete.className).toMatchInlineSnapshot(`"lumx-autocomplete"`);
+            expect(textField).toBeInTheDocument();
+            expect(getDropdown()).not.toBeInTheDocument();
         });
 
-        it('should render correctly when the dropdown is closed', () => {
-            const { wrapper } = setup({
-                children: (
-                    <List isClickable>
-                        {suggestions.map((suggestion: Suggestion) => (
-                            <ListItem size={Size.tiny} key={suggestion.id}>
-                                <div>{suggestion.text}</div>
-                            </ListItem>
-                        ))}
-                    </List>
-                ),
-                isOpen: false,
-                onChange: jest.fn(),
-                value: '',
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-
-            expect(wrapper).toHaveClassName(CLASSNAME);
+        it('should render open', () => {
+            const { getDropdown } = setup({ isOpen: true });
+            expect(getDropdown()).toBeInTheDocument();
         });
     });
 
-    // 3. Test events.
     describe('Events', () => {
-        it('should trigger the onChange callback when there is a change on the Text Field', () => {
+        it('should trigger the onChange callback when there is a change on the Text Field', async () => {
+            const name = 'autocomplete-name';
             const onChange = jest.fn();
-            const { textField } = setup({
-                children: (
-                    <List isClickable>
-                        {suggestions.map((suggestion: Suggestion) => (
-                            <ListItem size={Size.tiny} key={suggestion.id}>
-                                <div>{suggestion.text}</div>
-                            </ListItem>
-                        ))}
-                    </List>
-                ),
-                isOpen: false,
+            const { inputNative } = setup({
+                name,
                 onChange,
-                value: '',
             });
 
-            textField.simulate('change');
+            await userEvent.tab();
+            expect(inputNative).toHaveFocus();
+            await userEvent.keyboard('a');
 
-            expect(onChange).toHaveBeenCalled();
+            // (text, name, event)
+            expect(onChange).toHaveBeenCalledWith('a', name, expect.any(Object));
         });
 
-        it('should trigger the onFocus callback when the text field is focused on', () => {
+        it('should trigger the onFocus/onBlur callback when the text field is focused and blurred', async () => {
             const onFocus = jest.fn();
-            const { textField } = setup({
-                children: (
-                    <List isClickable>
-                        {suggestions.map((suggestion: Suggestion) => (
-                            <ListItem size={Size.tiny} key={suggestion.id}>
-                                <div>{suggestion.text}</div>
-                            </ListItem>
-                        ))}
-                    </List>
-                ),
-                isOpen: false,
-                onFocus,
-                value: '',
-            });
-
-            textField.simulate('focus');
-
-            expect(onFocus).toHaveBeenCalled();
-        });
-
-        it('should trigger the onBlur callback when the Text Field loses focus', () => {
             const onBlur = jest.fn();
-            const { textField } = setup({
-                children: (
-                    <List isClickable>
-                        {suggestions.map((suggestion: Suggestion) => (
-                            <ListItem size={Size.tiny} key={suggestion.id}>
-                                <div>{suggestion.text}</div>
-                            </ListItem>
-                        ))}
-                    </List>
-                ),
-                isOpen: false,
+            const { inputNative } = setup({
+                onFocus,
                 onBlur,
-                value: '',
             });
 
-            textField.simulate('blur');
+            await userEvent.tab();
+            expect(inputNative).toHaveFocus();
+            expect(onFocus).toHaveBeenCalled();
 
+            await userEvent.tab();
+            expect(inputNative).not.toHaveFocus();
             expect(onBlur).toHaveBeenCalled();
         });
     });
 
-    // 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, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'autocomplete',
+        forwardAttributes: 'autocomplete',
+        forwardRef: 'autocomplete',
+    });
 });

package/src/components/autocomplete/AutocompleteMultiple.test.tsx

@@ -1,94 +1,56 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { List, ListItem, Size } from '@lumx/react';
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { AutocompleteMultiple, AutocompleteMultipleProps } from './AutocompleteMultiple';
+import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
 
 import { CITIES as suggestions } from './__mockData__';
+import { AutocompleteMultiple, AutocompleteMultipleProps } from './AutocompleteMultiple';
 
 const CLASSNAME = AutocompleteMultiple.className as string;
 
-type SetupProps = Partial<AutocompleteMultipleProps>;
-
-interface Suggestion {
-    id: string;
-    text: string;
-}
-
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
-    const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<AutocompleteMultiple {...props} />);
-
-    return { props, wrapper };
+const setup = (props: Partial<AutocompleteMultipleProps> = {}) => {
+    render(
+        <AutocompleteMultiple {...(props as any)}>
+            <List>
+                {suggestions.map((suggestion) => (
+                    <ListItem size={Size.tiny} key={suggestion.id}>
+                        <div>{suggestion.text}</div>
+                    </ListItem>
+                ))}
+            </List>
+        </AutocompleteMultiple>,
+    );
+    const autocompleteMultiple = getByClassName(document.body, CLASSNAME);
+    const textField = getByClassName(autocompleteMultiple, TextField.className as string);
+    const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
+    return { props, autocompleteMultiple, textField, getDropdown };
 };
 
 describe(`<${AutocompleteMultiple.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({
-                children: (
-                    <List isClickable>
-                        {suggestions.map((suggestion: Suggestion) => (
-                            <ListItem size={Size.tiny} key={suggestion.id}>
-                                <div>{suggestion.text}</div>
-                            </ListItem>
-                        ))}
-                    </List>
-                ),
-                chips: [
-                    {
-                        id: 'lyon',
-                        text: 'Lyon',
-                    },
-                    {
-                        id: 'montevideo',
-                        text: 'Montevideo',
-                    },
-                ],
-                label: 'Field label',
-                isOpen: true,
-                isRequired: true,
-                onChange: jest.fn(),
-                value: '',
-            });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
+    it('should render default', () => {
+        const { autocompleteMultiple, textField, getDropdown } = setup({});
 
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
+        expect(autocompleteMultiple).toBeInTheDocument();
+        expect(autocompleteMultiple.className).toMatchInlineSnapshot(`"lumx-autocomplete-multiple lumx-autocomplete"`);
+        expect(textField).toBeInTheDocument();
+        expect(getDropdown()).not.toBeInTheDocument();
     });
 
-    // 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.
+    it('should render open', () => {
+        const { getDropdown } = setup({ isOpen: true });
+        expect(getDropdown()).toBeInTheDocument();
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'autocompleteMultiple',
+        forwardRef: 'autocompleteMultiple',
+        forwardAttributes: 'autocompleteMultiple',
+    });
 });

package/src/components/autocomplete/__mockData__/index.ts

@@ -1,4 +1,9 @@
-export const CITIES = [
+export interface Suggestion {
+    id: string;
+    text: string;
+}
+
+export const CITIES: Suggestion[] = [
     {
         text: 'Los Angeles',
         id: 'losangeles',

package/src/components/badge/Badge.test.tsx

@@ -1,91 +1,47 @@
-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 { getBasicClass } from '@lumx/react/utils/className';
-
-import { Theme } from '@lumx/react';
+import { ColorPalette } from '@lumx/react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
 import { Badge, BadgeProps } from './Badge';
 
-const DEFAULT_PROPS = Badge.defaultProps as any;
 const CLASSNAME = Badge.className as string;
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = ({ ...propsOverride }: Partial<BadgeProps> = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<BadgeProps> = {}) => {
     const props: BadgeProps = {
         children: <span>30</span>,
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Badge {...props} />);
-
-    return {
-        badge: wrapper.find(`div`),
-        props,
-        wrapper,
-    };
+    render(<Badge {...props} />);
+    const badge = getByClassName(document.body, CLASSNAME);
+    return { badge, props };
 };
 
 describe(`<${Badge.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper, badge } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(badge).toExist();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
         it('should use default props', () => {
             const { badge } = setup();
 
-            Object.keys(DEFAULT_PROPS).forEach((prop: string) => {
-                expect(badge).toHaveClassName(
-                    getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }),
-                );
-            });
+            expect(badge.className).toMatchInlineSnapshot(`"lumx-badge lumx-badge--color-primary"`);
+            expect(badge).toHaveTextContent(/30/);
         });
 
-        it('should use the given `theme`', () => {
-            const testedProp = 'color';
-            const modifiedProps: Partial<BadgeProps> = {
-                [testedProp]: Theme.dark,
-            };
+        it('should render color', () => {
+            const { badge } = setup({ color: ColorPalette.red });
 
-            const { badge } = setup(modifiedProps);
-
-            expect(badge).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
-            );
-            expect(badge).not.toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: DEFAULT_PROPS[testedProp] }),
-            );
+            expect(badge).toHaveClass('lumx-badge--color-red');
         });
     });
 
-    // 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, { className: 'badge', prop: 'badge' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'badge',
+        forwardAttributes: 'badge',
+        forwardRef: 'badge',
+    });
 });