@telus-uds/components-base 1.26.0 → 1.28.0

package/__tests17__/Carousel/Carousel.test.jsx

@@ -1,128 +0,0 @@
-import React from 'react'
-import { Text } from 'react-native'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { Carousel } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-const setup = (args = {}) =>
-  render(
-    <Theme>
-      <Carousel {...args}>
-        <Carousel.Item testID="firstSlide">
-          <Text>First</Text>
-        </Carousel.Item>
-        <Carousel.Item testID="secondSlide">
-          <Text>Second</Text>
-        </Carousel.Item>
-        <Carousel.Item testID="thirdSlide">
-          <Text>Third</Text>
-        </Carousel.Item>
-      </Carousel>
-    </Theme>
-  )
-
-const getButtonLabel = (item, of = 3, itemLabel = 'item') => `Show ${itemLabel} ${item} of ${of}`
-
-describe('Carousel', () => {
-  it('renders the first Carousel slide', () => {
-    const { getByTestId } = setup()
-
-    expect(getByTestId('firstSlide')).not.toHaveProp('focusable')
-    expect(getByTestId('secondSlide')).toHaveProp('focusable', false)
-    expect(getByTestId('thirdSlide')).toHaveProp('focusable', false)
-  })
-
-  it('renders the second Carousel slide when clicked on next button', async () => {
-    const { getByTestId, getByA11yLabel } = setup()
-
-    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
-
-    expect(getByTestId('firstSlide')).toHaveProp('focusable', false)
-    expect(getByTestId('secondSlide')).not.toHaveProp('focusable')
-    expect(getByTestId('thirdSlide')).toHaveProp('focusable', false)
-  })
-
-  it('renders the third Carousel slide when clicked on next button twice', async () => {
-    const { getByTestId, getByA11yLabel } = setup()
-
-    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
-    await fireEvent.press(getByA11yLabel(getButtonLabel(3)))
-
-    expect(getByTestId('firstSlide')).toHaveProp('focusable', false)
-    expect(getByTestId('secondSlide')).toHaveProp('focusable', false)
-    expect(getByTestId('thirdSlide')).not.toHaveProp('focusable')
-  })
-
-  it('has correct accessibilityValue values for each slide', async () => {
-    const { getByA11yLabel, getByTestId } = setup({ testID: 'outer-container' })
-
-    const getContainer = () => getByTestId('outer-container')
-
-    expect(getContainer()).toHaveProp('accessibilityValue', {
-      now: 1,
-      min: 1,
-      max: 3
-    })
-    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
-
-    expect(getContainer()).toHaveProp('accessibilityValue', {
-      now: 2,
-      min: 1,
-      max: 3
-    })
-
-    await fireEvent.press(getByA11yLabel(getButtonLabel(3)))
-
-    expect(getContainer()).toHaveProp('accessibilityValue', {
-      now: 3,
-      min: 1,
-      max: 3
-    })
-  })
-
-  it('hides previous button and displays next button when on first slide', async () => {
-    const { getByTestId } = setup()
-
-    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'hidden' })
-    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'visible' })
-  })
-
-  it('displays previous and next buttons when not on first or last slide', async () => {
-    const { getByTestId, getByA11yLabel } = setup()
-
-    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'hidden' })
-    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'visible' })
-
-    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
-
-    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'visible' })
-    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'visible' })
-  })
-
-  it('hides next button and displays previous button when on last slide', async () => {
-    const { getByTestId, getByA11yLabel } = setup()
-
-    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'hidden' })
-    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'visible' })
-
-    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
-    await fireEvent.press(getByA11yLabel(getButtonLabel(3)))
-
-    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'visible' })
-    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'hidden' })
-  })
-
-  it('hides panel navigation when `showPanelNavigation` is false', () => {
-    const { queryByRole } = setup({ tokens: { showPanelNavigation: false } })
-
-    expect(queryByRole('progressbar')).toBeFalsy()
-  })
-
-  it('hides previous/next navigation when `showPreviousNextNavigation` is false', () => {
-    const { queryByTestId } = setup({ tokens: { showPreviousNextNavigation: false } })
-
-    expect(queryByTestId('previous-button-container')).toBeFalsy()
-    expect(queryByTestId('next-button-container')).toBeFalsy()
-  })
-})

package/__tests17__/Carousel/CarouselTabs.test.jsx

@@ -1,142 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { CarouselTabs, Carousel, Typography } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-const setup = ({ pressHandlers = {} } = {}) =>
-  render(
-    <CarouselTabs
-      items={[
-        {
-          title: 'First tab title',
-          content: (
-            <Carousel.Item testID="first">
-              <Typography>First tab content</Typography>
-            </Carousel.Item>
-          ),
-          onPress: pressHandlers.first
-        },
-        {
-          title: 'Second tab title',
-          content: (
-            <Carousel.Item testID="second">
-              <Typography>Second tab content</Typography>
-            </Carousel.Item>
-          ),
-          onPress: pressHandlers.second
-        },
-        {
-          title: 'Third tab title',
-          content: (
-            <Carousel.Item testID="third">
-              <Typography>Third tab content</Typography>
-            </Carousel.Item>
-          ),
-          onPress: pressHandlers.third
-        }
-      ]}
-    />,
-    { wrapper: Theme }
-  )
-
-describe('CarouselTabs', () => {
-  const selectedStyle = {
-    fontWeight: '700'
-  }
-  const unselectedStyle = {
-    fontWeight: '400'
-  }
-
-  it('renders tabs for each item', () => {
-    const { queryByText } = setup()
-
-    expect(queryByText('First tab title')).toBeTruthy()
-    expect(queryByText('Second tab title')).toBeTruthy()
-    expect(queryByText('Third tab title')).toBeTruthy()
-  })
-
-  it('sets the first tab selected by default and has selected styles', async () => {
-    const { getByText } = setup()
-    const firstTab = getByText('First tab title')
-    expect(firstTab).toHaveStyle(selectedStyle)
-  })
-
-  it('sets the first tab selected by default and is not pressable', async () => {
-    const onPress = jest.fn()
-    const { getByText } = setup({ pressHandlers: { first: onPress } })
-
-    const firstTab = getByText('First tab title')
-
-    expect(() => fireEvent.press(firstTab)).toThrow(/No handler function found for event: "press"/)
-  })
-
-  it('sets the second tab unselected by default and is pressable', async () => {
-    const onPress = jest.fn()
-    const { getByText } = setup({ pressHandlers: { second: onPress } })
-
-    const secondTab = getByText('Second tab title')
-
-    expect(onPress).not.toHaveBeenCalled()
-    await fireEvent.press(secondTab)
-    expect(onPress).toHaveBeenCalledTimes(1)
-  })
-
-  it('sets the second tab unselected by default with unselected styles', async () => {
-    const { getByText } = setup()
-    const secondTab = getByText('Second tab title')
-    expect(secondTab).toHaveStyle(unselectedStyle)
-  })
-
-  it('switches selection to last pressed tab', async () => {
-    const onPressFirst = jest.fn()
-    const onPressSecond = jest.fn()
-    const { getByText, getByTestId } = setup({
-      pressHandlers: { first: onPressFirst, second: onPressSecond }
-    })
-
-    const firstTab = getByText('First tab title')
-    const secondTab = getByText('Second tab title')
-
-    const firstSlide = getByTestId('first')
-    const secondSlide = getByTestId('second')
-
-    expect(onPressFirst).not.toHaveBeenCalled()
-    expect(onPressSecond).not.toHaveBeenCalled()
-    expect(firstTab).toHaveStyle(selectedStyle)
-    expect(secondTab).toHaveStyle(unselectedStyle)
-    expect(firstSlide).not.toHaveProp('focusable')
-    expect(secondSlide).toHaveProp('focusable', false)
-
-    // Change selection to second tab
-    await fireEvent.press(secondTab)
-    expect(firstTab).toHaveStyle(unselectedStyle)
-    expect(secondTab).toHaveStyle(selectedStyle)
-    expect(onPressFirst).not.toHaveBeenCalled()
-    expect(onPressSecond).toHaveBeenCalledTimes(1)
-    expect(firstSlide).toHaveProp('focusable', false)
-    expect(secondSlide).not.toHaveProp('focusable')
-
-    expect(() => fireEvent.press(secondTab)).toThrow(/No handler function found for event: "press"/)
-
-    // Change selection to first tab
-    await fireEvent.press(firstTab)
-    expect(firstTab).toHaveStyle(selectedStyle)
-    expect(secondTab).toHaveStyle(unselectedStyle)
-    expect(onPressFirst).toHaveBeenCalledTimes(1)
-    expect(onPressSecond).toHaveBeenCalledTimes(1)
-    expect(firstSlide).not.toHaveProp('focusable')
-    expect(secondSlide).toHaveProp('focusable', false)
-
-    expect(() => fireEvent.press(firstTab)).toThrow(/No handler function found for event: "press"/)
-
-    // Change selection to first tab
-    await fireEvent.press(secondTab)
-    expect(firstTab).toHaveStyle(unselectedStyle)
-    expect(secondTab).toHaveStyle(selectedStyle)
-    expect(onPressFirst).toHaveBeenCalledTimes(1)
-    expect(onPressSecond).toHaveBeenCalledTimes(2)
-    expect(firstSlide).toHaveProp('focusable', false)
-    expect(secondSlide).not.toHaveProp('focusable')
-  })
-})

package/__tests17__/Checkbox/Checkbox.test.jsx

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

package/__tests17__/Checkbox/CheckboxGroup.test.jsx

@@ -1,246 +0,0 @@
-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 CheckboxGroup from '../../src/Checkbox/CheckboxGroup'
-
-const items = [
-  { label: 'One', id: 'one' },
-  { label: 'Two', id: 'two' },
-  { label: 'Three', id: 'three' },
-  { label: 'Four', id: 'four' }
-]
-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('CheckboxGroup', () => {
-  // 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 `checkedIds` without `onChange`', () => {
-    expect(() =>
-      render(
-        <Theme>
-          <CheckboxGroup items={items} checkedIds={['one']} />
-        </Theme>
-      )
-    ).toThrow(/values.+without.+onChange/)
-  })
-  it("Doesn't throw if has `checkedIds` without `onChange` and is read only", () => {
-    expect(() =>
-      render(
-        <Theme>
-          <CheckboxGroup items={items} checkedIds={['one']} readOnly />
-        </Theme>
-      )
-    ).not.toThrow()
-  })
-  it('Throws if has both `checkedIds` and `initialCheckedIds`', () => {
-    expect(() =>
-      render(
-        <Theme>
-          <CheckboxGroup
-            items={items}
-            checkedIds={['one']}
-            initialCheckedIds={['one']}
-            onChange={() => {}}
-          />
-        </Theme>
-      )
-    ).toThrow(/both(?=.*initialValues)(?=.*values){2}/)
-  })
-})
-
-describe('CheckboxGroup (uncontrolled)', () => {
-  it('Selects unlimited items', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <CheckboxGroup 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(2)
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
-
-    const three = getByText('Three')
-    await fireEvent.press(three)
-    expect(queryAllByA11yState(checked)).toHaveLength(3)
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
-
-    const four = getByText('Four')
-    await fireEvent.press(four)
-    expect(queryAllByA11yState(checked)).toHaveLength(4)
-    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
-  })
-
-  it('Deselects if the selected item is pressed', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <CheckboxGroup 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(0)
-    expect(containsText(queryAllByA11yState(checked), 'Three')).not.toBeTruthy()
-  })
-
-  it('Is accessible as checkboxes button', async () => {
-    const { queryAllByA11yRole, queryAllByA11yState } = render(
-      <Theme>
-        <CheckboxGroup items={items} />
-      </Theme>
-    )
-
-    expect(queryAllByA11yRole('radiogroup')).toHaveLength(0)
-    expect(queryAllByA11yRole('radio')).toHaveLength(0)
-
-    const checks = queryAllByA11yRole('checkbox')
-    expect(checks).toHaveLength(4)
-
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-    await fireEvent.press(checks[0])
-    expect(queryAllByA11yState(checked)).toHaveLength(1)
-  })
-
-  it('Auto-selects any provided initialCheckedIds', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <CheckboxGroup items={items} initialCheckedIds={['one', 'two']} />
-      </Theme>
-    )
-    expect(queryAllByA11yState(checked)).toHaveLength(2)
-    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-
-    const three = getByText('Three')
-    await fireEvent.press(three)
-
-    expect(queryAllByA11yState(checked)).toHaveLength(3)
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
-  })
-})
-
-describe('CheckboxGroup (controlled)', () => {
-  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <CheckboxGroup items={items} checkedIds={[]} 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 `checkedIds` is passed", async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <CheckboxGroup items={items} checkedIds={['one']} onChange={() => {}} />
-      </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()
-  })
-})
-
-describe('CheckboxGroup (read-only)', () => {
-  it("Doesn't call onChange handler when read-only", async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <CheckboxGroup items={items} checkedIds={[]} 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>
-        <CheckboxGroup items={items} checkedIds={['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()
-  })
-})