Skip to content

Commit

Permalink
✅ Added a bunch of tests
Browse files Browse the repository at this point in the history
  • Loading branch information
mimarz committed Sep 20, 2023
1 parent 171d36a commit 638eaf8
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 0 deletions.
145 changes: 145 additions & 0 deletions packages/react/src/components/form/Textfield/TextField.test.tsx
Original file line number Diff line number Diff line change
@@ -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,
}}
/>,
);
2 changes: 2 additions & 0 deletions packages/react/src/components/form/Textfield/Textfield.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
style,
characterLimit,
hideLabel,
type = 'text',
...rest
} = props;

Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit 638eaf8

Please sign in to comment.