@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/testing/SelectEvent/SelectEvent.test.tsx

@@ -1,192 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-
-import {
-  FRUITS,
-  USERS,
-  useSyncFruits,
-  useAsyncUsers,
-} from '../../components/Select/Select.fixtures'
-import generator from '../../tests/generator'
-import renderer, { screen } from '../../tests/renderer'
-import Select from '../../components/Select/Select'
-
-import selectEvent from './SelectEvent'
-
-import type { SelectProps, Option, GenericOption } from '../../components/Select/Select.types'
-
-const OPTIONS = [
-  ...FRUITS.map((fruit) => ({
-    value: useSyncFruits().adapter.getKey(fruit),
-    label: useSyncFruits().adapter.getLabel(fruit),
-  })),
-  ...USERS.map((user) => ({
-    value: useAsyncUsers().adapter.getKey(user),
-    label: useAsyncUsers().adapter.getLabel(user),
-  })),
-]
-
-function Experiment(overrides: Partial<SelectProps>) {
-  return (
-    <div>
-      <label htmlFor="select-something">Select something</label>
-      <Select
-        id="select-something"
-        name="select-something"
-        datasources={[useSyncFruits, useAsyncUsers]}
-        {...overrides}
-      />
-    </div>
-  )
-}
-
-describe('SelectEvent', () => {
-  const setup = (overrides: Partial<SelectProps>) =>
-    renderer(<Experiment {...overrides} />).render()
-
-  describe('Single selection', () => {
-    function shouldHaveDisplayValue(input: HTMLElement, selectedValue: string) {
-      expect(input).toHaveDisplayValue(selectedValue)
-    }
-
-    async function shouldHaveSelectedOption(input: HTMLElement, option: GenericOption) {
-      const selectedOptions = await selectEvent.getSelectedOptions(input)
-      expect(selectedOptions).toHaveLength(1)
-      expect(selectedOptions[0]).toHaveTextContent(option.label)
-    }
-
-    it('initializes with a selected item', async () => {
-      const option = generator.pick(OPTIONS) as GenericOption
-
-      setup({
-        value: option as Option,
-      })
-
-      const input = screen.getByLabelText('Select something')
-      expect(input).toHaveDisplayValue(option.label)
-
-      const selectedOptions = await selectEvent.getSelectedOptions(input)
-      expect(selectedOptions).toHaveLength(1)
-      expect(selectedOptions[0]).toHaveTextContent(option.label)
-    })
-
-    it('updates selected item after the initially selected item changes', async () => {
-      const initialOption = generator.pick(OPTIONS) as GenericOption
-
-      const props = {
-        value: initialOption as Option,
-      }
-
-      const { rerender } = render(<Experiment {...props} />)
-
-      expect(screen.getByLabelText('Select something')).toHaveDisplayValue(initialOption.label)
-
-      let selectedOptions = await selectEvent.getSelectedOptions(
-        screen.getByLabelText('Select something')
-      )
-      expect(selectedOptions).toHaveLength(1)
-      expect(selectedOptions[0]).toHaveTextContent(initialOption.label)
-
-      // Update the selected item via prop change
-
-      const newOption = generator.pick(OPTIONS) as GenericOption
-      const newProps = {
-        value: newOption as Option,
-      }
-
-      rerender(<Experiment {...newProps} />)
-
-      expect(screen.getByLabelText('Select something')).toHaveDisplayValue(newOption.label)
-
-      selectedOptions = await selectEvent.getSelectedOptions(
-        screen.getByLabelText('Select something')
-      )
-      expect(selectedOptions).toHaveLength(1)
-      expect(selectedOptions[0]).toHaveTextContent(newOption.label)
-    })
-
-    it('selects the clicked item', async () => {
-      const props = {
-        onChange: jest.fn(),
-      }
-      setup(props)
-      const option = generator.pick(OPTIONS) as GenericOption
-
-      const input = screen.getByLabelText('Select something')
-      await selectEvent.select(option.label, input)
-
-      shouldHaveDisplayValue(input, option.label)
-      await shouldHaveSelectedOption(input, option)
-    })
-
-    it('selects the option when a RegExp is provided', async () => {
-      const props = {
-        onChange: jest.fn(),
-      }
-      setup(props)
-      const option = generator.pick(OPTIONS) as GenericOption
-      const optionRegexp = new RegExp(option.label, 'i')
-
-      const input = screen.getByLabelText('Select something')
-      await selectEvent.select(optionRegexp, input)
-
-      shouldHaveDisplayValue(input, option.label)
-      await shouldHaveSelectedOption(input, option)
-    })
-
-    it('unselects the clicked item', async () => {
-      setup({})
-
-      const option = generator.pick(OPTIONS) as GenericOption
-      const input = screen.getByLabelText('Select something')
-
-      // first we select
-      await selectEvent.select(option.label, input)
-
-      shouldHaveDisplayValue(input, option.label)
-      await shouldHaveSelectedOption(input, option)
-
-      // then we unselect
-      await selectEvent.unselect(option.label, input)
-      shouldHaveDisplayValue(input, '')
-
-      const selectedOptions = await selectEvent.getSelectedOptions(input)
-      expect(selectedOptions).toHaveLength(0)
-    })
-
-    it('clears initial selection', async () => {
-      const option = generator.pick(OPTIONS) as GenericOption
-
-      setup({
-        value: option as Option,
-      })
-
-      const input = screen.getByLabelText('Select something')
-      expect(input).toHaveDisplayValue(option.label)
-
-      let selectedOptions = await selectEvent.getSelectedOptions(
-        screen.getByLabelText('Select something')
-      )
-      expect(selectedOptions).toHaveLength(1)
-      expect(selectedOptions[0]).toHaveTextContent(option.label)
-
-      await selectEvent.clear(input)
-
-      expect(input).toHaveDisplayValue('')
-
-      selectedOptions = await selectEvent.getSelectedOptions(input)
-      expect(selectedOptions).toHaveLength(0)
-    })
-
-    it('searches a given item', async () => {
-      setup({})
-
-      const option = generator.pick(OPTIONS) as GenericOption
-      const input = screen.getByLabelText('Select something')
-
-      await selectEvent.search(option.label, input)
-      const visibleOptions = await selectEvent.getOptions(input)
-      expect(visibleOptions.length).toBeGreaterThanOrEqual(1)
-    })
-  })
-})

package/src/testing/SelectEvent/SelectEvent.ts

@@ -1,264 +0,0 @@
-import { act, waitFor, within, waitForElementToBeRemoved, fireEvent } from '@testing-library/react'
-
-// based on https://github.com/romgain/react-select-event/blob/master/src/index.ts
-
-// find the select container from its input field 🤷
-function getSelectContainer(input: HTMLElement): HTMLElement {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return input.parentNode!.parentNode!.parentNode as HTMLElement
-}
-
-/**
- * Please, make sure to call expand before trying to get the menu container
- */
-function getSelectMenu(input: HTMLElement): HTMLElement {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return input.parentNode!.parentNode!.nextSibling as HTMLElement
-}
-
-function getSelectTriggerHandle(input: HTMLElement): HTMLElement {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  return input.parentNode!.nextSibling!.nextSibling as HTMLElement
-}
-
-function getSelectSearchContainer(input: HTMLElement): HTMLElement {
-  return input.parentNode as HTMLElement
-}
-
-function isSelectMenuExpanded(input: HTMLElement): boolean {
-  const selectContainer = getSelectContainer(input)
-
-  /**
-   * Once the select is expanded, we have the following structure:
-   * +-------------+
-   * | Close button (visually hidden)
-   * +-------------+
-   * | DropdownTrigger
-   * +-------------+
-   * | Popover
-   * +-------------+
-   *
-   * This, if the container has 3 children, we assume the menu is expanded
-   */
-  return selectContainer.children.length === 3
-}
-
-/**
- * This is needed because some datasources might be asynchronous.
- * To ensure that the data they retrieve will be available, we wait for the
- * querying phase to finish.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
- */
-async function waitForPendingQuery(input: HTMLElement) {
-  const searchContainer = getSelectSearchContainer(input)
-
-  if (!within(searchContainer).queryByTestId('select-trigger-loading')) {
-    return
-  }
-
-  await waitForElementToBeRemoved(
-    () => within(searchContainer).queryByTestId('select-trigger-loading'),
-    { timeout: 2500 }
-  )
-}
-
-/**
- * Expand the `Select` menu, if it not already expanded.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
- * @returns {Promise<void>}
- */
-async function expand(input: HTMLElement): Promise<void> {
-  await waitForPendingQuery(input)
-
-  if (isSelectMenuExpanded(input)) {
-    return
-  }
-
-  const triggerHandle = getSelectTriggerHandle(input)
-
-  await waitFor(() => {
-    expect(triggerHandle).toBeEnabled()
-  })
-
-  /**
-   * Using act and a manually dispatched event so we can account for the
-   * state changes that happen when the search input is clicked.
-   * This is mainly related to the `handleEvent` from the `useClickOutside` hook.
-   */
-  act(() => {
-    input.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-  })
-
-  await waitFor(() => {
-    expect(within(getSelectContainer(input)).getByRole('listbox')).toBeInTheDocument()
-  })
-}
-
-/**
- * Collapse the `Select` menu, if it not already collapsed.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
- * @returns {Promise<void>}
- */
-async function collapse(input: HTMLElement): Promise<void> {
-  if (!isSelectMenuExpanded(input)) {
-    return
-  }
-
-  const triggerHandle = getSelectTriggerHandle(input)
-
-  fireEvent.click(triggerHandle)
-
-  await waitFor(() => {
-    expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()
-  })
-}
-
-/**
- * Select the provided option(s), if they are present in the menu.
- * Notice that we programatically expand the `Select` menu before select the item
- * @param {string | RegExp} option - Label for the option to be selected.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
- * @returns {Promise<void>}
- */
-async function select(option: string | RegExp, input: HTMLElement): Promise<void> {
-  await expand(input)
-
-  const menuContainer = getSelectMenu(input)
-
-  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') {
-    /**
-     * This is a replacement for the `userEvent.click`.
-     * We are adopting this approach to remove the peer dep to @testing-library/user-event for
-     * applications using this helper, so they are not tied to the same user-event as this library.
-     * It follows the same sequence of event stated in the documentation available at:
-     * https://testing-library.com/docs/guide-events/#interactions-vs-events
-     */
-    fireEvent.mouseDown(optionElement)
-
-    act(() => {
-      optionElement.focus()
-    })
-
-    fireEvent.mouseUp(optionElement)
-    fireEvent.click(optionElement)
-  }
-
-  // we collapse in the case the option was not clicked
-  await collapse(input)
-}
-
-/**
- * Unselect the provided option(s), if they are present in the menu AND are selected.
- * Notice that we programatically expand the `Select` menu before select the item
- * @param {string} option - Label for the option to be unselected.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
- * @returns {Promise<void>}
- */
-async function unselect(option: string, input: HTMLElement): Promise<void> {
-  await expand(input)
-
-  const menuContainer = getSelectMenu(input)
-
-  const optionElement = await within(menuContainer).findByLabelText(option)
-
-  // ensures that the option exists and IS selected
-  if (optionElement && optionElement.getAttribute('aria-selected') === 'true') {
-    fireEvent.click(optionElement)
-  }
-
-  // we collapse in the case the option was not clicked
-  await collapse(input)
-}
-
-/**
- * Clear the selection, if there are any options selected.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
- * @returns {Promise<void>}
- */
-async function clear(input: HTMLElement): Promise<void> {
-  await waitForPendingQuery(input)
-
-  const searchContainer = getSelectSearchContainer(input)
-
-  const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
-
-  if (clearButton) {
-    fireEvent.click(clearButton)
-  }
-}
-
-/**
- * Perform search based on the given `query`. It will fail if the option is not found.
- * @param {string} query - Search term.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
- * @returns {Promise<void>}
- */
-async function search(query: string, input: HTMLElement): Promise<void> {
-  fireEvent.change(input, {
-    target: { value: query },
-  })
-
-  await waitForPendingQuery(input)
-
-  const menuContainer = getSelectMenu(input)
-
-  await within(menuContainer).findAllByRole('option')
-}
-
-/**
- * Get options elements currently available in the `Select` menu.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
- * @returns {Promise<HTMLElement[]>}
- */
-async function getOptions(input: HTMLElement): Promise<HTMLElement[]> {
-  await expand(input)
-
-  const menuContainer = getSelectMenu(input)
-
-  const options = within(menuContainer).queryAllByRole('option')
-
-  await collapse(input)
-
-  return options
-}
-
-/**
- * Get options elements currently selected in the `Select` menu.
- * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
- * @returns {Promise<HTMLElement[]>}
- */
-async function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {
-  await expand(input)
-
-  const menuContainer = getSelectMenu(input)
-  let selectedOptions: HTMLElement[] = []
-
-  try {
-    selectedOptions = await within(menuContainer).findAllByRole('option', {
-      selected: true,
-    })
-  } catch (err) {
-    selectedOptions = []
-  }
-
-  await collapse(input)
-
-  return selectedOptions
-}
-
-export const selectEvent = {
-  select,
-  unselect,
-  clear,
-  search,
-  expand,
-  collapse,
-  getOptions,
-  getSelectedOptions,
-  isMenuExpanded: isSelectMenuExpanded,
-}
-
-export default selectEvent

package/src/testing/SelectEvent/index.ts

@@ -1 +0,0 @@
-export { default } from './SelectEvent'

package/src/testing/getInterpolatedStyles/getInterpolatedStyles.ts

@@ -1,25 +0,0 @@
-import type { Interpolation, ThemeProps } from 'styled-components'
-import { isFunction } from '@loadsmart/utils-function'
-
-import { Alice } from '../../theming/themes'
-import type { CustomTheme } from '../../theming'
-import toArray from 'utils/toolset/toArray'
-
-type ThemedInterpolation = Interpolation<ThemeProps<CustomTheme>>
-
-/**
- * Use this function to simulate the CSS that would be generated by styled-components
- * @param {Interpolation<ThemeProps<CustomTheme>>} styles - A `css` reference with interpolated styles
- * @returns {string} The final CSS
- */
-export default function getInterpolatedStyles(styles: ThemedInterpolation): string {
-  return toArray(styles)
-    .map((interpolation) => {
-      while (isFunction(interpolation)) {
-        interpolation = interpolation({ theme: Alice })
-      }
-
-      return interpolation
-    })
-    .join('')
-}

package/src/testing/getInterpolatedStyles/index.ts

@@ -1 +0,0 @@
-export { default, default as getInterpolatedStyles } from './getInterpolatedStyles'

package/src/testing/index.ts

@@ -1,6 +0,0 @@
-export { DatePickerEvent, DateRangePickerEvent } from './DatePickerEvent'
-export { default as DragDropFileEvent } from './DragDropFileEvent'
-export { default as SelectEvent } from './SelectEvent'
-
-export { default as getInterpolatedStyles } from './getInterpolatedStyles'
-export { default as renderWithDragDropFileProvider } from './renderWithDragDropFileProvider'

package/src/testing/renderWithDragDropFileProvider/index.ts

@@ -1 +0,0 @@
-export { default } from './renderWithDragDropFileProvider'

package/src/testing/renderWithDragDropFileProvider/renderWithDragDropFileProvider.tsx

@@ -1,28 +0,0 @@
-import React, { ReactNode } from 'react'
-import { render } from '@testing-library/react'
-import type { RenderResult } from '@testing-library/react'
-
-import type { DragDropFileContextValue } from '../../components/DragDropFile/types'
-import { DragDropFileContext } from '../../components/DragDropFile/DragDropFile.context'
-
-const defaultContextValueMock: DragDropFileContextValue = {
-  fileList: [],
-  onFilesAdded: jest.fn(),
-  onRetryUpload: jest.fn(),
-  onRemoveFile: jest.fn(),
-}
-
-const renderWithDragDropFileProvider = (
-  ui: ReactNode,
-  customContext?: Partial<DragDropFileContextValue>
-): RenderResult => {
-  const contextValue = { ...defaultContextValueMock, ...customContext }
-
-  const renderedUi = (children: ReactNode) => (
-    <DragDropFileContext.Provider value={contextValue}>{children}</DragDropFileContext.Provider>
-  )
-
-  return render(renderedUi(ui))
-}
-
-export default renderWithDragDropFileProvider

package/src/tests/generator.ts

@@ -1,127 +0,0 @@
-import Chance from 'chance'
-import { nanoid } from 'nanoid'
-
-const chance = new Chance()
-
-/**
- * Generates an array of `amount` (or  random) length, based on the given
- * template function.
- * The template function receives as named parameter the current `index`.
- * @param {Function} template Template function to generate one item
- * @param {number} amount Amount of items to be generated. If none is provide,
- * then a random amount is generated.
- * @returns {Array} Returns an array of lenght `amount`, with items
- * generated based on the provided `template`.
- */
-function generateArray<T>(
-  template: ({ index }: { index: number }) => T,
-  amount?: number
-): Array<T> {
-  const safeAmount = amount || chance.integer({ min: 5, max: 10 })
-
-  const data = []
-  for (let i = 0; i < safeAmount; i++) {
-    const item = template({ index: i })
-    data.push(item)
-  }
-
-  return data
-}
-
-function generatePick<T>(
-  array: Array<T>,
-  options?: { amount: number; allowRepeat?: boolean }
-): T | Array<T> {
-  const { amount = 1, allowRepeat = true } = options || {}
-
-  if (amount === 1) {
-    return chance.pickone(array)
-  }
-
-  let picked = chance.pickset(array, amount)
-
-  if (!allowRepeat) {
-    picked = Array.from(new Set(picked))
-  }
-
-  return picked
-}
-
-function generateDate(overrides: { month?: number; day?: number; year?: number } = {}): string {
-  const month = String(overrides.month ?? chance.natural({ min: 1, max: 12 })).padStart(2, '0')
-  const day = String(overrides.day ?? chance.natural({ min: 1, max: 28 })).padStart(2, '0')
-  const year = overrides.year ?? new Date().getFullYear()
-
-  return `${month}/${day}/${year}`
-}
-
-function generateTime(opts?: Chance.Options): string {
-  const hour = String(chance.hour({ twentyfour: true, ...opts })).padStart(2, '0')
-  const minute = String(chance.minute()).padStart(2, '0')
-
-  return `${hour}:${minute}`
-}
-
-function generateUsername(): string {
-  const name = chance.name()
-  return name.replace(/^\s+|\s+$/g, '').toLowerCase()
-}
-
-function generateID(): string {
-  return nanoid()
-}
-
-interface DataGenerator {
-  animal: () => string
-  array: <T>(template: ({ index }: { index: number }) => T, amount?: number) => Array<T>
-  boolean: () => boolean
-  company: () => string
-  date: () => string
-  float: (opts?: Chance.Options) => number
-  id: () => string
-  name: (opts?: Chance.Options) => string
-  natural: (opts?: Chance.Options) => number
-  paragraph: (opts?: Chance.Options) => string
-  /**
-   * @deprecated Use pickone or pickset
-   */
-  pick: <T>(array: Array<T>, options?: { amount: number; allowRepeat?: boolean }) => T | Array<T>
-  pickone<T>(arr: T[]): T
-  pickset<T>(arr: T[], count?: number): T[]
-  profession: () => string
-  sentence: (opts?: Chance.Options) => string
-  state: (opts?: Chance.Options) => string
-  time: (opts?: Chance.Options) => string
-  token: () => string
-  url: () => string
-  username: () => string
-  word: (opts?: Chance.Options) => string
-  dollar: () => string
-}
-
-const generators: DataGenerator = {
-  animal: chance.animal.bind(chance),
-  array: generateArray,
-  boolean: chance.bool.bind(chance),
-  company: chance.company.bind(chance),
-  date: generateDate,
-  float: chance.floating.bind(chance),
-  id: generateID,
-  name: chance.name.bind(chance),
-  natural: chance.natural.bind(chance),
-  paragraph: chance.paragraph.bind(chance),
-  pick: generatePick,
-  pickone: chance.pickone.bind(chance),
-  pickset: chance.pickset.bind(chance),
-  profession: chance.profession.bind(chance),
-  sentence: chance.sentence.bind(chance),
-  state: chance.state.bind(chance),
-  time: generateTime,
-  token: chance.animal.bind(chance),
-  url: chance.url.bind(chance),
-  username: generateUsername,
-  word: chance.word.bind(chance),
-  dollar: chance.dollar.bind(chance),
-}
-
-export default generators

package/src/tests/renderer.tsx

@@ -1,39 +0,0 @@
-import {
-  render,
-  fireEvent,
-  RenderOptions,
-  within,
-  waitFor,
-  waitForElementToBeRemoved,
-  act,
-  screen,
-  queries,
-} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-
-class Renderer {
-  result: React.ReactElement
-
-  constructor(children: React.ReactElement) {
-    this.result = children
-  }
-
-  render(options?: Omit<RenderOptions, 'queries'>) {
-    return render(this.result, options)
-  }
-}
-
-export default function customRenderer(children: React.ReactElement): Renderer {
-  return new Renderer(children)
-}
-
-export {
-  act,
-  fireEvent as fire,
-  queries,
-  screen,
-  userEvent as user,
-  waitFor,
-  waitForElementToBeRemoved,
-  within,
-}