@telus-uds/components-base 1.26.0 → 1.28.0

package/__tests17__/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/__tests17__/StepTracker/StepTracker.test.jsx

@@ -1,108 +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, ...args }) =>
-  render(
-    <Theme>
-      <Viewport viewport={viewport}>
-        <StepTracker current={current} steps={steps} tokens={tokens} {...args} />
-      </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())
-  })
-
-  it('has appropriate accessibilityValue props', () => {
-    const accessibilityLabel = 'StepTracker label'
-    const current = 3
-    const { getByA11yLabel } = setup({ accessibilityLabel, current })
-    const container = getByA11yLabel(accessibilityLabel)
-
-    expect(container).toHaveProp('accessibilityValue', {
-      min: 0,
-      max: defaultSteps.length - 1,
-      now: current,
-      text: 'Some Step Title 4'
-    })
-  })
-})

package/__tests17__/Tabs/Tabs.test.jsx

@@ -1,49 +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 nav/links by if a navigation role is passed (web-only)', () => {
-    const { queryAllByA11yRole } = render(
-      // navigation role is web-only, but the test runs fine here even on ios
-      // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
-      <Tabs items={linkItems} accessibilityRole="navigation" />,
-      { wrapper: Theme }
-    )
-    expect(queryAllByA11yRole('tablist')).toHaveLength(0)
-    expect(queryAllByA11yRole('navigation')).toHaveLength(1)
-    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')
-  })
-
-  // TODO add a test for the current: 'page' handling (web-only, see https://github.com/telus/universal-design-system/issues/319)
-})