@loadsmart/loadsmart-ui 5.10.1 → 5.11.1

package/src/hooks/useSelectable/SelectableStrategy.test.ts

@@ -1,4 +1,4 @@
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 import createSelectionStrategy from './SelectableStrategy'
 
 import type { Selectable, SelectableAdapter, SelectableKeyType } from './useSelectable.types'

package/src/hooks/useSelectable/useSelectable.test.ts

@@ -1,7 +1,7 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
 import { createSelectable } from './useSelectable'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 import type { Selectable, SelectableAdapter, SelectableKeyType } from './useSelectable.types'
 

package/src/styles/font.tsx

@@ -26,11 +26,11 @@ function fontStyle({
   transform = 'none',
 }: FontStyleOptions): FlattenInterpolation<ThemedProps> {
   return css`
-    font-family: ${getToken(family)};
-    font-size: ${getToken(size)};
+    color: ${getToken(color)};
     font-weight: ${getToken(weight)};
+    font-size: ${getToken(size)};
+    font-family: ${getToken(family)};
     line-height: ${getToken(height)};
-    color: ${getToken(color)};
     text-transform: ${transform};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

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

@@ -7,8 +7,8 @@ import {
   useSyncFruits,
   useAsyncUsers,
 } from '../../components/Select/Select.fixtures'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 import Select from '../../components/Select/Select'
 
 import selectEvent from './SelectEvent'

package/src/testing/SelectEvent/SelectEvent.ts

@@ -1,16 +1,56 @@
 /* eslint-disable */
-import { fireEvent, queries, waitFor, within } from '@testing-library/dom'
+import {
+  fireEvent,
+  queries,
+  waitFor,
+  within,
+  waitForElementToBeRemoved,
+} from '@testing-library/dom'
 import { act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 // based on https://github.com/romgain/react-select-event/blob/master/src/index.ts
 
-// find the react-select container from its input field 🤷
-function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
+// 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 {
+  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 hiddren)
+   * +-------------+
+   * | 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
@@ -18,15 +58,16 @@ function getReactSelectContainerFromInput(input: HTMLElement): HTMLElement {
  * @param {HTMLElement} input - You can refer to this element by the label you applied to the `Select`.
  */
 async function waitForPendingQuery(input: HTMLElement) {
-  const selectContainer = getReactSelectContainerFromInput(input)
+  const searchContainer = getSelectSearchContainer(input)
 
-  await waitFor(() => {
-    expect(queries.queryByTestId(selectContainer, 'select-trigger-loading')).not.toBeInTheDocument()
-  })
+  if (!queries.queryByTestId(searchContainer, 'select-trigger-loading')) {
+    return
+  }
 
-  await waitFor(() => {
-    expect(queries.queryByText(selectContainer, 'Loading...')).not.toBeInTheDocument()
-  })
+  await waitForElementToBeRemoved(
+    () => queries.queryByTestId(searchContainer, 'select-trigger-loading'),
+    { timeout: 2500 }
+  )
 }
 
 /**
@@ -35,21 +76,23 @@ async function waitForPendingQuery(input: HTMLElement) {
  * @returns {Promise<void>}
  */
 async function expand(input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
+  await waitForPendingQuery(input)
 
-  // if listbox is rendered, then the select is already expanded
-  if (queries.queryByRole(selectContainer, 'listbox')) {
+  if (isSelectMenuExpanded(input)) {
     return
   }
 
+  const triggerHandle = getSelectTriggerHandle(input)
+
   await waitFor(() => {
-    expect(within(selectContainer).getByTestId('select-trigger-handle')).toBeEnabled()
+    expect(triggerHandle).toBeEnabled()
   })
 
   await act(async () => {
-    userEvent.click(within(selectContainer).getByTestId('select-trigger-handle'))
-
-    expect(await queries.findByRole(selectContainer, 'listbox')).toBeInTheDocument()
+    userEvent.click(triggerHandle)
+    await waitFor(() => {
+      expect(isSelectMenuExpanded(input)).toBe(true)
+    })
   })
 }
 
@@ -59,18 +102,17 @@ async function expand(input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function collapse(input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
-  // if listbox is not rendered, then the select is already collapsed
-  if (!queries.queryByRole(selectContainer, 'listbox')) {
+  if (!isSelectMenuExpanded(input)) {
     return
   }
 
+  const triggerHandle = getSelectTriggerHandle(input)
+
   await act(async () => {
-    userEvent.click(within(selectContainer).getByTestId('select-trigger-handle'))
+    userEvent.click(triggerHandle)
 
     await waitFor(() => {
-      expect(queries.queryByRole(selectContainer, 'listbox')).not.toBeInTheDocument()
+      expect(isSelectMenuExpanded(input)).toBe(false)
     })
   })
 }
@@ -83,13 +125,12 @@ async function collapse(input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function select(option: string, input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
-  await waitForPendingQuery(input)
   await expand(input)
 
+  const menuContainer = getSelectMenu(input)
+
   await act(async () => {
-    const optionElement = await queries.findByLabelText(selectContainer, option)
+    const optionElement = await queries.findByLabelText(menuContainer, option)
 
     // click the option if exists; Select currently closes when an item is clicked.
     if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {
@@ -109,13 +150,12 @@ async function select(option: string, input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function unselect(option: string, input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
-  await waitForPendingQuery(input)
   await expand(input)
 
+  const menuContainer = getSelectMenu(input)
+
   await act(async () => {
-    const optionElement = await queries.findByLabelText(selectContainer, option)
+    const optionElement = await queries.findByLabelText(menuContainer, option)
 
     // ensures that the option exists and IS selected
     if (optionElement && optionElement.getAttribute('aria-selected') == 'true') {
@@ -133,12 +173,12 @@ async function unselect(option: string, input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function clear(input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
   await waitForPendingQuery(input)
 
+  const searchContainer = getSelectSearchContainer(input)
+
   await act(async () => {
-    const clearButton = within(selectContainer).getByTestId('select-trigger-clear')
+    const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
 
     if (clearButton) {
       userEvent.click(clearButton)
@@ -153,7 +193,7 @@ async function clear(input: HTMLElement): Promise<void> {
  * @returns {Promise<void>}
  */
 async function search(query: string, input: HTMLElement): Promise<void> {
-  const selectContainer = getReactSelectContainerFromInput(input)
+  const selectContainer = getSelectContainer(input)
 
   await act(async () => {
     fireEvent.change(input, { target: { value: query } })
@@ -168,14 +208,14 @@ async function search(query: string, input: HTMLElement): Promise<void> {
  * @returns {Promise<HTMLElement[]>}
  */
 async function getOptions(input: HTMLElement): Promise<HTMLElement[]> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-
-  await waitForPendingQuery(input)
   await expand(input)
-  const selectedOptions = queries.queryAllByRole(selectContainer, 'option')
+
+  const menuContainer = getSelectMenu(input)
+
+  const options = queries.queryAllByRole(menuContainer, 'option')
   await collapse(input)
 
-  return selectedOptions
+  return options
 }
 
 /**
@@ -184,14 +224,15 @@ async function getOptions(input: HTMLElement): Promise<HTMLElement[]> {
  * @returns {Promise<HTMLElement[]>}
  */
 async function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {
-  const selectContainer = getReactSelectContainerFromInput(input)
-  let selectedOptions: HTMLElement[] = []
-
-  await waitForPendingQuery(input)
   await expand(input)
 
+  const menuContainer = getSelectMenu(input)
+  let selectedOptions: HTMLElement[] = []
+
   try {
-    selectedOptions = await queries.findAllByRole(selectContainer, 'option', { selected: true })
+    selectedOptions = await queries.findAllByRole(menuContainer, 'option', {
+      selected: true,
+    })
   } catch (err) {
     selectedOptions = []
   }
@@ -210,6 +251,7 @@ export const selectEvent = {
   collapse,
   getOptions,
   getSelectedOptions,
+  isMenuExpanded: isSelectMenuExpanded,
 }
 
 export default selectEvent

package/src/tests/generator.ts

@@ -0,0 +1,127 @@
+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

@@ -0,0 +1,39 @@
+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,
+}

package/src/tools/conditional.test.ts

@@ -1,5 +1,5 @@
 import conditional, { whenProps } from './conditional'
-import generator from '../../tests/generator'
+import generator from '../tests/generator'
 
 describe('conditional', () => {
   describe('whenProps', () => {

package/src/utils/toolset/interleave.test.ts

@@ -1,5 +1,5 @@
 import interleave from './interleave'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 function generateArray() {
   return generator.array(() => generator.natural({ min: 1, max: 999 }), 3)