@telus-uds/components-base 1.8.0 → 1.8.3

package/__tests__/utils/input.test.js

@@ -1,375 +0,0 @@
-import { renderHook, act } from '@testing-library/react-hooks'
-
-import { useInputValue, useMultipleInputValues } from '../../src/utils'
-
-/**
- * Tests for errors thrown on incorrect props usage
- */
-describe('useInputValue (props usage)', () => {
-  it('Throws if has `value` without `onChange`', () => {
-    const { result } = renderHook(() => useInputValue({ value: 'something' }))
-    expect(result.error).toBeTruthy()
-    expect(result.error.message).toMatch(/useInputValue.+value\b.+without.+onChange/m)
-  })
-  it("Doesn't throw if has `value` without `onChange` and is read only", () => {
-    const { result } = renderHook(() => useInputValue({ value: ['something'], readOnly: true }))
-    expect(result.error).toBeFalsy()
-  })
-  it('Throws if has both `value` and `initialValue`', () => {
-    const { result } = renderHook(() =>
-      useInputValue({ value: 'something', initialValue: 'something else', onChange: () => {} })
-    )
-    expect(result.error).toBeTruthy()
-    expect(result.error.message).toMatch(/both(?=.*initialValue\b)(?=.*value\b){2}/m)
-  })
-  it('Throws on switching from being externally controlled to managing its own state', async () => {
-    const { result, rerender } = renderHook(
-      ({ value }) =>
-        useInputValue({
-          value,
-          onChange: () => {}
-        }),
-      {
-        initialProps: { value: 'something' }
-      }
-    )
-    expect(result.error).toBeFalsy()
-
-    rerender({ values: undefined })
-    expect(result.error).toBeTruthy()
-    expect(result.error.message).toMatch(/stopped.+receiving.+value/)
-  })
-  it('Throws on switching from managing its own state to being externally controlled', () => {
-    const { result, rerender } = renderHook(
-      ({ value }) =>
-        useInputValue({
-          value,
-          onChange: () => {}
-        }),
-      {
-        initialProps: { value: undefined }
-      }
-    )
-    expect(result.error).toBeFalsy()
-
-    rerender({ value: 'something' })
-    expect(result.error).toBeTruthy()
-    expect(result.error.message).toMatch(/started.+receiving.+value/)
-  })
-})
-
-describe('useMultipleInputValues (props usage)', () => {
-  it('Throws pluralised error if has `values` without `onChange`', () => {
-    const { result } = renderHook(() => useMultipleInputValues({ values: ['something'] }))
-    expect(result.error).toBeTruthy()
-    expect(result.error.message).toMatch(/useMultipleInputValues.+values\b.+without.+onChange/m)
-  })
-  it('Throws pluralised error if has both `values` and `initialValues`', () => {
-    const { result } = renderHook(() =>
-      useMultipleInputValues({
-        values: ['something'],
-        initialValues: ['something else'],
-        onChange: () => {}
-      })
-    )
-    expect(result.error).toBeTruthy()
-    expect(result.error.message).toMatch(/both(?=.*initialValues\b)(?=.*values\b){2}/m)
-  })
-})
-
-/**
- * Tests for functionality in "uncontrolled" mode (managing own state)
- */
-describe('useInputValue (uncontrolled)', () => {
-  it('Changes currentValue when `setValue` is called', () => {
-    const { result } = renderHook(() => useInputValue({}))
-    expect(result.current.currentValue).toBe(undefined)
-
-    act(() => result.current.setValue('some value'))
-
-    expect(result.current.currentValue).toBe('some value')
-  })
-
-  it('Changes currentValue based on old value when `setValue` is passed a function', () => {
-    const { result } = renderHook(() => useInputValue({ initialValue: 1 }))
-    expect(result.current.currentValue).toBe(1)
-
-    act(() => result.current.setValue((oldValue) => oldValue + 1))
-    expect(result.current.currentValue).toBe(2)
-
-    act(() => result.current.setValue((oldValue) => oldValue + 2))
-    expect(result.current.currentValue).toBe(4)
-  })
-
-  it('Sets currentValue to initialValue if provided, which may be changed', () => {
-    const { result } = renderHook(() => useInputValue({ initialValue: 'first value' }))
-    expect(result.current.currentValue).toBe('first value')
-
-    act(() => result.current.setValue('second value'))
-
-    expect(result.current.currentValue).toBe('second value')
-  })
-
-  it('Resets to undefined on calling resetValue with no initialValue', async () => {
-    const { result } = renderHook(() => useInputValue())
-    expect(result.current.currentValue).toBe(undefined)
-
-    act(() => result.current.setValue('some value'))
-    expect(result.current.currentValue).toBe('some value')
-
-    act(() => result.current.resetValue())
-    expect(result.current.currentValue).toBe(undefined)
-  })
-
-  it('Resets to initialValue on calling resetValue', () => {
-    const { result } = renderHook(() => useInputValue({ initialValue: 'first value' }))
-    expect(result.current.currentValue).toBe('first value')
-
-    act(() => result.current.setValue('second value'))
-    expect(result.current.currentValue).toBe('second value')
-
-    act(() => result.current.resetValue())
-    expect(result.current.currentValue).toBe('first value')
-  })
-
-  it('Returns unchanged `currentValue` when `initialValue` prop changes', () => {
-    const { result, rerender } = renderHook(({ initialValue }) => useInputValue({ initialValue }), {
-      initialProps: {}
-    })
-    expect(result.current.currentValue).toBe(undefined)
-    rerender({ initialValue: 'first value' })
-
-    expect(result.current.currentValue).toBe(undefined)
-    rerender({ initialValue: 'second value' })
-
-    expect(result.current.currentValue).toBe(undefined)
-  })
-})
-
-describe('useMultipleInputValues (uncontrolled)', () => {
-  it('By default allows any number of values to be set with ToggleOneValue', () => {
-    const { result } = renderHook(() => useMultipleInputValues())
-    expect(result.current.currentValues).toEqual([])
-
-    act(() => result.current.toggleOneValue('some value'))
-    expect(result.current.currentValues).toEqual(['some value'])
-
-    act(() => result.current.toggleOneValue('another value'))
-    expect(result.current.currentValues).toEqual(['some value', 'another value'])
-
-    act(() => result.current.toggleOneValue('third value'))
-    expect(result.current.currentValues).toEqual(['some value', 'another value', 'third value'])
-  })
-
-  it('Untoggles already set values with ToggleOneValue', () => {
-    const { result } = renderHook(() => useMultipleInputValues())
-    expect(result.current.currentValues).toEqual([])
-
-    act(() => result.current.toggleOneValue('some value'))
-    expect(result.current.currentValues).toEqual(['some value'])
-
-    act(() => result.current.toggleOneValue('another value'))
-    expect(result.current.currentValues).toEqual(['some value', 'another value'])
-
-    act(() => result.current.toggleOneValue('some value'))
-    expect(result.current.currentValues).toEqual(['another value'])
-
-    act(() => result.current.toggleOneValue('another value'))
-    expect(result.current.currentValues).toEqual([])
-  })
-
-  it('Sets initialValues which may be untoggled like any value', () => {
-    const { result } = renderHook(() =>
-      useMultipleInputValues({ initialValues: ['some value', 'another value'] })
-    )
-    expect(result.current.currentValues).toEqual(['some value', 'another value'])
-
-    act(() => result.current.toggleOneValue('some value'))
-    expect(result.current.currentValues).toEqual(['another value'])
-
-    act(() => result.current.toggleOneValue('another value'))
-    expect(result.current.currentValues).toEqual([])
-  })
-
-  it('Enforces maxValues when toggling values', () => {
-    const { result } = renderHook(() =>
-      useMultipleInputValues({ initialValues: ['first value', 'second value'], maxValues: 3 })
-    )
-    act(() => result.current.toggleOneValue('third value'))
-    expect(result.current.currentValues).toEqual(['first value', 'second value', 'third value'])
-
-    act(() => result.current.toggleOneValue('fourth value'))
-    expect(result.current.currentValues).toEqual(['second value', 'third value', 'fourth value'])
-
-    act(() => result.current.toggleOneValue('third value'))
-    expect(result.current.currentValues).toEqual(['second value', 'fourth value'])
-
-    act(() => result.current.toggleOneValue('fifth value'))
-    expect(result.current.currentValues).toEqual(['second value', 'fourth value', 'fifth value'])
-
-    act(() => result.current.toggleOneValue('sixth value'))
-    expect(result.current.currentValues).toEqual(['fourth value', 'fifth value', 'sixth value'])
-  })
-
-  it('Enforces maxValues on applying initialValues', () => {
-    const { result } = renderHook(() =>
-      useMultipleInputValues({
-        initialValues: ['first value', 'second value', 'third value'],
-        maxValues: 2
-      })
-    )
-    expect(result.current.currentValues).toEqual(['second value', 'third value'])
-  })
-
-  it('Replaces values on calling setValues', () => {
-    const { result } = renderHook(() =>
-      useMultipleInputValues({
-        initialValues: ['first value', 'second value', 'third value']
-      })
-    )
-    act(() => result.current.setValues(['new value', 'another value']))
-    expect(result.current.currentValues).toEqual(['new value', 'another value'])
-  })
-
-  it('Replaces values based on old values on passing function to setValues', () => {
-    const { result } = renderHook(() =>
-      useMultipleInputValues({
-        initialValues: [1, 2, 3, 4]
-      })
-    )
-    act(() => result.current.setValues((oldValues) => oldValues.map((value) => value + 1)))
-    expect(result.current.currentValues).toEqual([2, 3, 4, 5])
-
-    act(() => result.current.setValues((oldValues) => oldValues.map((value) => value + 2)))
-    expect(result.current.currentValues).toEqual([4, 5, 6, 7])
-  })
-
-  it('Empties values on calling unsetValues', () => {
-    const { result } = renderHook(() =>
-      useMultipleInputValues({
-        initialValues: ['first value', 'second value', 'third value']
-      })
-    )
-    act(result.current.unsetValues)
-    expect(result.current.currentValues).toEqual([])
-  })
-})
-
-/**
- * Tests for functionality in "controlled" mode (state is managed by a parent)
- */
-describe('useInputValue (controlled)', () => {
-  it('Calls `onChange` instead of changing currentValue itself when `setValue` is called', () => {
-    const onChange = jest.fn((arg) => arg)
-    const { result } = renderHook(() => useInputValue({ value: 'first value', onChange }))
-    expect(result.current.currentValue).toBe('first value')
-    expect(onChange).toHaveBeenCalledTimes(0)
-
-    act(() => result.current.setValue('second value'))
-    expect(result.current.currentValue).toBe('first value')
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange.mock.calls[0][0]).toEqual('second value')
-  })
-
-  it('Calls `onChange` with result from old value when `setValue` is passed a function', () => {
-    const onChange = jest.fn((arg) => arg)
-    const { result } = renderHook(() => useInputValue({ value: 1, onChange }))
-    expect(result.current.currentValue).toBe(1)
-    expect(onChange).toHaveBeenCalledTimes(0)
-
-    act(() => result.current.setValue((oldValue) => oldValue + 1))
-    expect(result.current.currentValue).toBe(1)
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange.mock.calls[0][0]).toEqual(2)
-  })
-
-  it('Returns updated `currentValue` when non-undefined `value` prop changes', () => {
-    const onChange = () => {}
-    const { result, rerender } = renderHook(({ value }) => useInputValue({ value, onChange }), {
-      initialProps: { value: null }
-    })
-    expect(result.current.currentValue).toBe(null)
-
-    rerender({ value: 'first value' })
-    expect(result.current.currentValue).toBe('first value')
-
-    rerender({ value: 'second value' })
-    expect(result.current.currentValue).toBe('second value')
-  })
-
-  it('Calls onChange with first passed value on calling resetValues', async () => {
-    const onChange = jest.fn((arg) => arg)
-    const { result, rerender } = renderHook(({ value }) => useInputValue({ value, onChange }), {
-      initialProps: { value: 'first value' }
-    })
-    expect(result.current.currentValue).toBe('first value')
-
-    rerender({ value: 'second value' })
-    expect(result.current.currentValue).toBe('second value')
-
-    rerender({ value: 'third value' })
-    expect(result.current.currentValue).toBe('third value')
-
-    act(result.current.resetValue)
-    expect(onChange.mock.calls[0][0]).toBe('first value')
-  })
-})
-
-describe('useMultipleInputValues (controlled)', () => {
-  it('Enforces maxValues on applying value', () => {
-    const { result } = renderHook(() =>
-      useMultipleInputValues({
-        values: ['first value', 'second value', 'third value'],
-        onChange: () => {},
-        maxValues: 2
-      })
-    )
-    expect(result.current.currentValues).toEqual(['second value', 'third value'])
-  })
-
-  it('Enforces maxValues when setValues calls onChange', () => {
-    const onChange = jest.fn((arg) => arg)
-    const { result } = renderHook(() =>
-      useMultipleInputValues({
-        values: [],
-        onChange,
-        maxValues: 2
-      })
-    )
-    expect(onChange).toHaveBeenCalledTimes(0)
-    act(() => result.current.setValues(['first value', 'second value', 'third value']))
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange.mock.calls[0][0]).toEqual(['second value', 'third value'])
-  })
-
-  it('Calls `onChange` with results from old values when `setValues` is passed a function', () => {
-    const onChange = jest.fn((arg) => arg)
-    const { result } = renderHook(() => useMultipleInputValues({ values: [1, 2, 3, 4], onChange }))
-    expect(result.current.currentValues).toEqual([1, 2, 3, 4])
-    expect(onChange).toHaveBeenCalledTimes(0)
-
-    act(() => result.current.setValues((oldValues) => oldValues.map((value) => value + 1)))
-    expect(result.current.currentValues).toEqual([1, 2, 3, 4])
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange.mock.calls[0][0]).toEqual([2, 3, 4, 5])
-  })
-
-  it('Calls onChange with an empty array on calling unsetValues', () => {
-    const onChange = jest.fn((arg) => arg)
-    const { result, rerender } = renderHook(
-      ({ values }) => useMultipleInputValues({ values, onChange }),
-      {
-        initialProps: { values: ['first value'] }
-      }
-    )
-    expect(result.current.currentValues).toEqual(['first value'])
-
-    rerender({ values: ['second value'] })
-    expect(result.current.currentValues).toEqual(['second value'])
-    rerender({ values: ['third value'] })
-    expect(result.current.currentValues).toEqual(['third value'])
-
-    act(result.current.resetValues)
-    expect(onChange.mock.calls[0][0]).toEqual(['first value'])
-  })
-})

package/__tests__/utils/props.test.js

@@ -1,36 +0,0 @@
-import { selectSystemProps } from '../../src/utils'
-
-describe('selectSystemProps', () => {
-  it('reduces the selectors and the types correctly', () => {
-    const somePropNames = ['a', 'b']
-    const someTypes = { a: 1, b: 2 }
-    const someOtherPropNames = ['c', 'd']
-    const someOtherTypes = { c: 3, d: 4 }
-    const reducer = (props) => (acc, allowedPropName) =>
-      allowedPropName in props ? { ...acc, [allowedPropName]: props[allowedPropName] } : acc
-    const exampleProps = { a: 'a', c: 'c', e: 'e' }
-    const [selectProps, selectedPropTypes] = selectSystemProps([
-      { select: (props) => somePropNames.reduce(reducer(props), {}), types: someTypes },
-      { select: (props) => someOtherPropNames.reduce(reducer(props), {}), types: someOtherTypes }
-    ])
-    expect(selectProps(exampleProps)).toEqual({ a: 'a', c: 'c' })
-    expect(selectedPropTypes).toEqual({ a: 1, b: 2, c: 3, d: 4 })
-  })
-
-  it('returns selector throwing if one of the prop helpers does not have any valid prop selectors', () => {
-    const [selectProps] = selectSystemProps([{ types: {} }])
-    expect(() => {
-      selectProps({ someProp: 'some value' })
-    }).toThrowError(
-      "An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in"
-    )
-  })
-
-  it('throws if one of the prop helpers does not have any valid prop types selectors', () => {
-    expect(() => {
-      selectSystemProps([{ select: () => {} }])
-    }).toThrowError(
-      "An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in"
-    )
-  })
-})

package/__tests__/utils/semantics.test.jsx

@@ -1,34 +0,0 @@
-import { Platform } from 'react-native'
-
-import { getA11yPropsFromHtmlTag, supportedTags } from '../../src'
-
-// Note that currently all tests run as ios so only native logic can be tested here
-// until cross-platform tests are set up. See issue:
-// https://github.com/telus/universal-design-system/issues/319
-
-// As a temporary measure, there are tests on web-context HTML output for Box component
-// in @telus-uds/ds-allium which test the actual output when the tags are rendered.
-describe('getA11yPropsFromHtmlTag', () => {
-  it.each([
-    [1, 'h1'],
-    [2, 'h2'],
-    [3, 'h3'],
-    [4, 'h4'],
-    [5, 'h5'],
-    [6, 'h6']
-  ])('returns accessibility role "header" and level "%s" for header tag "%s"', (level, tag) => {
-    expect(getA11yPropsFromHtmlTag(tag)).toEqual({
-      accessibilityRole: 'header',
-      accessibilityLevel: level
-    })
-  })
-
-  if (Platform.OS !== 'web') {
-    it.each(supportedTags.map((tag) => [tag]))(
-      'responds to tag "%s" and an arbitrary nativeRole with given nativeRole override',
-      (tag) => {
-        expect(getA11yPropsFromHtmlTag(tag, 'link')).toEqual({ accessibilityRole: 'link' })
-      }
-    )
-  }
-})

package/__tests__/utils/useCopy.test.js

@@ -1,42 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-import useCopy from '../../lib/utils/useCopy'
-
-const dictionary = {
-  en: {
-    'translation key': 'english version'
-  },
-  fr: {
-    'translation key': 'french version'
-  }
-}
-
-describe('useCopy hook', () => {
-  it('returns a correct english translation', () => {
-    const { result } = renderHook(() => useCopy({ dictionary, copy: 'en' }))
-
-    const getCopy = result.current
-    expect(getCopy('translation key')).toBe('english version')
-  })
-
-  it('returns a correct french translation', () => {
-    const { result } = renderHook(() => useCopy({ dictionary, copy: 'fr' }))
-
-    const getCopy = result.current
-    expect(getCopy('translation key')).toBe('french version')
-  })
-
-  it('returns undefined when no translation is found', () => {
-    const { result } = renderHook(() => useCopy({ dictionary, copy: 'en' }))
-
-    const getCopy = result.current
-    expect(getCopy('non-existing key')).toBe(undefined)
-  })
-
-  it('allows for overriding the entire dictionary with a copy object (ignoring the dictionary argument)', () => {
-    const { result } = renderHook(() => useCopy({ dictionary, copy: dictionary.en }))
-
-    const getCopy = result.current
-    expect(getCopy('non-existing key')).toBe(undefined)
-    expect(getCopy('translation key')).toBe('english version')
-  })
-})

package/__tests__/utils/useResponsiveProp.test.jsx

@@ -1,202 +0,0 @@
-import React from 'react'
-import { renderHook } from '@testing-library/react-hooks'
-import useResponsiveProp from '../../src/utils/useResponsiveProp'
-import Viewport from '../../__fixtures__/Viewport'
-
-const wrapper = ({ children, viewport }) => <Viewport viewport={viewport}>{children}</Viewport>
-
-describe('useResponsiveProp', () => {
-  it('returns viewport indexes that explicitly match current value', () => {
-    const responsiveProp = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
-    const { rerender, result } = renderHook((args) => useResponsiveProp(args.responsiveProp), {
-      wrapper,
-      initialProps: { viewport: 'xs', responsiveProp }
-    })
-    expect(result.current).toBe(1)
-    rerender({ viewport: 'sm', responsiveProp })
-    expect(result.current).toBe(2)
-    rerender({ viewport: 'md', responsiveProp })
-    expect(result.current).toBe(3)
-    rerender({ viewport: 'lg', responsiveProp })
-    expect(result.current).toBe(4)
-    rerender({ viewport: 'xl', responsiveProp })
-    expect(result.current).toBe(5)
-  })
-
-  it('returns viewport indexes that implicitly match current value', () => {
-    const responsiveProp = { sm: 2, lg: 4 }
-    const { rerender, result } = renderHook((args) => useResponsiveProp(args.responsiveProp), {
-      wrapper,
-      initialProps: { viewport: 'xs', responsiveProp }
-    })
-    expect(result.current).toBe(undefined)
-    rerender({ viewport: 'sm', responsiveProp })
-    expect(result.current).toBe(2)
-    rerender({ viewport: 'md', responsiveProp })
-    expect(result.current).toBe(2)
-    rerender({ viewport: 'lg', responsiveProp })
-    expect(result.current).toBe(4)
-    rerender({ viewport: 'xl', responsiveProp })
-    expect(result.current).toBe(4)
-  })
-
-  it('returns provided defaultValue where there is no match', () => {
-    const responsiveProp = { md: 2, lg: 4 }
-    const defaultValue = 'some default value'
-    const { rerender, result } = renderHook(
-      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
-      {
-        wrapper,
-        initialProps: { viewport: 'xs', responsiveProp, defaultValue }
-      }
-    )
-    expect(result.current).toBe(defaultValue)
-    rerender({ viewport: 'sm', responsiveProp, defaultValue })
-    expect(result.current).toBe(defaultValue)
-    rerender({ viewport: 'md', responsiveProp, defaultValue })
-    expect(result.current).toBe(2)
-    rerender({ viewport: 'lg', responsiveProp, defaultValue })
-    expect(result.current).toBe(4)
-    rerender({ viewport: 'xl', responsiveProp, defaultValue })
-    expect(result.current).toBe(4)
-  })
-
-  it('applies falsy values appropriately (replacing `undefined` with default value)', () => {
-    const responsiveProp = { sm: '', md: null, lg: false, xl: undefined }
-    const defaultValue = 0
-    const { rerender, result } = renderHook(
-      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
-      {
-        wrapper,
-        initialProps: { viewport: 'xs', responsiveProp, defaultValue }
-      }
-    )
-    expect(result.current).toBe(0)
-    rerender({ viewport: 'sm', responsiveProp, defaultValue })
-    expect(result.current).toBe('')
-    rerender({ viewport: 'md', responsiveProp, defaultValue })
-    expect(result.current).toBe(null)
-    rerender({ viewport: 'lg', responsiveProp, defaultValue })
-    expect(result.current).toBe(false)
-    rerender({ viewport: 'xl', responsiveProp, defaultValue })
-    expect(result.current).toBe(false)
-  })
-
-  it('returns a non-object prop unchanged', () => {
-    const exactFn = () => {}
-    const defaultValue = 'some value'
-    const { rerender, result } = renderHook(
-      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
-      {
-        wrapper,
-        initialProps: { viewport: 'xs', responsiveProp: exactFn, defaultValue }
-      }
-    )
-    expect(result.current).toBe(exactFn)
-    rerender({ viewport: 'sm', responsiveProp: exactFn, defaultValue })
-    expect(result.current).toBe(exactFn)
-    rerender({ viewport: 'md', responsiveProp: exactFn, defaultValue })
-    expect(result.current).toBe(exactFn)
-    rerender({ viewport: 'lg', responsiveProp: exactFn, defaultValue })
-    expect(result.current).toBe(exactFn)
-    rerender({ viewport: 'xl', responsiveProp: exactFn, defaultValue })
-    expect(result.current).toBe(exactFn)
-  })
-
-  it('returns a falsy value including explicit null unchanged, default value if undefined', () => {
-    const defaultValue = 'some value'
-    const { rerender, result } = renderHook(
-      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
-      {
-        wrapper,
-        initialProps: { viewport: 'xs', responsiveProp: null, defaultValue }
-      }
-    )
-    expect(result.current).toBe(null)
-    rerender({ viewport: 'sm', responsiveProp: false, defaultValue })
-    expect(result.current).toBe(false)
-    rerender({ viewport: 'md', responsiveProp: 0, defaultValue })
-    expect(result.current).toBe(0)
-    rerender({ viewport: 'lg', responsiveProp: '', defaultValue })
-    expect(result.current).toBe('')
-    rerender({ viewport: 'xl', responsiveProp: undefined, defaultValue })
-    expect(result.current).toBe(defaultValue)
-  })
-
-  it('returns a non-responsive object unchanged, rather than the default value', () => {
-    const nonresponsiveProp = { a: 1, b: 2 }
-    const defaultValue = 'some value'
-    const { rerender, result } = renderHook(
-      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
-      {
-        wrapper,
-        initialProps: { viewport: 'xs', responsiveProp: nonresponsiveProp, defaultValue }
-      }
-    )
-    expect(result.current).toBe(nonresponsiveProp)
-    rerender({ viewport: 'sm', responsiveProp: nonresponsiveProp, defaultValue })
-    expect(result.current).toBe(nonresponsiveProp)
-    rerender({ viewport: 'md', responsiveProp: nonresponsiveProp, defaultValue })
-    expect(result.current).toBe(nonresponsiveProp)
-    rerender({ viewport: 'lg', responsiveProp: nonresponsiveProp, defaultValue })
-    expect(result.current).toBe(nonresponsiveProp)
-    rerender({ viewport: 'xl', responsiveProp: nonresponsiveProp, defaultValue })
-    expect(result.current).toBe(nonresponsiveProp)
-  })
-
-  it('returns the smallest viewport property if current viewport value is missing', () => {
-    const responsiveProp = { xl: 5, lg: 4, md: 3 }
-    const defaultValue = 'some value'
-    const { result } = renderHook(
-      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
-      {
-        initialProps: { responsiveProp, defaultValue }
-      }
-    )
-    expect(result.current).toBe(3)
-  })
-
-  it('treats a responsive prop with extra non-responsive properties as responsive', () => {
-    const responsiveProp = { md: 3, lg: 4, options: { a: 1, b: 2 } }
-    const defaultValue = 'some value'
-    const { rerender, result } = renderHook(
-      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
-      {
-        wrapper,
-        initialProps: { viewport: 'xs', responsiveProp, defaultValue }
-      }
-    )
-    expect(result.current).toBe(defaultValue)
-    rerender({ viewport: 'sm', responsiveProp, defaultValue })
-    expect(result.current).toBe(defaultValue)
-    rerender({ viewport: 'md', responsiveProp, defaultValue })
-    expect(result.current).toBe(3)
-    rerender({ viewport: 'lg', responsiveProp, defaultValue })
-    expect(result.current).toBe(4)
-    rerender({ viewport: 'xl', responsiveProp, defaultValue })
-    expect(result.current).toBe(4)
-  })
-
-  it('treats an object with only explicitly-undefined viewport properties as responsive', () => {
-    // For example, if some logic generates the values for each viewport of a responsive prop,
-    // and in a certain case, they happen to all come out as `undefined`.
-    const responsiveProp = { sm: undefined, lg: undefined, options: { a: 1, b: 2 } }
-    const defaultValue = 'some value'
-    const { rerender, result } = renderHook(
-      (args) => useResponsiveProp(args.responsiveProp, args.defaultValue),
-      {
-        wrapper,
-        initialProps: { viewport: 'xs', responsiveProp, defaultValue }
-      }
-    )
-    expect(result.current).toBe(defaultValue)
-    rerender({ viewport: 'sm', responsiveProp, defaultValue })
-    expect(result.current).toBe(defaultValue)
-    rerender({ viewport: 'md', responsiveProp, defaultValue })
-    expect(result.current).toBe(defaultValue)
-    rerender({ viewport: 'lg', responsiveProp, defaultValue })
-    expect(result.current).toBe(defaultValue)
-    rerender({ viewport: 'xl', responsiveProp, defaultValue })
-    expect(result.current).toBe(defaultValue)
-  })
-})