@telus-uds/components-base 1.7.0 → 1.8.1

package/__tests__/Pagination/Pagination.test.jsx

@@ -1,160 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { Pagination } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-import Viewport from '../../__fixtures__/Viewport'
-
-// eslint-disable-next-line react/prop-types
-const Wrapper = ({ children }) => (
-  <Viewport viewport="xs">
-    <Theme>{children}</Theme>
-  </Viewport>
-)
-
-describe('Pagination', () => {
-  it('truncates the number of rendered elements', () => {
-    const { getByText } = render(
-      <Pagination tokens={{ truncateAbove: 3 }}>
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} />
-      </Pagination>,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    expect(() => getByText('1')).not.toThrow()
-    expect(() => getByText('2')).not.toThrow()
-    expect(() => getByText('...')).not.toThrow()
-    expect(() => getByText('3')).toThrow()
-    expect(() => getByText('4')).toThrow()
-    expect(() => getByText('5')).not.toThrow()
-  })
-
-  it('renders the "Next Page" button when applicable', () => {
-    const { getByA11yLabel } = render(
-      <Pagination>
-        <Pagination.PageButton onPress={() => {}} isActive />
-        <Pagination.PageButton onPress={() => {}} />
-      </Pagination>,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    expect(() => getByA11yLabel(/next/)).not.toThrow()
-    expect(() => getByA11yLabel(/previous/)).toThrow()
-  })
-
-  it('renders the "Previous Page" button when applicable', () => {
-    const { getByA11yLabel } = render(
-      <Pagination>
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} isActive />
-      </Pagination>,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    expect(() => getByA11yLabel(/next/)).toThrow()
-    expect(() => getByA11yLabel(/previous/)).not.toThrow()
-  })
-
-  it('uses correct copy', () => {
-    const { getByA11yLabel } = render(
-      <Pagination copy="fr">
-        <Pagination.PageButton onPress={() => {}} isActive />
-      </Pagination>,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    expect(() => getByA11yLabel(/page actuelle/)).not.toThrow()
-  })
-
-  describe('Pagination Page Button', () => {
-    it('triggers the onPress callback when pressed', () => {
-      const onPress = jest.fn()
-
-      const { getByA11yLabel } = render(
-        <Pagination>
-          <Pagination.PageButton onPress={() => {}} isActive />
-          <Pagination.PageButton onPress={onPress} />
-        </Pagination>,
-        {
-          wrapper: Wrapper
-        }
-      )
-
-      expect(onPress).not.toHaveBeenCalled()
-
-      fireEvent.press(getByA11yLabel('Go to page number 2'))
-
-      expect(onPress).toHaveBeenCalledTimes(1)
-    })
-
-    it('renders a link and passes down hrefAttrs', () => {
-      const { getByA11yLabel } = render(
-        <Pagination>
-          <Pagination.PageButton onPress={() => {}} isActive />
-          <Pagination.PageButton href="test-url" hrefAttrs={{ target: '_blank' }} />
-        </Pagination>,
-        {
-          wrapper: Wrapper
-        }
-      )
-
-      const button = getByA11yLabel('Go to page number 2')
-
-      expect(button).toHaveProp('accessibilityRole', 'link')
-      expect(button).toHaveProp('href', 'test-url')
-      expect(button).toHaveProp('hrefAttrs', { target: '_blank' })
-    })
-  })
-
-  describe('Pagination Side Button', () => {
-    it('triggers the onPress event of the item next to the active one', () => {
-      const onPress = jest.fn()
-
-      const { getByA11yLabel } = render(
-        <Pagination>
-          <Pagination.PageButton onPress={() => {}} isActive />
-          <Pagination.PageButton onPress={onPress} />
-        </Pagination>,
-        {
-          wrapper: Wrapper
-        }
-      )
-
-      expect(onPress).not.toHaveBeenCalled()
-
-      fireEvent.press(getByA11yLabel(/next/))
-
-      expect(onPress).toHaveBeenCalledTimes(1)
-    })
-
-    it('renders a link with href props of the item next to the active one', () => {
-      const { getByA11yLabel } = render(
-        <Pagination>
-          <Pagination.PageButton onPress={() => {}} isActive />
-          <Pagination.PageButton href="test-url" hrefAttrs={{ target: '_blank' }} />
-        </Pagination>,
-        {
-          wrapper: Wrapper
-        }
-      )
-
-      const button = getByA11yLabel(/next/)
-
-      expect(button).toHaveProp('accessibilityRole', 'link')
-      expect(button).toHaveProp('href', 'test-url')
-      expect(button).toHaveProp('hrefAttrs', { target: '_blank' })
-    })
-  })
-})

package/__tests__/Progress/Progress.test.jsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import { Text } from 'react-native'
-import { render, within } from '@testing-library/react-native'
-
-import { Progress } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-const barTokens = {
-  backgroundColor: 'green'
-}
-const percentage = 75
-const progressTokens = {
-  backgroundColor: 'white',
-  borderColor: 'black'
-}
-const a11yLabel = 'Progress bar'
-const progressA11yLabel = 'This is a progress indicator'
-const setup = (
-  { children, ...props } = {
-    children: (
-      <Progress.Bar percentage={percentage} tokens={barTokens} accessibilityLabel={a11yLabel} />
-    )
-  }
-) =>
-  render(
-    <Progress tokens={progressTokens} accessibilityLabel={progressA11yLabel} {...props}>
-      {children}
-    </Progress>,
-    { wrapper: Theme }
-  )
-
-describe('Progress', () => {
-  it('renders with correct percentage and applies tokens accordingly', () => {
-    const { getByA11yLabel } = setup()
-    expect(getByA11yLabel(progressA11yLabel)).toHaveStyle(progressTokens)
-    expect(getByA11yLabel(a11yLabel)).toHaveStyle({
-      width: `${percentage}%`,
-      ...barTokens
-    })
-  })
-
-  it('renders arbitrary content inside the progress bar', () => {
-    const contentText = 'This can be an arbitrary content'
-    const { getByA11yLabel } = setup({
-      children: (
-        <Progress.Bar percentage={percentage} tokens={barTokens} accessibilityLabel={a11yLabel}>
-          <Text>{contentText}</Text>
-        </Progress.Bar>
-      )
-    })
-    expect(within(getByA11yLabel(a11yLabel)).getByText(contentText)).toBeTruthy()
-  })
-
-  it('renders proper accessibility attributes on the progress bar', () => {
-    const { getByA11yRole, getByA11yValue } = setup()
-    expect(getByA11yRole('progressbar')).toBeTruthy()
-    expect(
-      getByA11yValue({ min: 0, max: 100, now: percentage, text: `${percentage}%` })
-    ).toBeTruthy()
-  })
-
-  it('renders stacked progress bars', () => {
-    const inactiveA11yLabel = 'This bar is inactive'
-    const { getByA11yLabel } = setup({
-      children: (
-        <>
-          <Progress.Bar
-            percentage={percentage + 10}
-            variant={{ inactive: true }}
-            accessibilityLabel={inactiveA11yLabel}
-          />
-          <Progress.Bar percentage={percentage} accessibilityLabel={a11yLabel} />
-        </>
-      )
-    })
-    expect(within(getByA11yLabel(progressA11yLabel)).getByA11yLabel(inactiveA11yLabel)).toBeTruthy()
-    expect(within(getByA11yLabel(progressA11yLabel)).getByA11yLabel(a11yLabel)).toBeTruthy()
-  })
-})

package/__tests__/Radio/Radio.test.jsx

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

package/__tests__/Radio/RadioGroup.test.jsx

@@ -1,220 +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 RadioGroup from '../../src/Radio/RadioGroup'
-
-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('RadioGroup', () => {
-  // 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 `checkedId` without `onChange`', () => {
-    expect(() =>
-      render(
-        <Theme>
-          <RadioGroup items={items} checkedId="one" />
-        </Theme>
-      )
-    ).toThrow(/value.+without.+onChange/)
-  })
-  it("Doesn't throw if has `checkedId` without `onChange` and is read only", () => {
-    expect(() =>
-      render(
-        <Theme>
-          <RadioGroup items={items} checkedId="one" readOnly />
-        </Theme>
-      )
-    ).not.toThrow()
-  })
-  it('Throws if has both `checkedId` and `initialCheckedId`', () => {
-    expect(() =>
-      render(
-        <Theme>
-          <RadioGroup items={items} initialCheckedId="one" checkedId="one" onChange={() => {}} />
-        </Theme>
-      )
-    ).toThrow(/both(?=.*initialValue)(?=.*value){2}/)
-  })
-})
-
-describe('RadioGroup (uncontrolled)', () => {
-  it('Selects one and only one item', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <RadioGroup 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(1)
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
-  })
-
-  it('Does not deselect if the selected item is pressed', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <RadioGroup 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(1)
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-  })
-
-  it('Is accessible as a radio button', async () => {
-    const { queryAllByA11yRole, queryAllByA11yState } = render(
-      <Theme>
-        <RadioGroup items={items} />
-      </Theme>
-    )
-
-    expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
-    expect(queryAllByA11yRole('radiogroup')).toHaveLength(1)
-    const radios = queryAllByA11yRole('radio')
-    expect(radios).toHaveLength(4)
-
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-    await fireEvent.press(radios[0])
-    expect(queryAllByA11yState(checked)).toHaveLength(1)
-  })
-
-  it('Auto-selects initialCheckedId', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <RadioGroup items={items} initialCheckedId="two" />
-      </Theme>
-    )
-    expect(queryAllByA11yState(checked)).toHaveLength(1)
-    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-
-    const three = getByText('Three')
-    await fireEvent.press(three)
-
-    expect(queryAllByA11yState(checked)).toHaveLength(1)
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
-  })
-})
-
-describe('RadioGroup (controlled)', () => {
-  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <RadioGroup items={items} checkedId={null} 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 `checkedId` is passed", async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <RadioGroup items={items} checkedId="one" onChange={() => {}} />
-      </Theme>
-    )
-
-    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('RadioGroup (read-only)', () => {
-  it("Doesn't call onChange handler when read-only", async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <RadioGroup items={items} checkedId="two" 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>
-        <RadioGroup items={items} checkedId="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()
-  })
-})

package/__tests__/RadioCard/RadioCard.test.jsx

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