@loadsmart/loadsmart-ui 5.11.2-beta.1 → 5.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.11.2-beta.1",
+  "version": "5.12.1",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [
@@ -97,9 +97,9 @@
     "@svgr/webpack": "5.5.0",
     "@tailwindcss/postcss7-compat": "2.1.2",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "11.2.6",
-    "@testing-library/react-hooks": "5.1.2",
-    "@testing-library/user-event": "13.1.9",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^5.1.3",
+    "@testing-library/user-event": "^13.5.0",
     "@types/chance": "1.1.1",
     "@types/jest": "26.0.23",
     "@types/lodash.debounce": "4.0.6",
@@ -135,7 +135,7 @@
     "eslint-plugin-react": "7.23.2",
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-storybook": "^0.5.11",
-    "eslint-plugin-testing-library": "4.2.1",
+    "eslint-plugin-testing-library": "^5.9.1",
     "fork-ts-checker-webpack-plugin": "6.2.6",
     "husky": "7.0.4",
     "identity-obj-proxy": "3.0.0",

package/src/components/Banner/Banner.test.tsx

@@ -83,10 +83,11 @@ describe('<Banner />', () => {
       onSecondaryActionButtonClick: onSecondaryActionButtonClick,
     }
 
-    const { getByText } = setupBannerAction(props)
-    getByText(props.title)
-    getByText('click me')
-    getByText('or click me')
+    setupBannerAction(props)
+
+    screen.getByText(props.title)
+    screen.getByText('click me')
+    screen.getByText('or click me')
   })
 
   it('allows to use React Element for title', () => {

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { screen } from '@testing-library/react'
 
 import Checkbox from './Checkbox'
 import generator from '../../tests/generator'
@@ -13,10 +14,10 @@ describe('<Checkbox />', () => {
       onChange: jest.fn(),
     }
 
-    const { getByTestId } = setup(props)
+    setup(props)
 
-    const component = getByTestId('checkbox')
-    const selector = getByTestId('selector')
+    const component = screen.getByTestId('checkbox')
+    const selector = screen.getByTestId('selector')
 
     expect(component).toHaveTextContent(props.children)
     expect(selector).toHaveAttribute('type', 'checkbox')
@@ -29,12 +30,10 @@ describe('<Checkbox />', () => {
       onChange: jest.fn(),
     }
 
-    const { getByTestId } = setup(props)
+    setup(props)
 
-    const component = getByTestId('checkbox')
-
-    expect(component).toHaveTextContent(props.children)
-    expect(getByTestId('selection-leading')).toBeInTheDocument()
+    expect(screen.getByTestId('checkbox')).toHaveTextContent(props.children)
+    expect(screen.getByTestId('selection-leading')).toBeInTheDocument()
   })
 
   it('renders trailing correctly', () => {
@@ -44,12 +43,10 @@ describe('<Checkbox />', () => {
       onChange: jest.fn(),
     }
 
-    const { getByTestId } = setup(props)
-
-    const component = getByTestId('checkbox')
+    setup(props)
 
-    expect(component).toHaveTextContent(props.children)
-    expect(getByTestId('selection-trailing')).toBeInTheDocument()
+    expect(screen.getByTestId('checkbox')).toHaveTextContent(props.children)
+    expect(screen.getByTestId('selection-trailing')).toBeInTheDocument()
   })
 
   it('triggers onChange when clicked', () => {
@@ -58,12 +55,12 @@ describe('<Checkbox />', () => {
       onChange: jest.fn(),
     }
 
-    const { getByTestId } = setup(props)
+    setup(props)
+
+    expect(screen.getByTestId('selector')).not.toBeChecked()
 
-    const selector = getByTestId('selector') as HTMLInputElement
+    fire.click(screen.getByTestId('selector'))
 
-    expect(selector.checked).toBe(false)
-    fire.click(selector)
-    expect(selector.checked).toBe(true)
+    expect(screen.getByTestId('selector')).toBeChecked()
   })
 })

package/src/components/Dropdown/Dropdown.test.tsx

@@ -29,7 +29,7 @@ describe('Dropdown', () => {
       user.click(screen.getByText('Actions'))
 
       for (let i = 0; i < ACTIONS.length; i++) {
-        expect(screen.queryByText(ACTIONS[i].label)).toBeInTheDocument()
+        expect(screen.getByText(ACTIONS[i].label)).toBeInTheDocument()
       }
     })
 
@@ -38,7 +38,7 @@ describe('Dropdown', () => {
 
       user.click(screen.getByText('Actions'))
 
-      await waitFor(() => expect(screen.queryByTestId('dropdown-menu')).toBeInTheDocument())
+      await screen.findByTestId('dropdown-menu')
 
       const items = screen.getAllByTestId('dropdown-menu-item')
       expect(items.length).toBe(ACTIONS.length)
@@ -80,18 +80,18 @@ describe('Dropdown', () => {
 
       user.click(screen.getByText('Sections'))
 
-      await waitFor(() => expect(screen.queryByTestId('dropdown-menu')).toBeInTheDocument())
+      await screen.findByTestId('dropdown-menu')
 
       screen.getByText('My profile')
 
       for (let i = 0; i < PROFILE_ACTIONS.length; i++) {
-        expect(screen.queryByText(PROFILE_ACTIONS[i].label)).toBeInTheDocument()
+        expect(screen.getByText(PROFILE_ACTIONS[i].label)).toBeInTheDocument()
       }
 
       screen.getByText('Subscription')
 
       for (let i = 0; i < SUBSCRIPTION_ACTIONS.length; i++) {
-        expect(screen.queryByText(SUBSCRIPTION_ACTIONS[i].label)).toBeInTheDocument()
+        expect(screen.getByText(SUBSCRIPTION_ACTIONS[i].label)).toBeInTheDocument()
       }
     })
 
@@ -102,7 +102,7 @@ describe('Dropdown', () => {
 
       user.click(screen.getByText('Sections'))
 
-      await waitFor(() => expect(screen.queryByTestId('dropdown-menu')).toBeInTheDocument())
+      await screen.findByTestId('dropdown-menu')
 
       const items = screen.getAllByTestId('dropdown-menu-item')
       expect(items.length).toBe(SECTION_ACTIONS.length)
@@ -136,12 +136,12 @@ describe('Dropdown', () => {
 
       user.click(screen.getByText('With Header & Footer'))
 
-      await waitFor(() => expect(screen.queryByTestId('dropdown-menu')).toBeInTheDocument())
+      await screen.findByTestId('dropdown-menu')
 
       screen.getByText('Header')
 
       for (let i = 0; i < ACTIONS.length; i++) {
-        expect(screen.queryByText(ACTIONS[i].label)).toBeInTheDocument()
+        expect(screen.getByText(ACTIONS[i].label)).toBeInTheDocument()
       }
 
       screen.getByText('A cool footer')
@@ -152,7 +152,7 @@ describe('Dropdown', () => {
 
       user.click(screen.getByText('With Header & Footer'))
 
-      await waitFor(() => expect(screen.queryByTestId('dropdown-menu')).toBeInTheDocument())
+      await screen.findByTestId('dropdown-menu')
 
       const items = screen.getAllByTestId('dropdown-menu-item')
       expect(items.length).toBe(ACTIONS.length)

package/src/components/Radio/Radio.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { screen } from '@testing-library/react'
 
 import Radio from './Radio'
 import generator from '../../tests/generator'
@@ -13,10 +14,10 @@ describe('<Radio />', () => {
       onChange: jest.fn(),
     }
 
-    const { getByTestId } = setup(props)
+    setup(props)
 
-    const component = getByTestId('radio')
-    const selector = getByTestId('selector')
+    const component = screen.getByTestId('radio')
+    const selector = screen.getByTestId('selector')
 
     expect(component).toHaveTextContent(props.children)
     expect(selector).toHaveAttribute('type', 'radio')
@@ -29,12 +30,10 @@ describe('<Radio />', () => {
       onChange: jest.fn(),
     }
 
-    const { getByTestId } = setup(props)
+    setup(props)
 
-    const component = getByTestId('radio')
-
-    expect(component).toHaveTextContent(props.children)
-    expect(getByTestId('selection-leading')).toBeInTheDocument()
+    expect(screen.getByTestId('radio')).toHaveTextContent(props.children)
+    expect(screen.getByTestId('selection-leading')).toBeInTheDocument()
   })
 
   it('renders trailing correctly', () => {
@@ -44,12 +43,10 @@ describe('<Radio />', () => {
       onChange: jest.fn(),
     }
 
-    const { getByTestId } = setup(props)
-
-    const component = getByTestId('radio')
+    setup(props)
 
-    expect(component).toHaveTextContent(props.children)
-    expect(getByTestId('selection-trailing')).toBeInTheDocument()
+    expect(screen.getByTestId('radio')).toHaveTextContent(props.children)
+    expect(screen.getByTestId('selection-trailing')).toBeInTheDocument()
   })
 
   it('triggers onChange when clicked', () => {
@@ -58,12 +55,12 @@ describe('<Radio />', () => {
       onChange: jest.fn(),
     }
 
-    const { getByTestId } = setup(props)
+    setup(props)
+
+    expect(screen.getByTestId('selector')).not.toBeChecked()
 
-    const selector = getByTestId('selector') as HTMLInputElement
+    fire.click(screen.getByTestId('selector'))
 
-    expect(selector.checked).toBe(false)
-    fire.click(selector)
-    expect(selector.checked).toBe(true)
+    expect(screen.getByTestId('selector')).toBeChecked()
   })
 })

package/src/components/Select/Select.test.tsx

@@ -298,6 +298,25 @@ describe('Select', () => {
         expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(0)
         expect(searchInput).toHaveDisplayValue('')
       })
+
+      it('removes the clear button', async () => {
+        const selectedFruit = generator.pickone([...FRUITS])
+
+        setup({
+          value: selectedFruit as Option,
+          hideClear: true,
+        })
+
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        expect(searchInput).toHaveDisplayValue(selectedFruit.label)
+
+        const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
+        expect(selectedOptions).toHaveLength(1)
+
+        expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
+
+        expect(screen.queryByTestId('select-trigger-clear')).not.toBeInTheDocument()
+      })
     })
 
     describe('Multi selection', () => {
@@ -621,8 +640,8 @@ describe('Select', () => {
 
         await waitFor(() => {
           expect(screen.getByLabelText(availableOption)).toBeInTheDocument()
-          expect(screen.getByText(`Add "${query}"`)).toBeInTheDocument()
         })
+        expect(screen.getByText(`Add "${query}"`)).toBeInTheDocument()
       }
     )
 
@@ -794,8 +813,8 @@ describe('Select', () => {
 
         await waitFor(() => {
           expect(dsFetch).toBeCalledTimes(2)
-          expect(dsFetch).lastCalledWith({ query: 'foo', regex: expect.anything() })
         })
+        expect(dsFetch).lastCalledWith({ query: 'foo', regex: expect.anything() })
       }
     )
 
@@ -921,10 +940,10 @@ describe('Select', () => {
       await waitFor(
         () => {
           expect(dsFetch).toBeCalledTimes(2)
-          expect(dsFetch).lastCalledWith({ query: 'foo', regex: expect.anything() })
         },
         { timeout: 5000 }
       )
+      expect(dsFetch).lastCalledWith({ query: 'foo', regex: expect.anything() })
     })
 
     it.each([[{ multiple: false }], [{ multiple: true }]])(

package/src/components/Select/Select.tsx

@@ -207,7 +207,7 @@ function renderOptionsMultiple(select: useSelectReturn, components?: Components)
 }
 
 function Select(props: SelectProps): JSX.Element {
-  const { multiple, placeholder, components, ...others } = props
+  const { multiple, placeholder, components, hideClear = false, ...others } = props
 
   const select = useSelect(props)
 
@@ -224,24 +224,26 @@ function Select(props: SelectProps): JSX.Element {
       return <Loading data-testid="select-trigger-loading">&middot;&middot;&middot;</Loading>
     }
 
-    if (select.value) {
-      if (multiple) {
-        return <ClearMultiple select={select} />
-      }
-
-      if (!select.disabled) {
-        return (
-          <CloseButton
-            size={12}
-            {...getCommonClearButtonProps()}
-            {...select.getClearProps()}
-            type="button"
-          />
-        )
-      }
+    if (!select.value) {
+      return null
     }
 
-    return null
+    if (multiple) {
+      return <ClearMultiple select={select} />
+    }
+
+    if (select.disabled || hideClear) {
+      return null
+    }
+
+    return (
+      <CloseButton
+        size={12}
+        {...getCommonClearButtonProps()}
+        {...select.getClearProps()}
+        type="button"
+      />
+    )
   }
 
   return (

package/src/components/Select/Select.types.ts

@@ -69,6 +69,12 @@ export type Components = {
 
 export type CreateOptionPosition = 'first' | 'last'
 
+export type OnChange = (event: EventLike<Option | Option[] | null>) => void
+
+export type OnCreate = (query: string) => Promise<void | Option> | void | Option
+
+export type OnQueryChange = (e: ChangeEvent<HTMLInputElement>) => void
+
 export interface SelectProps extends DropdownProps {
   name: string
   placeholder?: string
@@ -78,11 +84,15 @@ export interface SelectProps extends DropdownProps {
   datasources?: SelectDatasourceFunction<any>[]
   options?: GenericOption[]
   components?: Components
-  onChange?: (event: EventLike<Option | Option[] | null>) => void
-  onCreate?: (query: string) => Promise<void | Option> | void | Option
-  onQueryChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  onChange?: OnChange
+  onCreate?: OnCreate
+  onQueryChange?: OnQueryChange
   isValidNewOption?: ((query: string) => boolean) | boolean
   createOptionPosition?: CreateOptionPosition
+  /**
+   * Hide the clear button on the Single Select.
+   */
+  hideClear?: boolean
 }
 
 export type SelectOptionProps = {

package/src/components/Select/index.ts

@@ -4,5 +4,9 @@ export type {
   useSelectExternalReturn as useSelectReturn,
   SelectComponentsOptionProps as SelectOptionProps,
   SelectComponentsEmptyProps as SelectEmptyProps,
+  Option as SelectOption,
+  OnChange as SelectOnChange,
+  OnCreate as SelectOnCreate,
+  OnQueryChange as SelectOnQueryChange,
 } from './Select.types'
 export { useSelectExternal as useSelect } from './useSelectExternal'

package/src/components/Tag/Tag.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-
+import { screen } from '@testing-library/react'
 import Tag from './Tag'
 import generator from '../../tests/generator'
 import renderer from '../../tests/renderer'
@@ -12,7 +12,8 @@ describe('<Tag />', () => {
       children: generator.word(),
     }
 
-    const { getByText } = setup(props)
-    getByText(props.children)
+    setup(props)
+
+    screen.getByText(props.children)
   })
 })

package/src/components/TextField/TextField.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { screen } from '@testing-library/react'
 import TextField from './TextField'
 import renderer from '../../tests/renderer'
 
@@ -6,30 +7,30 @@ const setup = ({ ...overrides } = {}) => renderer(<TextField {...overrides} />).
 
 describe('<TextField />', () => {
   it('renders correctly', () => {
-    const { getByTestId } = setup({})
+    setup({})
 
-    getByTestId('input')
+    screen.getByTestId('input')
   })
 
   it('renders type="text" by default', () => {
-    const { getByTestId } = setup({})
+    setup({})
 
-    expect(getByTestId('input')).toHaveAttribute('type', 'text')
+    expect(screen.getByTestId('input')).toHaveAttribute('type', 'text')
   })
 
   it('renders type="password" correctly', () => {
-    const { getByTestId } = setup({
+    setup({
       type: 'password',
     })
 
-    expect(getByTestId('input')).toHaveAttribute('type', 'password')
+    expect(screen.getByTestId('input')).toHaveAttribute('type', 'password')
   })
 
   it('renders type="number" correctly', () => {
-    const { getByTestId } = setup({
+    setup({
       type: 'number',
     })
 
-    expect(getByTestId('input')).toHaveAttribute('type', 'number')
+    expect(screen.getByTestId('input')).toHaveAttribute('type', 'number')
   })
 })

package/src/components/Textarea/Textarea.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { screen } from '@testing-library/react'
 import Textarea from './Textarea'
 import renderer from '../../tests/renderer'
 
@@ -6,8 +7,8 @@ const setup = ({ ...overrides } = {}) => renderer(<Textarea {...overrides} />).r
 
 describe('<Textarea />', () => {
   it('renders correctly', () => {
-    const { getByTestId } = setup({})
+    setup({})
 
-    getByTestId('textarea')
+    screen.getByTestId('textarea')
   })
 })

package/src/hooks/useHeightExpansionToggler/useHeightExpansionToggler.test.tsx

@@ -1,7 +1,6 @@
-import { act, waitFor } from '@testing-library/react'
 import React, { useRef, useState } from 'react'
 
-import renderer, { screen, fire, user } from '../../tests/renderer'
+import renderer, { screen, user } from '../../tests/renderer'
 
 import useHeightExpansionToggler from './useHeightExpansionToggler'
 
@@ -47,9 +46,8 @@ describe('useHeightExpansionToggler', () => {
     expect(screen.getByTestId('container')).toHaveStyle('height: auto;')
 
     /* Add +1 Node */
-    act(() => {
-      user.click(screen.getByRole('button', { name: 'add item' }))
-    })
+
+    user.click(screen.getByRole('button', { name: 'add item' }))
 
     /* Nothing should change */
     expect(screen.getByTestId('expanded')).toHaveTextContent('false')
@@ -58,34 +56,28 @@ describe('useHeightExpansionToggler', () => {
     expect(screen.getByTestId('container')).toHaveStyle('height: 0px;')
 
     /* Expand it */
-    await act(async () => {
-      fire.click(screen.getByRole('button', { name: 'toggle' }))
+    user.click(screen.getByRole('button', { name: 'toggle' }))
 
-      /* It should get expanded */
-      await waitFor(() => screen.findByText('expanded: true'))
-    })
+    /* It should get expanded */
+    await screen.findByText('expanded: true')
 
     /* Height should be of 1 Node */
     expect(screen.getByTestId('container')).toHaveStyle(`height: ${getFakeHeight(1)}px;`)
 
     /* We add +1 Node */
-    await act(async () => {
-      user.click(screen.getByRole('button', { name: 'add item' }))
+    user.click(screen.getByRole('button', { name: 'add item' }))
 
-      /* A child must appear in the DOM */
-      await waitFor(() => screen.findByText('1'))
-    })
+    /* A child must appear in the DOM */
+    expect(await screen.findAllByText('1')).toHaveLength(2)
 
     /* Height should be of 2 Nodes */
     expect(screen.getByTestId('container')).toHaveStyle(`height: ${getFakeHeight(2)}px;`)
 
     /* Collapse it */
-    await act(async () => {
-      fire.click(screen.getByRole('button', { name: 'toggle' }))
+    user.click(screen.getByRole('button', { name: 'toggle' }))
 
-      /* It should get collapsed */
-      await waitFor(() => screen.findByText('expanded: false'))
-    })
+    /* It should get collapsed */
+    await screen.findByText('expanded: false')
 
     /* Height should be zero */
     expect(screen.getByTestId('container')).toHaveStyle('height: 0px;')