@lumx/react 3.0.3 → 3.0.4-alpha.1

package/src/components/text/Text.test.tsx

@@ -1,76 +1,108 @@
 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 { mdiEarth } from '@lumx/icons';
 import { Icon } from '@lumx/react';
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { Text, TextProps } from '.';
 
 const setup = (props: Partial<TextProps> = {}) => {
-    const wrapper = shallow(<Text as="span" {...props} />);
-    return { props, wrapper };
+    const { container } = render(<Text as="span" {...props} />);
+    const element = getByClassName(container, Text.className as string);
+    return { props, container, element };
 };
 
 describe(`<${Text.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
+    describe('Render', () => {
         it('should render default', () => {
-            const { wrapper } = setup({ children: 'Some text' });
-            expect(wrapper).toHaveDisplayName('span');
-            expect(wrapper.prop('className')).toBe(Text.className);
+            const { element } = setup({ children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
         });
 
         it('should render with as', () => {
-            const { wrapper } = setup({ children: 'Some text', as: 'p' });
-            expect(wrapper).toHaveDisplayName('p');
-            expect(wrapper.prop('className')).toBe(Text.className);
+            const { element } = setup({ children: 'Some text', as: 'p' });
+            expect(element.tagName).toBe('P');
         });
 
         it('should render with typography', () => {
-            const { wrapper } = setup({ typography: 'body2', children: 'Some text' });
-            expect(wrapper).toHaveDisplayName('span');
-            expect(wrapper).toHaveClassName('lumx-typography-body2');
+            const { element } = setup({ typography: 'body2', children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-typography-body2');
         });
 
         it('should render with color', () => {
-            const { wrapper } = setup({ color: 'blue', children: 'Some text' });
-            expect(wrapper).toHaveDisplayName('span');
-            expect(wrapper).toHaveClassName('lumx-color-font-blue-N');
+            const { element } = setup({ color: 'blue', children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).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).toHaveDisplayName('span');
-            expect(wrapper).toHaveClassName('lumx-color-font-blue-D2');
+            const { element } = setup({ color: 'blue', colorVariant: 'D2', children: 'Some text' });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-color-font-blue-D2');
         });
 
         it('should render truncated', () => {
-            const { wrapper } = setup({ truncate: true });
-            expect(wrapper).toHaveDisplayName('span');
-            expect(wrapper).toHaveClassName('lumx-text--is-truncated');
+            const { element } = setup({ truncate: true });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-text--is-truncated');
         });
 
         it('should render truncated multiline', () => {
-            const { wrapper } = setup({ truncate: { lines: 2 } });
-            expect(wrapper).toHaveDisplayName('span');
-            expect(wrapper).toHaveClassName('lumx-text--is-truncated-multiline');
-            expect(wrapper).toHaveStyle({ '--lumx-text-truncate-lines': 2 });
+            const { element } = setup({ truncate: { lines: 2 } });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-text--is-truncated-multiline');
         });
 
         it('should render noWrap', () => {
-            const { wrapper } = setup({ noWrap: true });
-            expect(wrapper).toHaveDisplayName('span');
-            expect(wrapper).toHaveClassName('lumx-text--no-wrap');
+            const { element } = setup({ noWrap: true });
+            expect(element.tagName).toBe('SPAN');
+            expect(element).toHaveClass('lumx-text--no-wrap');
         });
 
         it('should wrap icons with spaces', () => {
-            const { wrapper } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
+            const { element } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
             // Spaces have been inserted around the icon.
-            expect(wrapper).toHaveText('Some text  with icon');
+            expect(element).toMatchInlineSnapshot(`
+                <span
+                  class="lumx-text"
+                >
+                  Some text
+                   
+                  <i
+                    class="lumx-icon lumx-icon--no-shape lumx-icon--path"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      height="1em"
+                      preserveAspectRatio="xMidYMid meet"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </i>
+                   
+                  with icon
+                </span>
+            `);
+        });
+
+        it('should render dangerouslySetInnerHTML', () => {
+            const { element } = setup({ dangerouslySetInnerHTML: { __html: '<strong>HTML text</strong>' } });
+            expect(element).toHaveTextContent('HTML text');
         });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: Text.className });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: Text.className as string,
+        forwardClassName: 'element',
+        forwardAttributes: 'element',
+    });
 });

package/src/components/text/Text.tsx

@@ -105,13 +105,14 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
             style={{ ...truncateLinesStyle, ...style }}
             {...forwardedProps}
         >
-            {Children.toArray(children).map((child, index) => {
-                // Force wrap spaces around icons to make sure they are never stuck against text.
-                if (isComponent(Icon)(child)) {
-                    return <Fragment key={child.key || index}> {child} </Fragment>;
-                }
-                return child;
-            })}
+            {children &&
+                Children.toArray(children).map((child, index) => {
+                    // Force wrap spaces around icons to make sure they are never stuck against text.
+                    if (isComponent(Icon)(child)) {
+                        return <Fragment key={child.key || index}> {child} </Fragment>;
+                    }
+                    return child;
+                })}
         </Component>
     );
 });

package/src/components/text-field/TextField.test.tsx

@@ -1,144 +1,117 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { ReactWrapper, ShallowWrapper, mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { build } from 'test-data-bot';
+import camelCase from 'lodash/camelCase';
 
-import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils/className';
 
-import { Kind } from '@lumx/react';
+import { render } from '@testing-library/react';
+import { getByClassName, getByTagName, queryAllByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
+import partition from 'lodash/partition';
+import userEvent from '@testing-library/user-event';
+
 import { TextField, TextFieldProps } from './TextField';
 
 const CLASSNAME = TextField.className as string;
 
-type SetupProps = Partial<TextFieldProps>;
-
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<TextFieldProps> = {}) => {
     const props: any = { ...propsOverride };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<TextField {...props} />);
-
-    const textarea = wrapper.find('textarea');
-    const input = wrapper.find('input');
-    const error = wrapper.findWhere(
-        (n: ShallowWrapper | ReactWrapper) => n.name() === 'InputHelper' && n.prop('kind') === Kind.error,
-    );
-    const helper = wrapper.findWhere(
-        (n: ShallowWrapper | ReactWrapper) => n.name() === 'InputHelper' && n.prop('kind') === Kind.info,
-    );
+    const { container } = render(<TextField {...props} />);
+
+    const element = getByClassName(container, CLASSNAME);
+    const inputNative = (queryByTagName(container, 'textarea') || getByTagName(container, 'input')) as
+        | HTMLTextAreaElement
+        | HTMLInputElement;
+    const helpers = queryAllByClassName(container, 'lumx-text-field__helper');
+    const [[helper], [error]] = partition(helpers, (h) => !h.className.includes('lumx-input-helper--color-red'));
 
     return {
+        props,
+        container,
+        element,
+        inputNative,
         error,
         helper,
-        inputNative: textarea.length ? textarea : input,
-        props,
-        wrapper,
     };
 };
 
 describe(`<${TextField.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
+    describe('Render', () => {
         it('should render defaults', () => {
-            const { wrapper, inputNative } = setup({ id: 'fixedId' });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-
-            expect(wrapper).toHaveClassName(CLASSNAME);
-            expect(wrapper).not.toHaveClassName(`${CLASSNAME}--is-valid`);
-            expect(wrapper).not.toHaveClassName(`${CLASSNAME}--has-error`);
-            expect(wrapper).not.toHaveClassName(`${CLASSNAME}--has-label`);
-            expect(wrapper).not.toHaveClassName(`${CLASSNAME}--is-disabled`);
-            expect(wrapper).not.toHaveClassName(`${CLASSNAME}--has-placeholder`);
-            expect(wrapper).not.toHaveClassName(`${CLASSNAME}--is-focus`);
-            expect(wrapper).not.toHaveClassName(`${CLASSNAME}--has-icon`);
-
-            expect(wrapper).toHaveClassName(`${CLASSNAME}--theme-light`);
-
-            expect(inputNative).toExist();
-            expect(inputNative.type()).toEqual('input');
+            const { element, inputNative } = setup({ id: 'fixedId' });
+            expect(element).toBeInTheDocument();
+            expect(element).toMatchSnapshot();
+            expect(element).not.toHaveClass(`${CLASSNAME}--is-valid`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--has-error`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--has-label`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--is-disabled`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--has-placeholder`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--is-focus`);
+            expect(element).not.toHaveClass(`${CLASSNAME}--has-icon`);
+
+            expect(element).toHaveClass(`${CLASSNAME}--theme-light`);
+            expect(inputNative.tagName).toBe('INPUT');
         });
 
         it('should render textarea', () => {
-            const { wrapper, inputNative } = setup({ id: 'fixedId', multiline: true });
-            expect(wrapper).toMatchSnapshot();
-
-            expect(wrapper).toExist();
-
-            expect(inputNative).toExist();
-            expect(inputNative.type()).toEqual('textarea');
+            const { element, inputNative } = setup({ id: 'fixedId', multiline: true });
+            expect(element).toBeInTheDocument();
+            expect(element).toMatchSnapshot();
+            expect(inputNative.tagName).toBe('TEXTAREA');
         });
     });
 
     // 2. Test defaultProps value and important props custom values.
     describe('Props', () => {
         it('should add all class names (except has-error)', () => {
-            const modifiedPropsBuilder: () => SetupProps = build('props').fields({
+            const modifiedProps = {
                 icon: 'icon',
                 isDisabled: true,
                 isValid: true,
                 label: 'test',
                 placeholder: 'test',
-            });
-
-            const modifiedProps: SetupProps = modifiedPropsBuilder();
-
-            const { wrapper } = setup({ ...modifiedProps });
-
-            Object.keys(modifiedProps).forEach((prop) => {
-                const propType =
-                    prop === 'icon' || prop === 'label' || prop === 'placeholder'
-                        ? `has${prop.charAt(0).toUpperCase() + prop.slice(1)}`
-                        : prop;
-                const propValue =
-                    prop === 'icon' || prop === 'label' || prop === 'placeholder' ? true : modifiedProps[prop];
-                expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: propType, value: propValue }));
-            });
+            };
+            const hasProps = ['icon', 'label', 'placeholder'];
+            const { element } = setup(modifiedProps);
+
+            for (const [prop, value] of Object.entries(modifiedProps)) {
+                const propType = hasProps.includes(prop) ? camelCase(`has-${prop}`) : prop;
+                const propValue = hasProps.includes(prop) ? true : value;
+                expect(element).toHaveClass(getBasicClass({ prefix: CLASSNAME, type: propType, value: propValue }));
+            }
         });
 
         it('should add "has-error" class name', () => {
-            const modifiedPropsBuilder: () => SetupProps = build('props').fields({
-                hasError: true,
-            });
+            const modifiedProps = { hasError: true };
+            const { element } = setup(modifiedProps);
 
-            const modifiedProps: SetupProps = modifiedPropsBuilder();
-
-            const { wrapper } = setup({ ...modifiedProps });
-
-            Object.keys(modifiedProps).forEach((prop) => {
-                expect(wrapper).toHaveClassName(
-                    getBasicClass({ prefix: CLASSNAME, type: prop, value: modifiedProps[prop] }),
-                );
-            });
+            for (const [prop, value] of Object.entries(modifiedProps)) {
+                expect(element).toHaveClass(getBasicClass({ prefix: CLASSNAME, type: prop, value }));
+            }
         });
 
         it('should have text as value', () => {
             const value = 'test';
             const { inputNative } = setup({ value });
-
-            expect(inputNative).toHaveValue(value);
+            expect(inputNative.value).toEqual(value);
         });
 
         it('should have no value', () => {
             const value = undefined;
             const { inputNative } = setup({ value });
-
-            expect(inputNative).toHaveValue(value);
+            expect(inputNative.value).toEqual('');
         });
 
         it('should have helper text', () => {
             const { helper } = setup({
-                helper: 'test',
+                helper: 'helper',
                 label: 'test',
                 placeholder: 'test',
             });
-
-            expect(helper).toHaveLength(1);
+            expect(helper).toHaveTextContent('helper');
         });
 
         it('should have error text', () => {
@@ -148,8 +121,7 @@ describe(`<${TextField.displayName}>`, () => {
                 label: 'test',
                 placeholder: 'test',
             });
-
-            expect(error).toHaveLength(1);
+            expect(error).toHaveTextContent('error');
         });
 
         it('should not have error text', () => {
@@ -159,8 +131,7 @@ describe(`<${TextField.displayName}>`, () => {
                 label: 'test',
                 placeholder: 'test',
             });
-
-            expect(error).toHaveLength(0);
+            expect(error).not.toBeDefined();
         });
 
         it('should have error and helper text', () => {
@@ -171,43 +142,30 @@ describe(`<${TextField.displayName}>`, () => {
                 label: 'test',
                 placeholder: 'test',
             });
-
-            expect(error).toHaveLength(1);
-            expect(helper).toHaveLength(1);
+            expect(error).toHaveTextContent('error');
+            expect(helper).toHaveTextContent('helper');
         });
     });
 
     // 3. Test events.
     describe('Events', () => {
-        const onChange: jest.Mock = jest.fn();
+        it('should trigger `onChange` when text field is changed', async () => {
+            const onChange = jest.fn();
+            const { inputNative } = setup({ value: '', name: 'name', onChange });
 
-        beforeEach(onChange.mockClear);
+            await userEvent.tab();
+            expect(inputNative).toHaveFocus();
 
-        it('should trigger `onChange` when text field is changed', () => {
-            const onChangeMock = jest.fn();
-            const event = {
-                target: { value: 'my value' },
-            };
-            const component = shallow(<TextField value="" name="my name" onChange={onChangeMock} />);
-            component.find('input').simulate('change', event);
-            expect(onChangeMock).toBeCalledWith('my value', 'my name', {
-                target: {
-                    value: 'my value',
-                },
-            });
-        });
-    });
+            await userEvent.keyboard('a');
 
-    // 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.
+            expect(onChange).toHaveBeenCalledWith('a', 'name', expect.objectContaining({}));
+        });
     });
 
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'inputNative' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'inputNative',
+    });
 });

package/src/components/text-field/__snapshots__/TextField.test.tsx.snap

@@ -1,45 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<TextField> Snapshots and structure should render defaults 1`] = `
+exports[`<TextField> Render should render defaults 1`] = `
 <div
-  className="lumx-text-field lumx-text-field--has-input lumx-text-field--theme-light"
+  class="lumx-text-field lumx-text-field--has-input lumx-text-field--theme-light"
 >
   <div
-    className="lumx-text-field__wrapper"
+    class="lumx-text-field__wrapper"
   >
     <div
-      className="lumx-text-field__input-wrapper"
+      class="lumx-text-field__input-wrapper"
     >
       <input
-        className="lumx-text-field__input-native lumx-text-field__input-native--text"
+        class="lumx-text-field__input-native lumx-text-field__input-native--text"
         id="fixedId"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
         type="text"
+        value=""
       />
     </div>
   </div>
 </div>
 `;
 
-exports[`<TextField> Snapshots and structure should render textarea 1`] = `
+exports[`<TextField> Render should render textarea 1`] = `
 <div
-  className="lumx-text-field lumx-text-field--has-textarea lumx-text-field--theme-light"
+  class="lumx-text-field lumx-text-field--has-textarea lumx-text-field--theme-light"
 >
   <div
-    className="lumx-text-field__wrapper"
+    class="lumx-text-field__wrapper"
   >
     <div
-      className="lumx-text-field__input-wrapper"
+      class="lumx-text-field__input-wrapper"
     >
       <textarea
-        className="lumx-text-field__input-native lumx-text-field__input-native--textarea"
+        class="lumx-text-field__input-native lumx-text-field__input-native--textarea"
         id="fixedId"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        rows={2}
+        rows="2"
       />
     </div>
   </div>

package/src/components/thumbnail/__snapshots__/Thumbnail.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Clickable' 1`]
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={{}}
     />
   </div>
 </button>
@@ -34,7 +34,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableCusto
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={{}}
     />
   </div>
 </CustomLink>
@@ -53,7 +53,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'ClickableLink'
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={{}}
     />
   </div>
 </a>
@@ -71,7 +71,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'Default' 1`] =
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={{}}
     />
   </div>
 </div>
@@ -89,7 +89,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'WithBadge' 1`]
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={{}}
     />
   </div>
   <Badge
@@ -115,7 +115,7 @@ exports[`<Thumbnail> Snapshots and structure should render story 'WithCustomImag
       className="lumx-thumbnail__image lumx-thumbnail__image--is-loading custom-image-class-name"
       loading="lazy"
       src="/demo-assets/landscape1.jpg"
-      style={Object {}}
+      style={{}}
     />
   </div>
   <Badge

package/src/components/tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`<Tooltip> Snapshots and structure should not wrap Button 1`] = `
       id="tooltip-uid"
       role="tooltip"
       style={
-        Object {
+        {
           "left": "0",
           "position": "absolute",
           "top": "0",
@@ -54,7 +54,7 @@ exports[`<Tooltip> Snapshots and structure should not wrap Icon 1`] = `
       id="tooltip-uid"
       role="tooltip"
       style={
-        Object {
+        {
           "left": "0",
           "position": "absolute",
           "top": "0",
@@ -91,7 +91,7 @@ exports[`<Tooltip> Snapshots and structure should render correctly 1`] = `
       id="tooltip-uid"
       role="tooltip"
       style={
-        Object {
+        {
           "left": "0",
           "position": "absolute",
           "top": "0",
@@ -143,7 +143,7 @@ exports[`<Tooltip> Snapshots and structure should work on disabled elements 1`]
       id="tooltip-uid"
       role="tooltip"
       style={
-        Object {
+        {
           "left": "0",
           "position": "absolute",
           "top": "0",
@@ -180,7 +180,7 @@ exports[`<Tooltip> Snapshots and structure should wrap children 1`] = `
       id="tooltip-uid"
       role="tooltip"
       style={
-        Object {
+        {
           "left": "0",
           "position": "absolute",
           "top": "0",
@@ -212,7 +212,7 @@ exports[`<Tooltip> Snapshots and structure should wrap children 2`] = `
       id="tooltip-uid"
       role="tooltip"
       style={
-        Object {
+        {
           "left": "0",
           "position": "absolute",
           "top": "0",