@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/__tests__/RadioCard/RadioCard.test.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { RadioCard } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+const checkedId = 'Radio-Checked'
+const inputId = 'Radio-Input'
+const setup = (props) =>
+  render(
+    <Theme>
+      <RadioCard {...props} />
+    </Theme>
+  )
+
+describe('RadioCard', () => {
+  it('renders with defaults', () => {
+    const { getByRole } = setup()
+
+    expect(getByRole('radio')).toBeTruthy()
+  })
+
+  it('renders a title', () => {
+    const title = 'Test title message'
+    const { queryByText } = setup({ title })
+
+    expect(queryByText(title)).toBeTruthy()
+  })
+
+  it('renders error styling on validation failure', () => {
+    const errorBorderColor = '#676e73' // from __fixtures__/testTheme.js
+    const { getByTestId } = setup({ error: true })
+
+    const radioInput = getByTestId(inputId)
+    expect(radioInput).toHaveStyle({ borderColor: errorBorderColor })
+  })
+
+  it('triggers the callback', () => {
+    const onChange = jest.fn()
+
+    const { getByRole } = setup({ onChange })
+
+    const radio = getByRole('radio')
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent(radio, 'press')
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('cannot be changed if inactive', () => {
+    const { getByRole, queryByTestId } = setup({ inactive: true })
+
+    const radio = getByRole('radio')
+    expect(queryByTestId(checkedId)).toBeFalsy()
+    fireEvent(radio, '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 radio = getByRole('radio')
+      expect(queryByTestId(checkedId)).toBeFalsy()
+      fireEvent(radio, '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 radio = getByRole('radio')
+      expect(queryByTestId(checkedId)).toBeFalsy()
+      fireEvent(radio, 'press', { nativeEvent: 'example' })
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(true, { nativeEvent: 'example' })
+    })
+  })
+})

package/__tests__/RadioCard/RadioCardGroup.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 RadioCardGroup from '../../src/RadioCard/RadioCardGroup'
+import Typography from '../../src/Typography'
+
+const items = [
+  { title: 'One', id: 'one', content: <Typography>More card 1 content</Typography> },
+  { title: 'Two', id: 'two', content: <Typography>More card 2 content</Typography> },
+  { title: 'Three', id: 'three', content: <Typography>More card 3 content</Typography> },
+  { title: 'Four', id: 'four', content: <Typography>More card 4 content</Typography> }
+]
+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('RadioCardGroup', () => {
+  // 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>
+          <RadioCardGroup 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>
+          <RadioCardGroup items={items} checkedId="one" readOnly />
+        </Theme>
+      )
+    ).not.toThrow()
+  })
+  it('Throws if has both `checkedId` and `initialCheckedId`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <RadioCardGroup
+            items={items}
+            initialCheckedId="one"
+            checkedId="one"
+            onChange={() => {}}
+          />
+        </Theme>
+      )
+    ).toThrow(/both(?=.*initialValue)(?=.*value){2}/)
+  })
+})
+
+describe('RadioCardGroup (uncontrolled)', () => {
+  it('Selects one and only one item', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <RadioCardGroup 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('Treats presses on content the same as presses on title', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <RadioCardGroup items={items} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+    const one = getByText('More card 1 content')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('More card 2 content')
+    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>
+        <RadioCardGroup 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>
+        <RadioCardGroup items={items} />
+      </Theme>
+    )
+    expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
+    expect(queryAllByA11yRole('radiogroup').length).toBeTruthy()
+    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>
+        <RadioCardGroup 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('RadioCardGroup (controlled)', () => {
+  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <RadioCardGroup items={items} checkedId={null} 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 `checkedId` is passed", async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <RadioCardGroup 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('RadioCardGroup (read-only)', () => {
+  it("Doesn't call onChange handler when read-only", async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <RadioCardGroup 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>
+        <RadioCardGroup 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()
+  })
+})

package/__tests__/Search/Search.test.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+
+import { Search } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import { fireChange } from '../../__fixtures__/test-utils'
+
+describe('Search', () => {
+  const commonProps = {
+    accessibilityLabel: 'input',
+    copy: {
+      clearButtonAccessibilityLabel: 'clear-button',
+      submitButtonAccessibilityLabel: 'submit-button'
+    }
+  }
+
+  it('triggers the onSubmit callback when submitted', () => {
+    const onSubmit = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <Search onSubmit={onSubmit} initialValue="initial value" {...commonProps} />,
+      {
+        wrapper: Theme
+      }
+    )
+
+    expect(onSubmit).not.toHaveBeenCalled()
+
+    fireEvent(getByA11yLabel('submit-button'), 'press', { nativeEvent: 'example' })
+
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    expect(onSubmit).toHaveBeenLastCalledWith('initial value', { nativeEvent: 'example' })
+
+    fireChange(getByA11yLabel('input'), 'new value')
+    fireEvent(getByA11yLabel('submit-button'), 'press', { nativeEvent: 'example' })
+
+    expect(onSubmit).toHaveBeenCalledTimes(2)
+    expect(onSubmit).toHaveBeenLastCalledWith('new value', { nativeEvent: 'example' })
+  })
+
+  it('shows the clear button when text is entered', () => {
+    const { getByA11yLabel } = render(<Search {...commonProps} />, {
+      wrapper: Theme
+    })
+
+    expect(() => getByA11yLabel('clear-button')).toThrow()
+
+    fireChange(getByA11yLabel('input'), 'test value')
+
+    expect(() => getByA11yLabel('clear-button')).not.toThrow()
+  })
+
+  it('removes the input value when clear button is pressed', () => {
+    const onClear = jest.fn()
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <Search initialValue="test value" onClear={onClear} onChange={onChange} {...commonProps} />,
+      {
+        wrapper: Theme
+      }
+    )
+
+    expect(onClear).not.toHaveBeenCalled()
+    expect(onChange).not.toHaveBeenCalled()
+
+    fireEvent(getByA11yLabel('clear-button'), 'press', { nativeEvent: 'example' })
+
+    expect(onClear).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('', { nativeEvent: 'example' })
+  })
+})

package/__tests__/Select/Select.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+
+import { Platform } from 'react-native'
+import { Select } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('Select', () => {
+  it('renders', () => {
+    render(
+      <Select>
+        <Select.Item value="item-1">Item 1</Select.Item>
+        <Select.Item value="item-2">Item 2</Select.Item>
+      </Select>,
+      {
+        wrapper: Theme
+      }
+    )
+  })
+
+  if (Platform.OS === 'web') {
+    it('renders a placeholder', () => {
+      const { queryByText } = render(<Select placeholder="Test placeholder value" />, {
+        wrapper: Theme
+      })
+
+      expect(queryByText('Non-existing value')).toBeFalsy()
+      expect(queryByText('Test placeholder value')).not.toBeFalsy()
+    })
+
+    it('changes value when controlled', () => {
+      const onChange = jest.fn()
+
+      const { getByTestId } = render(
+        <Select value="item-2" onChange={onChange} testID="Test-Select">
+          <Select.Item value="item-1">Item 1</Select.Item>
+          <Select.Item value="item-2">Item 2</Select.Item>
+        </Select>,
+        {
+          wrapper: Theme
+        }
+      )
+
+      expect(onChange).not.toHaveBeenCalled()
+
+      fireEvent.change(getByTestId('Test-Select'), { target: { value: 'item-1' } })
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenLastCalledWith('item-1')
+    })
+
+    it('changes value when uncontrolled', () => {
+      const onChange = jest.fn()
+
+      const { getByTestId } = render(
+        <Select initialValue="item-2" onChange={onChange} testID="Test-Select">
+          <Select.Item value="item-1">Item 1</Select.Item>
+          <Select.Item value="item-2">Item 2</Select.Item>
+        </Select>,
+        {
+          wrapper: Theme
+        }
+      )
+
+      expect(onChange).not.toHaveBeenCalled()
+
+      const event = { target: { value: 'item-1' } }
+      fireEvent.change(getByTestId('Test-Select'), event)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenLastCalledWith('item-1', event)
+    })
+
+    it("doesn't change value when readOnly", () => {
+      const onChange = jest.fn()
+
+      const { getByTestId } = render(
+        <Select value="item-2" onChange={onChange} testID="Test-Select" readOnly>
+          <Select.Item value="item-1">Item 1</Select.Item>
+          <Select.Item value="item-2">Item 2</Select.Item>
+        </Select>,
+        {
+          wrapper: Theme
+        }
+      )
+
+      expect(onChange).not.toHaveBeenCalled()
+
+      fireEvent.change(getByTestId('Test-Select'), { target: { value: 'item-1' } })
+
+      expect(onChange).not.toHaveBeenCalled()
+    })
+  }
+})

package/__tests__/Skeleton/Skeleton.test.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { Skeleton } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import testTheme from '../../__fixtures__/testTheme'
+
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
+const { tokens } = testTheme.components.Skeleton
+
+const setup = ({ size = 10, characters, lines, shape } = {}) =>
+  render(
+    <Theme>
+      <Skeleton
+        size={size}
+        characters={characters}
+        lines={lines}
+        shape={shape}
+        aria-label="loader"
+      />
+    </Theme>
+  )
+
+describe('Skeleton', () => {
+  it('should calculate line width based on baseWidth', () => {
+    const { getByTestId } = setup()
+    const { characters, baseWidth } = tokens
+    const lineWidth = characters * baseWidth
+
+    const element = getByTestId('skeleton')
+
+    expect(element).toHaveStyle({ width: lineWidth })
+  })
+
+  it('render a circle', () => {
+    const { getByTestId } = setup({ shape: 'circle' })
+    const { radius } = tokens
+
+    const element = getByTestId('skeleton')
+
+    expect(element.width).toEqual(element.height)
+    expect(element).toHaveStyle({ borderRadius: radius })
+  })
+
+  it('render a square', () => {
+    const { getByTestId } = setup({ shape: 'box' })
+
+    const element = getByTestId('skeleton')
+
+    expect(element.width).toEqual(element.height)
+  })
+
+  it('render multiple lines', () => {
+    const lines = 8
+    const { queryAllByTestId } = setup({ lines })
+
+    const elements = queryAllByTestId('skeleton')
+
+    expect(elements.length).toEqual(lines)
+  })
+})

package/__tests__/StepTracker/StepTracker.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { render, within } from '@testing-library/react-native'
+
+import { StepTracker } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import Viewport from '../../__fixtures__/Viewport'
+import dictionary from '../../src/StepTracker/dictionary'
+
+const defaultSteps = [...Array(5).keys()].map((key) => `Some Step Title ${key + 1}`)
+
+const setup = ({ current, steps = defaultSteps, tokens, viewport }) =>
+  render(
+    <Theme>
+      <Viewport viewport={viewport}>
+        <StepTracker current={current} steps={steps} tokens={tokens} />
+      </Viewport>
+    </Theme>
+  )
+
+describe('StepTracker', () => {
+  const currentStep = 2
+
+  it('renders the steps properly', () => {
+    const { getAllByTestId, getByA11yLabel } = setup({ current: currentStep })
+
+    expect(getAllByTestId(/StepTracker-Step/).length).toBe(defaultSteps.length)
+    expect(getAllByTestId(/StepTracker-Step-Completed/).length).toBe(
+      defaultSteps.length - currentStep - 1
+    )
+    expect(
+      within(getByA11yLabel(defaultSteps[currentStep])).getByTestId('StepTracker-Step-Current')
+    ).toBeTruthy()
+  })
+
+  it('only displays the step tracker label and no step labels on small screens', () => {
+    const { getByText, queryByText } = setup({
+      viewport: 'sm'
+    })
+
+    const stepTrackerLabel = dictionary.en.stepTrackerLabel
+      .replace('%{stepNumber}', 1)
+      .replace('%{stepCount}', defaultSteps.length)
+      .replace('%{stepLabel}', defaultSteps[0])
+    expect(getByText(stepTrackerLabel)).toBeTruthy()
+    expect(queryByText(defaultSteps[1])).toBeFalsy()
+  })
+
+  it('only displays the step labels and no step tracker label on large screens', () => {
+    const { getByText, queryByText } = setup({
+      viewport: 'lg'
+    })
+
+    const stepTrackerLabel = dictionary.en.stepTrackerLabel
+      .replace('%{stepNumber}', 1)
+      .replace('%{stepCount}', defaultSteps.length)
+      .replace('%{stepLabel}', defaultSteps[0])
+    expect(queryByText(stepTrackerLabel)).toBeFalsy()
+    expect(getByText(defaultSteps[1])).toBeTruthy()
+  })
+
+  it('displays the step tracker label if requested', () => {
+    const { getByText, queryByText } = setup({
+      current: currentStep,
+      tokens: { showStepTrackerLabel: true }
+    })
+
+    defaultSteps.forEach((stepTitle) => {
+      if (defaultSteps.indexOf(stepTitle) === currentStep) {
+        const stepTrackerLabel = dictionary.en.stepTrackerLabel
+          .replace('%{stepNumber}', currentStep + 1)
+          .replace('%{stepCount}', defaultSteps.length)
+          .replace('%{stepLabel}', stepTitle)
+        expect(getByText(stepTrackerLabel)).toBeTruthy()
+      } else {
+        expect(queryByText(stepTitle)).toBeFalsy()
+      }
+    })
+  })
+
+  it('displays the step names and titles if requested', () => {
+    const { getByText } = setup({ tokens: { showStepLabel: true } })
+
+    defaultSteps.forEach((stepTitle, index) => {
+      expect(getByText(dictionary.en.stepLabel.replace('%{stepNumber}', index + 1))).toBeTruthy()
+      expect(getByText(stepTitle)).toBeTruthy()
+    })
+  })
+
+  it('hides step names if requested', () => {
+    const { getByText } = setup({ tokens: { showStepLabel: true, showStepName: false } })
+
+    defaultSteps.forEach((stepTitle) => expect(getByText(stepTitle)).toBeTruthy())
+  })
+})

package/__tests__/Tabs/Tabs.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Tabs } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('Tabs', () => {
+  const items = [{ label: 'one' }, { label: 'two' }, { label: 'three' }, { label: 'four' }]
+  const linkItems = items.map((item) => ({ ...item, href: 'https://telus.com' }))
+
+  it('renders a menu', () => {
+    const { queryAllByA11yRole } = render(<Tabs items={items} />, { wrapper: Theme })
+    expect(queryAllByA11yRole('tablist')).toHaveLength(1)
+  })
+
+  it('renders menuitems by default', () => {
+    const { queryAllByA11yRole } = render(<Tabs items={items} />, { wrapper: Theme })
+    expect(queryAllByA11yRole('tab')).toHaveLength(4)
+    expect(queryAllByA11yRole('link')).toHaveLength(0)
+  })
+
+  it('renders links by if hrefs are passed', () => {
+    const { queryAllByA11yRole } = render(<Tabs items={linkItems} />, { wrapper: Theme })
+    expect(queryAllByA11yRole('tab')).toHaveLength(0)
+    expect(queryAllByA11yRole('link')).toHaveLength(4)
+  })
+
+  it('is selected when pressed', () => {
+    const { queryByA11yState, getByText } = render(<Tabs items={items} />, { wrapper: Theme })
+    let selected
+    selected = queryByA11yState({ selected: true })
+    expect(selected).toBeFalsy()
+
+    fireEvent.press(getByText('two'))
+
+    selected = queryByA11yState({ selected: true })
+    expect(selected).toBeTruthy()
+    expect(selected).toHaveTextContent('two')
+  })
+})