@lumx/react 3.3.1-alpha.0 → 3.3.1

package/src/components/chip/Chip.test.tsx

@@ -1,10 +1,11 @@
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
+import React from 'react';
 
 import { ColorPalette, Theme } from '@lumx/react';
-import { Wrapper } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils/className';
+import { render } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import userEvent from '@testing-library/user-event';
 import { Chip, ChipProps } from './Chip';
 
 const CLASSNAME = Chip.className as string;
@@ -12,188 +13,137 @@ const CLASSNAME = Chip.className as string;
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
  */
-const setup = (propOverrides: Partial<ChipProps> = {}, shallowRendering = true) => {
+const setup = (propOverrides: Partial<ChipProps> = {}) => {
     const props = {
         ...propOverrides,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<Chip {...props} />);
-
-    return {
-        after: wrapper.find('.lumx-chip__after') as any,
-        before: wrapper.find('.lumx-chip__before') as any,
-        props,
-        wrapper,
-    };
+
+    render(<Chip {...props} />);
+    const chip = getByClassName(document.body, CLASSNAME);
+    const before = queryByClassName(chip, `${CLASSNAME}__before`);
+    const after = queryByClassName(chip, `${CLASSNAME}__after`);
+
+    return { props, chip, before, after };
 };
 
 describe('<Chip />', () => {
-    // 1. Test render via snapshot (default state of component).
-    describe('Snapshot', () => {
-        it('should render correctly Chip component', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
+    describe('Props', () => {
+        it('should render default', () => {
+            const { chip } = setup({ children: 'Chip text' });
+            expect(chip).toBeInTheDocument();
+            expect(chip).toHaveTextContent('Chip text');
+            expect(chip.className).toMatchInlineSnapshot(
+                `"lumx-chip lumx-chip--color-dark lumx-chip--size-m lumx-chip--is-unselected"`,
+            );
         });
-    });
 
-    // 2. Test defaultProps value and important props custom values.
-    // N/A.
+        it('should render dark theme', () => {
+            const { chip } = setup({ theme: Theme.dark });
+            expect(chip).toHaveClass('lumx-chip--color-light');
+        });
+
+        it('should render clickable', () => {
+            const onClick = jest.fn();
+            const { chip } = setup({ children: 'Chip text', onClick });
+            expect(chip).toHaveAttribute('role', 'button');
+            expect(chip.className).toMatchInlineSnapshot(
+                `"lumx-chip lumx-chip--is-clickable lumx-chip--color-dark lumx-chip--size-m lumx-chip--is-unselected"`,
+            );
+        });
+    });
 
-    // 3. Test events.
     describe('Events', () => {
-        const mockOnClick = jest.fn();
-        const mockOnAfterClick = jest.fn();
-        const mockOnBeforeClick = jest.fn();
-        const mockClickEvent = {
-            stopPropagation: (): boolean => true,
-        };
-        const clearClickMocks = () => {
-            [mockOnClick, mockOnAfterClick, mockOnBeforeClick].forEach((func) => func.mockClear());
-        };
-
-        beforeEach(() => clearClickMocks);
-
-        it('should trigger onBeforeClick only when clicking on the "before" element', () => {
-            const { after, before, wrapper } = setup({
+        const onClick = jest.fn();
+        const onAfterClick = jest.fn();
+        const onBeforeClick = jest.fn();
+
+        beforeEach(jest.clearAllMocks);
+
+        it('should trigger onBeforeClick only when clicking on the "before" element', async () => {
+            const { after, before, chip } = setup({
                 after: 'after',
                 before: 'before',
-                onAfterClick: mockOnAfterClick,
-                onBeforeClick: mockOnBeforeClick,
-                onClick: mockOnClick,
+                onAfterClick,
+                onBeforeClick,
+                onClick,
             });
 
-            wrapper.simulate('click', mockClickEvent);
-            expect(mockOnBeforeClick).not.toHaveBeenCalled();
+            await userEvent.click(chip);
+            expect(onBeforeClick).not.toHaveBeenCalled();
 
-            clearClickMocks();
+            jest.clearAllMocks();
 
-            after.simulate('click', mockClickEvent);
-            expect(mockOnBeforeClick).not.toHaveBeenCalled();
+            await userEvent.click(after as any);
+            expect(onBeforeClick).not.toHaveBeenCalled();
 
-            clearClickMocks();
+            jest.clearAllMocks();
 
-            before.simulate('click', mockClickEvent);
-            expect(mockOnBeforeClick).toHaveBeenCalled();
+            await userEvent.click(before as any);
+            expect(onBeforeClick).toHaveBeenCalled();
         });
 
-        it('should trigger onClick when clicking on the label area', () => {
-            const { after, before, wrapper } = setup({
+        it('should trigger onClick when clicking on the label area', async () => {
+            const { after, before, chip } = setup({
                 after: 'after',
                 before: 'before',
-                onAfterClick: mockOnAfterClick,
-                onBeforeClick: mockOnBeforeClick,
-                onClick: mockOnClick,
+                onAfterClick,
+                onBeforeClick,
+                onClick,
             });
 
-            wrapper.simulate('click');
-            expect(mockOnClick).toHaveBeenCalled();
+            await userEvent.click(chip);
+            expect(onClick).toHaveBeenCalled();
 
-            clearClickMocks();
+            jest.clearAllMocks();
 
-            after.simulate('click');
-            expect(mockOnClick).not.toHaveBeenCalled();
+            await userEvent.click(after as any);
+            expect(onClick).not.toHaveBeenCalled();
 
-            clearClickMocks();
+            jest.clearAllMocks();
 
-            before.simulate('click');
-            expect(mockOnClick).not.toHaveBeenCalled();
+            await userEvent.click(before as any);
+            expect(onClick).not.toHaveBeenCalled();
         });
 
-        it('should trigger onAfterClick only when clicking on the "after" element', () => {
-            const { after, before, wrapper } = setup({
+        it('should trigger onAfterClick only when clicking on the "after" element', async () => {
+            const { after, before, chip } = setup({
                 after: 'after',
                 before: 'before',
-                onAfterClick: mockOnAfterClick,
-                onBeforeClick: mockOnBeforeClick,
-                onClick: mockOnClick,
+                onAfterClick,
+                onBeforeClick,
+                onClick,
             });
 
-            wrapper.simulate('click', mockClickEvent);
-            expect(mockOnAfterClick).not.toHaveBeenCalled();
+            await userEvent.click(chip);
+            expect(onAfterClick).not.toHaveBeenCalled();
 
-            clearClickMocks();
+            jest.clearAllMocks();
 
-            after.simulate('click', mockClickEvent);
-            expect(mockOnAfterClick).toHaveBeenCalled();
+            await userEvent.click(after as any);
+            expect(onAfterClick).toHaveBeenCalled();
 
-            clearClickMocks();
+            jest.clearAllMocks();
 
-            before.simulate('click', mockClickEvent);
-            expect(mockOnAfterClick).not.toHaveBeenCalled();
+            await userEvent.click(before as any);
+            expect(onAfterClick).not.toHaveBeenCalled();
         });
 
-        it('should not stop propagation when clicking on a "before"or "after" element without an event handler', () => {
-            const onClick = jest.fn();
-            const { after, before } = setup(
-                {
-                    after: 'after',
-                    before: 'before',
-                    onClick,
-                },
-                false,
-            );
+        it('should not stop propagation when clicking on a "before" or "after" element without an event handler', async () => {
+            const { after, before } = setup({
+                after: 'after',
+                before: 'before',
+                onClick,
+            });
 
-            before.simulate('click', mockClickEvent);
+            await userEvent.click(before as any);
             expect(onClick).toHaveBeenCalled();
 
             onClick.mockClear();
 
-            after.simulate('click', mockClickEvent);
+            await userEvent.click(after as any);
             expect(onClick).toHaveBeenCalled();
         });
     });
 
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        it('should have an extra class on the "before" element if it is clickable', () => {
-            let { before } = setup({ before: 'before 1' });
-            expect(before).toHaveLength(1);
-            expect(before.hasClass('lumx-chip__before--is-clickable')).toEqual(false);
-
-            ({ before } = setup({ before: 'before 2', onBeforeClick: (): boolean => true }));
-            expect(before).toHaveLength(1);
-            expect(before.hasClass('lumx-chip__before--is-clickable')).toEqual(true);
-        });
-
-        it('should have an extra class on the "after" element if it is clickable', () => {
-            let { after } = setup({ after: 'after 1' });
-            expect(after).toHaveLength(1);
-            expect(after.hasClass('lumx-chip__after--is-clickable')).toEqual(false);
-
-            ({ after } = setup({ after: 'after 2', onAfterClick: (): boolean => true }));
-            expect(after).toHaveLength(1);
-            expect(after.hasClass('lumx-chip__after--is-clickable')).toEqual(true);
-        });
-
-        it('should have correct default color', () => {
-            const { wrapper } = setup({});
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: ColorPalette.dark,
-                }),
-            );
-        });
-
-        it('should switch color with theme', () => {
-            const { wrapper } = setup({ theme: Theme.dark });
-            expect(wrapper).toHaveClassName(
-                getBasicClass({
-                    prefix: CLASSNAME,
-                    type: 'color',
-                    value: ColorPalette.light,
-                }),
-            );
-        });
-
-        it('should use color over the theme', () => {
-            const color = ColorPalette.red;
-            const { wrapper } = setup({ theme: Theme.dark, color });
-            expect(wrapper).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'color', value: color }));
-        });
-    });
-
-    // 5. Test state.
-    // N/A.
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'chip', forwardAttributes: 'chip' });
 });

package/src/components/chip/ChipGroup.test.tsx

@@ -1,9 +1,13 @@
-import { shallow } from 'enzyme';
-import 'jest-enzyme';
 import React from 'react';
 
-import { Chip } from './Chip';
+import { render } from '@testing-library/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { Alignment } from '@lumx/react';
 import { ChipGroup, ChipGroupProps } from './ChipGroup';
+import { Chip } from './Chip';
+
+const CLASSNAME = ChipGroup.className as string;
 
 /**
  * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
@@ -13,17 +17,30 @@ const setup = (propOverrides: Partial<ChipGroupProps> = {}) => {
         children: [<Chip key="1">Chip 1</Chip>, <Chip key="2">Chip 2</Chip>, <Chip key="3">Chip 3</Chip>],
         ...propOverrides,
     };
-    const wrapper = shallow(<ChipGroup {...props} />);
+    render(<ChipGroup {...props} />);
+    const chipGroup = getByClassName(document.body, CLASSNAME);
 
-    return { props, wrapper };
+    return { props, chipGroup };
 };
 
 describe('<ChipGroup />', () => {
-    // 1. Test render via snapshot (default state of component).
-    describe('Snapshot', () => {
-        it('should render correctly Chip Group component', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
+    describe('Props', () => {
+        it('should render default', () => {
+            const { chipGroup } = setup();
+            expect(chipGroup).toBeInTheDocument();
+            expect(chipGroup).toHaveClass(CLASSNAME);
+            expect(chipGroup).toHaveClass(`${CLASSNAME}--align-left`);
         });
+
+        it('should render with align', () => {
+            const { chipGroup } = setup({ align: Alignment.right });
+            expect(chipGroup).toHaveClass(`${CLASSNAME}--align-right`);
+        });
+    });
+
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'chipGroup',
+        forwardAttributes: 'chipGroup',
     });
 });

package/src/components/date-picker/DatePicker.test.tsx

@@ -1,22 +1,17 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper } from '@lumx/react/testing/utils';
 import { DatePickerProps } from '@lumx/react';
-import { DatePicker } from './DatePicker';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
 
-const mockedDate = new Date(
-    new Date(1487721600).toLocaleString('en-US', {
-        timeZone: 'America/Toronto',
-    }),
-);
-Date.now = jest.fn(() => mockedDate.valueOf());
+import { DatePicker } from '.';
+import { CLASSNAME } from './constants';
 
-type SetupProps = Partial<DatePickerProps>;
+const mockedDate = new Date(1487721600000);
+Date.now = jest.fn(() => mockedDate.valueOf());
 
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<DatePickerProps> = {}) => {
     const props: DatePickerProps = {
         locale: 'fr',
         onChange: jest.fn(),
@@ -25,17 +20,14 @@ const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) =
         previousButtonProps: { label: 'Previous month' },
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<DatePicker {...props} />);
-
-    return { props, wrapper };
+    render(<DatePicker {...props} />);
+    const datePicker = getByClassName(document.body, CLASSNAME);
+    return { props, datePicker };
 };
 
 describe(`<${DatePicker.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardRef: 'datePicker',
     });
 });

package/src/components/date-picker/DatePickerControlled.test.tsx

@@ -1,22 +1,18 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper } from '@lumx/react/testing/utils';
+import { render, screen } from '@testing-library/react';
+import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { DatePickerControlled, DatePickerControlledProps } from './DatePickerControlled';
+import { CLASSNAME } from './constants';
 
-const mockedDate = new Date(
-    new Date(1487721600).toLocaleString('en-US', {
-        timeZone: 'America/Toronto',
-    }),
-);
+const mockedDate = new Date(1487721600000);
 Date.now = jest.fn(() => mockedDate.valueOf());
 
 type SetupProps = Partial<DatePickerControlledProps>;
 
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+const setup = (propsOverride: SetupProps = {}) => {
     const props: DatePickerControlledProps = {
         locale: 'fr',
         onChange: jest.fn(),
@@ -28,17 +24,25 @@ const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) =
         previousButtonProps: { label: 'Previous month' },
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<DatePickerControlled {...props} />);
-
-    return { props, wrapper };
+    render(<DatePickerControlled {...props} />);
+    const datePickerControlled = getByClassName(document.body, CLASSNAME);
+    return { props, datePickerControlled };
 };
 
 describe(`<${DatePickerControlled.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
+    it('should render', () => {
+        const { datePickerControlled } = setup();
+        expect(datePickerControlled).toBeInTheDocument();
+
+        const month = queryByClassName(datePickerControlled, `${CLASSNAME}__month`);
+        expect(month).toHaveTextContent('février 2017');
+
+        const selected = queryByClassName(datePickerControlled, `${CLASSNAME}__month-day--is-selected`);
+        expect(selected).toBe(screen.queryByRole('button', { name: '22' }));
+    });
+
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardRef: 'datePickerControlled',
     });
 });

package/src/components/date-picker/DatePickerField.test.tsx

@@ -1,22 +1,18 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper } from '@lumx/react/testing/utils';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render, screen } from '@testing-library/react';
+import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { TextField } from '@lumx/react';
 
+import userEvent from '@testing-library/user-event';
 import { DatePickerField, DatePickerFieldProps } from './DatePickerField';
+import { CLASSNAME } from './constants';
 
-const mockedDate = new Date(
-    new Date(1487721600).toLocaleString('en-US', {
-        timeZone: 'America/Toronto',
-    }),
-);
+const mockedDate = new Date(1487721600000);
 Date.now = jest.fn(() => mockedDate.valueOf());
 
-type SetupProps = Partial<DatePickerFieldProps>;
-
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<DatePickerFieldProps> = {}) => {
     const props: DatePickerFieldProps = {
         label: 'DatePickerField',
         locale: 'fr',
@@ -26,22 +22,42 @@ const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) =
         previousButtonProps: { label: 'Previous month' },
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<DatePickerField {...props} />);
-
-    return { props, wrapper };
+    render(<DatePickerField {...props} />);
+    const textField = getByClassName(document.body, TextField.className as string);
+    const inputNative = getByTagName(textField, 'input');
+    const getDatePicker = () => queryByClassName(document.body, CLASSNAME);
+    return { props, textField, inputNative, getDatePicker };
 };
 
 describe(`<${DatePickerField.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should render correctly when passed a date object', () => {
-            const { wrapper } = setup({ value: new Date('January 18, 1970') });
-            expect(wrapper).toMatchSnapshot();
-        });
+    it('should render', () => {
+        const { inputNative, props } = setup();
+        expect(inputNative).toBe(screen.queryByRole('textbox', { name: props.label }));
+        expect(inputNative).toHaveValue('22 février 2017');
+    });
+
+    it('should open on click', async () => {
+        const { getDatePicker, inputNative } = setup();
+        expect(getDatePicker()).not.toBeInTheDocument();
+
+        await userEvent.click(inputNative);
+        expect(getDatePicker()).toBeInTheDocument();
+    });
+
+    it('should open on Enter pressed', async () => {
+        const { getDatePicker, inputNative } = setup();
+        expect(getDatePicker()).not.toBeInTheDocument();
+
+        await userEvent.tab();
+        expect(inputNative).toHaveFocus();
+        await userEvent.keyboard('[Enter]');
+        expect(getDatePicker()).toBeInTheDocument();
+    });
+
+    commonTestsSuiteRTL(setup, {
+        baseClassName: TextField.className as string,
+        forwardRef: 'textField',
+        forwardAttributes: 'inputNative',
+        forwardClassName: 'textField',
     });
 });