@telus-uds/components-base 1.7.0 → 1.8.1

package/__tests__/HorizontalScroll/HorizontalScroll.test.jsx

@@ -1,165 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-import React, { useState } from 'react'
-import { Pressable, Text, View } from 'react-native'
-import { fireEvent, render } from '@testing-library/react-native'
-import {
-  getItemPositionLayoutHandler,
-  getItemPositionScrollTarget,
-  useItemPositions
-} from '../../src/HorizontalScroll/itemPositions'
-
-// ScrollViewRef.scrollTo doesn't work in Jest - unit-test the utilities instead
-describe('HorizontalScroll', () => {
-  describe('getItemPositionScrollTarget', () => {
-    const positionsWithoutSpacing = {
-      0: { start: 0, end: 100 },
-      1: { start: 100, end: 200 },
-      2: { start: 200, end: 300 }
-    }
-    const positions = {
-      0: { start: 0, end: 50 },
-      1: { start: 100, end: 150 },
-      2: { start: 200, end: 250 }
-    }
-    it('scrolls to the start of an item rather than chopping it', () => {
-      const x = getItemPositionScrollTarget(150, 300, positionsWithoutSpacing)
-      expect(x).toBe(100)
-    })
-    it('offsets the position by a button clearance', () => {
-      const x = getItemPositionScrollTarget(150, 300, positionsWithoutSpacing, 20)
-      expect(x).toBe(80)
-    })
-    it('scrolls exactly if landing on a gap', () => {
-      const x = getItemPositionScrollTarget(170, 300, positions)
-      expect(x).toBe(170)
-    })
-    it('applies button clearance if landing on a gap', () => {
-      const x = getItemPositionScrollTarget(170, 300, positions, 40)
-      expect(x).toBe(130)
-    })
-    it('does not apply button clearance on reaching the end', () => {
-      const x = getItemPositionScrollTarget(300, 300, positions, 40)
-      expect(x).toBe(300)
-    })
-    it('does not exceed the maximum', () => {
-      const x = getItemPositionScrollTarget(320, 300, positions, 40)
-      expect(x).toBe(300)
-    })
-    it('does not go below 0', () => {
-      const x = getItemPositionScrollTarget(-420, 300, positions, 40)
-      expect(x).toBe(0)
-    })
-  })
-
-  // onLayout also doesn't work naturally in jest
-  describe('getItemPositionLayoutHandler', () => {
-    // Test component using useItemPositions with getItemPositionLayoutHandler
-    // that can be rerendered manually and that outputs itemPositions value
-    const MockComponent = () => {
-      const [num, setNum] = useState()
-      const [{ positions }] = useItemPositions()
-      return (
-        <View>
-          <View testID="onlayout[0]" onLayout={getItemPositionLayoutHandler(positions, 0)} />
-          <View testID="onlayout[1]" onLayout={getItemPositionLayoutHandler(positions, 1)} />
-          <Text testID="output">{JSON.stringify(positions)}</Text>
-          <Pressable testID="rerender" onPress={() => setNum(num + 1)}>
-            <Text>{num}</Text>
-          </Pressable>
-        </View>
-      )
-    }
-    it('gets width and x positions from onLayout events', async () => {
-      const { getByTestId } = render(<MockComponent />)
-
-      // onLayout doesn't work in jest but can be called directly as an event, but we
-      // have to pass the event object. Can't test that it gets them correctly from style
-      await fireEvent(getByTestId('onlayout[0]'), 'layout', {
-        nativeEvent: {
-          layout: {
-            width: 200,
-            x: 0
-          }
-        }
-      })
-      await fireEvent(getByTestId('onlayout[1]'), 'layout', {
-        nativeEvent: {
-          layout: {
-            width: 100,
-            x: 250
-          }
-        }
-      })
-      await fireEvent.press(getByTestId('rerender'))
-      expect(getByTestId('output')).toHaveTextContent(
-        '{"0":{"start":0,"end":200},"1":{"start":250,"end":350}}'
-      )
-    })
-    it('does not cause a rerender from onLayout events alone', async () => {
-      const { getByTestId } = render(<MockComponent />)
-
-      expect(getByTestId('output')).toHaveTextContent('{}')
-      await fireEvent(getByTestId('onlayout[0]'), 'layout', {
-        nativeEvent: {
-          layout: {
-            width: 200,
-            x: 0
-          }
-        }
-      })
-      await fireEvent(getByTestId('onlayout[1]'), 'layout', {
-        nativeEvent: {
-          layout: {
-            width: 100,
-            x: 250
-          }
-        }
-      })
-      expect(getByTestId('output')).toHaveTextContent('{}')
-    })
-  })
-
-  describe('useItemPositions', () => {
-    // Again we're limited in what we can test; we can't test natural onLayout
-    // or page load timing, but we can affirm that calling `setIsReady` after layout
-    // events causes a re-render that can access positions data
-    const IsReadyMockComponent = () => {
-      const [{ positions, setIsReady }] = useItemPositions()
-      return (
-        <View testID="container" onLayout={setIsReady}>
-          <View testID="onlayout[0]" onLayout={getItemPositionLayoutHandler(positions, 0)} />
-          <View testID="onlayout[1]" onLayout={getItemPositionLayoutHandler(positions, 1)} />
-          <Text testID="output">{JSON.stringify(positions)}</Text>
-        </View>
-      )
-    }
-    it('causes a rerender when setIsReady is called', async () => {
-      const { getByTestId } = render(<IsReadyMockComponent />)
-
-      expect(getByTestId('output')).toHaveTextContent('{}')
-      await fireEvent(getByTestId('onlayout[0]'), 'layout', {
-        nativeEvent: {
-          layout: {
-            width: 200,
-            x: 0
-          }
-        }
-      })
-      await fireEvent(getByTestId('onlayout[1]'), 'layout', {
-        nativeEvent: {
-          layout: {
-            width: 100,
-            x: 250
-          }
-        }
-      })
-      await fireEvent(getByTestId('container'), 'layout', {
-        nativeEvent: { layout: {} }
-      })
-
-      expect(getByTestId('output')).toHaveTextContent(
-        '{"0":{"start":0,"end":200},"1":{"start":250,"end":350}}'
-      )
-    })
-  })
-})

package/__tests__/Icon/Icon.test.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { Text } from 'react-native'
-import { render } from '@testing-library/react-native'
-
-import Theme from '../../__fixtures__/Theme'
-import testTheme from '../../__fixtures__/testTheme'
-import Icon from '../../src/Icon/Icon'
-
-// We're limited in what's possible to usefully test in SVG icons in Jest
-// but we can test that the resolution of themes and props works as expected
-const testID = 'InnerComponent'
-const InnerComponent = (props) => <Text testID={testID}>{JSON.stringify(props)}</Text>
-const { tokens, rules } = testTheme.components.Icon
-
-describe('Icon', () => {
-  it('gets default styles from theme', () => {
-    const { getByTestId } = render(
-      <Theme>
-        <Icon icon={InnerComponent} />
-      </Theme>
-    )
-
-    const innerContent = getByTestId(testID)
-    const expected = { ...tokens }
-
-    expect(innerContent).toHaveTextContent(JSON.stringify(expected))
-  })
-
-  it('gets styles from variant', () => {
-    const { getByTestId } = render(
-      <Theme>
-        <Icon icon={InnerComponent} variant={{ size: 'small' }} />
-      </Theme>
-    )
-
-    const innerContent = getByTestId(testID)
-    const expected = {
-      ...tokens,
-      ...rules.find((rule) => rule.if.size === 'small').tokens
-    }
-
-    expect(innerContent).toHaveTextContent(JSON.stringify(expected))
-  })
-
-  it('overrides theme styles with passed in styles via tokens prop', () => {
-    const props = { tokens: { size: 30 } }
-    const { getByTestId } = render(
-      <Theme>
-        <Icon icon={InnerComponent} {...props} />
-      </Theme>
-    )
-
-    const innerContent = getByTestId(testID)
-    const expected = {
-      ...tokens,
-      ...props.tokens
-    }
-
-    expect(innerContent).toHaveTextContent(JSON.stringify(expected))
-  })
-})

package/__tests__/IconButton/IconButton.test.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { fireEvent, render } from '@testing-library/react-native'
-
-import { IconButton } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-describe('IconButton', () => {
-  it('renders a link if href is passed', () => {
-    const { queryByRole } = render(<IconButton href="https://telus.com" icon={() => null} />, {
-      wrapper: Theme
-    })
-
-    expect(queryByRole('link')).toBeTruthy()
-
-    expect(queryByRole('button')).toBeFalsy()
-  })
-
-  it('renders a button if onPress is passed', () => {
-    const { queryByRole } = render(<IconButton onPress={() => {}} icon={() => null} />, {
-      wrapper: Theme
-    })
-
-    expect(queryByRole('button')).toBeTruthy()
-
-    expect(queryByRole('link')).toBeFalsy()
-  })
-
-  it('renders an accessible label', () => {
-    const { getByA11yLabel } = render(
-      <IconButton onPress={() => {}} icon={() => null} accessibilityLabel="test label" />,
-      {
-        wrapper: Theme
-      }
-    )
-
-    expect(getByA11yLabel('test label')).toBeTruthy()
-  })
-
-  it('calls onPress function when pressed', async () => {
-    const handlePress = jest.fn()
-    const { getByA11yLabel } = render(
-      <IconButton onPress={handlePress} icon={() => null} accessibilityLabel="test label" />,
-      {
-        wrapper: Theme
-      }
-    )
-    const iconButton = getByA11yLabel('test label')
-    expect(handlePress).toHaveBeenCalledTimes(0)
-    await fireEvent.press(iconButton)
-    expect(handlePress).toHaveBeenCalledTimes(1)
-  })
-})

package/__tests__/InputSupports/InputSupports.test.jsx

@@ -1,50 +0,0 @@
-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__/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/__tests__/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/__tests__/List/List.test.jsx

@@ -1,60 +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'
-
-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__/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/__tests__/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()
-  })
-})