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

package/__tests__/Checkbox/CheckboxGroup.test.jsx

@@ -0,0 +1,247 @@
+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.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 `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/__tests__/Icon/Icon.test.jsx

@@ -16,7 +16,7 @@ describe('Icon', () => {
   it('gets default styles from theme', () => {
     const { getByTestId } = render(
       <Theme>
-        <Icon IconSvg={InnerComponent} />
+        <Icon icon={InnerComponent} />
       </Theme>
     )
 
@@ -29,7 +29,7 @@ describe('Icon', () => {
   it('gets styles from variant', () => {
     const { getByTestId } = render(
       <Theme>
-        <Icon IconSvg={InnerComponent} variant={{ size: 'small' }} />
+        <Icon icon={InnerComponent} variant={{ size: 'small' }} />
       </Theme>
     )
 
@@ -46,7 +46,7 @@ describe('Icon', () => {
     const props = { tokens: { size: 30 } }
     const { getByTestId } = render(
       <Theme>
-        <Icon IconSvg={InnerComponent} {...props} />
+        <Icon icon={InnerComponent} {...props} />
       </Theme>
     )
 

package/__tests__/Modal/Modal.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Text } from 'react-native'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Modal } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('Modal', () => {
+  it('is not rendered when closed', () => {
+    const { queryByText } = render(
+      <Modal>
+        <Text>Test content</Text>
+      </Modal>,
+      { wrapper: Theme }
+    )
+
+    expect(queryByText('Test content')).toBeFalsy()
+  })
+
+  it('is rendered when open', () => {
+    const { queryByText } = render(
+      <Modal isOpen>
+        <Text>Test content</Text>
+      </Modal>,
+      { wrapper: Theme }
+    )
+
+    expect(queryByText('Test content')).not.toBeFalsy()
+  })
+
+  it('onClose callback is triggered when closing', () => {
+    const onClose = jest.fn()
+
+    const { getByA11yRole } = render(
+      <Modal isOpen onClose={onClose}>
+        <Text>Test content</Text>
+      </Modal>,
+      { wrapper: Theme }
+    )
+
+    expect(onClose).not.toHaveBeenCalled()
+
+    fireEvent.press(getByA11yRole('button'))
+
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+})

package/__tests__/Notification/Notification.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Notification } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('Notification', () => {
+  it('is removed when dismiss button is pressed', () => {
+    const content = 'Notification content lands here'
+    const { getByRole, getByText } = render(<Notification dismissible>{content}</Notification>, {
+      wrapper: Theme
+    })
+
+    expect(() => getByText(content)).not.toThrow()
+
+    fireEvent.press(getByRole('button'))
+
+    expect(() => getByText(content)).toThrow()
+  })
+})

package/__tests__/Pagination/Pagination.test.jsx

@@ -114,7 +114,7 @@ describe('Pagination', () => {
 
       expect(button).toHaveProp('accessibilityRole', 'link')
       expect(button).toHaveProp('href', 'test-url')
-      expect(button).toHaveProp('target', '_blank')
+      expect(button).toHaveProp('hrefAttrs', { target: '_blank' })
     })
   })
 
@@ -154,7 +154,7 @@ describe('Pagination', () => {
 
       expect(button).toHaveProp('accessibilityRole', 'link')
       expect(button).toHaveProp('href', 'test-url')
-      expect(button).toHaveProp('target', '_blank')
+      expect(button).toHaveProp('hrefAttrs', { target: '_blank' })
     })
   })
 })

package/__tests__/Progress/Progress.test.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Text } from 'react-native'
+import { render, within } from '@testing-library/react-native'
+
+import { Progress } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+const barTokens = {
+  backgroundColor: 'green'
+}
+const percentage = 75
+const progressTokens = {
+  backgroundColor: 'white',
+  borderColor: 'black'
+}
+const a11yLabel = 'Progress bar'
+const progressA11yLabel = 'This is a progress indicator'
+const setup = (
+  { children, ...props } = {
+    children: (
+      <Progress.Bar percentage={percentage} tokens={barTokens} accessibilityLabel={a11yLabel} />
+    )
+  }
+) =>
+  render(
+    <Progress tokens={progressTokens} accessibilityLabel={progressA11yLabel} {...props}>
+      {children}
+    </Progress>,
+    { wrapper: Theme }
+  )
+
+describe('Progress', () => {
+  it('renders with correct percentage and applies tokens accordingly', () => {
+    const { getByA11yLabel } = setup()
+    expect(getByA11yLabel(progressA11yLabel)).toHaveStyle(progressTokens)
+    expect(getByA11yLabel(a11yLabel)).toHaveStyle({
+      width: `${percentage}%`,
+      ...barTokens
+    })
+  })
+
+  it('renders arbitrary content inside the progress bar', () => {
+    const contentText = 'This can be an arbitrary content'
+    const { getByA11yLabel } = setup({
+      children: (
+        <Progress.Bar percentage={percentage} tokens={barTokens} accessibilityLabel={a11yLabel}>
+          <Text>{contentText}</Text>
+        </Progress.Bar>
+      )
+    })
+    expect(within(getByA11yLabel(a11yLabel)).getByText(contentText)).toBeTruthy()
+  })
+
+  it('renders proper accessibility attributes on the progress bar', () => {
+    const { getByA11yRole, getByA11yValue } = setup()
+    expect(getByA11yRole('progressbar')).toBeTruthy()
+    expect(
+      getByA11yValue({ min: 0, max: 100, now: percentage, text: `${percentage}%` })
+    ).toBeTruthy()
+  })
+
+  it('renders stacked progress bars', () => {
+    const inactiveA11yLabel = 'This bar is inactive'
+    const { getByA11yLabel } = setup({
+      children: (
+        <>
+          <Progress.Bar
+            percentage={percentage + 10}
+            variant={{ inactive: true }}
+            accessibilityLabel={inactiveA11yLabel}
+          />
+          <Progress.Bar percentage={percentage} accessibilityLabel={a11yLabel} />
+        </>
+      )
+    })
+    expect(within(getByA11yLabel(progressA11yLabel)).getByA11yLabel(inactiveA11yLabel)).toBeTruthy()
+    expect(within(getByA11yLabel(progressA11yLabel)).getByA11yLabel(a11yLabel)).toBeTruthy()
+  })
+})

package/__tests__/Radio/RadioGroup.test.jsx

@@ -0,0 +1,221 @@
+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 RadioGroup from '../../src/Radio/RadioGroup'
+
+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('RadioGroup', () => {
+  // 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 `checkedId` without `onChange`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <RadioGroup items={items} checkedId="one" />
+        </Theme>
+      )
+    ).toThrow(/value.+without.+onChange/)
+  })
+  it("Doesn't throw if has `checkedId` without `onChange` and is read only", () => {
+    expect(() =>
+      render(
+        <Theme>
+          <RadioGroup items={items} checkedId="one" readOnly />
+        </Theme>
+      )
+    ).not.toThrow()
+  })
+  it('Throws if has both `checkedId` and `initialCheckedId`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <RadioGroup items={items} initialCheckedId="one" checkedId="one" onChange={() => {}} />
+        </Theme>
+      )
+    ).toThrow(/both(?=.*initialValue)(?=.*value){2}/)
+  })
+})
+
+describe('RadioGroup (uncontrolled)', () => {
+  it('Selects one and only one item', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <RadioGroup 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(1)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+  })
+
+  it('Does not deselect if the selected item is pressed', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <RadioGroup 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(1)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+  })
+
+  it('Is accessible as a radio button', async () => {
+    const { queryAllByA11yRole, queryAllByA11yState } = render(
+      <Theme>
+        <RadioGroup items={items} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
+    expect(queryAllByA11yRole('radiogroup')).toHaveLength(1)
+    const radios = queryAllByA11yRole('radio')
+    expect(radios).toHaveLength(4)
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+    await fireEvent.press(radios[0])
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+  })
+
+  it('Auto-selects initialCheckedId', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <RadioGroup items={items} initialCheckedId="two" />
+      </Theme>
+    )
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+
+    const three = getByText('Three')
+    await fireEvent.press(three)
+
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+  })
+})
+
+describe('RadioGroup (controlled)', () => {
+  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <RadioGroup items={items} checkedId={null} 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 `checkedId` is passed", async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <RadioGroup items={items} checkedId="one" onChange={() => {}} />
+      </Theme>
+    )
+
+    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('RadioGroup (read-only)', () => {
+  it("Doesn't call onChange handler when read-only", async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <RadioGroup items={items} checkedId="two" 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>
+        <RadioGroup items={items} checkedId="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()
+  })
+})