@telus-uds/components-base 1.7.1 → 1.8.2

package/__tests__/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()
-  })
-})

package/__tests__/Divider/Divider.test.jsx

@@ -1,91 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-import { Text } from 'react-native'
-
-import Divider from '../../src/Divider'
-import Theme from '../../__fixtures__/Theme'
-import testTheme from '../../__fixtures__/testTheme'
-
-describe('Divider', () => {
-  const testID = 'testID'
-  const { width, color } = testTheme.components.Divider.tokens
-  const { width: thickWidth } = testTheme.components.Divider.rules.find(
-    (rule) => rule.if.weight === 'thick'
-  ).tokens
-
-  const horizontalStyles = {
-    borderBottomColor: color,
-    borderBottomWidth: width
-  }
-
-  const verticalStyles = {
-    borderRightColor: color,
-    borderRightWidth: width
-  }
-
-  const thickStyles = {
-    borderBottomColor: color,
-    borderBottomWidth: thickWidth
-  }
-
-  it('renders a horizontal line by default', () => {
-    const { getByTestId } = render(
-      <Theme>
-        <Text>Before</Text>
-        <Divider testID={testID} />
-        <Text>After</Text>
-      </Theme>
-    )
-    const divider = getByTestId(testID)
-    expect(divider).toHaveStyle(horizontalStyles)
-    expect(divider).not.toHaveStyle(verticalStyles)
-  })
-
-  it('renders space above and below a horizontal line if space prop is passed', () => {
-    const expectedSize = 8 // from testTheme.js
-
-    const { getByTestId } = render(
-      <Theme>
-        <Text>Before</Text>
-        <Divider testID={testID} space={2} />
-        <Text>After</Text>
-      </Theme>
-    )
-    const before = getByTestId(`${testID}-Spacer-before`)
-    expect(before).toHaveStyle({ height: expectedSize })
-
-    const after = getByTestId(`${testID}-Spacer-after`)
-    expect(after).toHaveStyle({ height: expectedSize })
-  })
-
-  it('renders space left and right of a vertical line if space prop is passed', () => {
-    const expectedSize = 8 // from testTheme.js
-
-    const { getByTestId } = render(
-      <Theme>
-        <Text>Before</Text>
-        <Divider vertical testID={testID} space={2} />
-        <Text>After</Text>
-      </Theme>
-    )
-    const before = getByTestId(`${testID}-Spacer-before`)
-    expect(before).toHaveStyle({ width: expectedSize })
-
-    const after = getByTestId(`${testID}-Spacer-after`)
-    expect(after).toHaveStyle({ width: expectedSize })
-  })
-
-  it('renders the correct styles for a given variant', () => {
-    const { getByTestId } = render(
-      <Theme>
-        <Text>Before</Text>
-        <Divider testID={testID} variant={{ weight: 'thick' }} />
-        <Text>After</Text>
-      </Theme>
-    )
-    const divider = getByTestId(testID)
-    expect(divider).toHaveStyle(thickStyles)
-    expect(divider).not.toHaveStyle(verticalStyles)
-    expect(divider).not.toHaveStyle(horizontalStyles)
-  })
-})

package/__tests__/ExpandCollapse/ExpandCollapse.test.jsx

@@ -1,109 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { Accordion, ExpandCollapse, Typography } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-describe('ExpandCollapse', () => {
-  it('expands multiple groups when accordion = false', async () => {
-    const { queryAllByA11yState, getByText } = render(
-      <ExpandCollapse>
-        {(expandProps) => (
-          <>
-            <ExpandCollapse.Panel
-              {...expandProps}
-              panelId="first"
-              control={<Typography>First control</Typography>}
-            >
-              <Typography>First content</Typography>
-            </ExpandCollapse.Panel>
-            <ExpandCollapse.Panel
-              {...expandProps}
-              panelId="second"
-              control={<Typography>Second control</Typography>}
-            >
-              <Typography>Second content</Typography>
-            </ExpandCollapse.Panel>
-          </>
-        )}
-      </ExpandCollapse>,
-      {
-        wrapper: Theme
-      }
-    )
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
-    await fireEvent.press(getByText('First control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-    await fireEvent.press(getByText('Second control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(2)
-    await fireEvent.press(getByText('Second control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-  })
-
-  it("calls a panel's provided onPress function in addition to open/close", async () => {
-    const panelId = 'group-id'
-    const onPress = jest.fn()
-
-    const { queryAllByA11yState, getByText } = render(
-      <ExpandCollapse>
-        {(expandProps) => (
-          <ExpandCollapse.Panel
-            {...expandProps}
-            onPress={onPress}
-            panelId={panelId}
-            control={<Typography>First control</Typography>}
-          >
-            <Typography>First content</Typography>
-          </ExpandCollapse.Panel>
-        )}
-      </ExpandCollapse>,
-      {
-        wrapper: Theme
-      }
-    )
-    expect(onPress).toHaveBeenCalledTimes(0)
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
-
-    await fireEvent(getByText('First control'), 'press', { nativeEvent: 'example' })
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-    expect(onPress).toHaveBeenCalledTimes(1)
-    expect(onPress).toHaveBeenLastCalledWith(panelId, { nativeEvent: 'example' })
-  })
-})
-
-describe('Accordion', () => {
-  it('expands only one group', async () => {
-    const { queryAllByA11yState, getByText } = render(
-      <Accordion>
-        {(expandProps) => (
-          <>
-            <Accordion.Panel
-              {...expandProps}
-              panelId="first"
-              control={<Typography>First control</Typography>}
-            >
-              <Typography>First content</Typography>
-            </Accordion.Panel>
-            <Accordion.Panel
-              {...expandProps}
-              panelId="second"
-              control={<Typography>Second control</Typography>}
-            >
-              <Typography>Second content</Typography>
-            </Accordion.Panel>
-          </>
-        )}
-      </Accordion>,
-      {
-        wrapper: Theme
-      }
-    )
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
-    await fireEvent.press(getByText('First control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-    await fireEvent.press(getByText('Second control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-    await fireEvent.press(getByText('Second control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
-  })
-})

package/__tests__/Feedback/Feedback.test.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { Text } from 'react-native'
-import { render } from '@testing-library/react-native'
-
-import Feedback from '../../src/Feedback'
-import Theme from '../../__fixtures__/Theme'
-
-describe('Feedback', () => {
-  it('renders title', () => {
-    const { queryByText } = render(<Feedback title="Test title" />, { wrapper: Theme })
-
-    expect(queryByText('Test title')).toBeTruthy()
-  })
-
-  it('renders content when passed a string', () => {
-    const { queryByText } = render(<Feedback>Test content</Feedback>, { wrapper: Theme })
-
-    expect(queryByText('Test content')).toBeTruthy()
-  })
-
-  it('renders content when passed a React element', () => {
-    const { queryByText } = render(
-      <Feedback>
-        <Text>Test content</Text>
-      </Feedback>,
-      { wrapper: Theme }
-    )
-
-    expect(queryByText('Test content')).toBeTruthy()
-  })
-
-  it("renders content with theme's style prop when passed a function", () => {
-    const { getByText } = render(
-      <Feedback>{({ textStyles }) => <Text style={textStyles}>Test content</Text>}</Feedback>,
-      {
-        wrapper: Theme
-      }
-    )
-
-    expect(getByText('Test content')).toHaveStyle({ fontSize: 14 })
-  })
-})