Add event handler tests

Ensure freeform and option components are able to receive change events.

docs/philosophy.md

@@ -23,23 +23,24 @@
 
 ## HTML enhancement
 
-| HTML element                                                               | Tesseract counterpart         | Remarks                                                               |
-|----------------------------------------------------------------------------|-------------------------------|-----------------------------------------------------------------------|
-| `<button>`                                                                 | `action/ActionButton`         |                                                                       |
-| `<input type="button">`                                                    | `action/ActionButton`         |                                                                       |
-| `<input type="reset">`                                                     | `action/ActionButton`         |                                                                       |
-| `<input type="submit">`                                                    | `action/ActionButton`         |                                                                       |
-| `<textarea>`                                                               | `freeform/MultilineTextInput` |                                                                       |
-| `<input type="text">`                                                      | `freeform/TextInput`          |                                                                       |
-| `<input type="search">`                                                    | `freeform/TextInput`          |                                                                       |
-| `<input type="password">`                                                  | `freeform/MaskedTextInput`    |                                                                       |
-| `<a>` with button appearance                                               | `navigation/LinkButton`       |                                                                       |
-| `<select>` without `multiple` attribute                                    | `option/DropdownSelect`       |                                                                       |
-| `<input type="checkbox">` with `indeterminate` state                       | `option/ToggleTickBox`        |                                                                       |
-| `<input type="checkbox">` with `indeterminate` state and button appearance | `option/ToggleButton`         |                                                                       |
-| `<input type="checkbox">` without `indeterminate` state                    | `option/ToggleSwitch`         | Prefer using this component when indeterminate state is not expected. |
-| `<input type="radio">`                                                     | `option/RadioTickBox`         |                                                                       |
-| `<input type="radio">` with button appearance                              | `option/RadioButton`          |                                                                       |
-| `<input type="number">`                                                    | `number/Spinner`              | Use this component for discrete values.                               |
-| `<input type="range">`                                                     | `number/Slider`               | Use this component for continuous values.                             |
+| HTML element                                                               | Tesseract counterpart         | Remarks                                                                      |
+|----------------------------------------------------------------------------|-------------------------------|------------------------------------------------------------------------------|
+| `<button>`                                                                 | `action/ActionButton`         |                                                                              |
+| `<input type="button">`                                                    | `action/ActionButton`         |                                                                              |
+| `<input type="reset">`                                                     | `action/ActionButton`         |                                                                              |
+| `<input type="submit">`                                                    | `action/ActionButton`         |                                                                              |
+| `<textarea>`                                                               | `freeform/MultilineTextInput` |                                                                              |
+| `<input type="text">`                                                      | `freeform/TextInput`          |                                                                              |
+| `<input type="search">`                                                    | `freeform/TextInput`          | The consumer may choose to add a search icon (magnifying glass) as indicator |
+| `<input type="password">`                                                  | `freeform/MaskedTextInput`    |                                                                              |
+| `<a>` with button appearance                                               | `navigation/LinkButton`       |                                                                              |
+| `<select>` without `multiple` attribute and with dropdown appearance       | `option/DropdownSelect`       |                                                                              |
+| `<select>` with list box appearance                                        | `option/MenuSelect`           | The `multiple` prop can be set here.                                         |
+| `<input type="checkbox">` with `indeterminate` state                       | `option/ToggleTickBox`        |                                                                              |
+| `<input type="checkbox">` with `indeterminate` state and button appearance | `option/ToggleButton`         |                                                                              |
+| `<input type="checkbox">` without `indeterminate` state                    | `option/ToggleSwitch`         | Prefer using this component when indeterminate state is not expected.        |
+| `<input type="radio">`                                                     | `option/RadioTickBox`         |                                                                              |
+| `<input type="radio">` with button appearance                              | `option/RadioButton`          |                                                                              |
+| `<input type="number">`                                                    | `number/Spinner`              | Use this component for discrete values.                                      |
+| `<input type="range">`                                                     | `number/Slider`               | Use this component for continuous values.                                    |
 

src/modules/freeform/components/MaskedTextInput/MaskedTextInput.test.tsx

@@ -195,4 +195,16 @@ describe('MaskedTextInput', () => {
     userEvent.type(textbox, 'foobar');
     expect(onChange).toBeCalled();
   });
+
+  it('should handle input events', () => {
+    const onInput = jest.fn();
+    render(
+      <MaskedTextInput
+        onInput={onInput}
+      />
+    );
+    const textbox: HTMLInputElement = screen.getByTestId('input');
+    userEvent.type(textbox, 'foobar');
+    expect(onInput).toBeCalled();
+  });
 });

src/modules/freeform/components/MultilineTextInput/MultilineTextInput.test.tsx

@@ -192,4 +192,16 @@ describe('MultilineTextInput', () => {
     userEvent.type(textbox, 'foobar');
     expect(onChange).toBeCalled();
   });
+
+  it('should handle input events', () => {
+    const onInput = jest.fn();
+    render(
+      <MultilineTextInput
+        onInput={onInput}
+      />
+    );
+    const textbox: HTMLInputElement = screen.getByTestId('input');
+    userEvent.type(textbox, 'foobar');
+    expect(onInput).toBeCalled();
+  });
 });

src/modules/freeform/components/TextInput/TextInput.test.tsx

@@ -208,4 +208,16 @@ describe('TextInput', () => {
     userEvent.type(textbox, 'foobar');
     expect(onChange).toBeCalled();
   });
+
+  it('should handle input events', () => {
+    const onInput = jest.fn();
+    render(
+      <TextInput
+        onInput={onInput}
+      />
+    );
+    const textbox: HTMLInputElement = screen.getByTestId('input');
+    userEvent.type(textbox, 'foobar');
+    expect(onInput).toBeCalled();
+  });
 });

src/modules/option/components/DropdownSelect/DropdownSelect.test.tsx

@@ -8,6 +8,7 @@ import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
 import {
   DropdownSelect
 } from '.';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('@tesseract-design/web-base-textcontrol');
 
@@ -279,4 +280,27 @@ describe('DropdownSelect', () => {
       }));
     });
   });
+
+  it('should handle change events', () => {
+    const onChange = jest.fn();
+    render(
+      <DropdownSelect
+        onChange={onChange}
+        options={[
+          {
+            label: 'foo',
+            value: 'foo',
+          },
+          {
+            label: 'bar',
+            value: 'bar',
+          }
+        ]}
+      />
+    );
+    const combobox: HTMLSelectElement = screen.getByRole('combobox');
+    const [, secondOption] = screen.getAllByRole('option');
+    userEvent.selectOptions(combobox, secondOption);
+    expect(onChange).toBeCalled();
+  });
 });

src/modules/option/components/RadioButton/RadioButton.test.tsx

@@ -164,7 +164,19 @@ describe('RadioButton', () => {
         disabled
       />
     );
-    const button: HTMLButtonElement = screen.getByRole('radio');
-    expect(button).toBeDisabled();
+    const radio: HTMLButtonElement = screen.getByRole('radio');
+    expect(radio).toBeDisabled();
+  });
+
+  it('should handle change events', () => {
+    const onChange = jest.fn();
+    render(
+      <RadioButton
+        onChange={onChange}
+      />
+    );
+    const radio: HTMLInputElement = screen.getByRole('radio');
+    userEvent.click(radio);
+    expect(onChange).toBeCalled();
   });
 });

src/modules/option/components/RadioTickBox/RadioTickBox.test.tsx

@@ -60,8 +60,20 @@ describe('RadioTickBox', () => {
         onClick={onClick}
       />
     );
-    const button: HTMLInputElement = screen.getByRole('radio');
-    userEvent.click(button);
+    const radio: HTMLInputElement = screen.getByRole('radio');
+    userEvent.click(radio);
     expect(onClick).toBeCalled();
   });
+
+  it('should handle change events', () => {
+    const onChange = jest.fn();
+    render(
+      <RadioTickBox
+        onChange={onChange}
+      />
+    );
+    const radio: HTMLInputElement = screen.getByRole('radio');
+    userEvent.click(radio);
+    expect(onChange).toBeCalled();
+  });
 });

src/modules/option/components/ToggleButton/ToggleButton.test.tsx

@@ -73,8 +73,7 @@ describe('ToggleButton', () => {
       expect(ref.current).toHaveProperty('indeterminate', true);
     });
   });
-  
-  
+
   it('should handle click events', () => {
     const onClick = jest.fn();
     render(
@@ -82,8 +81,8 @@ describe('ToggleButton', () => {
         onClick={onClick}
       />
     );
-    const button: HTMLInputElement = screen.getByRole('checkbox');
-    userEvent.click(button);
+    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
+    userEvent.click(checkbox);
     expect(onClick).toBeCalled();
   });
 
@@ -198,7 +197,19 @@ describe('ToggleButton', () => {
         disabled
       />
     );
-    const button: HTMLButtonElement = screen.getByRole('checkbox');
-    expect(button).toBeDisabled();
+    const checkbox: HTMLButtonElement = screen.getByRole('checkbox');
+    expect(checkbox).toBeDisabled();
+  });
+
+  it('should handle change events', () => {
+    const onChange = jest.fn();
+    render(
+      <ToggleButton
+        onChange={onChange}
+      />
+    );
+    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
+    userEvent.click(checkbox);
+    expect(onChange).toBeCalled();
   });
 });

src/modules/option/components/ToggleSwitch/ToggleSwitch.test.tsx

@@ -60,8 +60,20 @@ describe('ToggleSwitch', () => {
         onClick={onClick}
       />
     );
-    const button: HTMLInputElement = screen.getByRole('checkbox');
-    userEvent.click(button);
+    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
+    userEvent.click(checkbox);
     expect(onClick).toBeCalled();
   });
+
+  it('should handle change events', () => {
+    const onChange = jest.fn();
+    render(
+      <ToggleSwitch
+        onChange={onChange}
+      />
+    );
+    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
+    userEvent.click(checkbox);
+    expect(onChange).toBeCalled();
+  });
 });

src/modules/option/components/ToggleTickBox/ToggleTickBox.test.tsx

@@ -83,8 +83,20 @@ describe('ToggleTickBox', () => {
         onClick={onClick}
       />
     );
-    const button: HTMLInputElement = screen.getByRole('checkbox');
-    userEvent.click(button);
+    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
+    userEvent.click(checkbox);
     expect(onClick).toBeCalled();
   });
+
+  it('should handle change events', () => {
+    const onChange = jest.fn();
+    render(
+      <ToggleTickBox
+        onChange={onChange}
+      />
+    );
+    const checkbox: HTMLInputElement = screen.getByRole('checkbox');
+    userEvent.click(checkbox);
+    expect(onChange).toBeCalled();
+  });
 });