From a3c16c86798a5337128e2216c5cc0cdb0583e4ac Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Tue, 7 Nov 2023 15:33:19 -0700
Subject: [PATCH] test: [Select] Add unit tests

---
 src/components/Select/Select.stories.tsx | 11 +---
 src/components/Select/Select.test.tsx    | 82 ++++++++++++++++++++++++
 src/components/Select/testUtils.ts       | 12 ++++
 3 files changed, 95 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Select/Select.test.tsx
 create mode 100644 src/components/Select/testUtils.ts

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 3cad60cd..23b94a6f 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -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',
@@ -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: {
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
new file mode 100644
index 00000000..8b5d77af
--- /dev/null
+++ b/src/components/Select/Select.test.tsx
@@ -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();
+  });
+});
diff --git a/src/components/Select/testUtils.ts b/src/components/Select/testUtils.ts
new file mode 100644
index 00000000..5515cc90
--- /dev/null
+++ b/src/components/Select/testUtils.ts
@@ -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 };