@telus-uds/components-base 2.0.0 → 2.0.2

package/__tests17__/Tags/Tags.test.jsx

@@ -1,327 +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 Tags from '../../src/Tags'
-
-const items = [
-  { label: 'One', id: 'one', accessibilityLabel: 'Option one' },
-  { label: 'Two', id: 'two', accessibilityLabel: 'Option two' },
-  { label: 'Three', id: 'three', accessibilityLabel: 'Option three' },
-  { label: 'Four', id: 'four', accessibilityLabel: 'Option 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('Tags', () => {
-  // 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 `values` without `onChange`', () => {
-    expect(() =>
-      render(
-        <Theme>
-          <Tags items={items} values={['one']} />
-        </Theme>
-      )
-    ).toThrow(/values.+without.+onChange/)
-  })
-  it("Doesn't throw if has `values` without `onChange` and is read only", () => {
-    expect(() =>
-      render(
-        <Theme>
-          <Tags items={items} values={['one']} readOnly />
-        </Theme>
-      )
-    ).not.toThrow()
-  })
-  it('Throws if has both `values` and `initialValues`', () => {
-    expect(() =>
-      render(
-        <Theme>
-          <Tags items={items} values={['one']} initialValues={['one']} onChange={() => {}} />
-        </Theme>
-      )
-    ).toThrow(/both(?=.*initialValues)(?=.*values){2}/)
-  })
-})
-
-describe('Tags (uncontrolled)', () => {
-  // These tests are almost the same as ButtonGroup while Tags-specific behaviours are still TBC
-  it('Selects one and only one item if maxValues is passed', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <Tags items={items} maxValues={1} />
-      </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('Deselects if the selected item is pressed', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <Tags 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('Selects <= two items when maxValues === 2', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <Tags items={items} maxValues={2} />
-      </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(2)
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
-
-    const four = getByText('Four')
-    await fireEvent.press(four)
-    expect(queryAllByA11yState(checked)).toHaveLength(2)
-    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
-  })
-
-  it('Is accessible as checkboxes by default', async () => {
-    const { queryAllByA11yRole, queryAllByA11yState } = render(
-      <Theme>
-        <Tags 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('Selects unlimited items by default', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <Tags 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('Auto-selects any provided initialValues', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <Tags items={items} initialValues={['one', 'two']} maxValues={3} />
-      </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()
-
-    const four = getByText('Four')
-    await fireEvent.press(four)
-    expect(queryAllByA11yState(checked)).toHaveLength(3)
-    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
-
-    const two = getByText('Two')
-    await fireEvent.press(two)
-    expect(queryAllByA11yState(checked)).toHaveLength(2)
-    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
-  })
-})
-
-describe('Tags (controlled)', () => {
-  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <Tags items={items} values={[]} 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 `values` is passed", async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <Tags items={items} values={['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()
-  })
-
-  it('Does not render an invalid `values` invalidly', async () => {
-    const { queryAllByA11yState } = render(
-      <Theme>
-        <Tags items={items} values={['one', 'two', 'three']} maxValues={2} onChange={() => {}} />
-      </Theme>
-    )
-    expect(queryAllByA11yState(checked)).toHaveLength(2)
-    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
-    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
-  })
-})
-
-describe('Tags (read-only)', () => {
-  it("Doesn't call onChange handler when read-only", async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <Tags items={items} values={[]} 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>
-        <Tags items={items} values={['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__/TextInput/TextArea.test.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Platform } from 'react-native'
-import { TextArea } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-import { fireChange } from '../../__fixtures__/test-utils'
-
-describe('TextArea', () => {
-  it('renders', () => {
-    // at least one called test is required in a suite
-    render(<TextArea />, { wrapper: Theme })
-  })
-
-  // 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('grows in size on input', () => {
-      const { getByTestId } = render(
-        <TextArea tokens={{ minLines: 1, maxLines: 5, lineHeight: 20 }} testID="textarea" />,
-        {
-          wrapper: Theme
-        }
-      )
-
-      const textarea = getByTestId('textarea')
-
-      expect(textarea).toHaveStyle({ height: 20 })
-
-      fireChange(textarea, '\n\n\n')
-
-      expect(textarea).toHaveStyle({ height: 60 })
-    })
-  }
-})

package/__tests17__/TextInput/TextInputBase.test.jsx

@@ -1,125 +0,0 @@
-import { fireEvent, render } from '@testing-library/react-native'
-import React from 'react'
-import TextInputBase from '../../src/TextInput/TextInputBase'
-import Viewport from '../../__fixtures__/Viewport'
-import Theme from '../../__fixtures__/Theme'
-import { getMockEvent, fireChange } from '../../__fixtures__/test-utils'
-
-// eslint-disable-next-line react/prop-types
-const Wrapper = ({ children }) => (
-  <Viewport viewport="xs">
-    <Theme>{children}</Theme>
-  </Viewport>
-)
-
-const text = 'new value'
-const changeEvent = getMockEvent({ text })
-
-describe('TextInputBaseBase', () => {
-  it('triggers the interactive callbacks', () => {
-    const onFocus = jest.fn()
-    const onBlur = jest.fn()
-    const onMouseOver = jest.fn()
-    const onMouseOut = jest.fn()
-
-    const { getByA11yLabel } = render(
-      <TextInputBase
-        accessibilityLabel="Input label"
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onMouseOver={onMouseOver}
-        onMouseOut={onMouseOut}
-      />,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    const input = getByA11yLabel('Input label')
-
-    expect(onFocus).not.toHaveBeenCalled()
-    fireEvent(input, 'focus')
-    expect(onFocus).toHaveBeenCalledTimes(1)
-
-    expect(onBlur).not.toHaveBeenCalled()
-    fireEvent(input, 'blur')
-    expect(onBlur).toHaveBeenCalledTimes(1)
-
-    expect(onMouseOver).not.toHaveBeenCalled()
-    fireEvent(input, 'mouseOver')
-    expect(onMouseOver).toHaveBeenCalledTimes(1)
-
-    expect(onMouseOut).not.toHaveBeenCalled()
-    fireEvent(input, 'mouseOut')
-    expect(onMouseOut).toHaveBeenCalledTimes(1)
-  })
-
-  it("can't be edited when inactive", () => {
-    const { getByA11yLabel } = render(<TextInputBase accessibilityLabel="Input label" inactive />, {
-      wrapper: Wrapper
-    })
-
-    const input = getByA11yLabel('Input label')
-
-    expect(input).toHaveProp('editable', false)
-  })
-
-  it('changes value when uncontrolled', () => {
-    const onChange = jest.fn()
-
-    const { getByA11yLabel } = render(
-      <TextInputBase accessibilityLabel="Input label" onChange={onChange} />,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    const input = getByA11yLabel('Input label')
-
-    expect(onChange).not.toHaveBeenCalled()
-    fireChange(input, text)
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenLastCalledWith(text, changeEvent)
-  })
-
-  it('changes value when controlled', () => {
-    const onChange = jest.fn()
-
-    const { getByA11yLabel } = render(
-      <TextInputBase accessibilityLabel="Input label" onChange={onChange} value="initial value" />,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    const input = getByA11yLabel('Input label')
-
-    expect(onChange).not.toHaveBeenCalled()
-
-    fireChange(input, text)
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenLastCalledWith(text, changeEvent)
-  })
-
-  it("doesn't change value when readOnly", () => {
-    const onChange = jest.fn()
-
-    const { getByA11yLabel } = render(
-      <TextInputBase
-        accessibilityLabel="Input label"
-        onChange={onChange}
-        value="initial value"
-        readOnly
-      />,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    const input = getByA11yLabel('Input label')
-
-    expect(onChange).not.toHaveBeenCalled()
-    fireChange(input, text)
-    expect(onChange).not.toHaveBeenCalled()
-  })
-})

package/__tests17__/ThemeProvider/ThemeProvider.test.jsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { renderHook } from '@testing-library/react-hooks'
-import semVerSatisfies from 'semver/functions/satisfies'
-import ThemeProvider, { useTheme, useSetTheme } from '../../src/ThemeProvider'
-import pkg from '../../package.json'
-
-jest.mock('semver/functions/satisfies')
-
-const expectedThemeTokensVersion = 'expected'
-const actualThemeTokensVersion = 'actual'
-pkg.dependencies['@telus-uds/system-theme-tokens'] = expectedThemeTokensVersion
-const theme = {
-  metadata: {
-    name: 'tokens-test',
-    themeTokensVersion: actualThemeTokensVersion
-  },
-  components: {},
-  themeOptions: {
-    enableHelmetSSR: true,
-    forceAbsoluteFontSizing: true,
-    forceZIndex: true
-  }
-}
-
-beforeEach(() => {
-  semVerSatisfies.mockReset()
-})
-
-describe('Uninitialized ThemeProvider context', () => {
-  test('throws on useTheme', () => {
-    const { result } = renderHook(useTheme)
-    expect(() => result.current).toThrow('Theme context used outside of ThemeProvider')
-  })
-
-  test('error useSetTheme hook without provider', () => {
-    const { result } = renderHook(useSetTheme)
-    expect(() => result.current).toThrow('Theme context used outside of ThemeProvider')
-  })
-})
-
-describe('ThemeProvider theme tokens version validation', () => {
-  const renderThemeHook = (hookFn) => {
-    const ThemeWrapper = ({ children }) => (
-      <ThemeProvider defaultTheme={theme}>{children}</ThemeProvider>
-    )
-    ThemeWrapper.propTypes = { children: PropTypes.node.isRequired }
-
-    return renderHook(hookFn, {
-      wrapper: ThemeWrapper
-    })
-  }
-
-  test('validates theme tokens version with semver', () => {
-    semVerSatisfies.mockImplementationOnce(() => true)
-
-    const { result } = renderThemeHook(useTheme)
-
-    expect(result.current).toEqual(theme)
-    expect(semVerSatisfies).toHaveBeenCalledWith(
-      actualThemeTokensVersion,
-      expectedThemeTokensVersion
-    )
-  })
-
-  test('warning if theme tokens version does not match', () => {
-    semVerSatisfies.mockImplementationOnce(() => false)
-
-    const { result } = renderThemeHook(useTheme)
-
-    expect(() => result.current).toThrow('Invalid UDS token schema version detected')
-  })
-
-  test('validates on every render', () => {
-    semVerSatisfies.mockImplementationOnce(() => true)
-
-    const { rerender } = renderThemeHook(useTheme)
-    rerender()
-
-    expect(semVerSatisfies).toHaveBeenCalledTimes(2)
-  })
-})