@telus-uds/components-base 1.7.1 → 1.8.2

package/__tests__/ThemeProvider/useThemeTokens.test.jsx

@@ -1,514 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { renderHook } from '@testing-library/react-hooks'
-
-import ThemeProvider from '../../src/ThemeProvider'
-import { useThemeTokens, useThemeTokensCallback } from '../../src/ThemeProvider/useThemeTokens'
-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'
-
-const palette = {
-  colours: {
-    white: 'rgb(255,255,255)',
-    red: 'rgb(255,0,0)',
-    green: 'rgb(0,255,0)',
-    blue: 'rgb(0,0,255)',
-    pink: 'rgb(255,50,50)',
-    lilac: 'rgb(255,200,255)',
-    other: 'rgb(1,2,3)'
-  },
-  sizes: {
-    none: 0,
-    tight: 5,
-    medium: 10,
-    wide: 50,
-    other: 999
-  },
-  opacities: {
-    solid: 1,
-    opaque: 0.9,
-    cloudy: 0.8,
-    translucent: 0.5,
-    transparent: 0.1,
-    invisible: 0
-  }
-}
-
-const defaultTokens = {
-  // TODO: replace `undefined`s here with appropriate "no thanks" values if this ADR lands
-  // https://github.com/telus/universal-design-system/issues/526
-  background: undefined,
-  padding: palette.sizes.medium,
-  opacity: palette.opacities.solid
-}
-
-const theme = {
-  metadata: {
-    name: 'tokens-test',
-    themeTokensVersion: 'test-version'
-  },
-  components: {
-    [componentName]: {
-      appearances: {
-        windowSize: {
-          values: ['small', 'large'],
-          type: 'context'
-        },
-        colour: {
-          values: ['red', 'green', 'blue'],
-          type: 'variant'
-        },
-        on: {
-          values: [true, false],
-          type: 'state'
-        }
-      },
-      tokens: defaultTokens,
-      rules: [
-        { if: { windowSize: 'small' }, tokens: { padding: palette.sizes.tight } },
-        { if: { windowSize: 'large' }, tokens: { padding: palette.sizes.wide } },
-        { if: { colour: 'red' }, tokens: { background: palette.colours.red } },
-        { if: { colour: 'green' }, tokens: { background: palette.colours.green } },
-        { if: { colour: 'blue' }, tokens: { background: palette.colours.blue } },
-
-        // Slightly translucent if green or blue
-        { if: { colour: ['green', 'blue'] }, tokens: { opacity: palette.opacities.opaque } },
-
-        // Make red slightly pink and translucent when large
-        {
-          if: { colour: 'red', windowSize: 'large' },
-          tokens: { background: palette.colours.pink, opacity: palette.opacities.cloudy }
-        },
-
-        // Reset all colours to translucent white if "on"
-        {
-          if: { on: true },
-          tokens: { background: palette.colours.white, opacity: palette.opacities.translucent }
-        },
-
-        // Make large "on" reds and blues slightly purple
-        {
-          if: { on: true, windowSize: 'large', colour: ['red', 'blue'] },
-          tokens: { background: palette.colours.lilac }
-        }
-      ]
-    }
-  }
-}
-
-// Example of a component that is built on another component and applies its own rules.
-// For these tests we're only interested in rules it applies to its "inner" child component.
-theme.components.ExtendedComponent = {
-  appearances: {
-    innerOn: {
-      description: 'ExtendedComponent is built on TestComponent with rules for when it is "on"',
-      values: [true, false],
-      type: 'state'
-    }
-  },
-  tokens: {
-    // Extending components may need to use different names to avoid namespace collisions
-    innerColour: palette.colours.lilac
-  },
-  rules: [
-    {
-      // Make inner component text red when the inner component is on
-      if: { innerOn: true },
-      tokens: {
-        innerColour: palette.colours.red
-      }
-    }
-  ]
-}
-
-const ThemeWrapper = ({ children }) => (
-  <ThemeProvider defaultTheme={theme}>{children}</ThemeProvider>
-)
-ThemeWrapper.propTypes = { children: PropTypes.node.isRequired }
-
-const getHookResult = (hookFn) => {
-  const {
-    result: { current }
-  } = renderHook(hookFn, {
-    wrapper: ThemeWrapper
-  })
-  return current
-}
-
-describe('useThemeTokens', () => {
-  it('gives default tokens when no appearances are given', () => {
-    const themeTokens = getHookResult(() => useThemeTokens(componentName))
-
-    expect(themeTokens).toEqual(defaultTokens)
-  })
-
-  it('resolves simple rules for single appearances', () => {
-    const red = getHookResult(() => useThemeTokens(componentName, {}, { colour: 'red' }, {}))
-    const large = getHookResult(() =>
-      useThemeTokens(componentName, {}, {}, { windowSize: 'large' })
-    )
-    const on = getHookResult(() => useThemeTokens(componentName, {}, {}, { on: true }))
-
-    expect(red).toEqual({ ...defaultTokens, background: palette.colours.red })
-    expect(large).toEqual({ ...defaultTokens, padding: palette.sizes.wide })
-    expect(on).toEqual({
-      ...defaultTokens,
-      background: palette.colours.white,
-      opacity: palette.opacities.translucent
-    })
-  })
-
-  it('resolves rules which match multiple values from an array', () => {
-    const blue = getHookResult(() => useThemeTokens(componentName, {}, { colour: 'blue' }, {}))
-    const green = getHookResult(() => useThemeTokens(componentName, {}, { colour: 'green' }, {}))
-
-    expect(green).toEqual({
-      ...defaultTokens,
-      background: palette.colours.green,
-      opacity: palette.opacities.opaque
-    })
-    expect(blue).toEqual({
-      ...defaultTokens,
-      background: palette.colours.blue,
-      opacity: palette.opacities.opaque
-    })
-  })
-
-  it('resolves combinations and intersections of appearances', () => {
-    const largeRed = getHookResult(() =>
-      useThemeTokens(componentName, {}, { colour: 'red' }, { windowSize: 'large' })
-    )
-    const smallRed = getHookResult(() =>
-      useThemeTokens(componentName, {}, { colour: 'red' }, { windowSize: 'small' })
-    )
-
-    const largeBlue = getHookResult(() =>
-      useThemeTokens(componentName, {}, { colour: 'blue' }, { windowSize: 'large' })
-    )
-    const smallBlue = getHookResult(() =>
-      useThemeTokens(componentName, {}, { colour: 'blue' }, { windowSize: 'small' })
-    )
-
-    // largeRed includes specific large-red intersection rule
-    expect(largeRed).toEqual({
-      opacity: palette.opacities.cloudy,
-      padding: palette.sizes.wide,
-      background: palette.colours.pink
-    })
-    expect(smallRed).toEqual({
-      ...defaultTokens,
-      padding: palette.sizes.tight,
-      background: palette.colours.red
-    })
-
-    // includes blue + windowSize + blue-or-green rules
-    expect(largeBlue).toEqual({
-      opacity: palette.opacities.opaque,
-      padding: palette.sizes.wide,
-      background: palette.colours.blue
-    })
-    expect(smallBlue).toEqual({
-      opacity: palette.opacities.opaque,
-      padding: palette.sizes.tight,
-      background: palette.colours.blue
-    })
-  })
-
-  it('overrides earlier-defined rules with applicable later ones', () => {
-    const greenOn = getHookResult(() =>
-      useThemeTokens(componentName, {}, { colour: 'green' }, { on: true })
-    )
-    const largeGreenOn = getHookResult(() =>
-      useThemeTokens(componentName, {}, { colour: 'green' }, { on: true, windowSize: 'large' })
-    )
-    const redOn = getHookResult(() =>
-      useThemeTokens(componentName, {}, { colour: 'red' }, { on: true })
-    )
-    const largeRedOn = getHookResult(() =>
-      useThemeTokens(componentName, {}, { colour: 'red' }, { on: true, windowSize: 'large' })
-    )
-
-    expect(greenOn).toEqual({
-      padding: palette.sizes.medium,
-      opacity: palette.opacities.translucent,
-      background: palette.colours.white
-    })
-    expect(redOn).toEqual({
-      padding: palette.sizes.medium,
-      opacity: palette.opacities.translucent,
-      background: palette.colours.white
-    })
-    expect(largeGreenOn).toEqual({
-      padding: palette.sizes.wide,
-      opacity: palette.opacities.translucent,
-      background: palette.colours.white
-    })
-    expect(largeRedOn).toEqual({
-      padding: palette.sizes.wide,
-      opacity: palette.opacities.translucent,
-      background: palette.colours.lilac
-    })
-  })
-
-  it('overrides default theme tokens with passed-in tokens', () => {
-    const greenPlusBackground = getHookResult(() =>
-      useThemeTokens(componentName, { background: palette.colours.other }, { colour: 'green' }, {})
-    )
-    const largeRedPlusOpacity = getHookResult(() =>
-      useThemeTokens(
-        componentName,
-        { opacity: palette.opacities.transparent },
-        { colour: 'red' },
-        { windowSize: 'large' }
-      )
-    )
-    const largeBlueOnPlusTokens = getHookResult(() =>
-      useThemeTokens(
-        componentName,
-        { padding: palette.sizes.other, background: palette.colours.other },
-        { colour: 'blue' },
-        { on: true, windowSize: 'large' }
-      )
-    )
-
-    expect(greenPlusBackground).toEqual({
-      ...defaultTokens,
-      background: palette.colours.other,
-      opacity: palette.opacities.opaque
-    })
-    expect(largeRedPlusOpacity).toEqual({
-      opacity: palette.opacities.transparent,
-      padding: palette.sizes.wide,
-      background: palette.colours.pink
-    })
-    expect(largeBlueOnPlusTokens).toEqual({
-      padding: palette.sizes.other,
-      opacity: palette.opacities.translucent,
-      background: palette.colours.other
-    })
-  })
-
-  // 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 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')
-    )
-
-    // 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 }))
-
-    const on = { on: true }
-
-    // These lines reflect what happens inside TestComponent when it receives this tokens prop
-    const onInnerTokens = getHookResult(() => useThemeTokens(componentName, tokensFn, {}, on))
-    const offInnerTokens = getHookResult(() => useThemeTokens(componentName, tokensFn, {}, {}))
-
-    expect(offInnerTokens).toEqual({
-      ...defaultTokens,
-      colour: palette.colours.lilac
-    })
-
-    const onDefaultTokens = getHookResult(() => useThemeTokens(componentName, {}, {}, on))
-    expect(onInnerTokens).toEqual({
-      ...onDefaultTokens,
-      colour: palette.colours.red
-    })
-  })
-
-  it('overrides default and resolved tokens with passed in defined-but-falsy values', () => {
-    const unsetDefault = getHookResult(() =>
-      useThemeTokens(componentName, { padding: null, background: null, opacity: null }, {}, {})
-    )
-    const zeroDefault = getHookResult(() =>
-      useThemeTokens(
-        componentName,
-        { padding: palette.sizes.none, opacity: palette.opacities.invisible },
-        {},
-        {}
-      )
-    )
-    const unsetLargeRedOn = getHookResult(() =>
-      useThemeTokens(
-        componentName,
-        { padding: null, background: null, opacity: null },
-        { colour: 'red' },
-        { on: true, windowSize: 'large' }
-      )
-    )
-    const zeroLargeRedOn = getHookResult(() =>
-      useThemeTokens(
-        componentName,
-        { padding: palette.sizes.none, opacity: palette.opacities.invisible },
-        { colour: 'red' },
-        { on: true, windowSize: 'large' }
-      )
-    )
-
-    expect(unsetDefault).toEqual({ padding: null, background: null, opacity: null })
-    expect(zeroDefault).toEqual({
-      ...defaultTokens,
-      padding: palette.sizes.none,
-      opacity: palette.opacities.invisible
-    })
-
-    expect(unsetLargeRedOn).toEqual({
-      padding: null,
-      background: null,
-      opacity: null
-    })
-    expect(zeroLargeRedOn).toEqual({
-      background: palette.colours.lilac,
-      padding: palette.sizes.none,
-      opacity: palette.opacities.invisible
-    })
-  })
-
-  it('does not unset default and resolved tokens with passed in explicit undefined', () => {
-    const undefinedDefault = getHookResult(() =>
-      useThemeTokens(
-        componentName,
-        { padding: undefined, background: undefined, opacity: undefined },
-        {},
-        {}
-      )
-    )
-    expect(undefinedDefault).toEqual(defaultTokens)
-  })
-
-  // Catch-all test to check every combination
-  // More readable spaced like a table
-  /* prettier-ignore */
-  const everyAppearance = [
-    [{ colour: undefined }, { windowSize: undefined, on: undefined }],
-    [{ colour: undefined }, { windowSize: 'small', on: undefined }],
-    [{ colour: undefined }, { windowSize: 'large', on: undefined }],
-    [{ colour: 'red' },     { windowSize: undefined, on: undefined }],
-    [{ colour: 'red' },     { windowSize: 'small', on: undefined }],
-    [{ colour: 'red' },     { windowSize: 'large', on: undefined }],
-    [{ colour: 'green' },   { windowSize: undefined, on: undefined }],
-    [{ colour: 'green' },   { windowSize: 'small', on: undefined }],
-    [{ colour: 'green' },   { windowSize: 'large', on: undefined }],
-    [{ colour: 'blue' },    { windowSize: undefined, on: undefined }],
-    [{ colour: 'blue' },    { windowSize: 'small', on: undefined }],
-    [{ colour: 'blue' },    { windowSize: 'large', on: undefined }],
-
-    [{ colour: undefined }, { windowSize: undefined, on: true }],
-    [{ colour: undefined }, { windowSize: 'small', on: true }],
-    [{ colour: undefined }, { windowSize: 'large', on: true }],
-    [{ colour: 'red' },     { windowSize: undefined, on: true }],
-    [{ colour: 'red' },     { windowSize: 'small', on: true }],
-    [{ colour: 'red' },     { windowSize: 'large', on: true }],
-    [{ colour: 'green' },   { windowSize: undefined, on: true }],
-    [{ colour: 'green' },   { windowSize: 'small', on: true }],
-    [{ colour: 'green' },   { windowSize: 'large', on: true }],
-    [{ colour: 'blue' },    { windowSize: undefined, on: true }],
-    [{ colour: 'blue' },    { windowSize: 'small', on: true }],
-    [{ colour: 'blue' },    { windowSize: 'large', on: true }]
-  ].map((arr, index) => [...arr, index])
-
-  // More readable spaced like a table
-  /* prettier-ignore */
-  const expectedTokens = [
-    { background: undefined,             padding: palette.sizes.medium, opacity: palette.opacities.solid },
-    { background: undefined,             padding: palette.sizes.tight,  opacity: palette.opacities.solid },
-    { background: undefined,             padding: palette.sizes.wide,   opacity: palette.opacities.solid },
-    { background: palette.colours.red,   padding: palette.sizes.medium, opacity: palette.opacities.solid },
-    { background: palette.colours.red,   padding: palette.sizes.tight,  opacity: palette.opacities.solid },
-    { background: palette.colours.pink,  padding: palette.sizes.wide,   opacity: palette.opacities.cloudy },
-    { background: palette.colours.green, padding: palette.sizes.medium, opacity: palette.opacities.opaque },
-    { background: palette.colours.green, padding: palette.sizes.tight,  opacity: palette.opacities.opaque },
-    { background: palette.colours.green, padding: palette.sizes.wide,   opacity: palette.opacities.opaque },
-    { background: palette.colours.blue,  padding: palette.sizes.medium, opacity: palette.opacities.opaque },
-    { background: palette.colours.blue,  padding: palette.sizes.tight,  opacity: palette.opacities.opaque },
-    { background: palette.colours.blue,  padding: palette.sizes.wide,   opacity: palette.opacities.opaque },
-
-    { background: palette.colours.white, padding: palette.sizes.medium, opacity: palette.opacities.translucent },
-    { background: palette.colours.white, padding: palette.sizes.tight,  opacity: palette.opacities.translucent },
-    { background: palette.colours.white, padding: palette.sizes.wide,   opacity: palette.opacities.translucent },
-    { background: palette.colours.white, padding: palette.sizes.medium, opacity: palette.opacities.translucent },
-    { background: palette.colours.white, padding: palette.sizes.tight,  opacity: palette.opacities.translucent },
-    { background: palette.colours.lilac, padding: palette.sizes.wide,   opacity: palette.opacities.translucent },
-    { background: palette.colours.white, padding: palette.sizes.medium, opacity: palette.opacities.translucent },
-    { background: palette.colours.white, padding: palette.sizes.tight,  opacity: palette.opacities.translucent },
-    { background: palette.colours.white, padding: palette.sizes.wide,   opacity: palette.opacities.translucent },
-    { background: palette.colours.white, padding: palette.sizes.medium, opacity: palette.opacities.translucent },
-    { background: palette.colours.white, padding: palette.sizes.tight,  opacity: palette.opacities.translucent },
-    { background: palette.colours.lilac, padding: palette.sizes.wide,   opacity: palette.opacities.translucent }
-  ]
-  it.each(everyAppearance)('resolves variant: %p state: %p index: %p', (variant, state, index) => {
-    const themeTokens = getHookResult(() => useThemeTokens(componentName, {}, variant, state))
-
-    expect(themeTokens).toEqual(expectedTokens[index])
-  })
-})
-
-describe('useThemeTokens doesConditionApply', () => {
-  const values = { a: 'A', b: 1, c: false }
-  it('returns true if value is a match', () => {
-    expect(doesThemeConditionApply(['a', 'A'], values)).toBe(true)
-    expect(doesThemeConditionApply(['b', 1], values)).toBe(true)
-    expect(doesThemeConditionApply(['c', false], values)).toBe(true)
-  })
-  it('returns false if value is not a match', () => {
-    expect(doesThemeConditionApply(['a', false], values)).toBe(false)
-    expect(doesThemeConditionApply(['b', 'A'], values)).toBe(false)
-    expect(doesThemeConditionApply(['c', 1], values)).toBe(false)
-  })
-  it('returns true if value is an array containing a match', () => {
-    expect(doesThemeConditionApply(['a', [9, true, 'A', '']], values)).toBe(true)
-    expect(doesThemeConditionApply(['b', ['', 1, 'B', true]], values)).toBe(true)
-    expect(doesThemeConditionApply(['c', [false, 'C', true, 0]], values)).toBe(true)
-  })
-  it('returns false if value is an array not containing a match', () => {
-    expect(doesThemeConditionApply(['a', [9, true, 'B', '']], values)).toBe(false)
-    expect(doesThemeConditionApply(['b', ['', 2, 'B', true]], values)).toBe(false)
-    expect(doesThemeConditionApply(['c', [null, 'C', true, 0]], values)).toBe(false)
-  })
-
-  it('returns false if appearance value is missing and rule specifies a not-null value', () => {
-    expect(doesThemeConditionApply(['a', 'something'], { a: undefined })).toBe(false)
-    expect(doesThemeConditionApply(['a', 'something'], { a: null })).toBe(false)
-    expect(doesThemeConditionApply(['a', ['something', 'else']], { a: undefined })).toBe(false)
-    expect(doesThemeConditionApply(['a', ['something', 'else']], { a: null })).toBe(false)
-  })
-
-  it('returns true if appearance value is nullish and rule value is null', () => {
-    expect(doesThemeConditionApply(['a', null], { a: undefined })).toBe(true)
-    expect(doesThemeConditionApply(['a', null], { a: null })).toBe(true)
-    expect(doesThemeConditionApply(['a', [null], 'else'], { a: undefined })).toBe(true)
-    expect(doesThemeConditionApply(['a', [null, 'else']], { a: null })).toBe(true)
-  })
-})
-
-describe('useThemeTokens doesRuleApply', () => {
-  const values = { a: 'A', b: 1, c: false }
-  it('returns true if every provided singular condition is an exact match', () => {
-    expect(doesThemeRuleApply({ if: { a: 'A' } }, values)).toBe(true)
-    expect(doesThemeRuleApply({ if: { b: 1, a: 'A' } }, values)).toBe(true)
-    expect(doesThemeRuleApply({ if: { c: false, b: 1, a: 'A' } }, values)).toBe(true)
-  })
-  it('returns true if every provided singular condition is a match including arrays containing a match', () => {
-    expect(doesThemeRuleApply({ if: { a: ['A', 'B'] } }, values)).toBe(true)
-    expect(doesThemeRuleApply({ if: { b: [1, 2, 3, 4, 5], a: 'A' } }, values)).toBe(true)
-    expect(doesThemeRuleApply({ if: { c: [0, false], b: [1, 2], a: ['A', 'B'] } }, values)).toBe(
-      true
-    )
-  })
-  it('returns false if any provided condition is not a match', () => {
-    expect(doesThemeRuleApply({ if: { a: 'A', b: 2 } }, values)).toBe(false)
-    expect(doesThemeRuleApply({ if: { b: 1, a: ['a', 'b', 'c'] } }, values)).toBe(false)
-    expect(doesThemeRuleApply({ if: { c: true, b: 1, a: 'A' } }, values)).toBe(false)
-  })
-})

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

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

@@ -1,82 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import Theme from '../../__fixtures__/Theme'
-import ToggleSwitch from '../../src/ToggleSwitch/ToggleSwitch'
-
-const checked = { checked: true }
-
-describe('ToggleSwitch', () => {
-  it('is accessible as a switch by default', async () => {
-    const { queryAllByA11yRole } = render(
-      <Theme>
-        <ToggleSwitch />
-      </Theme>
-    )
-    expect(queryAllByA11yRole('button')).toHaveLength(0)
-    expect(queryAllByA11yRole('switch')).toHaveLength(1)
-  })
-
-  it('selects when pressed', async () => {
-    const { getByA11yRole, queryAllByA11yState } = render(
-      <Theme>
-        <ToggleSwitch />
-      </Theme>
-    )
-    const toggleSwitch = getByA11yRole('switch')
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-    await fireEvent.press(toggleSwitch)
-    expect(queryAllByA11yState(checked)).toHaveLength(1)
-  })
-
-  it('applies an initialValue as on and deselects when unpressed', async () => {
-    const { getByA11yRole, queryAllByA11yState } = render(
-      <Theme>
-        <ToggleSwitch initialValue={true} />
-      </Theme>
-    )
-    const toggleSwitch = getByA11yRole('switch')
-    expect(queryAllByA11yState(checked)).toHaveLength(1)
-    await fireEvent.press(toggleSwitch)
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-  })
-
-  it("doesn't select when pressed when inactive", async () => {
-    const { getByA11yRole, queryAllByA11yState } = render(
-      <Theme>
-        <ToggleSwitch inactive />
-      </Theme>
-    )
-    const toggleSwitch = getByA11yRole('switch')
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-    await fireEvent.press(toggleSwitch)
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-  })
-
-  it("calls onChange with new value and doesn't change own state when passed a value", async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByA11yRole, queryAllByA11yState } = render(
-      <Theme>
-        <ToggleSwitch value={false} onChange={handleChange} />
-      </Theme>
-    )
-    expect(handleChange).toHaveBeenCalledTimes(0)
-    const toggleSwitch = getByA11yRole('switch')
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-
-    await fireEvent(toggleSwitch, 'press', { nativeEvent: 'example' })
-    expect(handleChange).toHaveBeenCalledTimes(1)
-    expect(handleChange).toHaveBeenLastCalledWith(true, { nativeEvent: 'example' })
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-  })
-
-  it('displays the label', () => {
-    const label = 'Toggle me!'
-    const { getByText } = render(
-      <Theme>
-        <ToggleSwitch label={label} />
-      </Theme>
-    )
-    expect(getByText(label)).toBeTruthy()
-  })
-})