From 638eaf8b4584211ea3eebdf26c9778630850e16d Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Wed, 20 Sep 2023 14:08:37 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Added=20a=20bunch=20of=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form/Textfield/TextField.test.tsx         | 145 ++++++++++++++++++
 .../components/form/Textfield/Textfield.tsx   |   2 +
 2 files changed, 147 insertions(+)
 create mode 100644 packages/react/src/components/form/Textfield/TextField.test.tsx

diff --git a/packages/react/src/components/form/Textfield/TextField.test.tsx b/packages/react/src/components/form/Textfield/TextField.test.tsx
new file mode 100644
index 0000000000..3192022358
--- /dev/null
+++ b/packages/react/src/components/form/Textfield/TextField.test.tsx
@@ -0,0 +1,145 @@
+import { render as renderRtl, screen } from '@testing-library/react';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+import type { TextfieldProps } from './Textfield';
+import { Textfield } from './Textfield';
+
+const user = userEvent.setup();
+
+describe('TextField', () => {
+  test('has correct value and label', () => {
+    render({ value: 'test', label: 'label' });
+    expect(screen.getByLabelText('label')).toBeDefined();
+    expect(screen.getByDisplayValue('test')).toBeDefined();
+  });
+
+  test('has correct description', () => {
+    render({ description: 'description' });
+    expect(
+      screen.getByRole('textbox', { description: 'description' }),
+    ).toBeDefined();
+  });
+
+  test('has correct description and label when label is hidden', () => {
+    render({ description: 'description', label: 'label', hideLabel: true });
+
+    expect(screen.getByLabelText('label')).toBeDefined();
+    expect(
+      screen.getByRole('textbox', { description: 'description' }),
+    ).toBeDefined();
+  });
+
+  test('is invalid with correct error message', () => {
+    render({ error: 'error-message' });
+
+    const input = screen.getByRole('textbox', { description: 'error-message' });
+    expect(input).toBeDefined();
+    expect(input).toBeInvalid();
+  });
+  test('is invalid with correct error message from errorId', () => {
+    renderRtl(
+      <>
+        <span id='my-error'>my error message</span>
+        <Textfield
+          errorId='my-error'
+          error
+        />
+      </>,
+    );
+
+    const input = screen.getByRole('textbox', {
+      description: 'my error message',
+    });
+    expect(input).toBeDefined();
+    expect(input).toBeInvalid();
+  });
+  it('should have max allowed characters label for screen readers', () => {
+    render({
+      characterLimit: {
+        maxCount: 10,
+        srLabel: 'Max 10 characters is allowed',
+        label: (count: number) => `${count} characters remaining`,
+      },
+    });
+    const screenReaderText = screen.getByText('Max 10 characters is allowed');
+    expect(screenReaderText).toBeInTheDocument();
+  });
+
+  it('should countdown remaining characters', async () => {
+    const user = userEvent.setup();
+    render({
+      label: 'First name',
+      characterLimit: {
+        maxCount: 10,
+        label: (count: number) => `${count} characters remaining`,
+        srLabel: 'characters remaining',
+      },
+    });
+    const inputField = screen.getByLabelText('First name');
+    await user.type(inputField, 'Peter');
+    expect(screen.getByText('5 characters remaining')).toBeInTheDocument();
+  });
+
+  it('Triggers onBlur event when field loses focus', async () => {
+    const onBlur = jest.fn();
+    render({ onBlur });
+    const element = screen.getByRole('textbox');
+    await user.click(element);
+    expect(element).toHaveFocus();
+    await user.tab();
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('Triggers onChange event for each keystroke', async () => {
+    const onChange = jest.fn();
+    const data = 'test';
+    render({ onChange });
+    const element = screen.getByRole('textbox');
+    await user.click(element);
+    expect(element).toHaveFocus();
+    await user.keyboard(data);
+    expect(onChange).toHaveBeenCalledTimes(data.length);
+  });
+
+  it('Sets given id on input field', () => {
+    const id = 'some-unique-id';
+    render({ id });
+    expect(screen.getByRole('textbox')).toHaveAttribute('id', id);
+  });
+
+  it('Focuses on input field when label is clicked and id is not given', async () => {
+    const label = 'Lorem ipsum';
+    render({ label });
+    await user.click(screen.getByText(label));
+    expect(screen.getByRole('textbox')).toHaveFocus();
+  });
+
+  it('Focuses on input field when label is clicked and id is given', async () => {
+    const label = 'Lorem ipsum';
+    render({ id: 'some-unique-id', label });
+    await user.click(screen.getByText(label));
+    expect(screen.getByRole('textbox')).toHaveFocus();
+  });
+
+  it('Has type attribute set to "text" by default', () => {
+    render();
+    expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text');
+  });
+
+  it('Has given type attribute if set', () => {
+    const type = 'tel';
+    render({ type });
+    expect(screen.getByRole('textbox')).toHaveAttribute('type', type);
+  });
+});
+
+const render = (props: Partial<TextfieldProps> = {}) =>
+  renderRtl(
+    <Textfield
+      {...{
+        onChange: jest.fn(),
+        ...props,
+      }}
+    />,
+  );
diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
index 950da07464..448eb1e0ad 100644
--- a/packages/react/src/components/form/Textfield/Textfield.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -69,6 +69,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
       style,
       characterLimit,
       hideLabel,
+      type = 'text',
       ...rest
     } = props;
 
@@ -156,6 +157,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
               sufix && classes.inputSufix,
             )}
             ref={ref}
+            type={type}
             aria-describedby={describedBy}
             onChange={(e) => {
               inputProps?.onChange?.(e);