@telus-uds/components-base 1.14.1 → 1.15.0

package/__tests17__/utils/useSpacingScale.test.jsx

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

@@ -0,0 +1,31 @@
+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')
+  })
+})