@telus-uds/components-base 1.26.0 → 1.28.0

package/__tests17__/utils/useSpacingScale.test.jsx

@@ -1,273 +0,0 @@
-import React from 'react'
-import { renderHook } from '@testing-library/react-hooks'
-import { useSpacingScale } from '../../src/utils'
-import Theme from '../../__fixtures__/Theme'
-import Viewport from '../../__fixtures__/Viewport'
-
-describe('useSpacingScale', () => {
-  // values from testTheme.js
-  const expectedDefaultScale = [0, 4, 8, 16, 24, 32, 36]
-  const expectedCompactScale = [0, 2, 4, 6, 8, 10, 12]
-  const expectedResponsiveScale = {
-    xs: [0, 1, 2, 3, 4, 5, 6],
-    sm: [0, 3, 4, 5, 6, 7, 8],
-    md: [0, 3, 4, 5, 6, 7, 8],
-    lg: [0, 7, 8, 9, 10, 11, 12],
-    xl: [0, 7, 8, 9, 10, 11, 12]
-  }
-
-  const wrapper = ({ children, viewport }) => (
-    <Viewport viewport={viewport}>
-      <Theme>{children}</Theme>
-    </Viewport>
-  )
-
-  it.each(expectedDefaultScale.map((item, index) => [item, index]))(
-    'returns the expected size index %# from the theme spacing scale',
-    (expectedSize, index) => {
-      const { result } = renderHook(() => useSpacingScale(index), {
-        wrapper
-      })
-      expect(result.current).toBe(expectedSize)
-    }
-  )
-  it.each(expectedCompactScale.map((item, index) => [item, index]))(
-    'returns the expected size index %# from the theme spacing scale in a variant',
-    (expectedSize, index) => {
-      const { result } = renderHook(
-        () => useSpacingScale({ space: index, options: { variant: { compact: true } } }),
-        {
-          wrapper
-        }
-      )
-      expect(result.current).toBe(expectedSize)
-    }
-  )
-  it.each(Object.entries(expectedResponsiveScale))(
-    'returns appropriate sizes from a responsive theme variant at %p viewport',
-    (viewport, expectedValues) => {
-      const { result, rerender } = renderHook(({ spacingValue }) => useSpacingScale(spacingValue), {
-        wrapper
-      })
-      expectedValues.forEach((expectedSize, index) => {
-        rerender({
-          viewport,
-          spacingValue: { space: index, options: { variant: { responsive: true } } }
-        })
-        expect(result.current).toBe(expectedSize)
-      })
-    }
-  )
-
-  it('returns the 0 index when passed a nullish spacing value', () => {
-    const { result, rerender } = renderHook((spacingValue) => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    // implicit undefined
-    expect(result.current).toBe(expectedDefaultScale[0])
-    // explicit undefined
-    rerender(undefined)
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender(null)
-    expect(result.current).toBe(expectedDefaultScale[0])
-
-    // confim this test isn't a false positive misuing rerender etc
-    rerender(1)
-    expect(result.current).toBe(expectedDefaultScale[1])
-  })
-  it('returns the 0 index when passed a nullish spacing value in a variant', () => {
-    const { result, rerender } = renderHook((spacingValue) => useSpacingScale(spacingValue), {
-      wrapper,
-      initialProps: { options: { variant: { compact: true } } }
-    })
-    // implicit undefined
-    expect(result.current).toBe(expectedCompactScale[0])
-    // explicit undefined
-    rerender({ space: undefined, options: { variant: { compact: true } } })
-    expect(result.current).toBe(expectedCompactScale[0])
-    rerender({ space: null, options: { variant: { compact: true } } })
-    expect(result.current).toBe(expectedCompactScale[0])
-
-    // confim this test isn't a false positive misuing rerender etc
-    rerender({ space: 1, options: { variant: { compact: true } } })
-    expect(result.current).toBe(expectedCompactScale[1])
-  })
-
-  it('returns the highest index when passed an out-of-bounds spacing index', () => {
-    const { result } = renderHook(() => useSpacingScale(99), {
-      wrapper
-    })
-    expect(result.current).toBe(expectedDefaultScale[expectedDefaultScale.length - 1])
-  })
-  it('returns the highest index when passed an out-of-bounds spacing index in a variant', () => {
-    const { result } = renderHook(
-      () => useSpacingScale({ space: 99, options: { variant: { compact: true } } }),
-      {
-        wrapper
-      }
-    )
-    expect(result.current).toBe(expectedCompactScale[expectedDefaultScale.length - 1])
-  })
-
-  it('returns viewport indexes that explicitly match current viewport', () => {
-    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[2])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[4])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[5])
-  })
-  it('returns viewport indexes that explicitly match current viewport in a variant', () => {
-    const spacingValue = {
-      xs: 1,
-      sm: 2,
-      md: 3,
-      lg: 4,
-      xl: 5,
-      options: { variant: { compact: true } }
-    }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedCompactScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[2])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[4])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[5])
-  })
-
-  it('returns viewport indexes that implicitly match current viewport', () => {
-    const spacingValue = { xs: 1, md: 3 }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[1])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-  })
-  it('returns viewport indexes that implicitly match current viewport in a variant', () => {
-    const spacingValue = { xs: 1, md: 3, options: { variant: { compact: true } } }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedCompactScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[1])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-  })
-
-  it('chooses smallest provided viewport index if viewport is unavailable', () => {
-    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
-    const { result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: null, spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[1])
-  })
-  it('chooses 0 index if current viewport matches no provided index', () => {
-    const spacingValue = { lg: 4 }
-    const { result, rerender } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[4])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[4])
-  })
-
-  it('subtracts a provided value from a spacing scale value', () => {
-    const spacingValue = { viewport: 'xs', space: 2, options: { subtract: 3 } }
-    const { result } = renderHook(() => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    expect(result.current).toBe(expectedDefaultScale[2] - 3)
-  })
-  it('subtracts a provided value from a spacing scale value in a variant', () => {
-    const spacingValue = {
-      space: 4,
-      options: { subtract: 3, variant: { compact: true } }
-    }
-    const { result } = renderHook(() => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    expect(result.current).toBe(expectedCompactScale[4] - 3)
-  })
-  it('returns 0 if a subtraction would result in a negative number', () => {
-    const spacingValue = { space: 2, options: { subtract: 999 } }
-    const { result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { spacingValue }
-    })
-    expect(result.current).toBe(0)
-  })
-
-  it('gives an exact amount if `size` option is passed', () => {
-    const size = 123456
-    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, options: { size } }
-    const compactSpacingValue = { ...spacingValue, options: { size, variant: { compact: true } } }
-    const { result, rerender } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'xs', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'sm', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'md', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'lg', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'xl', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-  })
-  it('subtracts from size if `subtract` and `size` options are provided', () => {
-    const size = 123456
-    const subtract = 12345
-    const spacingValue = { options: { size, subtract } }
-    const { result } = renderHook(() => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    expect(result.current).toBe(size - subtract)
-  })
-})

package/__tests17__/utils/useUniqueId.test.js

@@ -1,31 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-import useUniqueId from '../../lib/utils/useUniqueId'
-
-describe('useUniqueId hook', () => {
-  it('returns the same id for each re-render, but a different id for a new instance', () => {
-    const { result, rerender } = renderHook(() => useUniqueId('prefix'))
-
-    expect(result.current).toBe('prefix-1')
-
-    rerender()
-
-    expect(result.current).toBe('prefix-1')
-
-    // has to be done within the same test case, as we can't ensure order in which tests are being run in parallel
-    const { result: result2, rerender: rerender2 } = renderHook(() => useUniqueId('prefix'))
-
-    expect(result.current).toBe('prefix-1')
-    expect(result2.current).toBe('prefix-2')
-
-    // ensure that instances' rerendering doesn't affect one another
-    rerender2()
-
-    expect(result.current).toBe('prefix-1')
-    expect(result2.current).toBe('prefix-2')
-
-    rerender()
-
-    expect(result.current).toBe('prefix-1')
-    expect(result2.current).toBe('prefix-2')
-  })
-})