@telus-uds/components-base 1.14.2 → 1.16.0

package/__tests17__/Carousel/CarouselTabs.test.jsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+
+import { CarouselTabs, Carousel, Typography } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+const setup = ({ pressHandlers = {} } = {}) =>
+  render(
+    <CarouselTabs
+      items={[
+        {
+          title: 'First tab title',
+          content: (
+            <Carousel.Item testID="first">
+              <Typography>First tab content</Typography>
+            </Carousel.Item>
+          ),
+          onPress: pressHandlers.first
+        },
+        {
+          title: 'Second tab title',
+          content: (
+            <Carousel.Item testID="second">
+              <Typography>Second tab content</Typography>
+            </Carousel.Item>
+          ),
+          onPress: pressHandlers.second
+        },
+        {
+          title: 'Third tab title',
+          content: (
+            <Carousel.Item testID="third">
+              <Typography>Third tab content</Typography>
+            </Carousel.Item>
+          ),
+          onPress: pressHandlers.third
+        }
+      ]}
+    />,
+    { wrapper: Theme }
+  )
+
+describe('CarouselTabs', () => {
+  const selectedStyle = {
+    fontWeight: '700'
+  }
+  const unselectedStyle = {
+    fontWeight: '400'
+  }
+
+  it('renders tabs for each item', () => {
+    const { queryByText } = setup()
+
+    expect(queryByText('First tab title')).toBeTruthy()
+    expect(queryByText('Second tab title')).toBeTruthy()
+    expect(queryByText('Third tab title')).toBeTruthy()
+  })
+
+  it('sets the first tab selected by default and has selected styles', async () => {
+    const { getByText } = setup()
+    const firstTab = getByText('First tab title')
+    expect(firstTab).toHaveStyle(selectedStyle)
+  })
+
+  it('sets the first tab selected by default and is not pressable', async () => {
+    const onPress = jest.fn()
+    const { getByText } = setup({ pressHandlers: { first: onPress } })
+
+    const firstTab = getByText('First tab title')
+
+    expect(() => fireEvent.press(firstTab)).toThrow(/No handler function found for event: "press"/)
+  })
+
+  it('sets the second tab unselected by default and is pressable', async () => {
+    const onPress = jest.fn()
+    const { getByText } = setup({ pressHandlers: { second: onPress } })
+
+    const secondTab = getByText('Second tab title')
+
+    expect(onPress).not.toHaveBeenCalled()
+    await fireEvent.press(secondTab)
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('sets the second tab unselected by default with unselected styles', async () => {
+    const { getByText } = setup()
+    const secondTab = getByText('Second tab title')
+    expect(secondTab).toHaveStyle(unselectedStyle)
+  })
+
+  it('switches selection to last pressed tab', async () => {
+    const onPressFirst = jest.fn()
+    const onPressSecond = jest.fn()
+    const { getByText, getByTestId } = setup({
+      pressHandlers: { first: onPressFirst, second: onPressSecond }
+    })
+
+    const firstTab = getByText('First tab title')
+    const secondTab = getByText('Second tab title')
+
+    const firstSlide = getByTestId('first')
+    const secondSlide = getByTestId('second')
+
+    expect(onPressFirst).not.toHaveBeenCalled()
+    expect(onPressSecond).not.toHaveBeenCalled()
+    expect(firstTab).toHaveStyle(selectedStyle)
+    expect(secondTab).toHaveStyle(unselectedStyle)
+    expect(firstSlide).not.toHaveProp('focusable')
+    expect(secondSlide).toHaveProp('focusable', false)
+
+    // Change selection to second tab
+    await fireEvent.press(secondTab)
+    expect(firstTab).toHaveStyle(unselectedStyle)
+    expect(secondTab).toHaveStyle(selectedStyle)
+    expect(onPressFirst).not.toHaveBeenCalled()
+    expect(onPressSecond).toHaveBeenCalledTimes(1)
+    expect(firstSlide).toHaveProp('focusable', false)
+    expect(secondSlide).not.toHaveProp('focusable')
+
+    expect(() => fireEvent.press(secondTab)).toThrow(/No handler function found for event: "press"/)
+
+    // Change selection to first tab
+    await fireEvent.press(firstTab)
+    expect(firstTab).toHaveStyle(selectedStyle)
+    expect(secondTab).toHaveStyle(unselectedStyle)
+    expect(onPressFirst).toHaveBeenCalledTimes(1)
+    expect(onPressSecond).toHaveBeenCalledTimes(1)
+    expect(firstSlide).not.toHaveProp('focusable')
+    expect(secondSlide).toHaveProp('focusable', false)
+
+    expect(() => fireEvent.press(firstTab)).toThrow(/No handler function found for event: "press"/)
+
+    // Change selection to first tab
+    await fireEvent.press(secondTab)
+    expect(firstTab).toHaveStyle(unselectedStyle)
+    expect(secondTab).toHaveStyle(selectedStyle)
+    expect(onPressFirst).toHaveBeenCalledTimes(1)
+    expect(onPressSecond).toHaveBeenCalledTimes(2)
+    expect(firstSlide).toHaveProp('focusable', false)
+    expect(secondSlide).not.toHaveProp('focusable')
+  })
+})

package/__tests17__/Checkbox/Checkbox.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Checkbox } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+const checkedId = 'Checkbox-Icon'
+const inputId = 'Checkbox-Input'
+const setup = (props) =>
+  render(
+    <Theme>
+      <Checkbox {...props} />
+    </Theme>
+  )
+
+describe('Checkbox', () => {
+  it('renders with defaults', () => {
+    const { getByRole } = setup()
+
+    expect(getByRole('checkbox')).toBeTruthy()
+  })
+
+  it('renders the label', () => {
+    const label = 'Test label message'
+    const { queryByText } = setup({ label })
+
+    expect(queryByText(label)).toBeTruthy()
+  })
+
+  it('renders the feedback', () => {
+    const feedback = 'Test feedback message'
+    const { queryByText } = setup({ feedback })
+
+    expect(queryByText(feedback)).toBeTruthy()
+  })
+
+  it('renders error styling on validation failure', () => {
+    const errorBorderColor = '#e12339' // from __fixtures__/testTheme.js
+    const { getByTestId } = setup({ error: true })
+
+    const checkboxInput = getByTestId(inputId)
+    expect(checkboxInput).toHaveStyle({ borderColor: errorBorderColor })
+  })
+
+  it('triggers the callback', () => {
+    const onChange = jest.fn()
+
+    const { getByRole } = setup({ onChange })
+
+    const checkbox = getByRole('checkbox')
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent(checkbox, 'press')
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('cannot be changed if inactive', () => {
+    const { getByRole, queryByTestId } = setup({ inactive: true })
+
+    const checkbox = getByRole('checkbox')
+    expect(queryByTestId(checkedId)).toBeFalsy()
+    fireEvent(checkbox, 'press')
+    expect(queryByTestId(checkedId)).toBeFalsy()
+  })
+
+  describe('when uncontrolled', () => {
+    it('uses `defaultChecked` as the initial value', () => {
+      const { queryByTestId } = setup({ defaultChecked: true })
+
+      expect(queryByTestId(checkedId)).toBeTruthy()
+    })
+
+    it('changes value', () => {
+      const { getByRole, queryByTestId } = setup({ defaultChecked: false })
+
+      const checkbox = getByRole('checkbox')
+      expect(queryByTestId(checkedId)).toBeFalsy()
+      fireEvent(checkbox, 'press')
+      expect(queryByTestId(checkedId)).toBeTruthy()
+    })
+  })
+
+  describe('when controlled', () => {
+    it('calls `onChange` with the new value', () => {
+      const onChange = jest.fn()
+      const { getByRole, queryByTestId } = setup({ onChange, checked: false })
+
+      const checkbox = getByRole('checkbox')
+      expect(queryByTestId(checkedId)).toBeFalsy()
+      fireEvent(checkbox, 'press', { nativeEvent: 'example' })
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(true, { nativeEvent: 'example' })
+    })
+  })
+})

package/__tests17__/Checkbox/CheckboxGroup.test.jsx

@@ -0,0 +1,246 @@
+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 CheckboxGroup from '../../src/Checkbox/CheckboxGroup'
+
+const items = [
+  { label: 'One', id: 'one' },
+  { label: 'Two', id: 'two' },
+  { label: 'Three', id: 'three' },
+  { label: 'Four', id: '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('CheckboxGroup', () => {
+  // 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 `checkedIds` without `onChange`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <CheckboxGroup items={items} checkedIds={['one']} />
+        </Theme>
+      )
+    ).toThrow(/values.+without.+onChange/)
+  })
+  it("Doesn't throw if has `checkedIds` without `onChange` and is read only", () => {
+    expect(() =>
+      render(
+        <Theme>
+          <CheckboxGroup items={items} checkedIds={['one']} readOnly />
+        </Theme>
+      )
+    ).not.toThrow()
+  })
+  it('Throws if has both `checkedIds` and `initialCheckedIds`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <CheckboxGroup
+            items={items}
+            checkedIds={['one']}
+            initialCheckedIds={['one']}
+            onChange={() => {}}
+          />
+        </Theme>
+      )
+    ).toThrow(/both(?=.*initialValues)(?=.*values){2}/)
+  })
+})
+
+describe('CheckboxGroup (uncontrolled)', () => {
+  it('Selects unlimited items', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <CheckboxGroup 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('Deselects if the selected item is pressed', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <CheckboxGroup 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('Is accessible as checkboxes button', async () => {
+    const { queryAllByA11yRole, queryAllByA11yState } = render(
+      <Theme>
+        <CheckboxGroup 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('Auto-selects any provided initialCheckedIds', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <CheckboxGroup items={items} initialCheckedIds={['one', 'two']} />
+      </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()
+  })
+})
+
+describe('CheckboxGroup (controlled)', () => {
+  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <CheckboxGroup items={items} checkedIds={[]} 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 `checkedIds` is passed", async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <CheckboxGroup items={items} checkedIds={['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()
+  })
+})
+
+describe('CheckboxGroup (read-only)', () => {
+  it("Doesn't call onChange handler when read-only", async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <CheckboxGroup items={items} checkedIds={[]} 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>
+        <CheckboxGroup items={items} checkedIds={['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/__tests17__/Divider/Divider.test.jsx

@@ -0,0 +1,91 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { Text } from 'react-native'
+
+import Divider from '../../src/Divider'
+import Theme from '../../__fixtures__/Theme'
+import testTheme from '../../__fixtures__/testTheme'
+
+describe('Divider', () => {
+  const testID = 'testID'
+  const { width, color } = testTheme.components.Divider.tokens
+  const { width: thickWidth } = testTheme.components.Divider.rules.find(
+    (rule) => rule.if.weight === 'thick'
+  ).tokens
+
+  const horizontalStyles = {
+    borderBottomColor: color,
+    borderBottomWidth: width
+  }
+
+  const verticalStyles = {
+    borderRightColor: color,
+    borderRightWidth: width
+  }
+
+  const thickStyles = {
+    borderBottomColor: color,
+    borderBottomWidth: thickWidth
+  }
+
+  it('renders a horizontal line by default', () => {
+    const { getByTestId } = render(
+      <Theme>
+        <Text>Before</Text>
+        <Divider testID={testID} />
+        <Text>After</Text>
+      </Theme>
+    )
+    const divider = getByTestId(testID)
+    expect(divider).toHaveStyle(horizontalStyles)
+    expect(divider).not.toHaveStyle(verticalStyles)
+  })
+
+  it('renders space above and below a horizontal line if space prop is passed', () => {
+    const expectedSize = 8 // from testTheme.js
+
+    const { getByTestId } = render(
+      <Theme>
+        <Text>Before</Text>
+        <Divider testID={testID} space={2} />
+        <Text>After</Text>
+      </Theme>
+    )
+    const before = getByTestId(`${testID}-Spacer-before`)
+    expect(before).toHaveStyle({ height: expectedSize })
+
+    const after = getByTestId(`${testID}-Spacer-after`)
+    expect(after).toHaveStyle({ height: expectedSize })
+  })
+
+  it('renders space left and right of a vertical line if space prop is passed', () => {
+    const expectedSize = 8 // from testTheme.js
+
+    const { getByTestId } = render(
+      <Theme>
+        <Text>Before</Text>
+        <Divider vertical testID={testID} space={2} />
+        <Text>After</Text>
+      </Theme>
+    )
+    const before = getByTestId(`${testID}-Spacer-before`)
+    expect(before).toHaveStyle({ width: expectedSize })
+
+    const after = getByTestId(`${testID}-Spacer-after`)
+    expect(after).toHaveStyle({ width: expectedSize })
+  })
+
+  it('renders the correct styles for a given variant', () => {
+    const { getByTestId } = render(
+      <Theme>
+        <Text>Before</Text>
+        <Divider testID={testID} variant={{ weight: 'thick' }} />
+        <Text>After</Text>
+      </Theme>
+    )
+    const divider = getByTestId(testID)
+    expect(divider).toHaveStyle(thickStyles)
+    expect(divider).not.toHaveStyle(verticalStyles)
+    expect(divider).not.toHaveStyle(horizontalStyles)
+  })
+})

package/__tests17__/ExpandCollapse/ExpandCollapse.test.jsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+
+import { Accordion, ExpandCollapse, Typography } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('ExpandCollapse', () => {
+  it('expands multiple groups when accordion = false', async () => {
+    const { queryAllByA11yState, getByText } = render(
+      <ExpandCollapse>
+        {(expandProps) => (
+          <>
+            <ExpandCollapse.Panel
+              {...expandProps}
+              panelId="first"
+              control={<Typography>First control</Typography>}
+            >
+              <Typography>First content</Typography>
+            </ExpandCollapse.Panel>
+            <ExpandCollapse.Panel
+              {...expandProps}
+              panelId="second"
+              control={<Typography>Second control</Typography>}
+            >
+              <Typography>Second content</Typography>
+            </ExpandCollapse.Panel>
+          </>
+        )}
+      </ExpandCollapse>,
+      {
+        wrapper: Theme
+      }
+    )
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
+    await fireEvent.press(getByText('First control'))
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
+    await fireEvent.press(getByText('Second control'))
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(2)
+    await fireEvent.press(getByText('Second control'))
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
+  })
+
+  it("calls a panel's provided onPress function in addition to open/close", async () => {
+    const panelId = 'group-id'
+    const onPress = jest.fn()
+
+    const { queryAllByA11yState, getByText } = render(
+      <ExpandCollapse>
+        {(expandProps) => (
+          <ExpandCollapse.Panel
+            {...expandProps}
+            onPress={onPress}
+            panelId={panelId}
+            control={<Typography>First control</Typography>}
+          >
+            <Typography>First content</Typography>
+          </ExpandCollapse.Panel>
+        )}
+      </ExpandCollapse>,
+      {
+        wrapper: Theme
+      }
+    )
+    expect(onPress).toHaveBeenCalledTimes(0)
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
+
+    await fireEvent(getByText('First control'), 'press', { nativeEvent: 'example' })
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
+    expect(onPress).toHaveBeenCalledTimes(1)
+    expect(onPress).toHaveBeenLastCalledWith(panelId, { nativeEvent: 'example' })
+  })
+})
+
+describe('Accordion', () => {
+  it('expands only one group', async () => {
+    const { queryAllByA11yState, getByText } = render(
+      <Accordion>
+        {(expandProps) => (
+          <>
+            <Accordion.Panel
+              {...expandProps}
+              panelId="first"
+              control={<Typography>First control</Typography>}
+            >
+              <Typography>First content</Typography>
+            </Accordion.Panel>
+            <Accordion.Panel
+              {...expandProps}
+              panelId="second"
+              control={<Typography>Second control</Typography>}
+            >
+              <Typography>Second content</Typography>
+            </Accordion.Panel>
+          </>
+        )}
+      </Accordion>,
+      {
+        wrapper: Theme
+      }
+    )
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
+    await fireEvent.press(getByText('First control'))
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
+    await fireEvent.press(getByText('Second control'))
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
+    await fireEvent.press(getByText('Second control'))
+    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
+  })
+})