@loadsmart/loadsmart-ui 5.12.0 → 5.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.12.0",
+  "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

@@ -640,8 +640,8 @@ describe('Select', () => {
 
         await waitFor(() => {
           expect(screen.getByLabelText(availableOption)).toBeInTheDocument()
-          expect(screen.getByText(`Add "${query}"`)).toBeInTheDocument()
         })
+        expect(screen.getByText(`Add "${query}"`)).toBeInTheDocument()
       }
     )
 
@@ -813,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() })
       }
     )
 
@@ -940,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/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;')