@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.10

package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx

@@ -4,7 +4,7 @@ import Theme from '../../__fixtures__/Theme'
 import ActivityIndicator from '../../src/ActivityIndicator'
 
 // Used to remove the "Animated: `useNativeDriver` is not supported because the native animated module is missing." warnings
-jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper')
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
 
 const render = (jsx) => baseRender(jsx, { wrapper: Theme })
 

package/__tests__/Box/Box.test.jsx

@@ -1,30 +1,20 @@
 import React from 'react'
 import { Text } from 'react-native'
 import { render, fireEvent } from '@testing-library/react-native'
-import { viewports } from '@telus-uds/system-constants'
 import { Box } from '../../src'
 import Theme from '../../__fixtures__/Theme'
-import Viewport from '../../__fixtures__/Viewport'
-import testTheme from '../../__fixtures__/testTheme'
 
 const textContent = 'Some text content'
 
-function getSpacing(level, viewport) {
-  const spacing = testTheme.components.Box.levels[viewport][level]
-  if (typeof spacing !== 'number') {
-    throw new Error(
-      `Invalid spacing ${spacing} (${typeof spacing}) for level ${level}, viewport ${viewport}`
-    )
-  }
-  return spacing
-}
+// Based on testTheme
+const expectedScale = [0, 4, 8, 16, 24, 32, 36]
 
 describe('Box', () => {
   it('is scrollable if scroll props provided', async () => {
     const onScroll = jest.fn()
     const { getByText } = render(
       <Theme>
-        <Box scroll scrollProps={{ onScroll }}>
+        <Box scroll={{ onScroll }}>
           <Text>{textContent}</Text>
         </Box>
       </Theme>
@@ -36,53 +26,86 @@ describe('Box', () => {
     expect(onScroll).toHaveBeenCalledTimes(1)
   })
 
-  // Test the style resolution in every viewport
-  viewports.keys.forEach((viewport) => {
-    it(`maps regular props to RN styles at viewport ${viewport}`, () => {
-      const props = {
-        top: 1,
-        below: 2,
-        bottom: 3,
-        left: 4,
-        right: 5
-      }
-      const { getByText } = render(
-        <Theme>
-          <Viewport viewport={viewport}>
-            <Box {...props}>
-              <Text>{textContent}</Text>
-            </Box>
-          </Viewport>
-        </Theme>
-      )
-      expect(getByText(textContent).parent).toHaveStyle({
-        paddingTop: getSpacing(1, viewport),
-        marginBottom: getSpacing(2, viewport),
-        paddingBottom: getSpacing(3, viewport),
-        paddingLeft: getSpacing(4, viewport),
-        paddingRight: getSpacing(5, viewport)
-      })
+  it('maps regular props to RN styles', () => {
+    const props = {
+      top: 1,
+      bottom: 2,
+      left: 3,
+      right: 4
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingTop: expectedScale[1],
+      paddingBottom: expectedScale[2],
+      paddingLeft: expectedScale[3],
+      paddingRight: expectedScale[4]
+    })
+  })
+
+  it(`maps horizontal and vertical props to RN styles`, () => {
+    const props = {
+      horizontal: 1,
+      vertical: 2
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingLeft: expectedScale[1],
+      paddingRight: expectedScale[1],
+      paddingTop: expectedScale[2],
+      paddingBottom: expectedScale[2]
+    })
+  })
+
+  it(`maps all-sides space prop to RN styles`, () => {
+    const props = {
+      space: 3
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingLeft: expectedScale[3],
+      paddingRight: expectedScale[3],
+      paddingTop: expectedScale[3],
+      paddingBottom: expectedScale[3]
     })
+  })
 
-    it(`maps shorthand props to RN styles at viewport ${viewport}`, () => {
-      const props = {
-        horizontal: 6,
-        vertical: 7
-      }
-      const { getByText } = render(
-        <Theme>
-          <Viewport viewport={viewport}>
-            <Box {...props}>
-              <Text>{textContent}</Text>
-            </Box>
-          </Viewport>
-        </Theme>
-      )
-      expect(getByText(textContent).parent).toHaveStyle({
-        // Can't test for paddingTop etc - .toHaveStyle isn't that smart
-        paddingHorizontal: getSpacing(6, viewport),
-        paddingVertical: getSpacing(7, viewport)
-      })
+  it(`applies side overrides in increasing specificity`, () => {
+    const props = {
+      space: 1,
+      horizontal: 2,
+      top: 3,
+      right: 4
+    }
+    const { getByText } = render(
+      <Theme>
+        <Box {...props}>
+          <Text>{textContent}</Text>
+        </Box>
+      </Theme>
+    )
+    expect(getByText(textContent).parent).toHaveStyle({
+      paddingLeft: expectedScale[2],
+      paddingRight: expectedScale[4],
+      paddingTop: expectedScale[3],
+      paddingBottom: expectedScale[1]
     })
   })
 })

package/__tests__/Button/ButtonBase.test.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React from 'react'
 import { render } from '@testing-library/react-native'
 import { Platform, Text } from 'react-native'
@@ -9,41 +8,13 @@ import ButtonBase from '../../src/Button/ButtonBase'
 
 beforeEach(() => jest.clearAllMocks())
 
-describe('ButtonBase', () => {
-  it('throws if both href and onPress are provided', async () => {
-    jest.spyOn(console, 'error').mockImplementation()
-    expect(() =>
-      render(
-        <Theme>
-          <ButtonBase href="example.com" onPress={jest.fn()}>
-            click me
-          </ButtonBase>
-        </Theme>
-      )
-    ).toThrow()
-    expect(console.error).toHaveBeenCalledTimes(1)
-  })
-
-  it('throws if neither href nor onPress are provided', async () => {
-    jest.spyOn(console, 'error').mockImplementation()
-    expect(() =>
-      render(
-        <Theme>
-          <ButtonBase>click me</ButtonBase>
-        </Theme>
-      )
-    ).toThrow()
-    expect(console.error).toHaveBeenCalledTimes(1)
-  })
-})
-
 describe('ButtonBase with render function child', () => {
-  it('recieves text styles in render function from button theme', () => {
+  it('receives tokens in render function child', () => {
     const { tokens } = testTheme.components.Button
-    const arbitraryWeight = '123'
+    const arbitraryWeight = '300'
     const { getByText } = render(
       <Theme>
-        <ButtonBase onPress={() => {}} tokens={{ fontWeight: arbitraryWeight }}>
+        <ButtonBase onPress={() => {}} tokens={{ ...tokens, fontWeight: arbitraryWeight }}>
           {({ textStyles }) => <Text style={textStyles}>Function child</Text>}
         </ButtonBase>
       </Theme>

package/__tests__/Button/ButtonGroup.test.jsx

@@ -106,7 +106,7 @@ describe('ButtonGroup (uncontrolled)', () => {
       </Theme>
     )
     expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
-    expect(queryAllByA11yRole('radioGroup')).toHaveLength(1)
+    expect(queryAllByA11yRole('radiogroup')).toHaveLength(1)
     const radios = queryAllByA11yRole('radio')
     expect(radios).toHaveLength(4)
 
@@ -158,7 +158,7 @@ describe('ButtonGroup (uncontrolled)', () => {
       </Theme>
     )
 
-    expect(queryAllByA11yRole('radioGroup')).toHaveLength(0)
+    expect(queryAllByA11yRole('radiogroup')).toHaveLength(0)
     expect(queryAllByA11yRole('radio')).toHaveLength(0)
 
     const checks = queryAllByA11yRole('checkbox')
@@ -253,15 +253,14 @@ describe('ButtonGroup (controlled)', () => {
     expect(handleChange).toHaveBeenCalledTimes(0)
 
     const one = getByText('One')
-    await fireEvent.press(one)
+    await fireEvent(one, 'press', { nativeEvent: 'example' })
     expect(handleChange).toHaveBeenCalledTimes(1)
-
-    expect(handleChange.mock.calls[0][0]).toEqual(['one'])
+    expect(handleChange).toHaveBeenLastCalledWith(['one'], { nativeEvent: 'example' })
 
     const two = getByText('Two')
-    await fireEvent.press(two)
+    await fireEvent(two, 'press', { nativeEvent: 'example2' })
     expect(handleChange).toHaveBeenCalledTimes(2)
-    expect(handleChange.mock.calls[1][0]).toEqual(['two'])
+    expect(handleChange).toHaveBeenLastCalledWith(['two'], { nativeEvent: 'example2' })
   })
 
   it("Doesn't change its own selection if `values` is passed", async () => {

package/__tests__/Card/Card.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { Text } from 'react-native'
+
+import { Card } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import testTheme from '../../__fixtures__/testTheme'
+
+const contentText = 'This is a card'
+
+const setup = ({ tokens } = {}) =>
+  render(
+    <Theme>
+      <Card tokens={tokens}>
+        <Text>{contentText}</Text>
+      </Card>
+    </Theme>
+  )
+
+describe('Card', () => {
+  it('renders the card content', () => {
+    const { getByText } = setup()
+    const cardContent = getByText(contentText)
+    expect(cardContent).toBeTruthy()
+  })
+
+  it('renders the default style properly', () => {
+    const defaultStyle = testTheme.components.Card.tokens
+    const { getByText } = setup()
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle(defaultStyle)
+  })
+
+  it('renders a card with a custom background color', () => {
+    const backgroundColor = '#0F0F0F'
+    const { getByText } = setup({ tokens: { backgroundColor } })
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle({ backgroundColor })
+  })
+
+  it('renders a card with a custom border', () => {
+    const border = {
+      borderColor: '#123456',
+      borderWidth: 7,
+      borderRadius: 8
+    }
+    const { getByText } = setup({ tokens: { ...border } })
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle({ ...border })
+  })
+
+  it('renders a card with a custom padding', () => {
+    const padding = {
+      paddingBottom: 1,
+      paddingLeft: 2,
+      paddingRight: 3,
+      paddingTop: 4
+    }
+    const { getByText } = setup({ tokens: { ...padding } })
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle({ ...padding })
+  })
+})

package/__tests__/Checkbox/Checkbox.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Checkbox } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+const checkedId = 'Checkbox-Icon'
+const inputId = 'Checkbox-Input'
+const setup = (props) =>
+  render(
+    <Theme>
+      <Checkbox {...props} />
+    </Theme>
+  )
+
+describe('Checkbox', () => {
+  it('renders with defaults', () => {
+    const { getByRole } = setup()
+
+    expect(getByRole('checkbox')).toBeTruthy()
+  })
+
+  it('renders the label', () => {
+    const label = 'Test label message'
+    const { queryByText } = setup({ label })
+
+    expect(queryByText(label)).toBeTruthy()
+  })
+
+  it('renders the feedback', () => {
+    const feedback = 'Test feedback message'
+    const { queryByText } = setup({ feedback })
+
+    expect(queryByText(feedback)).toBeTruthy()
+  })
+
+  it('renders error styling on validation failure', () => {
+    const errorBorderColor = '#e12339' // from __fixtures__/testTheme.js
+    const { getByTestId } = setup({ error: true })
+
+    const checkboxInput = getByTestId(inputId)
+    expect(checkboxInput).toHaveStyle({ borderColor: errorBorderColor })
+  })
+
+  it('triggers the callback', () => {
+    const onChange = jest.fn()
+
+    const { getByRole } = setup({ onChange })
+
+    const checkbox = getByRole('checkbox')
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent(checkbox, 'press')
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('cannot be changed if inactive', () => {
+    const { getByRole, queryByTestId } = setup({ inactive: true })
+
+    const checkbox = getByRole('checkbox')
+    expect(queryByTestId(checkedId)).toBeFalsy()
+    fireEvent(checkbox, '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 checkbox = getByRole('checkbox')
+      expect(queryByTestId(checkedId)).toBeFalsy()
+      fireEvent(checkbox, '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 checkbox = getByRole('checkbox')
+      expect(queryByTestId(checkedId)).toBeFalsy()
+      fireEvent(checkbox, 'press', { nativeEvent: 'example' })
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(true, { nativeEvent: 'example' })
+    })
+  })
+})

package/__tests__/Checkbox/CheckboxGroup.test.jsx

@@ -0,0 +1,246 @@
+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()
+  })
+})