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

package/__tests__/StackView/StackView.test.jsx

@@ -0,0 +1,216 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { Spacer, StackView, Typography } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import testTheme from '../../__fixtures__/testTheme'
+
+const getFirstAncestorAboveType = (element, ComponentType) => {
+  if (element.type === ComponentType) return element.parent
+  if (element.parent) return getFirstAncestorAboveType(element.parent, ComponentType)
+  return null
+}
+
+describe('StackView', () => {
+  it('renders separators and children as direct children of a flex column by default', () => {
+    const expectedStyle = { flexDirection: 'column' }
+
+    const { getByTestId } = render(
+      <StackView space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of a flex column if direction is "column-reverse"', () => {
+    const expectedStyle = { flexDirection: 'column-reverse' }
+
+    const { getByTestId } = render(
+      <StackView direction="column-reverse" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of a flex row if direction is "row"', () => {
+    const expectedStyle = { flexDirection: 'row' }
+
+    const { getByTestId } = render(
+      <StackView direction="row" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of a flex row if direction is "row-reverse"', () => {
+    const expectedStyle = { flexDirection: 'row-reverse' }
+
+    const { getByTestId } = render(
+      <StackView direction="row-reverse" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders horizontal dividers by default', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+    const { color } = testTheme.components.Divider.tokens
+
+    const { getByTestId } = render(
+      <StackView divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderRightColor: color })
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders horizontal dividers if direction is "column-reverse"', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+    const { color } = testTheme.components.Divider.tokens
+
+    const { getByTestId } = render(
+      <StackView direction="column-reverse" divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderRightColor: color })
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders vertical dividers if direction is "row"', () => {
+    const { color } = testTheme.components.Divider.tokens
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { width: expectedSize }
+
+    const { getByTestId } = render(
+      <StackView divider direction="row">
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: color })
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders vertical dividers if direction is "row-reverse"', () => {
+    const { color } = testTheme.components.Divider.tokens
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { width: expectedSize }
+
+    const { getByTestId } = render(
+      <StackView divider direction="row-reverse">
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: color })
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders row spacers if direction is "row"', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+
+    const { getByTestId } = render(
+      <StackView direction="row" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Spacer-1')).not.toHaveStyle({ height: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).not.toHaveStyle({ height: expectedSize })
+
+    expect(getByTestId('Stack-Spacer-1')).toHaveStyle({ width: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).toHaveStyle({ width: expectedSize })
+  })
+
+  it('renders row spacers if direction is "row-reverse"', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+
+    const { getByTestId } = render(
+      <StackView direction="row-reverse" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Spacer-1')).not.toHaveStyle({ height: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).not.toHaveStyle({ height: expectedSize })
+
+    expect(getByTestId('Stack-Spacer-1')).toHaveStyle({ width: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).toHaveStyle({ width: expectedSize })
+  })
+})

package/__tests__/StackView/StackWrap.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { StackWrap, Typography } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('StackWrap', () => {
+  it('renders no spacers (because they would wrap badly)', () => {
+    const { queryAllByTestId } = render(
+      <StackWrap space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackWrap>,
+      { wrapper: Theme }
+    )
+    expect(queryAllByTestId(/Spacer/)).toHaveLength(0)
+  })
+
+  it('puts a `gap` between lines which may be different to `space` between items', () => {
+    // This test unavoidably hangs on some implementation details,
+    // which isn't ideal, but it does test something a user would see.
+    const expectedStyle = { paddingBottom: 8, paddingRight: 4 }
+
+    const { getByTestId } = render(
+      <StackWrap space={1} gap={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackWrap>,
+      { wrapper: Theme }
+    )
+    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
+  })
+
+  it('accepts accessibility props on the container responsible for wrapping content', () => {
+    const expectedStyle = { flexWrap: 'wrap' }
+
+    const { getByRole } = render(
+      <StackWrap accessibilityRole="radiogroup">
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackWrap>,
+      { wrapper: Theme }
+    )
+    expect(getByRole('radiogroup')).toHaveStyle(expectedStyle)
+  })
+})

package/__tests__/StackView/getStackedContent.test.jsx

@@ -0,0 +1,295 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+import { render } from '@testing-library/react-native'
+
+import Theme from '../../__fixtures__/Theme'
+import { getStackedContent, Typography } from '../../src'
+
+// Make test composition simpler by wrapping getStackedContent in a component
+const StackedContent = ({ children, ...props }) => <View>{getStackedContent(children, props)}</View>
+StackedContent.propTypes = { children: PropTypes.node }
+
+describe('getStackedContent (Spacers)', () => {
+  it('renders spacers between simple children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent space={1}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(2)
+  })
+
+  it('gives spacers sizes according to own space prop and spacing scale', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+
+    const { getByTestId } = render(
+      <StackedContent space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Spacer-1')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Spacer-2')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders spacers between children wrapped in one Fragment', () => {
+    const content = (
+      <>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </>
+    )
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(2)
+  })
+
+  it('renders spacers between children wrapped in sibling Fragments', () => {
+    // Simulate common pattern of using fragments for conditional rendering
+    const someCondition = true
+
+    const content = (
+      <>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        {someCondition && (
+          <>
+            <Typography>C</Typography>
+            <Typography>D</Typography>
+            <Typography>E</Typography>
+          </>
+        )}
+      </>
+    )
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(4)
+  })
+
+  it('does not render spacers between children wrapped in a component', () => {
+    const content = (
+      <View>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </View>
+    )
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('does not render spacers between empty or nullish children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent space={1}>
+        <Typography>A</Typography>
+        {/* this is a comment */}
+        <Typography>B</Typography>
+        {null}
+        <Typography>C</Typography>
+        {false}
+        <Typography>D</Typography>
+        {undefined}
+        {null}
+        {false}
+        <Typography>E</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(4)
+  })
+
+  it('renders spacers between valid children in an array', () => {
+    const content = [
+      <Typography key="A">A</Typography>,
+      null,
+      false,
+      <Typography key="B">B</Typography>,
+      undefined,
+      <View key="C">
+        <Typography key="D">D</Typography>
+        <Typography key="E">E</Typography>
+        <Typography key="F">F</Typography>
+      </View>,
+      <Fragment key="G">
+        <Typography key="H">H</Typography>
+        <Typography key="I">I</Typography>
+      </Fragment>
+    ]
+
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    // Between A, B, C, H, I = 4
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(4)
+  })
+})
+
+describe('getStackedContent (Dividers)', () => {
+  it('renders dividers between simple children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(queryAllByTestId(/Stack-Divider-\d$/)).toHaveLength(2)
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('renders dividers between valid children in an array', () => {
+    const content = [
+      <Typography key="A">A</Typography>,
+      null,
+      false,
+      <Typography key="B">B</Typography>,
+      undefined,
+      <View key="C">
+        <Typography key="D">D</Typography>
+        <Typography key="E">E</Typography>
+        <Typography key="F">F</Typography>
+      </View>,
+      <Fragment key="G">
+        <Typography key="H">H</Typography>
+        <Typography key="I">I</Typography>
+      </Fragment>
+    ]
+
+    const { queryAllByTestId } = render(
+      <StackedContent space={1} divider>
+        {content}
+      </StackedContent>,
+      {
+        wrapper: Theme
+      }
+    )
+
+    // Between A, B, C, H, I = 4
+    expect(queryAllByTestId(/Stack-Divider-\d+$/)).toHaveLength(4)
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('gives dividers spacing according to own space prop and spacing scale', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+
+    const { getByTestId } = render(
+      <StackedContent space={2} divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
+  })
+
+  it('can pass props down to dividers', () => {
+    const tokens = { color: '#012345' }
+
+    const { getByTestId } = render(
+      <StackedContent divider={{ tokens, vertical: true }}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: tokens.color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: tokens.color })
+  })
+})
+
+describe('getStackedContent (Boxes)', () => {
+  it('renders boxes around simple children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent box>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(queryAllByTestId(/Stack-Box-\d$/)).toHaveLength(3)
+    expect(queryAllByTestId(/Stack-Divider/)).toHaveLength(0)
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('gives boxes spacing according to own space prop and spacing scale', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = {
+      paddingTop: expectedSize,
+      paddingLeft: expectedSize,
+      paddingBottom: expectedSize,
+      paddingRight: expectedSize
+    }
+
+    const { getByTestId } = render(
+      <StackedContent space={2} box>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Box-0')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-2')).toHaveStyle(expectedStyle)
+  })
+
+  it('gives boxes spacing on specified sides only, if box props object is passed', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = {
+      paddingTop: expectedSize,
+      paddingLeft: expectedSize
+    }
+    const unexpectedStyle = {
+      paddingBottom: expectedSize,
+      paddingRight: expectedSize
+    }
+
+    const { getByTestId } = render(
+      <StackedContent box={{ top: 2, left: 2 }}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Box-0')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-2')).toHaveStyle(expectedStyle)
+
+    expect(getByTestId('Stack-Box-0')).not.toHaveStyle(unexpectedStyle)
+    expect(getByTestId('Stack-Box-1')).not.toHaveStyle(unexpectedStyle)
+    expect(getByTestId('Stack-Box-2')).not.toHaveStyle(unexpectedStyle)
+  })
+})

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')
+  })
+})