@telus-uds/components-base 1.26.0 → 1.28.0

package/__tests17__/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/__tests17__/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' })
-    })
-  })
-})

package/__tests17__/RadioCard/RadioCardGroup.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 RadioCardGroup from '../../src/RadioCard/RadioCardGroup'
-import Typography from '../../src/Typography'
-
-const items = [
-  { title: 'One', id: 'one', content: <Typography>More card 1 content</Typography> },
-  { title: 'Two', id: 'two', content: <Typography>More card 2 content</Typography> },
-  { title: 'Three', id: 'three', content: <Typography>More card 3 content</Typography> },
-  { title: 'Four', id: 'four', content: <Typography>More card 4 content</Typography> }
-]
-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('RadioCardGroup', () => {
-  // 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>
-          <RadioCardGroup 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>
-          <RadioCardGroup items={items} checkedId="one" readOnly />
-        </Theme>
-      )
-    ).not.toThrow()
-  })
-  it('Throws if has both `checkedId` and `initialCheckedId`', () => {
-    expect(() =>
-      render(
-        <Theme>
-          <RadioCardGroup
-            items={items}
-            initialCheckedId="one"
-            checkedId="one"
-            onChange={() => {}}
-          />
-        </Theme>
-      )
-    ).toThrow(/both(?=.*initialValue)(?=.*value){2}/)
-  })
-})
-
-describe('RadioCardGroup (uncontrolled)', () => {
-  it('Selects one and only one item', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <RadioCardGroup 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('Treats presses on content the same as presses on title', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <RadioCardGroup items={items} />
-      </Theme>
-    )
-
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-
-    const one = getByText('More card 1 content')
-    await fireEvent.press(one)
-    expect(queryAllByA11yState(checked)).toHaveLength(1)
-    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
-
-    const two = getByText('More card 2 content')
-    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>
-        <RadioCardGroup 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>
-        <RadioCardGroup items={items} />
-      </Theme>
-    )
-    expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
-    expect(queryAllByA11yRole('radiogroup').length).toBeTruthy()
-    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>
-        <RadioCardGroup 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('RadioCardGroup (controlled)', () => {
-  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <RadioCardGroup 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>
-        <RadioCardGroup 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('RadioCardGroup (read-only)', () => {
-  it("Doesn't call onChange handler when read-only", async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <RadioCardGroup 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>
-        <RadioCardGroup 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/__tests17__/Search/Search.test.jsx

@@ -1,87 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { Search } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-import { fireChange } from '../../__fixtures__/test-utils'
-
-describe('Search', () => {
-  const commonProps = {
-    accessibilityLabel: 'input',
-    copy: {
-      clearButtonAccessibilityLabel: 'clear-button',
-      submitButtonAccessibilityLabel: 'submit-button'
-    }
-  }
-
-  it('triggers the onSubmit callback when submitted', () => {
-    const onSubmit = jest.fn()
-
-    const { getByA11yLabel } = render(
-      <Search onSubmit={onSubmit} initialValue="initial value" {...commonProps} />,
-      {
-        wrapper: Theme
-      }
-    )
-
-    expect(onSubmit).not.toHaveBeenCalled()
-
-    fireEvent(getByA11yLabel('submit-button'), 'press', { nativeEvent: 'example' })
-
-    expect(onSubmit).toHaveBeenCalledTimes(1)
-    expect(onSubmit).toHaveBeenLastCalledWith('initial value', { nativeEvent: 'example' })
-
-    fireChange(getByA11yLabel('input'), 'new value')
-    fireEvent(getByA11yLabel('submit-button'), 'press', { nativeEvent: 'example' })
-
-    expect(onSubmit).toHaveBeenCalledTimes(2)
-    expect(onSubmit).toHaveBeenLastCalledWith('new value', { nativeEvent: 'example' })
-  })
-
-  it('shows the clear button when text is entered', () => {
-    const { getByA11yLabel } = render(<Search {...commonProps} />, {
-      wrapper: Theme
-    })
-
-    expect(() => getByA11yLabel('clear-button')).toThrow()
-
-    fireChange(getByA11yLabel('input'), 'test value')
-
-    expect(() => getByA11yLabel('clear-button')).not.toThrow()
-  })
-
-  it('removes the input value when clear button is pressed', () => {
-    const onClear = jest.fn()
-    const onChange = jest.fn()
-
-    const { getByA11yLabel } = render(
-      <Search initialValue="test value" onClear={onClear} onChange={onChange} {...commonProps} />,
-      {
-        wrapper: Theme
-      }
-    )
-
-    expect(onClear).not.toHaveBeenCalled()
-    expect(onChange).not.toHaveBeenCalled()
-
-    fireEvent(getByA11yLabel('clear-button'), 'press', { nativeEvent: 'example' })
-
-    expect(onClear).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenLastCalledWith('', { nativeEvent: 'example' })
-  })
-
-  it('triggers the onFocus callback when focused', () => {
-    const onFocus = jest.fn()
-
-    const { getByA11yLabel } = render(
-      <Search onFocus={onFocus} initialValue="initial value" {...commonProps} />,
-      {
-        wrapper: Theme
-      }
-    )
-    expect(onFocus).not.toHaveBeenCalled()
-    fireEvent(getByA11yLabel('input'), 'focus', { nativeEvent: 'example' })
-    expect(onFocus).toHaveBeenCalledTimes(1)
-  })
-})