@telus-uds/components-base 1.7.0 → 1.8.1

package/__tests__/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/__tests__/Search/Search.test.jsx

@@ -1,73 +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' })
-  })
-})

package/__tests__/Select/Select.test.jsx

@@ -1,94 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { Platform } from 'react-native'
-import { Select } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-describe('Select', () => {
-  it('renders', () => {
-    render(
-      <Select>
-        <Select.Item value="item-1">Item 1</Select.Item>
-        <Select.Item value="item-2">Item 2</Select.Item>
-      </Select>,
-      {
-        wrapper: Theme
-      }
-    )
-  })
-
-  if (Platform.OS === 'web') {
-    it('renders a placeholder', () => {
-      const { queryByText } = render(<Select placeholder="Test placeholder value" />, {
-        wrapper: Theme
-      })
-
-      expect(queryByText('Non-existing value')).toBeFalsy()
-      expect(queryByText('Test placeholder value')).not.toBeFalsy()
-    })
-
-    it('changes value when controlled', () => {
-      const onChange = jest.fn()
-
-      const { getByTestId } = render(
-        <Select value="item-2" onChange={onChange} testID="Test-Select">
-          <Select.Item value="item-1">Item 1</Select.Item>
-          <Select.Item value="item-2">Item 2</Select.Item>
-        </Select>,
-        {
-          wrapper: Theme
-        }
-      )
-
-      expect(onChange).not.toHaveBeenCalled()
-
-      fireEvent.change(getByTestId('Test-Select'), { target: { value: 'item-1' } })
-
-      expect(onChange).toHaveBeenCalledTimes(1)
-      expect(onChange).toHaveBeenLastCalledWith('item-1')
-    })
-
-    it('changes value when uncontrolled', () => {
-      const onChange = jest.fn()
-
-      const { getByTestId } = render(
-        <Select initialValue="item-2" onChange={onChange} testID="Test-Select">
-          <Select.Item value="item-1">Item 1</Select.Item>
-          <Select.Item value="item-2">Item 2</Select.Item>
-        </Select>,
-        {
-          wrapper: Theme
-        }
-      )
-
-      expect(onChange).not.toHaveBeenCalled()
-
-      const event = { target: { value: 'item-1' } }
-      fireEvent.change(getByTestId('Test-Select'), event)
-
-      expect(onChange).toHaveBeenCalledTimes(1)
-      expect(onChange).toHaveBeenLastCalledWith('item-1', event)
-    })
-
-    it("doesn't change value when readOnly", () => {
-      const onChange = jest.fn()
-
-      const { getByTestId } = render(
-        <Select value="item-2" onChange={onChange} testID="Test-Select" readOnly>
-          <Select.Item value="item-1">Item 1</Select.Item>
-          <Select.Item value="item-2">Item 2</Select.Item>
-        </Select>,
-        {
-          wrapper: Theme
-        }
-      )
-
-      expect(onChange).not.toHaveBeenCalled()
-
-      fireEvent.change(getByTestId('Test-Select'), { target: { value: 'item-1' } })
-
-      expect(onChange).not.toHaveBeenCalled()
-    })
-  }
-})

package/__tests__/SideNav/SideNav.test.jsx

@@ -1,110 +0,0 @@
-import React from 'react'
-import { Platform } from 'react-native'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { SideNav } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-describe('SideNav', () => {
-  // TODO: this won't be called until cross-platform Jest tests are configured
-  // see https://github.com/telus/universal-design-system/issues/319
-  if (Platform.OS === 'web') {
-    it('renders group items inaccessible when collapsed', () => {
-      const { getByRole } = render(
-        <SideNav>
-          <SideNav.ItemsGroup label="Test group">
-            <SideNav.Item>Test item</SideNav.Item>
-          </SideNav.ItemsGroup>
-        </SideNav>,
-        {
-          wrapper: Theme
-        }
-      )
-
-      expect(getByRole('link')).toHaveProp('focusable', false)
-    })
-
-    it('makes the group items accessible when expanded', () => {
-      const { getByRole, getByText } = render(
-        <SideNav>
-          <SideNav.ItemsGroup label="Test group">
-            <SideNav.Item>Test item</SideNav.Item>
-          </SideNav.ItemsGroup>
-        </SideNav>,
-        {
-          wrapper: Theme
-        }
-      )
-
-      expect(getByRole('link')).toHaveProp('focusable', false) // groups are collapsed by default
-
-      fireEvent.press(getByText('Test group'))
-
-      expect(getByRole('link')).not.toHaveProp('focusable')
-    })
-  }
-
-  it('expands multiple groups when accordion = false', () => {
-    const { getAllByA11yState, getByText } = render(
-      <SideNav accordion={false}>
-        <SideNav.ItemsGroup label="Test group 1">
-          <SideNav.Item>Test item</SideNav.Item>
-        </SideNav.ItemsGroup>
-        <SideNav.ItemsGroup label="Test group 2">
-          <SideNav.Item>Test item</SideNav.Item>
-        </SideNav.ItemsGroup>
-      </SideNav>,
-      {
-        wrapper: Theme
-      }
-    )
-
-    fireEvent.press(getByText('Test group 1'))
-    fireEvent.press(getByText('Test group 2'))
-
-    expect(getAllByA11yState({ expanded: true }).length).toBe(2)
-  })
-
-  it('expands only one group when accordion = true', () => {
-    const { getAllByA11yState, getByText } = render(
-      <SideNav accordion>
-        <SideNav.ItemsGroup label="Test group 1">
-          <SideNav.Item>Test item</SideNav.Item>
-        </SideNav.ItemsGroup>
-        <SideNav.ItemsGroup label="Test group 2">
-          <SideNav.Item>Test item</SideNav.Item>
-        </SideNav.ItemsGroup>
-      </SideNav>,
-      {
-        wrapper: Theme
-      }
-    )
-
-    fireEvent.press(getByText('Test group 1'))
-    fireEvent.press(getByText('Test group 2'))
-
-    expect(getAllByA11yState({ expanded: true }).length).toBe(1)
-  })
-
-  describe('Item', () => {
-    it('triggers the onPress callback when pressed', () => {
-      const itemId = 'item-id'
-      const groupId = 'group-id'
-      const onPress = jest.fn()
-
-      const { getByText } = render(
-        <SideNav.Item onPress={onPress} itemId={itemId} groupId={groupId}>
-          Test item
-        </SideNav.Item>,
-        {
-          wrapper: Theme
-        }
-      )
-
-      fireEvent.press(getByText('Test item'))
-
-      expect(onPress).toHaveBeenCalledTimes(1)
-      expect(onPress).toHaveBeenLastCalledWith(itemId, groupId)
-    })
-  })
-})

package/__tests__/Skeleton/Skeleton.test.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Skeleton } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-import testTheme from '../../__fixtures__/testTheme'
-
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
-const { tokens } = testTheme.components.Skeleton
-
-const setup = ({ size = 10, characters, lines, shape } = {}) =>
-  render(
-    <Theme>
-      <Skeleton
-        size={size}
-        characters={characters}
-        lines={lines}
-        shape={shape}
-        aria-label="loader"
-      />
-    </Theme>
-  )
-
-describe('Skeleton', () => {
-  it('should calculate line width based on baseWidth', () => {
-    const { getByTestId } = setup()
-    const { characters, baseWidth } = tokens
-    const lineWidth = characters * baseWidth
-
-    const element = getByTestId('skeleton')
-
-    expect(element).toHaveStyle({ width: lineWidth })
-  })
-
-  it('render a circle', () => {
-    const { getByTestId } = setup({ shape: 'circle' })
-    const { radius } = tokens
-
-    const element = getByTestId('skeleton')
-
-    expect(element.width).toEqual(element.height)
-    expect(element).toHaveStyle({ borderRadius: radius })
-  })
-
-  it('render a square', () => {
-    const { getByTestId } = setup({ shape: 'box' })
-
-    const element = getByTestId('skeleton')
-
-    expect(element.width).toEqual(element.height)
-  })
-
-  it('render multiple lines', () => {
-    const lines = 8
-    const { queryAllByTestId } = setup({ lines })
-
-    const elements = queryAllByTestId('skeleton')
-
-    expect(elements.length).toEqual(lines)
-  })
-})

package/__tests__/Spacer/Spacer.test.jsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Spacer } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-const testID = 'spacer'
-
-describe('Spacer', () => {
-  it('has smallest size from spacing scale by default', () => {
-    const expectedSize = 4 // from __fixtures__/testTheme.js
-    const { getByTestId } = render(<Spacer testID={testID} />, { wrapper: Theme })
-    expect(getByTestId(testID)).toHaveStyle({
-      height: expectedSize
-    })
-  })
-
-  it('has size from spacing scale if space prop passed', () => {
-    const expectedSize = 8 // from __fixtures__/testTheme.js
-    const { getByTestId } = render(<Spacer space={2} testID={testID} />, { wrapper: Theme })
-    expect(getByTestId(testID)).toHaveStyle({
-      height: expectedSize
-    })
-  })
-
-  it('has no size if 0 passed in', () => {
-    const expectedSize = 0
-    const { getByTestId } = render(<Spacer space={0} testID={testID} />, { wrapper: Theme })
-    expect(getByTestId(testID)).toHaveStyle({
-      height: expectedSize
-    })
-  })
-})
-
-describe('Spacer (row)', () => {
-  it('has smallest size from spacing scale by default', () => {
-    const expectedSize = 4 // from __fixtures__/testTheme.js
-    const { getByTestId } = render(<Spacer testID={testID} direction="row" />, { wrapper: Theme })
-    expect(getByTestId(testID)).toHaveStyle({
-      width: expectedSize
-    })
-  })
-
-  it('has size from spacing scale if space prop passed', () => {
-    const expectedSize = 8 // from __fixtures__/testTheme.js
-    const { getByTestId } = render(<Spacer space={2} testID={testID} direction="row" />, {
-      wrapper: Theme
-    })
-    expect(getByTestId(testID)).toHaveStyle({
-      width: expectedSize
-    })
-  })
-
-  it('has no size if 0 passed in', () => {
-    const expectedSize = 0
-    const { getByTestId } = render(<Spacer space={0} testID={testID} direction="row" />, {
-      wrapper: Theme
-    })
-    expect(getByTestId(testID)).toHaveStyle({
-      width: expectedSize
-    })
-  })
-})