@loadsmart/loadsmart-ui 5.13.0 → 5.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.13.0",
+  "version": "5.13.2",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [

package/src/components/Select/useSelect.helpers.test.ts

@@ -1,4 +1,4 @@
-import { getDisplayValue, getValue } from './useSelect.helpers'
+import { getDisplayValue, getValue, toSelection } from './useSelect.helpers'
 import generator from '../../tests/generator'
 
 import type { SelectAdapter, SelectValue, Option } from './Select.types'
@@ -60,6 +60,15 @@ describe('useSelect helpers', () => {
 
       expect(getDisplayValue(adapters, selection, multiple)).toEqual(adapter.getLabel(item))
     })
+
+    it('returns empty string as display value when selection label is undefined', () => {
+      const selection: SelectValue = new Map().set(undefined, {
+        label: undefined,
+        value: undefined,
+      })
+
+      expect(getDisplayValue(adapters, selection, multiple)).toEqual('')
+    })
   })
 
   describe('multiple selection', () => {
@@ -118,5 +127,58 @@ describe('useSelect helpers', () => {
 
       expect(getDisplayValue(adapters, selection, multiple)).toEqual('')
     })
+
+    it('returns empty string as display value when selection label is undefined', () => {
+      const selection: SelectValue = new Map().set(undefined, {
+        label: undefined,
+        value: undefined,
+      })
+
+      expect(getDisplayValue(adapters, selection, multiple)).toEqual('')
+    })
+  })
+
+  describe('getSelection', () => {
+    it('initializes correctly when a null value is provided', () => {
+      expect(toSelection(null)).toEqual([])
+    })
+
+    it('initializes correctly when an undefined value is provided', () => {
+      expect(toSelection(undefined)).toEqual([])
+    })
+
+    it('initializes correctly when a valid value is provided', () => {
+      expect(
+        toSelection({
+          value: 'some-value',
+          label: 'Some label',
+        } as Option)
+      ).toEqual([
+        {
+          value: 'some-value',
+          label: 'Some label',
+        },
+      ])
+
+      expect(
+        toSelection([
+          {
+            value: 'some-value-1',
+            label: 'Some label 1',
+          } as Option,
+        ])
+      ).toEqual([
+        {
+          value: 'some-value-1',
+          label: 'Some label 1',
+        },
+      ])
+    })
+
+    it('initializes correctly when an empty value is provided', () => {
+      expect(toSelection([])).toEqual([])
+      expect(toSelection({})).toEqual([])
+      expect(toSelection([{}])).toEqual([])
+    })
   })
 })

package/src/components/Select/useSelect.helpers.ts

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { GenericAdapter } from './Select.constants'
 import isEmpty from 'utils/toolset/isEmpty'
+import toArray from 'utils/toolset/toArray'
 
-import type { SelectAdapter, SelectValue, Option, Adapters } from './Select.types'
+import type { SelectAdapter, SelectValue, Option, Adapters, SelectProps } from './Select.types'
 
 export function getAdapter(adapters: Adapters, type?: string): SelectAdapter<any> {
   if (type == null) {
@@ -32,6 +33,12 @@ export function getValue(selection: SelectValue, multiple?: boolean): Option | O
   }
 }
 
+export function toSelection(value: SelectProps['value']): Option[] {
+  const safeValue = toArray(value || [])
+
+  return safeValue.filter((option) => !isEmpty(option))
+}
+
 export function getDisplayValue(
   adapters: Adapters,
   selection: SelectValue,
@@ -46,7 +53,7 @@ export function getDisplayValue(
   } else {
     const value = getValue(selection, multiple)
     const adapter = getAdapter(adapters, (value as Option)._type)
-    return adapter.getLabel(value)
+    return adapter.getLabel(value) ?? ''
   }
 }
 

package/src/components/Select/useSelect.test.ts

@@ -0,0 +1,207 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import useSelect from './useSelect'
+import type { SelectProps, Option } from './Select.types'
+
+describe('useSelect', () => {
+  describe('single selection', () => {
+    it('initializes correctly when no value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when a null value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: null,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an undefined value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: undefined,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when a valid value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: {
+          value: 'some-value',
+          label: 'Some label',
+        } as Option,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map().set('some-value', {
+        value: 'some-value',
+        label: 'Some label',
+      })
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('Some label')
+    })
+
+    it('initializes correctly when an invalid value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: {
+          label: undefined,
+          value: undefined,
+        } as Option,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map().set(undefined, {
+        label: undefined,
+        value: undefined,
+      })
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an empty value is provided', () => {
+      const props: SelectProps = {
+        multiple: false,
+        name: 'anything',
+        value: {},
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+  })
+
+  describe('multiple selection', () => {
+    it('initializes correctly when no value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when a null value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: null,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an undefined value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: undefined,
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when a valid value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: [
+          {
+            value: 'some-value',
+            label: 'Some label',
+          } as Option,
+        ],
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+
+      const expectedSelected = new Map().set('some-value', {
+        value: 'some-value',
+        label: 'Some label',
+      })
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an invalid value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: [
+          {
+            label: undefined,
+            value: undefined,
+          } as Option,
+        ],
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+      const expectedSelected = new Map().set(undefined, {
+        label: undefined,
+        value: undefined,
+      })
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+
+    it('initializes correctly when an empty value is provided', () => {
+      const props: SelectProps = {
+        multiple: true,
+        name: 'anything',
+        value: [{}],
+      }
+
+      const { result } = renderHook(() => useSelect(props))
+
+      const expectedSelected = new Map()
+
+      expect(result.current.selectable.selected).toEqual(expectedSelected)
+      expect(result.current.query).toBe('')
+    })
+  })
+})

package/src/components/Select/useSelect.ts

@@ -13,7 +13,13 @@ import { isThenable } from 'utils/toolset/isThenable'
 import toArray from 'utils/toolset/toArray'
 import { GenericAdapter } from './Select.constants'
 import { useSelectable } from './Select.context'
-import { escapeRegExp, getAdapter, getDisplayValue, getValue } from './useSelect.helpers'
+import {
+  escapeRegExp,
+  getAdapter,
+  getDisplayValue,
+  getValue,
+  toSelection,
+} from './useSelect.helpers'
 
 import type { ChangeEvent, FocusEvent } from 'react'
 import type {
@@ -213,7 +219,7 @@ function useSelect(props: SelectProps): useSelectReturn {
   const adapters = useMemo<Adapters>(() => extractAdapters(datasources), [datasources])
 
   const selectable = useSelectable({
-    selected: toArray(props.value || []),
+    selected: toSelection(props.value),
     multiple,
     adapters,
     onChange: useCallback(

package/src/testing/SelectEvent/SelectEvent.ts

@@ -1,11 +1,4 @@
-/* eslint-disable */
-import {
-  fireEvent,
-  queries,
-  waitFor,
-  within,
-  waitForElementToBeRemoved,
-} from '@testing-library/dom'
+import { fireEvent, waitFor, within, waitForElementToBeRemoved } from '@testing-library/react'
 import { act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
@@ -26,6 +19,7 @@ function getSelectMenu(input: HTMLElement): HTMLElement {
 }
 
 function getSelectTriggerHandle(input: HTMLElement): HTMLElement {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return input.parentNode!.nextSibling!.nextSibling as HTMLElement
 }
 
@@ -60,12 +54,12 @@ function isSelectMenuExpanded(input: HTMLElement): boolean {
 async function waitForPendingQuery(input: HTMLElement) {
   const searchContainer = getSelectSearchContainer(input)
 
-  if (!queries.queryByTestId(searchContainer, 'select-trigger-loading')) {
+  if (!within(searchContainer).queryByTestId('select-trigger-loading')) {
     return
   }
 
   await waitForElementToBeRemoved(
-    () => queries.queryByTestId(searchContainer, 'select-trigger-loading'),
+    () => within(searchContainer).queryByTestId('select-trigger-loading'),
     { timeout: 2500 }
   )
 }
@@ -88,11 +82,10 @@ async function expand(input: HTMLElement): Promise<void> {
     expect(triggerHandle).toBeEnabled()
   })
 
-  await act(async () => {
-    userEvent.click(triggerHandle)
-    await waitFor(() => {
-      expect(isSelectMenuExpanded(input)).toBe(true)
-    })
+  userEvent.click(triggerHandle)
+
+  await waitFor(async () => {
+    expect(await within(getSelectContainer(input)).findByRole('listbox')).toBeInTheDocument()
   })
 }
 
@@ -108,12 +101,10 @@ async function collapse(input: HTMLElement): Promise<void> {
 
   const triggerHandle = getSelectTriggerHandle(input)
 
-  await act(async () => {
-    userEvent.click(triggerHandle)
+  userEvent.click(triggerHandle)
 
-    await waitFor(() => {
-      expect(isSelectMenuExpanded(input)).toBe(false)
-    })
+  await waitFor(() => {
+    expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()
   })
 }
 
@@ -129,14 +120,12 @@ async function select(option: string, input: HTMLElement): Promise<void> {
 
   const menuContainer = getSelectMenu(input)
 
-  await act(async () => {
-    const optionElement = await queries.findByLabelText(menuContainer, option)
+  const optionElement = await within(menuContainer).findByLabelText(option)
 
-    // click the option if exists; Select currently closes when an item is clicked.
-    if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {
-      userEvent.click(optionElement)
-    }
-  })
+  // click the option if exists; Select currently closes when an item is clicked.
+  if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {
+    userEvent.click(optionElement)
+  }
 
   // we collapse in the case the option was not clicked
   await collapse(input)
@@ -154,14 +143,12 @@ async function unselect(option: string, input: HTMLElement): Promise<void> {
 
   const menuContainer = getSelectMenu(input)
 
-  await act(async () => {
-    const optionElement = await queries.findByLabelText(menuContainer, option)
+  const optionElement = await within(menuContainer).findByLabelText(option)
 
-    // ensures that the option exists and IS selected
-    if (optionElement && optionElement.getAttribute('aria-selected') == 'true') {
-      userEvent.click(optionElement)
-    }
-  })
+  // ensures that the option exists and IS selected
+  if (optionElement && optionElement.getAttribute('aria-selected') == 'true') {
+    userEvent.click(optionElement)
+  }
 
   // we collapse in the case the option was not clicked
   await collapse(input)
@@ -177,9 +164,9 @@ async function clear(input: HTMLElement): Promise<void> {
 
   const searchContainer = getSelectSearchContainer(input)
 
-  await act(async () => {
-    const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
+  const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
 
+  act(() => {
     if (clearButton) {
       userEvent.click(clearButton)
     }
@@ -195,11 +182,9 @@ async function clear(input: HTMLElement): Promise<void> {
 async function search(query: string, input: HTMLElement): Promise<void> {
   const selectContainer = getSelectContainer(input)
 
-  await act(async () => {
-    fireEvent.change(input, { target: { value: query } })
+  fireEvent.change(input, { target: { value: query } })
 
-    await queries.findAllByRole(selectContainer, 'option')
-  })
+  await within(selectContainer).findAllByRole('option')
 }
 
 /**
@@ -212,7 +197,8 @@ async function getOptions(input: HTMLElement): Promise<HTMLElement[]> {
 
   const menuContainer = getSelectMenu(input)
 
-  const options = queries.queryAllByRole(menuContainer, 'option')
+  const options = within(menuContainer).queryAllByRole('option')
+
   await collapse(input)
 
   return options
@@ -230,7 +216,7 @@ async function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {
   let selectedOptions: HTMLElement[] = []
 
   try {
-    selectedOptions = await queries.findAllByRole(menuContainer, 'option', {
+    selectedOptions = await within(menuContainer).findAllByRole('option', {
       selected: true,
     })
   } catch (err) {