@telus-uds/components-base 1.7.1 → 1.8.2

package/__tests__/ToggleSwitch/ToggleSwitchGroup.test.jsx

@@ -1,192 +0,0 @@
-import React from 'react'
-import { render, fireEvent, within } from '@testing-library/react-native'
-
-import Theme from '../../__fixtures__/Theme'
-import ToggleSwitchGroup from '../../src/ToggleSwitch/ToggleSwitchGroup'
-
-const items = [
-  { label: 'One', id: 'one', accessibilityLabel: 'Option one' },
-  { label: 'Two', id: 'two', accessibilityLabel: 'Option two' },
-  { label: 'Three', id: 'three', accessibilityLabel: 'Option three' },
-  { label: 'Four', id: 'four', accessibilityLabel: 'Option four' }
-]
-const checked = { checked: true }
-const setup = (props) =>
-  render(
-    <Theme>
-      <ToggleSwitchGroup items={items} {...props} />
-    </Theme>
-  )
-
-const hasA11yLabel = (queryResult, label) =>
-  queryResult.some((testInstance) => within(testInstance).queryAllByA11yLabel(label).length)
-
-describe('ToggleSwitchGroup', () => {
-  describe('when uncontrolled', () => {
-    it('toggles on one and only one item by default', async () => {
-      const { getAllByA11yRole, queryAllByA11yState } = setup()
-
-      expect(queryAllByA11yState(checked)).toHaveLength(0)
-
-      const switches = getAllByA11yRole('radio')
-      const one = switches[0]
-      await fireEvent.press(one)
-      let toggledOn = queryAllByA11yState(checked)
-      expect(toggledOn).toHaveLength(1)
-      expect(hasA11yLabel(toggledOn, 'Option one')).toBeTruthy()
-
-      const two = switches[1]
-      await fireEvent.press(two)
-      toggledOn = queryAllByA11yState(checked)
-      expect(toggledOn).toHaveLength(1)
-      expect(hasA11yLabel(toggledOn, 'Option two')).toBeTruthy()
-    })
-
-    it('is accessible as a radio group by default', async () => {
-      const { queryAllByA11yRole } = setup()
-      expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
-      expect(queryAllByA11yRole('radiogroup')).toHaveLength(1)
-      const switches = queryAllByA11yRole('radio')
-      expect(switches).toHaveLength(4)
-    })
-
-    it('is accessible as checkboxes button when maxValues > 1', async () => {
-      const { queryAllByA11yRole, queryAllByA11yState } = setup({ maxValues: 2 })
-
-      expect(queryAllByA11yRole('radiogroup')).toHaveLength(0)
-      expect(queryAllByA11yRole('radio')).toHaveLength(0)
-
-      const switches = queryAllByA11yRole('switch')
-      expect(switches).toHaveLength(4)
-
-      expect(queryAllByA11yState(checked)).toHaveLength(0)
-      await fireEvent.press(switches[0])
-      expect(queryAllByA11yState(checked)).toHaveLength(1)
-    })
-
-    it('selects unlimited items when maxValues is turned off', async () => {
-      const { getAllByA11yRole, queryAllByA11yState } = setup({ maxValues: null })
-
-      expect(queryAllByA11yState(checked)).toHaveLength(0)
-
-      const switches = getAllByA11yRole('switch')
-      const one = switches[0]
-      await fireEvent.press(one)
-      expect(queryAllByA11yState(checked)).toHaveLength(1)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-
-      const two = switches[1]
-      await fireEvent.press(two)
-      expect(queryAllByA11yState(checked)).toHaveLength(2)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-
-      const three = switches[2]
-      await fireEvent.press(three)
-      expect(queryAllByA11yState(checked)).toHaveLength(3)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option three')).toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-    })
-
-    it('auto-selects any provided initialValues', async () => {
-      const { queryAllByA11yState } = setup({
-        initialValues: ['one', 'two'],
-        maxValues: 2
-      })
-      expect(queryAllByA11yState(checked)).toHaveLength(2)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option three')).not.toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option four')).not.toBeTruthy()
-    })
-  })
-
-  describe('when controlled', () => {
-    it('calls onChange handler on press in controlled mode, providing pressed id', async () => {
-      const handleChange = jest.fn((arg) => arg)
-      const { getAllByA11yRole } = setup({ values: [], onChange: handleChange })
-
-      expect(handleChange).toHaveBeenCalledTimes(0)
-
-      const switches = getAllByA11yRole('radio')
-      const one = switches[0]
-      await fireEvent(one, 'press', { nativeEvent: 'example' })
-      expect(handleChange).toHaveBeenCalledTimes(1)
-      expect(handleChange).toHaveBeenCalledWith(['one'], { nativeEvent: 'example' })
-
-      const two = switches[1]
-      await fireEvent(two, 'press', { nativeEvent: 'example2' })
-      expect(handleChange).toHaveBeenCalledTimes(2)
-      expect(handleChange).toHaveBeenLastCalledWith(['two'], { nativeEvent: 'example2' })
-    })
-
-    it("doesn't change its own selection if `values` is passed", async () => {
-      const { getByA11yLabel, queryAllByA11yState } = setup({ values: ['one'], onChange: () => {} })
-
-      expect(queryAllByA11yState(checked)).toHaveLength(1)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-
-      const one = getByA11yLabel('Option one')
-      await fireEvent.press(one)
-      expect(queryAllByA11yState(checked)).toHaveLength(1)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-
-      const two = getByA11yLabel('Option two')
-      await fireEvent.press(two)
-      expect(queryAllByA11yState(checked)).toHaveLength(1)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).not.toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-    })
-
-    it('does not render an invalid `values` invalidly', async () => {
-      const { queryAllByA11yState } = setup({
-        values: ['one', 'two', 'three'],
-        maxValues: 2,
-        onChange: () => {}
-      })
-      expect(queryAllByA11yState(checked)).toHaveLength(2)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).not.toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option three')).toBeTruthy()
-    })
-  })
-
-  describe('when read-only', () => {
-    it("doesn't call onChange handler when read-only", async () => {
-      const handleChange = jest.fn((arg) => arg)
-      const { getByA11yLabel } = setup({ values: [], onChange: handleChange, readOnly: true })
-
-      expect(handleChange).toHaveBeenCalledTimes(0)
-
-      const one = getByA11yLabel('Option one')
-      await fireEvent.press(one)
-      expect(handleChange).toHaveBeenCalledTimes(0)
-
-      const two = getByA11yLabel('Option two')
-      await fireEvent.press(two)
-      expect(handleChange).toHaveBeenCalledTimes(0)
-    })
-
-    it("doesn't change its selection on press", async () => {
-      const { getByA11yLabel, queryAllByA11yState } = setup({
-        values: ['one'],
-        readOnly: true
-      })
-
-      expect(queryAllByA11yState(checked)).toHaveLength(1)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-
-      const one = getByA11yLabel('Option one')
-      await fireEvent.press(one)
-      expect(queryAllByA11yState(checked)).toHaveLength(1)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-
-      const two = getByA11yLabel('Option two')
-      await fireEvent.press(two)
-      expect(queryAllByA11yState(checked)).toHaveLength(1)
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).not.toBeTruthy()
-      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
-    })
-  })
-})

package/__tests__/Tooltip/Tooltip.test.jsx

@@ -1,65 +0,0 @@
-import React from 'react'
-import { fireEvent, render } from '@testing-library/react-native'
-
-import { Text } from 'react-native'
-import { Tooltip } from '../../src'
-
-import Theme from '../../__fixtures__/Theme'
-import Viewport from '../../__fixtures__/Viewport'
-
-const wrapper = ({ children }) => (
-  <Theme>
-    <Viewport>{children}</Viewport>
-  </Theme>
-)
-
-const content = 'tooltip content'
-
-describe('Tooltip', () => {
-  it('renders content after control is pressed', () => {
-    const { queryByText, getByA11yRole } = render(<Tooltip content={content} />, { wrapper })
-
-    expect(queryByText(content)).toBeFalsy()
-
-    fireEvent.press(getByA11yRole('button'))
-
-    expect(queryByText(content)).not.toBeFalsy()
-  })
-
-  it("renders custom control, and renders content after it's pressed", () => {
-    const { queryByTestId, getByA11yRole, queryByText } = render(
-      <Tooltip content={content}>
-        <Text testID="control" />
-      </Tooltip>,
-      { wrapper }
-    )
-
-    expect(queryByTestId('control')).not.toBeFalsy()
-
-    expect(queryByText(content)).toBeFalsy()
-
-    fireEvent.press(getByA11yRole('button'))
-
-    expect(queryByText(content)).not.toBeFalsy()
-  })
-
-  it("renders custom control render function, and renders content after it's pressed", () => {
-    const { queryByTestId, getByA11yRole, queryByText } = render(
-      <Tooltip content={content} variant={{ inverse: true }}>
-        {(pressableState, variant) => (
-          <Text testID="control">{variant.inverse ? 'Inverse' : 'Default'}</Text>
-        )}
-      </Tooltip>,
-      { wrapper }
-    )
-
-    expect(queryByTestId('control')).not.toBeFalsy()
-    expect(queryByText('Inverse')).not.toBeFalsy()
-
-    expect(queryByText(content)).toBeFalsy()
-
-    fireEvent.press(getByA11yRole('button'))
-
-    expect(queryByText(content)).not.toBeFalsy()
-  })
-})

package/__tests__/Tooltip/getTooltipPosition.test.js

@@ -1,79 +0,0 @@
-import getTooltipPosition from '../../lib/Tooltip/getTooltipPosition'
-
-const windowDimensions = {
-  width: 320,
-  height: 400
-}
-
-const tooltipDimensions = {
-  width: 200,
-  height: 40
-}
-
-describe('getTooltipPosition()', () => {
-  it('automatically places the tooltip within viewport', () => {
-    const controlLayout = {
-      right: { x: 20, y: 20 }, // control in top-left corner
-      left: { x: windowDimensions.width - 20, y: 20 }, // control in top-right corner
-      above: { x: windowDimensions.width / 2, y: windowDimensions.height - 20 }, // control in bottom center
-      below: { x: windowDimensions.width / 2, y: 20 } // control in top center
-    }
-
-    Object.keys(controlLayout).forEach((position) => {
-      const result = getTooltipPosition('auto', {
-        controlLayout: { width: 20, height: 20, ...controlLayout[position] },
-        tooltipDimensions,
-        windowDimensions
-      })
-
-      expect(result.position).toBe(position)
-    })
-  })
-
-  it('places the tooltip in the position from prop if that fits within viewport', () => {
-    const controlLayout = {
-      right: { x: 20, y: 20 }, // control in top-left corner
-      left: { x: windowDimensions.width - 20, y: 20 }, // control in top-right corner
-      above: { x: windowDimensions.width / 2, y: windowDimensions.height - 20 }, // control in bottom center
-      below: { x: windowDimensions.width / 2, y: 20 } // control in top center
-    }
-
-    Object.keys(controlLayout).forEach((position) => {
-      const positionProp = position // this would normally come from the component's prop
-
-      const result = getTooltipPosition(positionProp, {
-        controlLayout: { width: 20, height: 20, ...controlLayout[position] },
-        tooltipDimensions,
-        windowDimensions
-      })
-
-      expect(result.position).toBe(position)
-    })
-  })
-
-  it("places the tooltip in a different position if prop wouldn't fit in the viewport", () => {
-    const controlLayout = {
-      right: { x: 20, y: 20 }, // control in top-left corner
-      left: { x: windowDimensions.width - 20, y: 20 }, // control in top-right corner
-      above: { x: windowDimensions.width / 2, y: windowDimensions.height - 20 }, // control in bottom center
-      below: { x: windowDimensions.width / 2, y: 20 } // control in top center
-    }
-
-    const positionProp = {
-      right: 'left',
-      left: 'right',
-      above: 'below',
-      below: 'above'
-    }
-
-    Object.keys(controlLayout).forEach((position) => {
-      const result = getTooltipPosition(positionProp[position], {
-        controlLayout: { width: 20, height: 20, ...controlLayout[position] },
-        tooltipDimensions,
-        windowDimensions
-      })
-
-      expect(result.position).toBe(position)
-    })
-  })
-})

package/__tests__/Typography/typography.test.jsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-import { Platform, View } from 'react-native'
-
-import Typography from '../../src/Typography'
-import Theme from '../../__fixtures__/Theme'
-import testTheme from '../../__fixtures__/testTheme'
-
-describe('Typography', () => {
-  it('renders text with correct styling applied for a given variant', () => {
-    const inverseTokens = testTheme.components.Typography.rules.find(
-      (rule) => rule.if.inverse === true
-    ).tokens
-
-    const { getByText } = render(
-      <Theme>
-        <Typography variant={{ inverse: true }}>Some text</Typography>
-      </Theme>
-    )
-
-    expect(getByText('Some text')).toHaveStyle(inverseTokens)
-  })
-
-  it('applies a textAlign style if an appropriate align prop is passed', () => {
-    const { getByText } = render(
-      <Theme>
-        <Typography align="right">Some text</Typography>
-      </Theme>
-    )
-
-    expect(getByText('Some text')).toHaveStyle({ textAlign: 'right' })
-  })
-
-  it("has 'header' role only when heading prop is provided", () => {
-    const { getByText, getAllByRole } = render(
-      <Theme>
-        <Typography heading>Generic heading</Typography>
-        <Typography heading="h1">h1 heading</Typography>
-        <Typography heading="h2">h2 heading</Typography>
-        <Typography heading="h3">h3 heading</Typography>
-        <Typography heading="h4">h4 heading</Typography>
-        <Typography heading="h5">h5 heading</Typography>
-        <Typography heading="h6">h6 heading</Typography>
-        <Typography>default text</Typography>
-      </Theme>
-    )
-    expect(getAllByRole('header')).toHaveLength(7)
-
-    expect(getByText('Generic heading')).toHaveProp('accessibilityRole', 'header')
-    expect(getByText('h1 heading')).toHaveProp('accessibilityRole', 'header')
-    expect(getByText('h2 heading')).toHaveProp('accessibilityRole', 'header')
-    expect(getByText('h3 heading')).toHaveProp('accessibilityRole', 'header')
-    expect(getByText('h4 heading')).toHaveProp('accessibilityRole', 'header')
-    expect(getByText('h5 heading')).toHaveProp('accessibilityRole', 'header')
-    expect(getByText('h6 heading')).toHaveProp('accessibilityRole', 'header')
-
-    expect(getByText('default text')).not.toHaveProp('accessibilityRole', 'header')
-  })
-
-  it('wraps multiple typography elements when nested', () => {
-    const { queryByText } = render(
-      <Theme>
-        <Typography>
-          <Typography>1A-</Typography>
-          <Typography>2A-</Typography>
-          <Typography>3A-</Typography>
-        </Typography>
-        <View>
-          <Typography>1B-</Typography>
-          <Typography>2B-</Typography>
-          <Typography>3B-</Typography>
-        </View>
-      </Theme>
-    )
-    expect(queryByText('1A-2A-3A-')).toBeTruthy()
-    expect(queryByText('1B-2B-3B-')).not.toBeTruthy()
-  })
-
-  if (Platform.OS !== 'web') {
-    it('applies a maximum text scale based on theme tokens', () => {
-      const { queryByText } = render(
-        <Theme>
-          <Typography>Some Text</Typography>
-        </Theme>
-      )
-      const { fontSize, fontScaleCap } = testTheme.components.Typography.tokens
-      expect(queryByText('Some Text')).toHaveProp('maxFontSizeMultiplier', fontScaleCap / fontSize)
-    })
-  }
-})

package/__tests__/utils/children.test.jsx

@@ -1,128 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { render } from '@testing-library/react-native'
-import { Text, View } from 'react-native'
-
-import { wrapStringsInText } from '../../src/utils'
-import A11yText from '../../src/A11yText'
-
-const TestComponent = ({ children }) => (
-  <View testID="wrapper">{wrapStringsInText(children, { testID: 'text' })}</View>
-)
-TestComponent.propTypes = {
-  children: PropTypes.node
-}
-
-describe('wrapStringsInText', () => {
-  it('combines adjacent strings into one text', () => {
-    const secondString = 'Second string'
-    const { queryAllByTestId } = render(
-      <TestComponent>
-        First string
-        {secondString}
-        Third string
-      </TestComponent>
-    )
-    expect(queryAllByTestId('text')).toHaveLength(1)
-  })
-  it('combines adjacent strings and numbers into one `Text`', () => {
-    const { queryAllByTestId } = render(
-      <TestComponent>
-        First string
-        {12345}
-        Third string
-      </TestComponent>
-    )
-    expect(queryAllByTestId('text')).toHaveLength(1)
-  })
-  it('combines adjacent strings, numbers and A11yText into one `Text`', () => {
-    const { queryAllByTestId } = render(
-      <TestComponent>
-        First string
-        <A11yText text="Some inserted A11yText" />
-        Third string
-      </TestComponent>
-    )
-    expect(queryAllByTestId('text')).toHaveLength(1)
-  })
-  it('combines clusters seperated by another component into multiple `Text`s', () => {
-    const { queryAllByTestId } = render(
-      <TestComponent>
-        First string
-        {12345}
-        Third string
-        <View />
-        Fourth string
-        <A11yText text="Some inserted A11yText" />
-        Fifth string
-        <View />
-        Sixth string
-        {12345}
-        <A11yText text="Some inserted A11yText" />
-        Seventh string
-      </TestComponent>
-    )
-    expect(queryAllByTestId('text')).toHaveLength(3)
-  })
-  it('does not wrap elements that do not need wrapping', () => {
-    const { getByTestId, queryAllByTestId } = render(
-      <TestComponent>
-        Unwrapped text
-        {12345}
-        <View>
-          <Text>
-            Wrapped text inside View
-            {12345}
-          </Text>
-        </View>
-        More unwrapped text
-        {12345}
-        <Text>
-          Wrapped text separate from above unwrapped text
-          {12345}
-        </Text>
-      </TestComponent>
-    )
-    expect(queryAllByTestId('text')).toHaveLength(2)
-    expect(getByTestId('wrapper').children.map((child) => child.type)).toEqual([
-      Text,
-      View,
-      Text,
-      Text
-    ])
-  })
-  it('does not wrap a singular A11yText in `Text`', () => {
-    const { queryAllByTestId } = render(
-      <TestComponent>
-        <A11yText text="Some inserted A11yText" />
-      </TestComponent>
-    )
-    expect(queryAllByTestId('text')).toHaveLength(0)
-  })
-  it('does not wrap an A11yText in `Text` if it is sandwiched by non-text', () => {
-    const { queryAllByTestId } = render(
-      <TestComponent>
-        First string
-        {12345}
-        Third string
-        <View />
-        <A11yText text="Some inserted A11yText" />
-        <View />
-        Sixth string
-        {12345}
-        <A11yText text="Some inserted A11yText" />
-        Seventh string
-      </TestComponent>
-    )
-    expect(queryAllByTestId('text')).toHaveLength(2)
-  })
-  it('does not double-wrap already wrapped `Text`', () => {
-    const { queryAllByTestId } = render(
-      <TestComponent>
-        <Text>Already wrapped</Text>
-        <Text>Also already wrapped</Text>
-      </TestComponent>
-    )
-    expect(queryAllByTestId('text')).toHaveLength(0)
-  })
-})

package/__tests__/utils/containUniqueFields.test.js

@@ -1,25 +0,0 @@
-import { containUniqueFields } from '../../src'
-
-const unique = [
-  { a: 1, b: 'B' },
-  { a: 2, b: 'A' }
-]
-
-const notUnique = [
-  { a: 1, b: 'B' },
-  { a: 1, b: 'A' }
-]
-
-describe('containUniqueFields util', () => {
-  it('returns true if no specified fields have duplicates', () => {
-    expect(containUniqueFields(unique, ['a', 'b'])).toBe(true)
-  })
-
-  it('returns false if specified fields have duplicates', () => {
-    expect(containUniqueFields(notUnique, ['a'])).toBe(false)
-  })
-
-  it('returns false if fields have duplicates, but not the specified ones', () => {
-    expect(containUniqueFields(notUnique, ['b'])).toBe(true)
-  })
-})