@telus-uds/components-base 1.7.0 → 1.8.1

package/__tests__/StackView/StackView.test.jsx

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

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

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

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

@@ -1,40 +0,0 @@
-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')
-  })
-})