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

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__/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')
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledWith(true)
+    })
+  })
+})

package/__tests__/Divider/Divider.test.jsx

@@ -41,17 +41,38 @@ describe('Divider', () => {
     expect(divider).not.toHaveStyle(verticalStyles)
   })
 
-  it('renders a vertical line when vertical prop is passed', () => {
+  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 vertical testID={testID} />
+        <Divider testID={testID} space={2} />
         <Text>After</Text>
       </Theme>
     )
-    const divider = getByTestId(testID)
-    expect(divider).toHaveStyle(verticalStyles)
-    expect(divider).not.toHaveStyle(horizontalStyles)
+    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', () => {

package/__tests__/Feedback/Feedback.test.jsx

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

package/__tests__/FlexGrid/Col.test.jsx

@@ -48,6 +48,7 @@ describe('FlexGrid.Col offsets', () => {
     )
     const expectIfOffsetExpected = (propViewport) => {
       const target = getByText(`${propViewport}Offset`).parent
+      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfOffsetExpected('xs').toHaveStyle(getOffsetStyle('xs'))
@@ -103,6 +104,7 @@ describe('FlexGrid.Col sizes', () => {
 
     const expectIfSizeExpected = (propViewport) => {
       const target = getByText(propViewport).parent
+      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfSizeExpected('xs').toHaveStyle(getNumericSizeStyle('xs'))
@@ -152,6 +154,7 @@ describe('FlexGrid.Col sizes', () => {
 
     const expectIfSizeExpected = (text) => {
       const target = getByText(text).parent
+      // eslint-disable-next-line jest/valid-expect
       return expected[text] ? expect(target) : expect(target).not
     }
     expectIfSizeExpected('xs-md').toHaveStyle(getNumericSizeStyle('xs'))
@@ -196,6 +199,7 @@ describe('FlexGrid.Col sizes', () => {
     )
     const expectIfHidingExpected = (propViewport) => {
       const target = getByText(propViewport).parent
+      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfHidingExpected('xs').toHaveStyle(hidingStyle)
@@ -244,6 +248,7 @@ describe('FlexGrid.Col horizontalAlign', () => {
 
     const expectIfAlignExpected = (propViewport) => {
       const target = getByText(propViewport).parent
+      // eslint-disable-next-line jest/valid-expect
       return expected[propViewport] ? expect(target) : expect(target).not
     }
     expectIfAlignExpected('xs').toHaveStyle(alignRightStyle)

package/__tests__/InputSupports/InputSupports.test.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import InputSupports from '../../src/InputSupports'
+import Theme from '../../__fixtures__/Theme'
+import Viewport from '../../__fixtures__/Viewport'
+
+// eslint-disable-next-line react/prop-types
+const Wrapper = ({ children }) => (
+  <Viewport viewport="xs">
+    <Theme>{children}</Theme>
+  </Viewport>
+)
+
+describe('InputSupports', () => {
+  it('renders the label', () => {
+    const { queryByText } = render(<InputSupports label="Test label content" />, {
+      wrapper: Wrapper
+    })
+
+    expect(queryByText('Test label content')).toBeTruthy()
+  })
+
+  it('renders the hint', () => {
+    const { queryByText } = render(
+      <InputSupports label="Test label content" hint="Test hint content" />,
+      { wrapper: Wrapper }
+    )
+
+    expect(queryByText('Test hint content')).toBeTruthy()
+  })
+
+  it('renders the feedback', () => {
+    const { queryByText } = render(<InputSupports 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(
+      <InputSupports label="Test label content" tooltip="Test tooltip content" />,
+      { wrapper: Wrapper }
+    )
+
+    fireEvent(getByRole('button'), 'press')
+    expect(queryByText('Test tooltip content')).toBeTruthy()
+  })
+})

package/__tests__/List/List.test.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Text } from 'react-native'
+import { render } from '@testing-library/react-native'
+import { List } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import testTheme from '../../__fixtures__/testTheme'
+
+const setup = ({ showDivider = false, icon, children } = {}) =>
+  render(
+    <Theme>
+      <List showDivider={showDivider}>
+        <List.Item icon={icon}>{children || 'Item'}</List.Item>
+        <List.Item icon={icon}>{children || 'Item'}</List.Item>
+        <List.Item icon={icon}>{children || 'Item'}</List.Item>
+        <List.Item icon={icon}>{children || 'Item'}</List.Item>
+      </List>
+    </Theme>
+  )
+
+describe('List', () => {
+  it('should render bullets by default', () => {
+    const { queryAllByTestId } = setup()
+    const bullet = queryAllByTestId('unordered-item-bullet')
+    expect(bullet.length).toBe(4)
+  })
+
+  it('should render dividers for all items except for the last one', () => {
+    const { getAllByRole } = setup({ showDivider: true })
+    const {
+      interItemMarginWithDivider: marginBottom,
+      dividerColor: borderColor,
+      dividerSize: borderBottomWidth
+    } = testTheme.components.List.tokens
+
+    const listItems = getAllByRole('item')
+
+    listItems.forEach((item, index) => {
+      if (index + 1 !== listItems.length) {
+        expect(item).toHaveStyle({ marginBottom, borderColor, borderBottomWidth })
+      } else {
+        expect(item).toHaveStyle({})
+      }
+    })
+  })
+
+  it('should render the icon when defined', () => {
+    const { queryAllByTestId } = setup({ icon: () => <Text testID="icon" /> })
+
+    const icons = queryAllByTestId('icon')
+
+    expect(icons.length).toBe(4)
+  })
+  it('should allow children nested components', () => {
+    const { queryAllByTestId } = setup({ children: <Text testID="child" /> })
+
+    const children = queryAllByTestId('child')
+
+    expect(children.length).toBe(4)
+  })
+})

package/__tests__/Radio/Radio.test.jsx

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

package/__tests__/Select/Select.test.jsx

@@ -0,0 +1,93 @@
+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()
+
+      fireEvent.change(getByTestId('Test-Select'), { target: { value: 'item-1' } })
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenLastCalledWith('item-1')
+    })
+
+    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__/Skeleton/Skeleton.test.jsx

@@ -0,0 +1,61 @@
+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/src/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

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