@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

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

@@ -0,0 +1,180 @@
+import React from 'react';
+import { mdiTranslate } from '@lumx/icons';
+import { Chip, IconButton, TextField, Typography } from '@lumx/react';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+
+export default {
+    title: 'LumX components/text-field/TextField',
+    component: TextField,
+    args: TextField.defaultProps,
+    argTypes: {
+        clearButtonProps: { control: false },
+        chips: { control: false },
+        afterElement: { control: false },
+        onClear: { action: true },
+    },
+    decorators: [withValueOnChange({})],
+};
+
+/**
+ * Default text field
+ */
+export const Default = {
+    args: {
+        value: '',
+    },
+};
+
+/**
+ * With placeholder
+ */
+export const Placeholder = {
+    args: {
+        value: '',
+        placeholder: 'Texfield placeholder',
+    },
+};
+
+/**
+ * With label and helper
+ */
+export const LabelAndHelper = {
+    args: {
+        ...Default.args,
+        label: 'Textfield label',
+        helper: loremIpsum('tiny'),
+    },
+};
+
+/**
+ * With custom label and helper
+ */
+export const CustomLabelAndHelper = {
+    args: {
+        ...Default.args,
+        label: 'Textfield label',
+        labelProps: {
+            typography: Typography.subtitle1,
+        },
+        helper: loremIpsum('tiny'),
+    },
+};
+
+/**
+ * With clear button
+ */
+export const Clearable = () => {
+    const inputRef = React.useRef(null);
+    const [value, setValue] = React.useState('Some value');
+
+    return (
+        <TextField
+            value={value}
+            clearButtonProps={{ label: 'Clear' }}
+            onChange={setValue}
+            inputRef={inputRef}
+            {...TextField.defaultProps}
+        />
+    );
+};
+
+/**
+ * As number field
+ */
+export const NumberField = {
+    args: {
+        value: '0',
+        type: 'number',
+    },
+};
+
+/**
+ * Multiline textarea
+ */
+export const TextareaField = {
+    args: {
+        value: loremIpsum('tiny'),
+        multiline: true,
+        minimumRows: 2,
+    },
+};
+
+/**
+ * Error state
+ */
+export const Error = {
+    args: {
+        ...LabelAndHelper.args,
+        hasError: true,
+        error: 'Error message',
+    },
+};
+
+/**
+ * Valid state
+ */
+export const Valid = {
+    args: {
+        ...LabelAndHelper.args,
+        isValid: true,
+    },
+};
+
+/**
+ * Max length with character counter
+ */
+export const MaxLength = {
+    args: {
+        ...LabelAndHelper.args,
+        value: 'Textfield value',
+        maxLength: 195,
+    },
+};
+
+/**
+ * Custom element at the end
+ */
+export const WithAfterElement = {
+    args: {
+        value: '',
+        afterElement: <IconButton label="translate" emphasis="medium" size="s" icon={mdiTranslate} />,
+    },
+};
+
+/**
+ * Chips at the start
+ */
+export const WithChips = {
+    args: {
+        value: '',
+        chips: (
+            <>
+                <Chip size="s">Chip 1</Chip>
+                <Chip size="s">Chip 2</Chip>
+            </>
+        ),
+    },
+};
+
+/**
+ * Disabled state
+ */
+export const Disabled = {
+    args: {
+        value: 'Some value',
+        label: 'Label',
+        helper: 'Helper',
+    },
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: {
+                    disabled: { disabled: true },
+                    'aria-disabled': { 'aria-disabled': true },
+                },
+            },
+        }),
+    ],
+};

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

@@ -0,0 +1,298 @@
+import { Mock } from 'vitest';
+import camelCase from 'lodash/camelCase';
+
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { getBasicClass } from '@lumx/core/js/utils/className';
+import { render } from '@testing-library/react';
+import {
+    getByClassName,
+    getByTagName,
+    queryAllByClassName,
+    queryByClassName,
+    queryByTagName,
+} from '@lumx/react/testing/utils/queries';
+import partition from 'lodash/partition';
+import userEvent from '@testing-library/user-event';
+
+import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
+import { TextField, TextFieldProps } from './TextField';
+
+const CLASSNAME = TextField.className as string;
+
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: Partial<TextFieldProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props: any = { ...propsOverride };
+    const { container } = render(<TextField {...props} />, { wrapper });
+
+    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'));
+    const clearButton = queryByClassName(container, 'lumx-text-field__input-clear');
+
+    return {
+        props,
+        clearButton,
+        container,
+        element,
+        inputNative,
+        error,
+        helper,
+    };
+};
+
+describe(`<${TextField.displayName}>`, () => {
+    (isFocusVisible as Mock).mockReturnValue(false);
+
+    describe('Render', () => {
+        it('should render defaults', () => {
+            const { element, inputNative } = setup({ id: 'fixedId' });
+            expect(element).toBeInTheDocument();
+
+            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 { element, inputNative } = setup({ id: 'fixedId', multiline: true });
+            expect(element).toBeInTheDocument();
+
+            expect(inputNative.tagName).toBe('TEXTAREA');
+        });
+    });
+
+    describe('Props', () => {
+        it('should add all class names (except has-error)', () => {
+            const modifiedProps = {
+                icon: 'icon',
+                isDisabled: true,
+                isValid: true,
+                label: 'test',
+                placeholder: 'test',
+            };
+            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 modifiedProps = { hasError: true };
+            const { element } = setup(modifiedProps);
+
+            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.value).toEqual(value);
+        });
+
+        it('should have no value', () => {
+            const value = undefined;
+            const { inputNative } = setup({ value });
+            expect(inputNative.value).toEqual('');
+        });
+
+        it('should have helper text', () => {
+            const { helper, inputNative } = setup({
+                helper: 'helper',
+                label: 'test',
+                placeholder: 'test',
+            });
+
+            expect(helper).toHaveTextContent('helper');
+            expect(inputNative).toHaveAccessibleDescription('helper');
+        });
+
+        it('should have error text', () => {
+            const { error, inputNative } = setup({
+                error: 'error',
+                hasError: true,
+                label: 'test',
+                placeholder: 'test',
+            });
+
+            expect(error).toHaveTextContent('error');
+            expect(inputNative).toHaveAttribute('aria-invalid', 'true');
+            expect(inputNative).toHaveAccessibleDescription('error');
+        });
+
+        it('should not have error text', () => {
+            const { error } = setup({
+                error: 'error',
+                hasError: false,
+                label: 'test',
+                placeholder: 'test',
+            });
+            expect(error).not.toBeDefined();
+        });
+
+        it('should have error and helper text', () => {
+            const { error, helper, inputNative } = setup({
+                error: 'error',
+                hasError: true,
+                helper: 'helper',
+                label: 'test',
+                placeholder: 'test',
+            });
+            expect(error).toHaveTextContent('error');
+            expect(helper).toHaveTextContent('helper');
+            expect(inputNative).toHaveAccessibleDescription('error helper');
+        });
+
+        it('should have error and helper text and custom aria describedby', () => {
+            const { error, helper, inputNative } = setup({
+                error: 'error',
+                hasError: true,
+                helper: 'helper',
+                label: 'test',
+                placeholder: 'test',
+                'aria-describedby': 'aria-description',
+            });
+            expect(error).toHaveTextContent('error');
+            expect(helper).toHaveTextContent('helper');
+            expect(inputNative).toHaveAttribute('aria-describedby', expect.stringContaining('aria-description'));
+        });
+    });
+
+    describe('Events', () => {
+        it('should trigger `onChange` when text field is changed', async () => {
+            const onChange = vi.fn();
+            const { inputNative } = setup({ value: '', name: 'name', onChange });
+
+            await userEvent.tab();
+            expect(inputNative).toHaveFocus();
+
+            await userEvent.keyboard('a');
+
+            expect(onChange).toHaveBeenCalledWith('a', 'name', expect.objectContaining({}));
+        });
+
+        it('should trigger `onChange` with empty value when text field is cleared', async () => {
+            const onChange = vi.fn();
+            const { clearButton } = setup({
+                value: 'initial value',
+                name: 'name',
+                clearButtonProps: { label: 'Clear' },
+                onChange,
+            });
+
+            expect(clearButton).toBeInTheDocument();
+
+            await userEvent.click(clearButton as HTMLElement);
+
+            expect(onChange).toHaveBeenCalledWith('');
+        });
+
+        it('should trigger `onChange` with empty value and `onClear` when text field is cleared', async () => {
+            const onChange = vi.fn();
+            const onClear = vi.fn();
+            const { clearButton } = setup({
+                value: 'initial value',
+                name: 'name',
+                clearButtonProps: { label: 'Clear' },
+                onChange,
+                onClear,
+            });
+
+            expect(clearButton).toBeInTheDocument();
+
+            await userEvent.click(clearButton as HTMLElement);
+
+            expect(onChange).toHaveBeenCalledWith('');
+            expect(onClear).toHaveBeenCalled();
+        });
+    });
+
+    describe('Disabled state', () => {
+        it('should render with "isDisabled"', async () => {
+            const onChange = vi.fn();
+            const { element, inputNative } = setup({
+                label: 'Label',
+                isDisabled: true,
+                value: 'test',
+                onChange,
+            });
+
+            expect(element).toHaveClass('lumx-text-field--is-disabled');
+            expect(inputNative).toBeDisabled();
+
+            // Cannot type in disabled input.
+            await userEvent.type(inputNative, 'new value');
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('should not render clear button when disabled', () => {
+            const { clearButton } = setup({
+                value: 'initial value',
+                clearButtonProps: { label: 'Clear' },
+                isDisabled: true,
+            });
+            expect(clearButton).not.toBeInTheDocument();
+        });
+
+        it('should render with "aria-disabled"', async () => {
+            const onChange = vi.fn();
+            const { element, inputNative } = setup({
+                label: 'Label',
+                'aria-disabled': true,
+                value: 'test',
+                onChange,
+            });
+
+            expect(element).toHaveClass('lumx-text-field--is-disabled');
+            expect(inputNative).not.toBeDisabled();
+            expect(inputNative).toHaveAttribute('aria-disabled', 'true');
+            expect(inputNative).toHaveAttribute('readonly');
+
+            // Cannot type in readonly input.
+            await userEvent.type(inputNative, 'new value');
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('should not render clear button when aria-disabled', () => {
+            const { clearButton } = setup({
+                value: 'initial value',
+                clearButtonProps: { label: 'Clear' },
+                'aria-disabled': true,
+            });
+            expect(clearButton).not.toBeInTheDocument();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'element',
+        forwardAttributes: 'inputNative',
+        forwardRef: 'element',
+        applyTheme: {
+            affects: [{ element: 'element' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});