chore: Improve select component and implement tests

Author: spuxx-dev

packages/solid/src/components/control/select/select.component.test.tsx

@@ -4,30 +4,29 @@ import { SelectOption } from './select.types';
 import { render } from '@solidjs/testing-library';
 
 describe('Select', () => {
-  const fruits: SelectOption[] = [
-    { value: 'apple', label: 'Apple' },
-    { value: 'banana', label: 'Banana' },
-    { value: 'cherry', label: 'Cherry' },
-  ];
-
-  interface Car {
-    type: string;
-    color: string;
+  interface Fruit {
+    name: string;
+    description: string;
   }
 
-  const cars: SelectOption<Car>[] = [
-    {
-      value: { type: 'limousine', color: 'black' },
-      label: 'Black Limousine',
-    },
+  const fruits: SelectOption<Fruit>[] = [
     {
-      value: { type: 'sedan', color: 'red' },
-      label: 'Red Sedan',
+      key: 'apple',
+      value: {
+        name: 'Apple',
+        description: 'A red apple.',
+      },
+      label: 'Apple',
     },
     {
-      value: { type: 'coupe', color: 'blue' },
-      label: 'Blue Coupe',
+      key: 'banana',
+      value: {
+        name: 'Banana',
+        description: 'A tasty banana.',
+      },
+      label: 'Banana',
     },
+    { key: 'cherry', value: { name: 'Cherry', description: 'A sweet cherry.' }, label: 'Cherry' },
   ];
 
   it('should render with default values', () => {
@@ -43,20 +42,21 @@ describe('Select', () => {
     const label = selectContainer?.querySelector('label');
     expect(label).toBeInTheDocument();
     expect(label).toHaveAttribute('for', select!.id);
+    const icon = label!.querySelector('iconify-icon');
+    expect(icon).not.toBeInTheDocument();
     const options = selectContainer?.querySelectorAll('option');
     expect(options).toHaveLength(3);
-    expect(options![0]).toHaveAttribute('value', 'apple');
-    expect(options![0]).toHaveAttribute('label', 'Apple');
-    expect(options![1]).toHaveAttribute('value', 'banana');
-    expect(options![1]).toHaveAttribute('label', 'Banana');
-    expect(options![2]).toHaveAttribute('value', 'cherry');
-    expect(options![2]).toHaveAttribute('label', 'Cherry');
+    fruits.forEach((fruit, index) => {
+      expect(options![index]).toHaveAttribute('value', fruit.key);
+      expect(options![index]).toHaveAttribute('label', fruit.label);
+    });
   });
 
   it('should render with custom values', () => {
     const { container } = render(() => (
       <Select
         label="Fruits"
+        icon="mdi:fruit-cherries"
         options={fruits}
         variant="outlined"
         size="small"
@@ -71,9 +71,13 @@ describe('Select', () => {
     expect(selectContainer).toHaveAttribute('spx-size', 'small');
     expect(selectContainer).toHaveClass('spx', 'spx-select', 'my-class');
     expect(selectContainer).toHaveStyle({ color: 'rgb(255, 0, 0)' });
-    const select = selectContainer?.querySelector('select');
+    const select = selectContainer!.querySelector('select');
     expect(select).toBeInTheDocument();
     expect(select).toHaveAttribute('disabled');
+    const label = selectContainer!.querySelector('label');
+    expect(label).toBeInTheDocument();
+    const icon = label!.querySelector('iconify-icon');
+    expect(icon).toBeInTheDocument();
   });
 
   it('should call the onChange callback', () => {
@@ -86,17 +90,47 @@ describe('Select', () => {
     select!.value = 'banana';
     select!.dispatchEvent(new Event('change'));
     expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(fruits[1].value, expect.any(Event));
+    expect(onChange).toHaveBeenCalledWith(fruits[1], expect.any(Event));
   });
 
-  it('should be able to handle complex values', () => {
-    const onChange = vi.fn();
-    const { container } = render(() => <Select label="Cars" options={cars} onChange={onChange} />);
+  it('it should generate random UUIDs if no option keys are provided', () => {
+    const fruitsWithoutKeys = fruits.map((fruit) => ({ ...fruit, key: undefined }));
+    const { container } = render(() => <Select label="Fruits" options={fruitsWithoutKeys} />);
+    const selectContainer = container.querySelector('.spx-select');
+    const options = selectContainer?.querySelectorAll('option');
+    expect(options).toHaveLength(3);
+    fruits.forEach((_fruit, index) => {
+      expect(options![index]).toHaveAttribute('value', expect.stringContaining('-'));
+    });
+  });
+
+  it('should set a default option by value', () => {
+    const { container } = render(() => (
+      <Select label="Fruits" options={fruits} default={fruits[1]} />
+    ));
     const select = container.querySelector('select');
-    expect(select).toBeInTheDocument();
-    select!.value = '1';
-    select!.dispatchEvent(new Event('change'));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith(cars[1].value, expect.any(Event));
+    expect(select).toHaveValue(fruits[1].key);
+  });
+
+  it('should set a default option by key', () => {
+    const { container } = render(() => (
+      <Select label="Fruits" options={fruits} default={fruits[1].key} />
+    ));
+    const select = container.querySelector('select');
+    expect(select).toHaveValue(fruits[1].key);
+  });
+
+  it('should set a default option by index', () => {
+    const { container } = render(() => <Select label="Fruits" options={fruits} default={1} />);
+    const select = container.querySelector('select');
+    expect(select).toHaveValue(fruits[1].key);
+  });
+
+  it('should use the provided id instead of generating a random one', () => {
+    const { container } = render(() => (
+      <Select label="Fruits" options={fruits} attrs={{ id: 'my-select' }} />
+    ));
+    const select = container.querySelector('select');
+    expect(select).toHaveAttribute('id', 'my-select');
   });
 });

packages/solid/src/components/control/select/select.component.tsx

@@ -8,37 +8,35 @@ import { Icon } from '@iconify-icon/solid';
  * @returns The select component.
  */
 export const Select: Component<SelectProps> = (props) => {
-  const { variant = 'contained', size } = props;
+  const { variant = 'contained', size, options } = props;
   const id = props.attrs?.id ?? crypto.randomUUID();
 
   // Ensure that each option has a unique key
-  const _options = [...props.options];
-  for (const option of _options) {
-    if (typeof option.value === 'object') {
-      if (!option.key) {
-        option.key = crypto.randomUUID();
-      }
+  for (const option of props.options) {
+    if (!option.key) {
+      option.key = crypto.randomUUID();
     }
   }
-  const [options, setOptions] = createSignal<SelectOption[]>(_options);
 
   const findOptionByKey = (key: string): SelectOption => {
-    const option = options().find((option) => option.key === key);
-    if (!option) throw new Error(`Option with key ${key} not found.`);
-    return option;
+    const option = options.find((option) => option.key === key);
+    return option!;
   };
 
   const handleChange: JSX.EventHandler<HTMLSelectElement, Event> = (event) => {
     const select = event.currentTarget;
-    if (props.onChange) props.onChange(findOptionByKey(select.value), event);
+    const selectedOption = findOptionByKey(select.value);
+    if (props.onChange) props.onChange(selectedOption, event);
   };
 
   const getSelected = (option: SelectOption): true | undefined => {
     if (props.default) {
       if (typeof props.default === 'number') {
-        return props.default === options().indexOf(option) ? true : undefined;
+        return props.default === options.indexOf(option) ? true : undefined;
+      } else if (typeof props.default === 'string') {
+        return props.default === option.key ? true : undefined;
       } else {
-        return props.default.value === option ? true : undefined;
+        return props.default === option ? true : undefined;
       }
     }
   };
@@ -56,7 +54,7 @@ export const Select: Component<SelectProps> = (props) => {
         disabled={props.disabled || undefined}
         onChange={handleChange}
       >
-        <For each={options()}>
+        <For each={options}>
           {(option) => (
             <option value={option.key} label={option.label} selected={getSelected(option)} />
           )}

packages/solid/src/components/control/select/select.types.ts

@@ -5,6 +5,7 @@ import { DOMElement, JSX } from 'solid-js/jsx-runtime';
 /**
  * An option for the Select component.
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface SelectOption<T = any> {
   /**
    * The value of the option.
@@ -17,6 +18,7 @@ export interface SelectOption<T = any> {
   /**
    * The key of the option. Must be a unique string. If none is provided, a random
    * key will be generated. The key will be used to map the option to the select element.
+   * ⚠️ Note: If a key is generated, the original object will be mutated.
    * @default crypto.randomUUID()
    */
   key?: string;
@@ -25,6 +27,7 @@ export interface SelectOption<T = any> {
 /**
  * The Select component properties.
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface SelectProps<T = any>
   extends ComponentProps<JSX.SelectHTMLAttributes<HTMLSelectElement>> {
   /**
@@ -41,7 +44,7 @@ export interface SelectProps<T = any>
    * will be selected.
    * @default undefined
    */
-  default?: SelectOption<T> | number;
+  default?: SelectOption<T> | number | string;
   /**
    * An optional icon to render as part of the label.
    * @default undefined