@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.10

package/__tests__/Tags/Tags.test.jsx

@@ -0,0 +1,327 @@
+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(one, 'press', { nativeEvent: 'example' })
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenLastCalledWith(['one'], { nativeEvent: 'example' })
+
+    const two = getByText('Two')
+    await fireEvent(two, 'press', { nativeEvent: 'example2' })
+    expect(handleChange).toHaveBeenCalledTimes(2)
+    expect(handleChange).toHaveBeenLastCalledWith(['two'], { nativeEvent: 'example2' })
+  })
+
+  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,35 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { Platform } from 'react-native'
+import { TextArea } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import { fireChange } from '../../__fixtures__/test-utils'
+
+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 })
+
+      fireChange(textarea, '\n\n\n')
+
+      expect(textarea).toHaveStyle({ height: 60 })
+    })
+  }
+})

package/__tests__/TextInput/TextInputBase.test.jsx

@@ -0,0 +1,125 @@
+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'
+import { getMockEvent, fireChange } from '../../__fixtures__/test-utils'
+
+// eslint-disable-next-line react/prop-types
+const Wrapper = ({ children }) => (
+  <Viewport viewport="xs">
+    <Theme>{children}</Theme>
+  </Viewport>
+)
+
+const text = 'new value'
+const changeEvent = getMockEvent({ text })
+
+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()
+    fireChange(input, text)
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith(text, changeEvent)
+  })
+
+  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()
+
+    fireChange(input, text)
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith(text, changeEvent)
+  })
+
+  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()
+    fireChange(input, text)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

package/__tests__/ThemeProvider/ThemeProvider.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { renderHook } from '@testing-library/react-hooks'
+import semVerSatisfies from 'semver/functions/satisfies'
+import ThemeProvider, { useTheme, useSetTheme } from '../../src/ThemeProvider'
+import pkg from '../../package.json'
+
+jest.mock('semver/functions/satisfies')
+
+const expectedThemeTokensVersion = 'expected'
+const actualThemeTokensVersion = 'actual'
+pkg.dependencies['@telus-uds/system-theme-tokens'] = expectedThemeTokensVersion
+const theme = {
+  metadata: {
+    name: 'tokens-test',
+    themeTokensVersion: actualThemeTokensVersion
+  },
+  components: {}
+}
+
+beforeEach(() => {
+  semVerSatisfies.mockReset()
+})
+
+describe('Uninitialized ThemeProvider context', () => {
+  test('throws on useTheme', () => {
+    const { result } = renderHook(useTheme)
+    expect(() => result.current).toThrow('Theme context used outside of ThemeProvider')
+  })
+
+  test('error useSetTheme hook without provider', () => {
+    const { result } = renderHook(useSetTheme)
+    expect(() => result.current).toThrow('Theme context used outside of ThemeProvider')
+  })
+})
+
+describe('ThemeProvider theme tokens version validation', () => {
+  const renderThemeHook = (hookFn) => {
+    const ThemeWrapper = ({ children }) => (
+      <ThemeProvider defaultTheme={theme}>{children}</ThemeProvider>
+    )
+    ThemeWrapper.propTypes = { children: PropTypes.node.isRequired }
+
+    return renderHook(hookFn, {
+      wrapper: ThemeWrapper
+    })
+  }
+
+  test('validates theme tokens version with semver', () => {
+    semVerSatisfies.mockImplementationOnce(() => true)
+
+    const { result } = renderThemeHook(useTheme)
+
+    expect(result.current).toEqual(theme)
+    expect(semVerSatisfies).toHaveBeenCalledWith(
+      actualThemeTokensVersion,
+      expectedThemeTokensVersion
+    )
+  })
+
+  test('warning if theme tokens version does not match', () => {
+    semVerSatisfies.mockImplementationOnce(() => false)
+
+    const { result } = renderThemeHook(useTheme)
+
+    expect(() => result.current).toThrow('Invalid UDS token schema version detected')
+  })
+
+  test('validates on every render', () => {
+    semVerSatisfies.mockImplementationOnce(() => true)
+
+    const { rerender } = renderThemeHook(useTheme)
+    rerender()
+
+    expect(semVerSatisfies).toHaveBeenCalledTimes(2)
+  })
+})

package/__tests__/ThemeProvider/useThemeTokens.test.jsx

@@ -4,10 +4,13 @@ import { renderHook } from '@testing-library/react-hooks'
 
 import ThemeProvider from '../../src/ThemeProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../../src/ThemeProvider/useThemeTokens'
-import {
-  doesThemeRuleApply,
-  doesThemeConditionApply
-} from '../../src/ThemeProvider/utils/theme-tokens'
+import * as tokenUtils from '../../src/ThemeProvider/utils/theme-tokens'
+
+// Mock out the function that checks the theme version
+const validateThemeTokensVersion = jest.spyOn(tokenUtils, 'validateThemeTokensVersion')
+validateThemeTokensVersion.mockImplementation(() => undefined)
+
+const { doesThemeRuleApply, doesThemeConditionApply } = tokenUtils
 
 const componentName = 'TestComponent'
 
@@ -48,7 +51,8 @@ const defaultTokens = {
 
 const theme = {
   metadata: {
-    name: 'tokens-test'
+    name: 'tokens-test',
+    themeTokensVersion: 'test-version'
   },
   components: {
     [componentName]: {
@@ -291,9 +295,11 @@ describe('useThemeTokens', () => {
     })
   })
 
+  // Simulate a scenario where a parent component passes tokens to a child component.
+  // Imagine a component that contains a button and wants to tell it what colour to be when pressed.
   it('overrides default theme tokens using passed-in tokens function', () => {
-    // ExtendedComponent is built on TestComponent with additional theming rules,
-    // setting the TestComponent's colour to lilac when "off" and to red when "on".
+    // ExtendedComponent is a parent to TestComponent and passes it additional theming rules,
+    // setting child TestComponent's colour to lilac when child's state is "off", and red when "on".
     const getTokensByExtendedRules = getHookResult(() =>
       useThemeTokensCallback('ExtendedComponent')
     )
@@ -301,7 +307,7 @@ describe('useThemeTokens', () => {
     // If the extending component uses different naming to its inner component, we need to map names
     const selectInnerTokens = ({ innerColour }) => ({ colour: innerColour })
     const tokensFn = (innerAppearances) =>
-      selectInnerTokens(getTokensByExtendedRules({}, {}, { innerOn: innerAppearances.on }))
+      selectInnerTokens(getTokensByExtendedRules({ innerOn: innerAppearances.on }))
 
     const on = { on: true }
 

package/__tests__/ThemeProvider/utils/theme-tokens.test.js

@@ -0,0 +1,41 @@
+import pkg from '../../../package.json'
+import { validateThemeTokensVersion } from '../../../src/ThemeProvider/utils/theme-tokens'
+
+function validate({ expectedVersion, actualVersion }) {
+  pkg.dependencies['@telus-uds/system-theme-tokens'] = expectedVersion
+  const theme = {
+    metadata: {
+      themeTokensVersion: actualVersion
+    }
+  }
+  validateThemeTokensVersion(theme)
+}
+
+describe('validateThemeTokensVersion', () => {
+  test('No error on matching version', async () => {
+    const expectedVersion = '1.2.3'
+    const actualVersion = '1.2.3'
+
+    validate({ expectedVersion, actualVersion })
+
+    // No errors, no problem...
+  })
+
+  test('Throws if theme version is old', async () => {
+    const expectedVersion = '^2.3.4'
+    const actualVersion = '2.3.3'
+
+    expect(() => validate({ expectedVersion, actualVersion })).toThrow(
+      'Invalid UDS token schema version detected.'
+    )
+  })
+
+  test('Throws if theme version is new', async () => {
+    const expectedVersion = '^1.2.3'
+    const actualVersion = '2.3.4'
+
+    expect(() => validate({ expectedVersion, actualVersion })).toThrow(
+      'Invalid UDS token schema version detected.'
+    )
+  })
+})

package/__tests__/ToggleSwitch/ToggleSwitch.test.jsx

@@ -63,9 +63,10 @@ describe('ToggleSwitch', () => {
     expect(handleChange).toHaveBeenCalledTimes(0)
     const toggleSwitch = getByA11yRole('switch')
     expect(queryAllByA11yState(checked)).toHaveLength(0)
-    await fireEvent.press(toggleSwitch)
+
+    await fireEvent(toggleSwitch, 'press', { nativeEvent: 'example' })
     expect(handleChange).toHaveBeenCalledTimes(1)
-    expect(handleChange.mock.calls[0][0]).toEqual(true)
+    expect(handleChange).toHaveBeenLastCalledWith(true, { nativeEvent: 'example' })
     expect(queryAllByA11yState(checked)).toHaveLength(0)
   })
 })