@telus-uds/components-base 2.0.0 → 2.0.2

package/__tests17__/Link/Link.test.jsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import { Platform, Linking } from 'react-native'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import Theme from '../../__fixtures__/Theme'
-import Link from '../../src/Link/Link'
-
-const href = 'https://example.com'
-
-describe('Link', () => {
-  it('renders an accessible link', async () => {
-    const label = 'Test link text'
-    const { getByRole } = render(
-      <Theme>
-        <Link href={href}>{label}</Link>
-      </Theme>
-    )
-
-    const link = getByRole('link')
-    expect(link).toHaveTextContent(label)
-  })
-
-  // 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('defers to platform link handling (web)', async () => {
-      // This test is untested
-      const label = 'Click me'
-      jest.spyOn(Linking, 'openURL')
-      const originalValue = Platform.OS
-      Platform.OS = 'web'
-      const { getByRole } = render(
-        <Theme>
-          <Link href={href}>{label}</Link>
-        </Theme>
-      )
-
-      const el = getByRole('link')
-      fireEvent.press(el)
-      expect(Linking.openURL).not.toHaveBeenCalled()
-      Platform.OS = originalValue
-    })
-  }
-
-  // Default jest OS is ios, this will always be called until
-  // https://github.com/telus/universal-design-system/issues/319
-  if (Platform.OS !== 'web') {
-    it('calls Linking.openURL (mobile)', async () => {
-      const label = 'Click me'
-      jest.spyOn(Linking, 'openURL').mockImplementation(() => {})
-      const { getByRole } = render(
-        <Theme>
-          <Link href={href}>{label}</Link>
-        </Theme>
-      )
-
-      const el = getByRole('link')
-      fireEvent.press(el)
-      expect(Linking.openURL).toHaveBeenCalledTimes(1)
-      expect(Linking.openURL).toHaveBeenCalledWith(href)
-    })
-  }
-})

package/__tests17__/Link/TextButton.test.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import Theme from '../../__fixtures__/Theme'
-import TextButton from '../../src/Link/TextButton'
-
-const label = 'Test TextButton'
-
-describe('Link', () => {
-  it('renders with button role', async () => {
-    const { getByRole } = render(
-      <Theme>
-        <TextButton onPress={() => {}}>{label}</TextButton>
-      </Theme>
-    )
-
-    const textButton = getByRole('button')
-    expect(textButton).toHaveTextContent(label)
-  })
-
-  it('renders a pressable button', async () => {
-    const handlePress = jest.fn()
-    const { getByText } = render(
-      <Theme>
-        <TextButton onPress={handlePress}>{label}</TextButton>
-      </Theme>
-    )
-
-    const textButton = getByText(label)
-
-    expect(handlePress).toHaveBeenCalledTimes(0)
-    await fireEvent.press(textButton)
-    expect(handlePress).toHaveBeenCalledTimes(1)
-  })
-})

package/__tests17__/List/List.test.jsx

@@ -1,82 +0,0 @@
-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'
-import { getFirstAncestorOfType } from '../../__fixtures__/test-utils'
-import ListItemBase from '../../src/List/ListItemBase'
-
-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 { getAllByText } = setup({ showDivider: true })
-    const {
-      interItemMarginWithDivider: marginBottom,
-      dividerColor: borderColor,
-      dividerSize: borderBottomWidth
-    } = testTheme.components.List.tokens
-
-    const listItemTypographies = getAllByText('Item')
-
-    listItemTypographies.forEach((typography, index) => {
-      // React Native has no listitem role (Jest defaults to ios), so to test the rendered List.Item style,
-      // walk up tree to ListItemBase, which is a forwardRef, then down one to the actual element.
-      // Web tests could use listitem role (see https://github.com/telus/universal-design-system/issues/319)
-      const item = getFirstAncestorOfType(typography, ListItemBase).children[0]
-      if (index + 1 !== listItemTypographies.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)
-  })
-  it('can set passed-down props at List and/or List.Item level', () => {
-    const { getByText } = render(
-      <Theme>
-        <List tokens={{ itemFontSize: 123 }}>
-          <List.Item>one</List.Item>
-          <List.Item tokens={{ itemFontSize: 321 }}>two</List.Item>
-          <List.Item tokens={null}>three</List.Item>
-        </List>
-      </Theme>
-    )
-    expect(getByText('one')).toHaveStyle({ fontSize: 123 })
-    expect(getByText('two')).toHaveStyle({ fontSize: 321 })
-    expect(getByText('three')).toHaveStyle({
-      fontSize: testTheme.components.List.tokens.itemFontSize
-    })
-  })
-})

package/__tests17__/Modal/Modal.test.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import { Text } from 'react-native'
-import { fireEvent, render } from '@testing-library/react-native'
-
-import { Modal } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-describe('Modal', () => {
-  it('is not rendered when closed', () => {
-    const { queryByText } = render(
-      <Modal>
-        <Text>Test content</Text>
-      </Modal>,
-      { wrapper: Theme }
-    )
-
-    expect(queryByText('Test content')).toBeFalsy()
-  })
-
-  it('is rendered when open', () => {
-    const { queryByText } = render(
-      <Modal isOpen>
-        <Text>Test content</Text>
-      </Modal>,
-      { wrapper: Theme }
-    )
-
-    expect(queryByText('Test content')).not.toBeFalsy()
-  })
-
-  it('onClose callback is triggered when closing', () => {
-    const onClose = jest.fn()
-
-    const { getByA11yRole } = render(
-      <Modal isOpen onClose={onClose}>
-        <Text>Test content</Text>
-      </Modal>,
-      { wrapper: Theme }
-    )
-
-    expect(onClose).not.toHaveBeenCalled()
-
-    fireEvent.press(getByA11yRole('button'))
-
-    expect(onClose).toHaveBeenCalledTimes(1)
-  })
-})

package/__tests17__/Notification/Notification.test.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { fireEvent, render } from '@testing-library/react-native'
-
-import { Notification } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-describe('Notification', () => {
-  it('is removed when dismiss button is pressed', () => {
-    const content = 'Notification content lands here'
-    const { getByRole, getByText } = render(<Notification dismissible>{content}</Notification>, {
-      wrapper: Theme
-    })
-
-    expect(() => getByText(content)).not.toThrow()
-
-    fireEvent.press(getByRole('button'))
-
-    expect(() => getByText(content)).toThrow()
-  })
-})

package/__tests17__/Pagination/Pagination.test.jsx

@@ -1,160 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { Pagination } from '../../src'
-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('Pagination', () => {
-  it('truncates the number of rendered elements', () => {
-    const { getByText } = render(
-      <Pagination tokens={{ truncateAbove: 3 }}>
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} />
-      </Pagination>,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    expect(() => getByText('1')).not.toThrow()
-    expect(() => getByText('2')).not.toThrow()
-    expect(() => getByText('...')).not.toThrow()
-    expect(() => getByText('3')).toThrow()
-    expect(() => getByText('4')).toThrow()
-    expect(() => getByText('5')).not.toThrow()
-  })
-
-  it('renders the "Next Page" button when applicable', () => {
-    const { getByA11yLabel } = render(
-      <Pagination>
-        <Pagination.PageButton onPress={() => {}} isActive />
-        <Pagination.PageButton onPress={() => {}} />
-      </Pagination>,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    expect(() => getByA11yLabel(/next/)).not.toThrow()
-    expect(() => getByA11yLabel(/previous/)).toThrow()
-  })
-
-  it('renders the "Previous Page" button when applicable', () => {
-    const { getByA11yLabel } = render(
-      <Pagination>
-        <Pagination.PageButton onPress={() => {}} />
-        <Pagination.PageButton onPress={() => {}} isActive />
-      </Pagination>,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    expect(() => getByA11yLabel(/next/)).toThrow()
-    expect(() => getByA11yLabel(/previous/)).not.toThrow()
-  })
-
-  it('uses correct copy', () => {
-    const { getByA11yLabel } = render(
-      <Pagination copy="fr">
-        <Pagination.PageButton onPress={() => {}} isActive />
-      </Pagination>,
-      {
-        wrapper: Wrapper
-      }
-    )
-
-    expect(() => getByA11yLabel(/page actuelle/)).not.toThrow()
-  })
-
-  describe('Pagination Page Button', () => {
-    it('triggers the onPress callback when pressed', () => {
-      const onPress = jest.fn()
-
-      const { getByA11yLabel } = render(
-        <Pagination>
-          <Pagination.PageButton onPress={() => {}} isActive />
-          <Pagination.PageButton onPress={onPress} />
-        </Pagination>,
-        {
-          wrapper: Wrapper
-        }
-      )
-
-      expect(onPress).not.toHaveBeenCalled()
-
-      fireEvent.press(getByA11yLabel('Go to page number 2'))
-
-      expect(onPress).toHaveBeenCalledTimes(1)
-    })
-
-    it('renders a link and passes down hrefAttrs', () => {
-      const { getByA11yLabel } = render(
-        <Pagination>
-          <Pagination.PageButton onPress={() => {}} isActive />
-          <Pagination.PageButton href="test-url" hrefAttrs={{ target: '_blank' }} />
-        </Pagination>,
-        {
-          wrapper: Wrapper
-        }
-      )
-
-      const button = getByA11yLabel('Go to page number 2')
-
-      expect(button).toHaveProp('accessibilityRole', 'link')
-      expect(button).toHaveProp('href', 'test-url')
-      expect(button).toHaveProp('hrefAttrs', { target: '_blank' })
-    })
-  })
-
-  describe('Pagination Side Button', () => {
-    it('triggers the onPress event of the item next to the active one', () => {
-      const onPress = jest.fn()
-
-      const { getByA11yLabel } = render(
-        <Pagination>
-          <Pagination.PageButton onPress={() => {}} isActive />
-          <Pagination.PageButton onPress={onPress} />
-        </Pagination>,
-        {
-          wrapper: Wrapper
-        }
-      )
-
-      expect(onPress).not.toHaveBeenCalled()
-
-      fireEvent.press(getByA11yLabel(/next/))
-
-      expect(onPress).toHaveBeenCalledTimes(1)
-    })
-
-    it('renders a link with href props of the item next to the active one', () => {
-      const { getByA11yLabel } = render(
-        <Pagination>
-          <Pagination.PageButton onPress={() => {}} isActive />
-          <Pagination.PageButton href="test-url" hrefAttrs={{ target: '_blank' }} />
-        </Pagination>,
-        {
-          wrapper: Wrapper
-        }
-      )
-
-      const button = getByA11yLabel(/next/)
-
-      expect(button).toHaveProp('accessibilityRole', 'link')
-      expect(button).toHaveProp('href', 'test-url')
-      expect(button).toHaveProp('hrefAttrs', { target: '_blank' })
-    })
-  })
-})

package/__tests17__/Progress/Progress.test.jsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import { Text } from 'react-native'
-import { render, within } from '@testing-library/react-native'
-
-import { Progress } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-const barTokens = {
-  backgroundColor: 'green'
-}
-const percentage = 75
-const progressTokens = {
-  backgroundColor: 'white',
-  borderColor: 'black'
-}
-const a11yLabel = 'Progress bar'
-const progressA11yLabel = 'This is a progress indicator'
-const setup = (
-  { children, ...props } = {
-    children: (
-      <Progress.Bar percentage={percentage} tokens={barTokens} accessibilityLabel={a11yLabel} />
-    )
-  }
-) =>
-  render(
-    <Progress tokens={progressTokens} accessibilityLabel={progressA11yLabel} {...props}>
-      {children}
-    </Progress>,
-    { wrapper: Theme }
-  )
-
-describe('Progress', () => {
-  it('renders with correct percentage and applies tokens accordingly', () => {
-    const { getByA11yLabel } = setup()
-    expect(getByA11yLabel(progressA11yLabel)).toHaveStyle(progressTokens)
-    expect(getByA11yLabel(a11yLabel)).toHaveStyle({
-      width: `${percentage}%`,
-      ...barTokens
-    })
-  })
-
-  it('renders arbitrary content inside the progress bar', () => {
-    const contentText = 'This can be an arbitrary content'
-    const { getByA11yLabel } = setup({
-      children: (
-        <Progress.Bar percentage={percentage} tokens={barTokens} accessibilityLabel={a11yLabel}>
-          <Text>{contentText}</Text>
-        </Progress.Bar>
-      )
-    })
-    expect(within(getByA11yLabel(a11yLabel)).getByText(contentText)).toBeTruthy()
-  })
-
-  it('renders proper accessibility attributes on the progress bar', () => {
-    const { getByA11yRole, getByA11yValue } = setup()
-    expect(getByA11yRole('progressbar')).toBeTruthy()
-    expect(
-      getByA11yValue({ min: 0, max: 100, now: percentage, text: `${percentage}%` })
-    ).toBeTruthy()
-  })
-
-  it('renders stacked progress bars', () => {
-    const inactiveA11yLabel = 'This bar is inactive'
-    const { getByA11yLabel } = setup({
-      children: (
-        <>
-          <Progress.Bar
-            percentage={percentage + 10}
-            variant={{ inactive: true }}
-            accessibilityLabel={inactiveA11yLabel}
-          />
-          <Progress.Bar percentage={percentage} accessibilityLabel={a11yLabel} />
-        </>
-      )
-    })
-    expect(within(getByA11yLabel(progressA11yLabel)).getByA11yLabel(inactiveA11yLabel)).toBeTruthy()
-    expect(within(getByA11yLabel(progressA11yLabel)).getByA11yLabel(a11yLabel)).toBeTruthy()
-  })
-})

package/__tests17__/Radio/Radio.test.jsx

@@ -1,87 +0,0 @@
-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', { nativeEvent: 'example' })
-      expect(onChange).toHaveBeenCalledTimes(1)
-      expect(onChange).toHaveBeenCalledWith(true, { nativeEvent: 'example' })
-    })
-  })
-})