Skip to content

Commit

Permalink
test: [Select] Add unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
meissadia committed Nov 16, 2023
1 parent 3014e0a commit 759a799
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 10 deletions.
11 changes: 1 addition & 10 deletions src/components/Select/Select.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react';
import { Select } from '~/src/index';
import { DemoOptions } from './testUtils';

const meta: Meta<typeof Select> = {
title: 'Components (Verified)/Select',
Expand All @@ -14,16 +15,6 @@ export default meta;

type Story = StoryObj<typeof meta>;

const DemoOptions = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
{ value: 'option4', label: 'Option 4' },
{ value: 'option5', label: 'Option 5' },
{ value: 'option6', label: 'Option 6' },
{ value: 'option7', label: 'Option 7' }
];

export const SingleSelect: Story = {
name: 'Single select',
args: {
Expand Down
82 changes: 82 additions & 0 deletions src/components/Select/Select.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { jest } from '@storybook/jest';
import '@testing-library/jest-dom';
import { act, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Select } from './Select';
import { DemoOptions } from './testUtils';

describe('<SelectSingle />', () => {
it('renders Single select with default value', () => {
render(<Select id='single' options={DemoOptions} />);
expect(screen.getByRole('combobox')).toHaveValue('option0');
expect(screen.getByRole('option', { name: 'Option 0' }).selected).toBe(
true
);
});

it('Handles Single selection change', async () => {
const user = userEvent.setup();
const onChange = jest.fn();

render(
<Select
id='single-change'
label='Single Select'
options={DemoOptions}
defaultValue='option1'
onChange={onChange}
/>
);

await user.selectOptions(screen.getByRole('combobox'), 'option3');
expect(screen.getByRole('combobox')).toHaveValue('option3');
expect(onChange).toHaveBeenCalledWith(DemoOptions[3]);
});
});

describe('<SelectMulti />', () => {
it('Is interactable', async () => {
const id = 'multi';
const label = 'MultiLabel';
const maxSelections = 2;
const user = userEvent.setup();
const onChange = jest.fn();

render(
<Select
id={id}
options={DemoOptions}
label={label}
isMulti
maxSelections={maxSelections}
onChange={onChange}
/>
);

// Has correct placeholder text based on maxSelections
const placeholder = `Select up to ${maxSelections}`;
const input = screen.getByPlaceholderText(placeholder);
expect(input).toBeInTheDocument();

// Initial Select has nothing selected
expect(onChange).toHaveBeenCalledWith([]);

// Allows selection of multiple options, up to the limit
await act(async () => {
await user.click(screen.getByLabelText('Option 1'));
await user.click(screen.getByLabelText('Option 5'));
await user.click(screen.getByLabelText('Option 0'));
});

// Change handler is called with the expected content
expect(onChange).toHaveBeenCalledWith([
{ ...DemoOptions[1], selected: true },
{ ...DemoOptions[5], selected: true }
]);

// Tags are rendered only for the selected options
expect(screen.getByTestId(`tag-multi-option1`)).toBeInTheDocument();
expect(screen.getByTestId(`tag-multi-option5`)).toBeInTheDocument();
expect(screen.queryByTestId(`tag-multi-option0`)).not.toBeInTheDocument();
});
});
12 changes: 12 additions & 0 deletions src/components/Select/testUtils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const OPTION_COUNT = 7;

const DemoOptions = [...Array.from({ length: OPTION_COUNT }).keys()].map(
number_ => ({ value: `option${number_}`, label: `Option ${number_}` })
);
DemoOptions.push({
value: 'long-option',
label:
'Multiselect options can also contain long words that will be wrapped like supercalifragilisticexpialidocious'
});

export { DemoOptions };

0 comments on commit 759a799

Please sign in to comment.