@telus-uds/components-base 0.0.2-prerelease.3 → 0.0.2-prerelease.7

package/__tests__/Tags/Tags.test.jsx

@@ -0,0 +1,328 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+import { toHaveTextContent } from '@testing-library/jest-native'
+
+import Theme from '../../__fixtures__/Theme'
+import Tags from '../../src/Tags'
+
+const items = [
+  { label: 'One', id: 'one', accessibilityLabel: 'Option one' },
+  { label: 'Two', id: 'two', accessibilityLabel: 'Option two' },
+  { label: 'Three', id: 'three', accessibilityLabel: 'Option three' },
+  { label: 'Four', id: 'four', accessibilityLabel: 'Option four' }
+]
+const checked = { checked: true }
+
+// expect().toHaveTextContent doesn't work on arrays, expect().toContain etc doesn't match elements
+const containsText = (queryResult, text) =>
+  queryResult.some((testInstance) => toHaveTextContent(testInstance, text).pass)
+
+describe('Tags', () => {
+  // eslint-disable-next-line no-console
+  const consoleError = console.error
+  beforeEach(() => {
+    // eslint-disable-next-line no-console
+    console.error = () => {}
+  })
+  afterEach(() => {
+    // eslint-disable-next-line no-console
+    console.error = consoleError
+  })
+
+  it('Throws if has `values` without `onChange`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <Tags items={items} values={['one']} />
+        </Theme>
+      )
+    ).toThrow(/values.+without.+onChange/)
+  })
+  it("Doesn't throw if has `values` without `onChange` and is read only", () => {
+    expect(() =>
+      render(
+        <Theme>
+          <Tags items={items} values={['one']} readOnly />
+        </Theme>
+      )
+    ).not.toThrow()
+  })
+  it('Throws if has both `values` and `initialValues`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <Tags items={items} values={['one']} initialValues={['one']} onChange={() => {}} />
+        </Theme>
+      )
+    ).toThrow(/both(?=.*initialValues)(?=.*values){2}/)
+  })
+})
+
+describe('Tags (uncontrolled)', () => {
+  // These tests are almost the same as ButtonGroup while Tags-specific behaviours are still TBC
+  it('Selects one and only one item if maxValues is passed', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} maxValues={1} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+  })
+
+  it('Deselects if the selected item is pressed', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+    const three = getByText('Three')
+    await fireEvent.press(three)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+
+    await fireEvent.press(three)
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).not.toBeTruthy()
+  })
+
+  it('Selects <= two items when maxValues === 2', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} maxValues={2} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const three = getByText('Three')
+    await fireEvent.press(three)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+
+    const four = getByText('Four')
+    await fireEvent.press(four)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+  })
+
+  it('Is accessible as checkboxes by default', async () => {
+    const { queryAllByA11yRole, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yRole('radioGroup')).toHaveLength(0)
+    expect(queryAllByA11yRole('radio')).toHaveLength(0)
+
+    const checks = queryAllByA11yRole('checkbox')
+    expect(checks).toHaveLength(4)
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+    await fireEvent.press(checks[0])
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+  })
+
+  it('Selects unlimited items by default', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const three = getByText('Three')
+    await fireEvent.press(three)
+    expect(queryAllByA11yState(checked)).toHaveLength(3)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const four = getByText('Four')
+    await fireEvent.press(four)
+    expect(queryAllByA11yState(checked)).toHaveLength(4)
+    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+  })
+
+  it('Auto-selects any provided initialValues', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} initialValues={['one', 'two']} maxValues={3} />
+      </Theme>
+    )
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+
+    const three = getByText('Three')
+    await fireEvent.press(three)
+
+    expect(queryAllByA11yState(checked)).toHaveLength(3)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const four = getByText('Four')
+    await fireEvent.press(four)
+    expect(queryAllByA11yState(checked)).toHaveLength(3)
+    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+  })
+})
+
+describe('Tags (controlled)', () => {
+  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <Tags items={items} values={[]} onChange={handleChange} />
+      </Theme>
+    )
+
+    expect(handleChange).toHaveBeenCalledTimes(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+
+    expect(handleChange.mock.calls[0][0]).toEqual(['one'])
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(handleChange).toHaveBeenCalledTimes(2)
+    expect(handleChange.mock.calls[1][0]).toEqual(['two'])
+  })
+
+  it("Doesn't change its own selection if `values` is passed", async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} values={['one']} onChange={() => {}} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+  })
+
+  it('Does not render an invalid `values` invalidly', async () => {
+    const { queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} values={['one', 'two', 'three']} maxValues={2} onChange={() => {}} />
+      </Theme>
+    )
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+  })
+})
+
+describe('Tags (read-only)', () => {
+  it("Doesn't call onChange handler when read-only", async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <Tags items={items} values={[]} onChange={handleChange} readOnly />
+      </Theme>
+    )
+
+    expect(handleChange).toHaveBeenCalledTimes(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(handleChange).toHaveBeenCalledTimes(0)
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(handleChange).toHaveBeenCalledTimes(0)
+  })
+
+  it("Doesn't change its selection on press", async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} values={['one']} readOnly />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+  })
+})

package/__tests__/TextInput/TextArea.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Platform } from 'react-native'
+import { TextArea } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('TextArea', () => {
+  it('renders', () => {
+    // at least one called test is required in a suite
+    render(<TextArea />, { wrapper: Theme })
+  })
+
+  // TODO: this won't be called until cross-platform Jest tests are configured
+  // see https://github.com/telus/universal-design-system/issues/319
+  if (Platform.OS === 'web') {
+    it('grows in size on input', () => {
+      const { getByTestId } = render(
+        <TextArea tokens={{ minLines: 1, maxLines: 5, lineHeight: 20 }} testID="textarea" />,
+        {
+          wrapper: Theme
+        }
+      )
+
+      const textarea = getByTestId('textarea')
+
+      expect(textarea).toHaveStyle({ height: 20 })
+
+      fireEvent.changeText(textarea, '\n\n\n')
+
+      expect(textarea).toHaveStyle({ height: 60 })
+    })
+  }
+})

package/__tests__/TextInput/TextInputBase.test.jsx

@@ -0,0 +1,120 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import TextInputBase from '../../src/TextInput/TextInputBase'
+import Viewport from '../../__fixtures__/Viewport'
+import Theme from '../../__fixtures__/Theme'
+
+// eslint-disable-next-line react/prop-types
+const Wrapper = ({ children }) => (
+  <Viewport viewport="xs">
+    <Theme>{children}</Theme>
+  </Viewport>
+)
+
+describe('TextInputBaseBase', () => {
+  it('triggers the interactive callbacks', () => {
+    const onFocus = jest.fn()
+    const onBlur = jest.fn()
+    const onMouseOver = jest.fn()
+    const onMouseOut = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInputBase
+        accessibilityLabel="Input label"
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+      />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onFocus).not.toHaveBeenCalled()
+    fireEvent(input, 'focus')
+    expect(onFocus).toHaveBeenCalledTimes(1)
+
+    expect(onBlur).not.toHaveBeenCalled()
+    fireEvent(input, 'blur')
+    expect(onBlur).toHaveBeenCalledTimes(1)
+
+    expect(onMouseOver).not.toHaveBeenCalled()
+    fireEvent(input, 'mouseOver')
+    expect(onMouseOver).toHaveBeenCalledTimes(1)
+
+    expect(onMouseOut).not.toHaveBeenCalled()
+    fireEvent(input, 'mouseOut')
+    expect(onMouseOut).toHaveBeenCalledTimes(1)
+  })
+
+  it("can't be edited when inactive", () => {
+    const { getByA11yLabel } = render(<TextInputBase accessibilityLabel="Input label" inactive />, {
+      wrapper: Wrapper
+    })
+
+    const input = getByA11yLabel('Input label')
+
+    expect(input).toHaveProp('editable', false)
+  })
+
+  it('changes value when uncontrolled', () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInputBase accessibilityLabel="Input label" onChange={onChange} />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('new value')
+  })
+
+  it('changes value when controlled', () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInputBase accessibilityLabel="Input label" onChange={onChange} value="initial value" />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('new value')
+  })
+
+  it("doesn't change value when readOnly", () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInputBase
+        accessibilityLabel="Input label"
+        onChange={onChange}
+        value="initial value"
+        readOnly
+      />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

package/__tests__/Tooltip/Tooltip.test.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Text } from 'react-native'
+import { Tooltip } from '../../src'
+
+import Theme from '../../__fixtures__/Theme'
+import Viewport from '../../__fixtures__/Viewport'
+
+const wrapper = ({ children }) => (
+  <Theme>
+    <Viewport>{children}</Viewport>
+  </Theme>
+)
+
+const content = 'tooltip content'
+
+describe('Tooltip', () => {
+  it('renders content after control is pressed', () => {
+    const { queryByText, getByA11yRole } = render(<Tooltip content={content} />, { wrapper })
+
+    expect(queryByText(content)).toBeFalsy()
+
+    fireEvent.press(getByA11yRole('button'))
+
+    expect(queryByText(content)).not.toBeFalsy()
+  })
+
+  it("renders custom control, and renders content after it's pressed", () => {
+    const { queryByTestId, getByA11yRole, queryByText } = render(
+      <Tooltip content={content}>
+        <Text testID="control" />
+      </Tooltip>,
+      { wrapper }
+    )
+
+    expect(queryByTestId('control')).not.toBeFalsy()
+
+    expect(queryByText(content)).toBeFalsy()
+
+    fireEvent.press(getByA11yRole('button'))
+
+    expect(queryByText(content)).not.toBeFalsy()
+  })
+
+  it("renders custom control render function, and renders content after it's pressed", () => {
+    const { queryByTestId, getByA11yRole, queryByText } = render(
+      <Tooltip content={content} variant={{ inverse: true }}>
+        {(pressableState, variant) => (
+          <Text testID="control">{variant.inverse ? 'Inverse' : 'Default'}</Text>
+        )}
+      </Tooltip>,
+      { wrapper }
+    )
+
+    expect(queryByTestId('control')).not.toBeFalsy()
+    expect(queryByText('Inverse')).not.toBeFalsy()
+
+    expect(queryByText(content)).toBeFalsy()
+
+    fireEvent.press(getByA11yRole('button'))
+
+    expect(queryByText(content)).not.toBeFalsy()
+  })
+})

package/__tests__/Tooltip/getTooltipPosition.test.js

@@ -0,0 +1,79 @@
+import getTooltipPosition from '../../lib/Tooltip/getTooltipPosition'
+
+const windowDimensions = {
+  width: 320,
+  height: 400
+}
+
+const tooltipDimensions = {
+  width: 200,
+  height: 40
+}
+
+describe('getTooltipPosition()', () => {
+  it('automatically places the tooltip within viewport', () => {
+    const controlLayout = {
+      right: { x: 20, y: 20 }, // control in top-left corner
+      left: { x: windowDimensions.width - 20, y: 20 }, // control in top-right corner
+      above: { x: windowDimensions.width / 2, y: windowDimensions.height - 20 }, // control in bottom center
+      below: { x: windowDimensions.width / 2, y: 20 } // control in top center
+    }
+
+    Object.keys(controlLayout).forEach((position) => {
+      const result = getTooltipPosition('auto', {
+        controlLayout: { width: 20, height: 20, ...controlLayout[position] },
+        tooltipDimensions,
+        windowDimensions
+      })
+
+      expect(result.position).toBe(position)
+    })
+  })
+
+  it('places the tooltip in the position from prop if that fits within viewport', () => {
+    const controlLayout = {
+      right: { x: 20, y: 20 }, // control in top-left corner
+      left: { x: windowDimensions.width - 20, y: 20 }, // control in top-right corner
+      above: { x: windowDimensions.width / 2, y: windowDimensions.height - 20 }, // control in bottom center
+      below: { x: windowDimensions.width / 2, y: 20 } // control in top center
+    }
+
+    Object.keys(controlLayout).forEach((position) => {
+      const positionProp = position // this would normally come from the component's prop
+
+      const result = getTooltipPosition(positionProp, {
+        controlLayout: { width: 20, height: 20, ...controlLayout[position] },
+        tooltipDimensions,
+        windowDimensions
+      })
+
+      expect(result.position).toBe(position)
+    })
+  })
+
+  it("places the tooltip in a different position if prop wouldn't fit in the viewport", () => {
+    const controlLayout = {
+      right: { x: 20, y: 20 }, // control in top-left corner
+      left: { x: windowDimensions.width - 20, y: 20 }, // control in top-right corner
+      above: { x: windowDimensions.width / 2, y: windowDimensions.height - 20 }, // control in bottom center
+      below: { x: windowDimensions.width / 2, y: 20 } // control in top center
+    }
+
+    const positionProp = {
+      right: 'left',
+      left: 'right',
+      above: 'below',
+      below: 'above'
+    }
+
+    Object.keys(controlLayout).forEach((position) => {
+      const result = getTooltipPosition(positionProp[position], {
+        controlLayout: { width: 20, height: 20, ...controlLayout[position] },
+        tooltipDimensions,
+        windowDimensions
+      })
+
+      expect(result.position).toBe(position)
+    })
+  })
+})

package/__tests__/utils/useCopy.test.js

@@ -0,0 +1,31 @@
+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' }))
+
+    expect(result.current('translation key')).toBe('english version')
+  })
+
+  it('returns a correct french translation', () => {
+    const { result } = renderHook(() => useCopy({ dictionary, copy: 'fr' }))
+
+    expect(result.current('translation key')).toBe('french version')
+  })
+
+  it('returns undefined when no translation is found', () => {
+    const { result } = renderHook(() => useCopy({ dictionary, copy: 'en' }))
+
+    expect(result.current('non-existing key')).toBe(undefined)
+  })
+})