@telus-uds/components-base 0.0.2-prerelease.6 → 0.0.2-prerelease.7

package/__tests__/Tags/Tags.test.jsx

@@ -0,0 +1,328 @@
+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.press(one)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+
+    expect(handleChange.mock.calls[0][0]).toEqual(['one'])
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(handleChange).toHaveBeenCalledTimes(2)
+    expect(handleChange.mock.calls[1][0]).toEqual(['two'])
+  })
+
+  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/__tests__/TextInput/TextArea.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Platform } from 'react-native'
+import { TextArea } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+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 })
+
+      fireEvent.changeText(textarea, '\n\n\n')
+
+      expect(textarea).toHaveStyle({ height: 60 })
+    })
+  }
+})

package/__tests__/TextInput/{TextInput.test.jsx → TextInputBase.test.jsx}

@@ -1,9 +1,8 @@
-import React from 'react'
 import { fireEvent, render } from '@testing-library/react-native'
-
-import { TextInput } from '../../src'
-import Theme from '../../__fixtures__/Theme'
+import React from 'react'
+import TextInputBase from '../../src/TextInput/TextInputBase'
 import Viewport from '../../__fixtures__/Viewport'
+import Theme from '../../__fixtures__/Theme'
 
 // eslint-disable-next-line react/prop-types
 const Wrapper = ({ children }) => (
@@ -12,40 +11,7 @@ const Wrapper = ({ children }) => (
   </Viewport>
 )
 
-describe('TextInput', () => {
-  it('renders the label', () => {
-    const { queryByText } = render(<TextInput label="Test label content" />, { wrapper: Wrapper })
-
-    expect(queryByText('Test label content')).toBeTruthy()
-  })
-
-  it('renders the hint', () => {
-    const { queryByText } = render(
-      <TextInput label="Test label content" hint="Test hint content" />,
-      { wrapper: Wrapper }
-    )
-
-    expect(queryByText('Test hint content')).toBeTruthy()
-  })
-
-  it('renders the feedback', () => {
-    const { queryByText } = render(<TextInput feedback="Test feedback content" />, {
-      wrapper: Wrapper
-    })
-
-    expect(queryByText('Test feedback content')).toBeTruthy()
-  })
-
-  it('renders the tooltip which content shows up when pressed', () => {
-    const { queryByText, getByRole } = render(
-      <TextInput label="Test label content" tooltip="Test tooltip content" />,
-      { wrapper: Wrapper }
-    )
-
-    fireEvent(getByRole('button'), 'press')
-    expect(queryByText('Test tooltip content')).toBeTruthy()
-  })
-
+describe('TextInputBaseBase', () => {
   it('triggers the interactive callbacks', () => {
     const onFocus = jest.fn()
     const onBlur = jest.fn()
@@ -53,8 +19,8 @@ describe('TextInput', () => {
     const onMouseOut = jest.fn()
 
     const { getByA11yLabel } = render(
-      <TextInput
-        label="Input label"
+      <TextInputBase
+        accessibilityLabel="Input label"
         onFocus={onFocus}
         onBlur={onBlur}
         onMouseOver={onMouseOver}
@@ -85,7 +51,7 @@ describe('TextInput', () => {
   })
 
   it("can't be edited when inactive", () => {
-    const { getByA11yLabel } = render(<TextInput label="Input label" inactive />, {
+    const { getByA11yLabel } = render(<TextInputBase accessibilityLabel="Input label" inactive />, {
       wrapper: Wrapper
     })
 
@@ -97,9 +63,12 @@ describe('TextInput', () => {
   it('changes value when uncontrolled', () => {
     const onChange = jest.fn()
 
-    const { getByA11yLabel } = render(<TextInput label="Input label" onChange={onChange} />, {
-      wrapper: Wrapper
-    })
+    const { getByA11yLabel } = render(
+      <TextInputBase accessibilityLabel="Input label" onChange={onChange} />,
+      {
+        wrapper: Wrapper
+      }
+    )
 
     const input = getByA11yLabel('Input label')
 
@@ -113,7 +82,7 @@ describe('TextInput', () => {
     const onChange = jest.fn()
 
     const { getByA11yLabel } = render(
-      <TextInput label="Input label" onChange={onChange} value="initial value" />,
+      <TextInputBase accessibilityLabel="Input label" onChange={onChange} value="initial value" />,
       {
         wrapper: Wrapper
       }
@@ -131,7 +100,12 @@ describe('TextInput', () => {
     const onChange = jest.fn()
 
     const { getByA11yLabel } = render(
-      <TextInput label="Input label" onChange={onChange} value="initial value" readOnly />,
+      <TextInputBase
+        accessibilityLabel="Input label"
+        onChange={onChange}
+        value="initial value"
+        readOnly
+      />,
       {
         wrapper: Wrapper
       }

package/jest.config.js

@@ -21,7 +21,9 @@ module.exports = {
   moduleNameMapper: {
     '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
   },
-  transformIgnorePatterns: preset.transformIgnorePatterns,
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|@react-native-community|@react-native-picker)'
+  ],
   // Count everything in src when calculating coverage
   collectCoverageFrom: ['src/**/*.{js,jsx}']
 }

package/lib/Button/Button.js

@@ -1,14 +1,21 @@
 import React from 'react';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes from './propTypes';
+import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps } from '../utils/propTypes';
 
 const Button = ({
   accessibilityRole = 'button',
+  tokens,
+  variant,
   ...props
-}) => /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, props, {
-  accessibilityRole: accessibilityRole
-}));
+}) => {
+  const getTokens = useThemeTokensCallback('Button', tokens, variant);
+  return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, props, {
+    tokens: getTokens,
+    accessibilityRole: accessibilityRole
+  }));
+};
 
 Button.propTypes = { ...a11yProps.types,
   ...buttonPropTypes