uikit-react-public 0.11.13

package/lib/components/Field/__tests__/Field.test.tsx

@@ -0,0 +1,510 @@
+import { useState } from 'react';
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Field from '../Field';
+import { Label, Input, Textarea } from '../../';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Field', () => {
+  // Snapshot tests
+
+  test('Snapshot: Default (no children)', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: Field.HelperText alone', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field.HelperText>Helper text</Field.HelperText>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: Field.ErrorText alone', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field.ErrorText>Error text</Field.ErrorText>
+      </ThemeContextProvider>
+    );
+    // Expected behaviour here is to return `null`
+    // unless <Field> provides `error` via context
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: With Label, Input', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field>
+          <Label>Name</Label>
+          <Input />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: With Label, HelperText, ErrorText, Input', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field>
+          <Label>Name</Label>
+          <Field.HelperText>Helper text</Field.HelperText>
+          <Field.ErrorText>Error text</Field.ErrorText>
+          <Input />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: With Label, HelperText, ErrorText, Input, & prop disabled', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field disabled>
+          <Label>Name</Label>
+          <Field.HelperText>Helper text</Field.HelperText>
+          <Field.ErrorText>Error text</Field.ErrorText>
+          <Input />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: With Label, HelperText, ErrorText, Input, & prop error', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field error>
+          <Label>Name</Label>
+          <Field.HelperText>Helper text</Field.HelperText>
+          <Field.ErrorText>Error text</Field.ErrorText>
+          <Input />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: With Label, HelperText, ErrorText, Input, & prop optional', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field optional>
+          <Label>Name</Label>
+          <Field.HelperText>Helper text</Field.HelperText>
+          <Field.ErrorText>Error text</Field.ErrorText>
+          <Input />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: With Label, Textarea', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field>
+          <Label>Name</Label>
+          <Textarea />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: With Label, HelperText, ErrorText, Textarea', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field>
+          <Label>Name</Label>
+          <Field.HelperText>Helper text</Field.HelperText>
+          <Field.ErrorText>Error text</Field.ErrorText>
+          <Textarea />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: With Label, HelperText, ErrorText, Textarea, & prop disabled', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field disabled>
+          <Label>Name</Label>
+          <Field.HelperText>Helper text</Field.HelperText>
+          <Field.ErrorText>Error text</Field.ErrorText>
+          <Textarea />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('Snapshot: With Textarea & prop maxChar', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Field>
+          <Textarea />
+          <Field.CharacterCount maxChars={100} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interation tests
+
+  test('Can be found with default testId NAME', () => {
+    const NAME = 'ucl-uikit-field';
+    render(
+      <ThemeContextProvider>
+        <Field />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(NAME)).toBeInTheDocument();
+  });
+
+  test('Can be found with custom testId', () => {
+    const testId = 'abc';
+    render(
+      <ThemeContextProvider>
+        <Field testId={testId} />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+
+  test('Field.HelperText can be found with default testId NAME', () => {
+    const NAME = 'ucl-uikit-field__helper-text';
+    render(
+      <ThemeContextProvider>
+        <Field.HelperText />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(NAME)).toBeInTheDocument();
+  });
+
+  test('Field.HelperText can be found with custom testId', () => {
+    const testId = 'abc';
+    render(
+      <ThemeContextProvider>
+        <Field.HelperText testId={testId} />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+
+  test('Field.ErrorText can be found with default testId NAME & prop error for <Field>', () => {
+    const NAME = 'ucl-uikit-field__error-text';
+    render(
+      <ThemeContextProvider>
+        <Field error>
+          <Field.ErrorText />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(NAME)).toBeInTheDocument();
+  });
+
+  test('Field.ErrorText can be found with custom testId & prop error for <Field>', () => {
+    const testId = 'abc';
+    render(
+      <ThemeContextProvider>
+        <Field error>
+          <Field.ErrorText testId={testId} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(testId)).toBeInTheDocument();
+  });
+
+  test('Field.ErrorText cannot be found with default testId NAME & no prop error for <Field>', () => {
+    // <Field.ErrorText> is not rendered, by default
+    const NAME = 'ucl-uikit-field__error-text';
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Field.ErrorText />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(screen.queryByTestId(NAME)).toBeNull();
+  });
+
+  test('Field.ErrorText cannot be found with custom testId & prop error as false for <Field>', () => {
+    // <Field.ErrorText> is not rendered if prop error in <Field> is controlled
+    // & set to false
+    const testId = 'abc';
+    render(
+      <ThemeContextProvider>
+        <Field error={false}>
+          <Field.ErrorText testId={testId} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(screen.queryByTestId(testId)).toBeNull();
+  });
+
+  test('Label has (optional) text if <Field> has prop optional', () => {
+    render(
+      <ThemeContextProvider>
+        <Field optional>
+          <Label>Name</Label>
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId('ucl-uikit-label').textContent).toBe(
+      'Name (optional)'
+    );
+  });
+
+  test('Character count is rendered if <Field> has prop maxChar', () => {
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Textarea />
+          <Field.CharacterCount maxChars={100} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByText('0/100')).toBeInTheDocument();
+  });
+
+  test('Character count can be found with default testId NAME', () => {
+    const charCountTestId = 'ucl-uikit-field__char-count';
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Textarea />
+          <Field.CharacterCount maxChars={100} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(charCountTestId)).toBeInTheDocument();
+  });
+
+  test('Character count can be found with custom testId', () => {
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Textarea />
+          <Field.CharacterCount maxChars={100} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    expect(
+      screen.getByTestId('ucl-uikit-field__char-count')
+    ).toBeInTheDocument();
+  });
+
+  test('Character count updates when text is input', async () => {
+    const user = userEvent.setup();
+
+    // Character count requires a controlled <Textarea>
+    // & `useState` to update the character count
+    const TestComponent = () => {
+      const [value, setValue] = useState('');
+      return (
+        <ThemeContextProvider>
+          <Field>
+            <Textarea
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
+            <Field.CharacterCount maxChars={100} />
+          </Field>
+        </ThemeContextProvider>
+      );
+    };
+    render(<TestComponent />);
+
+    const charCounter = screen.getByTestId('ucl-uikit-field__char-count');
+    const textarea = screen.getByRole('textbox');
+    const inputText = 'Hello, world!';
+    await user.type(textarea, inputText);
+    expect(charCounter.textContent).toBe(`${inputText.length}/100`);
+  });
+
+  test('Input & Label are associated by htmlFor by default', async () => {
+    const user = userEvent.setup();
+    const testIdForLabel = 'label-01';
+    const testIdForInput = 'input-01';
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Label testId={testIdForLabel}>Name</Label>
+          <Input testId={testIdForInput} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    const label = screen.getByTestId(testIdForLabel);
+    const input = screen.getByTestId(testIdForInput);
+    expect(label).toHaveAttribute('for', input.id);
+    await user.click(label);
+    expect(input).toHaveFocus();
+  });
+
+  test('Textarea & Label are associated by htmlFor by default', async () => {
+    const user = userEvent.setup();
+    const testIdForLabel = 'label-01';
+    const testIdForTextarea = 'textarea-01';
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Label testId={testIdForLabel}>Name</Label>
+          <Textarea testId={testIdForTextarea} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    const label = screen.getByTestId(testIdForLabel);
+    const textarea = screen.getByTestId(testIdForTextarea);
+    expect(label).toHaveAttribute('for', textarea.id);
+    await user.click(label);
+    expect(textarea).toHaveFocus();
+  });
+
+  test('Input & Label can be associated by htmlFor with custom id', async () => {
+    const user = userEvent.setup();
+    const testIdForLabel = 'label-02';
+    const testIdForInput = 'input-02';
+    const customId = 'custom-id';
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Label
+            testId={testIdForLabel}
+            htmlFor={customId}
+          >
+            Name
+          </Label>
+          <Input
+            testId={testIdForInput}
+            id={customId}
+          />
+        </Field>
+      </ThemeContextProvider>
+    );
+    const label = screen.getByTestId(testIdForLabel);
+    const input = screen.getByTestId(testIdForInput);
+    expect(label).toHaveAttribute('for', customId);
+    expect(input).toHaveAttribute('id', customId);
+    await user.click(label);
+    expect(input).toHaveFocus();
+  });
+
+  test('Textarea & Label can be associated by htmlFor with custom id', async () => {
+    const user = userEvent.setup();
+    const testIdForLabel = 'label-02';
+    const testIdForTextarea = 'textarea-02';
+    const customId = 'custom-id';
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Label
+            testId={testIdForLabel}
+            htmlFor={customId}
+          >
+            Name
+          </Label>
+          <Textarea
+            testId={testIdForTextarea}
+            id={customId}
+          />
+        </Field>
+      </ThemeContextProvider>
+    );
+    const label = screen.getByTestId(testIdForLabel);
+    const textarea = screen.getByTestId(testIdForTextarea);
+    expect(label).toHaveAttribute('for', customId);
+    expect(textarea).toHaveAttribute('id', customId);
+    await user.click(label);
+    expect(textarea).toHaveFocus();
+  });
+
+  test('Multiple generated ids are unique', () => {
+    const testIdForLabel1 = 'label-01';
+    const testIdForInput1 = 'input-01';
+    const testIdForLabel2 = 'label-02';
+    const testIdForInput2 = 'input-02';
+    const testIdForLabel3 = 'label-03';
+    const testIdForTextarea1 = 'textarea-01';
+    render(
+      <ThemeContextProvider>
+        <Field>
+          <Label testId={testIdForLabel1}>Name</Label>
+          <Input testId={testIdForInput1} />
+        </Field>
+        <Field>
+          <Label testId={testIdForLabel2}>Name</Label>
+          <Input testId={testIdForInput2} />
+        </Field>
+        <Field>
+          <Label testId={testIdForLabel3}>Name</Label>
+          <Textarea testId={testIdForTextarea1} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    const label1 = screen.getByTestId(testIdForLabel1);
+    const input1 = screen.getByTestId(testIdForInput1);
+    const label2 = screen.getByTestId(testIdForLabel2);
+    const input2 = screen.getByTestId(testIdForInput2);
+    const label3 = screen.getByTestId(testIdForLabel3);
+    const textarea1 = screen.getByTestId(testIdForTextarea1);
+
+    expect(label2).not.toHaveAttribute('for', input1.id);
+    expect(label3).not.toHaveAttribute('for', input1.id);
+    expect(label1).not.toHaveAttribute('for', input2.id);
+    expect(label3).not.toHaveAttribute('for', input2.id);
+    expect(label1).not.toHaveAttribute('for', textarea1.id);
+    expect(label2).not.toHaveAttribute('for', textarea1.id);
+  });
+
+  test('id for <Field> does not collide with generated ids', () => {
+    const testIdForField1 = 'field-01';
+    const testIdForField2 = 'field-02';
+    const idForField1 = 'custom-id-01';
+    const idForField2 = 'custom-id-02';
+    const testIdForLabel1 = 'label-01';
+    const testIdForInput1 = 'input-01';
+    const testIdForLabel2 = 'label-02';
+    const testIdForTextarea1 = 'textarea-01';
+    render(
+      <ThemeContextProvider>
+        <Field
+          testId={testIdForField1}
+          id={idForField1}
+        >
+          <Label testId={testIdForLabel1}>Name</Label>
+          <Input testId={testIdForInput1} />
+        </Field>
+        <Field
+          testId={testIdForField2}
+          id={idForField2}
+        >
+          <Label testId={testIdForLabel2}>Name</Label>
+          <Textarea testId={testIdForTextarea1} />
+        </Field>
+      </ThemeContextProvider>
+    );
+    const field1 = screen.getByTestId(testIdForField1);
+    const field2 = screen.getByTestId(testIdForField2);
+    const label1 = screen.getByTestId(testIdForLabel1);
+    const input1 = screen.getByTestId(testIdForInput1);
+    const label2 = screen.getByTestId(testIdForLabel2);
+    const textarea1 = screen.getByTestId(testIdForTextarea1);
+
+    expect(field1).toHaveAttribute('id', idForField1);
+    expect(field2).toHaveAttribute('id', idForField2);
+
+    expect(label1).not.toHaveAttribute('for', idForField1);
+    expect(input1).not.toHaveAttribute('id', idForField1);
+    expect(label2).not.toHaveAttribute('for', idForField2);
+    expect(textarea1).not.toHaveAttribute('id', idForField1);
+  });
+});