@telus-uds/components-base 1.26.0 → 1.27.0

package/__tests17__/Select/Select.test.jsx

@@ -1,94 +0,0 @@
-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()
-
-      const event = { target: { value: 'item-1' } }
-      fireEvent.change(getByTestId('Test-Select'), event)
-
-      expect(onChange).toHaveBeenCalledTimes(1)
-      expect(onChange).toHaveBeenLastCalledWith('item-1', event)
-    })
-
-    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/__tests17__/SideNav/SideNav.test.jsx

@@ -1,110 +0,0 @@
-import React from 'react'
-import { Platform } from 'react-native'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { SideNav } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-describe('SideNav', () => {
-  // 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('renders group items inaccessible when collapsed', () => {
-      const { getByRole } = render(
-        <SideNav>
-          <SideNav.ItemsGroup label="Test group">
-            <SideNav.Item>Test item</SideNav.Item>
-          </SideNav.ItemsGroup>
-        </SideNav>,
-        {
-          wrapper: Theme
-        }
-      )
-
-      expect(getByRole('link')).toHaveProp('focusable', false)
-    })
-
-    it('makes the group items accessible when expanded', () => {
-      const { getByRole, getByText } = render(
-        <SideNav>
-          <SideNav.ItemsGroup label="Test group">
-            <SideNav.Item>Test item</SideNav.Item>
-          </SideNav.ItemsGroup>
-        </SideNav>,
-        {
-          wrapper: Theme
-        }
-      )
-
-      expect(getByRole('link')).toHaveProp('focusable', false) // groups are collapsed by default
-
-      fireEvent.press(getByText('Test group'))
-
-      expect(getByRole('link')).not.toHaveProp('focusable')
-    })
-  }
-
-  it('expands multiple groups when accordion = false', () => {
-    const { getAllByA11yState, getByText } = render(
-      <SideNav accordion={false}>
-        <SideNav.ItemsGroup label="Test group 1">
-          <SideNav.Item>Test item</SideNav.Item>
-        </SideNav.ItemsGroup>
-        <SideNav.ItemsGroup label="Test group 2">
-          <SideNav.Item>Test item</SideNav.Item>
-        </SideNav.ItemsGroup>
-      </SideNav>,
-      {
-        wrapper: Theme
-      }
-    )
-
-    fireEvent.press(getByText('Test group 1'))
-    fireEvent.press(getByText('Test group 2'))
-
-    expect(getAllByA11yState({ expanded: true }).length).toBe(2)
-  })
-
-  it('expands only one group when accordion = true', () => {
-    const { getAllByA11yState, getByText } = render(
-      <SideNav accordion>
-        <SideNav.ItemsGroup label="Test group 1">
-          <SideNav.Item>Test item</SideNav.Item>
-        </SideNav.ItemsGroup>
-        <SideNav.ItemsGroup label="Test group 2">
-          <SideNav.Item>Test item</SideNav.Item>
-        </SideNav.ItemsGroup>
-      </SideNav>,
-      {
-        wrapper: Theme
-      }
-    )
-
-    fireEvent.press(getByText('Test group 1'))
-    fireEvent.press(getByText('Test group 2'))
-
-    expect(getAllByA11yState({ expanded: true }).length).toBe(1)
-  })
-
-  describe('Item', () => {
-    it('triggers the onPress callback when pressed', () => {
-      const itemId = 'item-id'
-      const groupId = 'group-id'
-      const onPress = jest.fn()
-
-      const { getByText } = render(
-        <SideNav.Item onPress={onPress} itemId={itemId} groupId={groupId}>
-          Test item
-        </SideNav.Item>,
-        {
-          wrapper: Theme
-        }
-      )
-
-      fireEvent.press(getByText('Test item'))
-
-      expect(onPress).toHaveBeenCalledTimes(1)
-      expect(onPress).toHaveBeenLastCalledWith(itemId, groupId)
-    })
-  })
-})

package/__tests17__/Skeleton/Skeleton.test.jsx

@@ -1,61 +0,0 @@
-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/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/__tests17__/SkipLink/SkipLink.test.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Text } from 'react-native'
-import { SkipLink } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-import testTheme from '../../__fixtures__/testTheme'
-
-const href = '#prefered-content'
-const content = 'Skip to main content'
-
-const setup = ({ tokens } = {}) =>
-  render(
-    <Theme>
-      <SkipLink href={href} tokens={tokens}>
-        {content}
-      </SkipLink>
-    </Theme>
-  )
-
-describe('SkipLink', () => {
-  it('renders a skip link', () => {
-    const { getByText } = setup()
-    const skipLinkContent = getByText(content)
-    expect(skipLinkContent).toBeTruthy()
-    expect(skipLinkContent).toHaveTextContent(content)
-  })
-
-  it('renders skip link with the default style when focused', () => {
-    const { color, ...containerStyle } = testTheme.components.SkipLink.tokens
-    const { getByText } = setup()
-    const skipLink = getByText(content)
-    const container = skipLink.parent
-
-    expect(container).toHaveStyle(containerStyle)
-    expect(skipLink).toHaveStyle({ color })
-  })
-
-  it('renders content when passed a React element', () => {
-    const { getByText } = render(
-      <SkipLink>
-        <Text href={href}>{content}</Text>
-      </SkipLink>,
-      { wrapper: Theme }
-    )
-
-    const skipContent = getByText(content)
-    expect(skipContent).toBeTruthy()
-  })
-
-  it('renders a card with custom tokens', () => {
-    const customStyle = {
-      backgroundColor: '#cecfcd',
-      paddingVertical: 99
-    }
-
-    const { getByText } = setup({ tokens: customStyle })
-    const skipLink = getByText(content).parent
-    expect(skipLink).toHaveStyle({ ...customStyle })
-  })
-})

package/__tests17__/Spacer/Spacer.test.jsx

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

package/__tests17__/StackView/StackView.test.jsx

@@ -1,211 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { Spacer, StackView, Typography } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-import testTheme from '../../__fixtures__/testTheme'
-import { getFirstAncestorOfType } from '../../__fixtures__/test-utils'
-
-describe('StackView', () => {
-  it('renders separators and children as direct children of a flex column by default', () => {
-    const expectedStyle = { flexDirection: 'column' }
-
-    const { getByTestId } = render(
-      <StackView space={2}>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-    const { parent } = getFirstAncestorOfType(getByTestId('Stack-Spacer-1'), Spacer)
-    expect(parent.type).toBe('View')
-    expect(parent).toHaveStyle(expectedStyle)
-  })
-
-  it('renders separators and children as direct children of a flex column if direction is "column-reverse"', () => {
-    const expectedStyle = { flexDirection: 'column-reverse' }
-
-    const { getByTestId } = render(
-      <StackView direction="column-reverse" space={2}>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-    const { parent } = getFirstAncestorOfType(getByTestId('Stack-Spacer-1'), Spacer)
-    expect(parent.type).toBe('View')
-    expect(parent).toHaveStyle(expectedStyle)
-  })
-
-  it('renders separators and children as direct children of a flex row if direction is "row"', () => {
-    const expectedStyle = { flexDirection: 'row' }
-
-    const { getByTestId } = render(
-      <StackView direction="row" space={2}>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-    const { parent } = getFirstAncestorOfType(getByTestId('Stack-Spacer-1'), Spacer)
-    expect(parent.type).toBe('View')
-    expect(parent).toHaveStyle(expectedStyle)
-  })
-
-  it('renders separators and children as direct children of a flex row if direction is "row-reverse"', () => {
-    const expectedStyle = { flexDirection: 'row-reverse' }
-
-    const { getByTestId } = render(
-      <StackView direction="row-reverse" space={2}>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-    const { parent } = getFirstAncestorOfType(getByTestId('Stack-Spacer-1'), Spacer)
-    expect(parent.type).toBe('View')
-    expect(parent).toHaveStyle(expectedStyle)
-  })
-
-  it('renders horizontal dividers by default', () => {
-    const expectedSize = 4 // from __fixtures__/testTheme.js
-    const expectedStyle = { height: expectedSize }
-    const { color } = testTheme.components.Divider.tokens
-
-    const { getByTestId } = render(
-      <StackView divider>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-        <Typography>C</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-
-    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderBottomColor: color })
-    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderBottomColor: color })
-
-    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderRightColor: color })
-    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderRightColor: color })
-
-    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
-  })
-
-  it('renders horizontal dividers if direction is "column-reverse"', () => {
-    const expectedSize = 4 // from __fixtures__/testTheme.js
-    const expectedStyle = { height: expectedSize }
-    const { color } = testTheme.components.Divider.tokens
-
-    const { getByTestId } = render(
-      <StackView direction="column-reverse" divider>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-        <Typography>C</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-
-    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderBottomColor: color })
-    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderBottomColor: color })
-
-    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderRightColor: color })
-    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderRightColor: color })
-
-    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
-  })
-
-  it('renders vertical dividers if direction is "row"', () => {
-    const { color } = testTheme.components.Divider.tokens
-    const expectedSize = 4 // from __fixtures__/testTheme.js
-    const expectedStyle = { width: expectedSize }
-
-    const { getByTestId } = render(
-      <StackView divider direction="row">
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-        <Typography>C</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-
-    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderBottomColor: color })
-    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderBottomColor: color })
-
-    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: color })
-    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: color })
-
-    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
-  })
-
-  it('renders vertical dividers if direction is "row-reverse"', () => {
-    const { color } = testTheme.components.Divider.tokens
-    const expectedSize = 4 // from __fixtures__/testTheme.js
-    const expectedStyle = { width: expectedSize }
-
-    const { getByTestId } = render(
-      <StackView divider direction="row-reverse">
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-        <Typography>C</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-
-    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderBottomColor: color })
-    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderBottomColor: color })
-
-    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: color })
-    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: color })
-
-    expect(getByTestId('Stack-Divider-1-Spacer-before')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-1-Spacer-after')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-2-Spacer-before')).toHaveStyle(expectedStyle)
-    expect(getByTestId('Stack-Divider-2-Spacer-after')).toHaveStyle(expectedStyle)
-  })
-
-  it('renders row spacers if direction is "row"', () => {
-    const expectedSize = 8 // from __fixtures__/testTheme.js
-
-    const { getByTestId } = render(
-      <StackView direction="row" space={2}>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-        <Typography>C</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-
-    expect(getByTestId('Stack-Spacer-1')).not.toHaveStyle({ height: expectedSize })
-    expect(getByTestId('Stack-Spacer-2')).not.toHaveStyle({ height: expectedSize })
-
-    expect(getByTestId('Stack-Spacer-1')).toHaveStyle({ width: expectedSize })
-    expect(getByTestId('Stack-Spacer-2')).toHaveStyle({ width: expectedSize })
-  })
-
-  it('renders row spacers if direction is "row-reverse"', () => {
-    const expectedSize = 8 // from __fixtures__/testTheme.js
-
-    const { getByTestId } = render(
-      <StackView direction="row-reverse" space={2}>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-        <Typography>C</Typography>
-      </StackView>,
-      { wrapper: Theme }
-    )
-
-    expect(getByTestId('Stack-Spacer-1')).not.toHaveStyle({ height: expectedSize })
-    expect(getByTestId('Stack-Spacer-2')).not.toHaveStyle({ height: expectedSize })
-
-    expect(getByTestId('Stack-Spacer-1')).toHaveStyle({ width: expectedSize })
-    expect(getByTestId('Stack-Spacer-2')).toHaveStyle({ width: expectedSize })
-  })
-})

package/__tests17__/StackView/StackWrap.test.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import { StackWrap, Typography } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-describe('StackWrap', () => {
-  it('renders no spacers (because they would wrap badly)', () => {
-    const { queryAllByTestId } = render(
-      <StackWrap space={2}>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-        <Typography>C</Typography>
-      </StackWrap>,
-      { wrapper: Theme }
-    )
-    expect(queryAllByTestId(/Spacer/)).toHaveLength(0)
-  })
-
-  it('puts a `gap` between lines which may be different to `space` between items', () => {
-    // This test unavoidably hangs on some implementation details,
-    // which isn't ideal, but it does test something a user would see.
-    const expectedStyle = { paddingBottom: 8, paddingRight: 4 }
-
-    const { getByTestId } = render(
-      <StackWrap space={1} gap={2}>
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-      </StackWrap>,
-      { wrapper: Theme }
-    )
-    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
-  })
-
-  it('accepts accessibility props on the container responsible for wrapping content', () => {
-    const expectedStyle = { flexWrap: 'wrap' }
-
-    const { getByRole } = render(
-      <StackWrap accessibilityRole="radiogroup">
-        <Typography>A</Typography>
-        <Typography>B</Typography>
-      </StackWrap>,
-      { wrapper: Theme }
-    )
-    expect(getByRole('radiogroup')).toHaveStyle(expectedStyle)
-  })
-})