@olaboot/esm-patient-registration-app 9.2.1 → 10.0.2

package/src/patient-registration/input/basic-input/select/select-input.test.tsx

@@ -1,49 +1,129 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { vi, describe, it, expect } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Formik, Form } from 'formik';
 import { SelectInput } from './select-input.component';
 
-describe('the select input', () => {
-  const setupSelect = async () => {
-    render(
-      <Formik initialValues={{ select: '' }} onSubmit={null}>
-        <Form>
-          <SelectInput label="Select" name="select" options={['A Option', 'B Option']} required />
-        </Form>
-      </Formik>,
-    );
-    return screen.getByLabelText('Select') as HTMLInputElement;
+/**
+ * Helper to render SelectInput component with Formik.
+ */
+function renderSelectInput(
+  props: {
+    name?: string;
+    label?: string;
+    options?: string[];
+    required?: boolean;
+  } = {},
+  initialValues: Record<string, string> = {},
+) {
+  const defaultProps = {
+    name: 'select',
+    label: 'Select',
+    options: ['A Option', 'B Option'],
+    required: false,
+    ...props,
   };
 
-  it('exists', async () => {
-    const input = await setupSelect();
-    expect(input.type).toEqual('select-one');
-  });
+  return render(
+    <Formik initialValues={{ select: '', ...initialValues }} onSubmit={() => {}}>
+      <Form>
+        <SelectInput {...defaultProps} />
+      </Form>
+    </Formik>,
+  );
+}
+
+describe('SelectInput component', () => {
+  describe('Rendering', () => {
+    it('renders the select input', async () => {
+      renderSelectInput({ required: true });
+
+      const select = await screen.findByRole('combobox', { name: /select/i });
+      expect(select).toBeInTheDocument();
+    });
+
+    it('shows required label when field is required', async () => {
+      renderSelectInput({ required: true });
+
+      const select = await screen.findByRole('combobox', { name: /^select$/i });
+      expect(select).toBeInTheDocument();
+      expect(screen.queryByRole('combobox', { name: /select \(optional\)/i })).not.toBeInTheDocument();
+    });
 
-  it('can input data', async () => {
-    const user = userEvent.setup();
-    const input = await setupSelect();
-    const expected = 'A Option';
+    it('shows optional label when field is not required', async () => {
+      renderSelectInput({ required: false });
 
-    await user.selectOptions(input, expected);
+      const select = await screen.findByRole('combobox', { name: /select \(optional\)/i });
+      expect(select).toBeInTheDocument();
+    });
 
-    await expect(input.value).toEqual(expected);
+    it('renders all provided options', async () => {
+      renderSelectInput({ options: ['Option 1', 'Option 2', 'Option 3'], required: true });
+
+      await screen.findByRole('combobox');
+
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+      expect(screen.getByText('Option 2')).toBeInTheDocument();
+      expect(screen.getByText('Option 3')).toBeInTheDocument();
+    });
   });
 
-  it('should show optional label if the input is not required', async () => {
-    render(
-      <Formik initialValues={{ select: '' }} onSubmit={null}>
-        <Form>
-          <SelectInput label="Select" name="select" options={['A Option', 'B Option']} />
-        </Form>
-      </Formik>,
-    );
+  describe('User interaction', () => {
+    it('allows user to select an option', async () => {
+      const user = userEvent.setup();
+      renderSelectInput({ required: true });
+
+      const select = await screen.findByRole('combobox', { name: /^select$/i });
+      await user.selectOptions(select, 'A Option');
+
+      await waitFor(() => {
+        expect(select).toHaveValue('A Option');
+      });
+    });
+
+    it('updates form values when user selects an option', async () => {
+      const user = userEvent.setup();
+      let formValues: Record<string, string> = {};
+
+      render(
+        <Formik initialValues={{ select: '' }} onSubmit={() => {}}>
+          {({ values }) => {
+            formValues = values as Record<string, string>;
+            return (
+              <Form>
+                <SelectInput name="select" label="Select" options={['A Option', 'B Option']} required />
+              </Form>
+            );
+          }}
+        </Formik>,
+      );
+
+      const select = await screen.findByRole('combobox');
+      await user.selectOptions(select, 'B Option');
+
+      await waitFor(() => {
+        expect(formValues.select).toBe('B Option');
+      });
+    });
+
+    it('allows user to switch between options', async () => {
+      const user = userEvent.setup();
+      renderSelectInput({ required: true });
+
+      const select = await screen.findByRole('combobox', { name: /^select$/i });
+
+      await user.selectOptions(select, 'A Option');
+
+      await waitFor(() => {
+        expect(select).toHaveValue('A Option');
+      });
 
-    await screen.findByRole('combobox');
+      await user.selectOptions(select, 'B Option');
 
-    const selectInput = screen.getByRole('combobox', { name: 'Select (optional)' }) as HTMLSelectElement;
-    expect(selectInput.labels).toHaveLength(1);
-    expect(selectInput.labels[0]).toHaveTextContent('Select (optional)');
+      await waitFor(() => {
+        expect(select).toHaveValue('B Option');
+      });
+    });
   });
 });

package/src/patient-registration/input/combo-input/combo-input.component.tsx

@@ -1,23 +1,36 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import { TextInput, Layer } from '@carbon/react';
 import SelectionTick from './selection-tick.component';
 import styles from '../input.scss';
 
+type TextInputProps = React.ComponentProps<typeof TextInput>;
+
 interface ComboInputProps {
   entries: Array<string>;
+  error?: Error;
+  isLoading?: boolean;
   name: string;
   fieldProps: {
     value: string;
     labelText: string;
     id?: string;
-    [x: string]: any;
-  };
+  } & Omit<TextInputProps, 'value' | 'labelText' | 'id' | 'onChange' | 'onFocus' | 'autoComplete' | 'onKeyDown'>;
   handleInputChange: (newValue: string) => void;
-  handleSelection: (newSelection) => void;
+  handleSelection: (newSelection: string) => void;
 }
 
-const ComboInput: React.FC<ComboInputProps> = ({ entries, name, fieldProps, handleInputChange, handleSelection }) => {
+const ComboInput: React.FC<ComboInputProps> = ({
+  entries,
+  error,
+  isLoading,
+  name,
+  fieldProps,
+  handleInputChange,
+  handleSelection,
+}) => {
+  const { t } = useTranslation();
   const [highlightedEntry, setHighlightedEntry] = useState(-1);
   const { value = '' } = fieldProps;
   const [showEntries, setShowEntries] = useState(false);
@@ -60,15 +73,18 @@ const ComboInput: React.FC<ComboInputProps> = ({ entries, name, fieldProps, hand
         setHighlightedEntry((prev) => Math.max(-1, prev - 1));
       } else if (e.key === 'ArrowDown') {
         setHighlightedEntry((prev) => Math.min(totalResults - 1, prev + 1));
-      } else if (e.key === 'Enter' && highlightedEntry > -1) {
-        handleOptionClick(filteredEntries[highlightedEntry], e);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (highlightedEntry > -1) {
+          handleOptionClick(filteredEntries[highlightedEntry]);
+        }
       }
     },
     [highlightedEntry, handleOptionClick, filteredEntries, setHighlightedEntry, setShowEntries],
   );
 
   useEffect(() => {
-    const listener = (e) => {
+    const listener = (e: MouseEvent) => {
       if (!comboInputRef.current.contains(e.target as Node)) {
         setShowEntries(false);
         setHighlightedEntry(-1);
@@ -99,26 +115,46 @@ const ComboInput: React.FC<ComboInputProps> = ({ entries, name, fieldProps, hand
         {showEntries && (
           <div className="cds--combo-box cds--list-box cds--list-box--expanded">
             <div id="downshift-1-menu" className="cds--list-box__menu" role="listbox">
-              {filteredEntries.map((entry, indx) => (
-                <div
-                  className={classNames('cds--list-box__menu-item', {
-                    'cds--list-box__menu-item--highlighted': indx === highlightedEntry,
-                  })}
-                  key={indx}
-                  id="downshift-1-item-0"
-                  role="option"
-                  tabIndex={-1}
-                  aria-selected="true"
-                  onClick={() => handleOptionClick(entry)}>
+              {isLoading ? (
+                <div className="cds--list-box__menu-item">
+                  <div className={classNames('cds--list-box__menu-item__option', styles.comboInputItemOption)}>
+                    {t('searching', 'Searching...')}
+                  </div>
+                </div>
+              ) : error ? (
+                <div className="cds--list-box__menu-item">
+                  <div className={classNames('cds--list-box__menu-item__option', styles.comboInputItemOption)}>
+                    {t('errorFetchingResults', 'Error fetching results')}
+                  </div>
+                </div>
+              ) : filteredEntries.length > 0 ? (
+                filteredEntries.map((entry, indx) => (
                   <div
-                    className={classNames('cds--list-box__menu-item__option', styles.comboInputItemOption, {
-                      'cds--list-box__menu-item--active': entry === value,
-                    })}>
-                    {entry}
-                    {entry === value && <SelectionTick />}
+                    className={classNames('cds--list-box__menu-item', {
+                      'cds--list-box__menu-item--highlighted': indx === highlightedEntry,
+                    })}
+                    key={indx}
+                    id="downshift-1-item-0"
+                    role="option"
+                    tabIndex={-1}
+                    aria-selected="true"
+                    onClick={() => handleOptionClick(entry)}>
+                    <div
+                      className={classNames('cds--list-box__menu-item__option', styles.comboInputItemOption, {
+                        'cds--list-box__menu-item--active': entry === value,
+                      })}>
+                      {entry}
+                      {entry === value && <SelectionTick />}
+                    </div>
+                  </div>
+                ))
+              ) : value ? (
+                <div className="cds--list-box__menu-item">
+                  <div className={classNames('cds--list-box__menu-item__option', styles.comboInputItemOption)}>
+                    {t('noMatchingResults', 'No matching results')}
                   </div>
                 </div>
-              ))}
+              ) : null}
             </div>
           </div>
         )}

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.component.tsx

@@ -1,112 +1,20 @@
-import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Layer, Search } from '@carbon/react';
 import classNames from 'classnames';
 import styles from './autosuggest.scss';
 
-// FIXME Temporarily included types from Carbon
-type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+type SearchProps = React.ComponentProps<typeof Search>;
 
-interface SearchProps extends InputPropsBase {
-  /**
-   * Specify an optional value for the `autocomplete` property on the underlying
-   * `<input>`, defaults to "off"
-   */
-  autoComplete?: string;
-
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className?: string;
-
-  /**
-   * Specify a label to be read by screen readers on the "close" button
-   */
-  closeButtonLabelText?: string;
-
-  /**
-   * Optionally provide the default value of the `<input>`
-   */
-  defaultValue?: string | number;
-
-  /**
-   * Specify whether the `<input>` should be disabled
-   */
-  disabled?: boolean;
-
-  /**
-   * Specify whether or not ExpandableSearch should render expanded or not
-   */
-  isExpanded?: boolean;
-
-  /**
-   * Specify a custom `id` for the input
-   */
-  id?: string;
-
-  /**
-   * Provide the label text for the Search icon
-   */
-  labelText: React.ReactNode;
-
-  /**
-   * Optional callback called when the search value changes.
-   */
-  onChange?(e: React.ChangeEvent<HTMLInputElement>): void;
-
-  /**
-   * Optional callback called when the search value is cleared.
-   */
-  onClear?(): void;
-
-  /**
-   * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
-   */
-  onExpand?(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void;
-
-  /**
-   * Provide an optional placeholder text for the Search.
-   * Note: if the label and placeholder differ,
-   * VoiceOver on Mac will read both
-   */
-  placeholder?: string;
-
-  /**
-   * Rendered icon for the Search.
-   * Can be a React component class
-   */
-  renderIcon?: React.ComponentType | React.FunctionComponent;
-
-  /**
-   * Specify the role for the underlying `<input>`, defaults to `searchbox`
-   */
-  role?: string;
-
-  /**
-   * Specify the size of the Search
-   */
-  size?: 'sm' | 'md' | 'lg';
-
-  /**
-   * Optional prop to specify the type of the `<input>`
-   */
-  type?: string;
-
-  /**
-   * Specify the value of the `<input>`
-   */
-  value?: string | number;
-}
-
-interface AutosuggestProps extends SearchProps {
-  getDisplayValue: (suggestion: any) => string;
-  getFieldValue: (suggestion: any) => string;
-  getSearchResults: (query: string) => Promise<Array<any>>;
+interface AutosuggestProps<Suggestion = unknown> extends SearchProps {
+  getDisplayValue: (suggestion: Suggestion) => string;
+  getFieldValue: (suggestion: Suggestion) => string;
+  getSearchResults: (query: string) => Promise<Array<Suggestion>>;
   onSuggestionSelected: (field: string, value: string) => void;
   invalid?: boolean | undefined;
   invalidText?: string | undefined;
 }
 
-export const Autosuggest: React.FC<AutosuggestProps> = ({
+export const Autosuggest = <Suggestion = unknown,>({
   getDisplayValue,
   getFieldValue,
   getSearchResults,
@@ -114,8 +22,8 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
   invalid,
   invalidText,
   ...searchProps
-}) => {
-  const [suggestions, setSuggestions] = useState([]);
+}: AutosuggestProps<Suggestion>) => {
+  const [suggestions, setSuggestions] = useState<Array<Suggestion>>([]);
   const searchBox = useRef(null);
   const wrapper = useRef(null);
   const { id: name, labelText } = searchProps;
@@ -169,6 +77,7 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
           onClear={handleClear}
           ref={searchBox}
           className={styles.autocompleteSearch}
+          labelText={labelText}
           {...searchProps}
         />
       </Layer>