Increase test coverage for /modules/ui (#3314)

* Increase test coverage for `/modules/ui`

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Fellipe Montes <102544529+FellipeMTX@users.noreply.github.com>

* Merge main

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Fellipe Montes <102544529+FellipeMTX@users.noreply.github.com>

* Fix tests

* Fix tests

* Fix

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Fellipe Montes <102544529+FellipeMTX@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -13,7 +13,7 @@ import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
 export type SelectProps<Value extends string | number | null> = {
   className?: string;
   disabled?: boolean;
-  dropdownScopeId: string;
+  dropdownId: string;
   fullWidth?: boolean;
   label?: string;
   onChange?: (value: Value) => void;
@@ -62,7 +62,7 @@ const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
 export const Select = <Value extends string | number | null>({
   className,
   disabled,
-  dropdownScopeId,
+  dropdownId,
   fullWidth,
   label,
   onChange,
@@ -73,7 +73,7 @@ export const Select = <Value extends string | number | null>({
   const selectedOption =
     options.find(({ value: key }) => key === value) || options[0];
 
-  const { closeDropdown } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useDropdown(dropdownId);
 
   const selectControl = (
     <StyledControlContainer disabled={disabled} fullWidth={fullWidth}>
@@ -100,7 +100,7 @@ export const Select = <Value extends string | number | null>({
     <div className={className}>
       {!!label && <StyledLabel>{label}</StyledLabel>}
       <Dropdown
-        dropdownId="select"
+        dropdownId={dropdownId}
         dropdownMenuWidth={176}
         dropdownPlacement="bottom-start"
         clickableComponent={selectControl}

packages/twenty-front/src/modules/ui/input/components/__stories__/Select.stories.tsx

@@ -24,7 +24,7 @@ const meta: Meta<typeof Select> = {
   component: Select,
   decorators: [ComponentDecorator],
   args: {
-    dropdownScopeId: 'select',
+    dropdownId: 'select',
     value: 'a',
     options: [
       { value: 'a', label: 'Option A' },

packages/twenty-front/src/modules/ui/input/hooks/__tests__/useIconPicker.test.tsx

@@ -0,0 +1,41 @@
+import { act } from 'react-dom/test-utils';
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+
+import { Icon123, IconApps } from '@/ui/display/icon';
+import { useIconPicker } from '@/ui/input/hooks/useIconPicker';
+
+describe('useIconPicker', () => {
+  it('should return correct iconPickerState', async () => {
+    const { result } = renderHook(() => useIconPicker(), {
+      wrapper: RecoilRoot,
+    });
+
+    const { Icon, iconKey, setIconPicker } = result.current;
+
+    expect(Icon).toEqual(IconApps);
+    expect(iconKey).toEqual('IconApps');
+    expect(setIconPicker).toBeInstanceOf(Function);
+  });
+
+  it('should update the icon', async () => {
+    const { result } = renderHook(() => useIconPicker(), {
+      wrapper: RecoilRoot,
+    });
+
+    const { Icon, iconKey, setIconPicker } = result.current;
+
+    expect(Icon).toEqual(IconApps);
+    expect(iconKey).toEqual('IconApps');
+    expect(setIconPicker).toBeInstanceOf(Function);
+
+    await act(async () => {
+      result.current.setIconPicker({ Icon: Icon123, iconKey: 'Icon123' });
+    });
+
+    const { Icon: UpdatedIcon, iconKey: updatedIconKey } = result.current;
+
+    expect(UpdatedIcon).toEqual(Icon123);
+    expect(updatedIconKey).toEqual('Icon123');
+  });
+});