@telus-uds/components-base 2.0.0 → 2.0.2

package/__tests17__/FlexGrid/Row.test.jsx

@@ -1,273 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-import { Text } from 'react-native'
-import { viewports } from '@telus-uds/system-constants'
-
-import FlexGrid from '../../src/FlexGrid'
-import Theme from '../../__fixtures__/Theme'
-import Viewport from '../../__fixtures__/Viewport'
-
-describe('FlexGrid Row', () => {
-  it('applies correct styles from horizontalAlign prop', () => {
-    const expectedStyles = {
-      start: {
-        justifyContent: 'flex-start',
-        textAlign: 'left'
-      },
-      center: {
-        justifyContent: 'center',
-        textAlign: 'center'
-      },
-      end: {
-        justifyContent: 'flex-end',
-        textAlign: 'right'
-      }
-    }
-
-    const { getByText } = render(
-      <Theme>
-        <Viewport>
-          <FlexGrid>
-            <FlexGrid.Row horizontalAlign="start">
-              <Text>start</Text>
-            </FlexGrid.Row>
-            <FlexGrid.Row horizontalAlign="center">
-              <Text>center</Text>
-            </FlexGrid.Row>
-            <FlexGrid.Row horizontalAlign="end">
-              <Text>end</Text>
-            </FlexGrid.Row>
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-    const start = getByText('start').parent
-    const center = getByText('center').parent
-    const end = getByText('end').parent
-
-    expect(start).toHaveStyle(expectedStyles.start)
-    expect(start).not.toHaveStyle(expectedStyles.center)
-    expect(start).not.toHaveStyle(expectedStyles.end)
-
-    expect(center).toHaveStyle(expectedStyles.center)
-    expect(center).not.toHaveStyle(expectedStyles.start)
-    expect(center).not.toHaveStyle(expectedStyles.end)
-
-    expect(end).toHaveStyle(expectedStyles.end)
-    expect(end).not.toHaveStyle(expectedStyles.center)
-    expect(end).not.toHaveStyle(expectedStyles.start)
-  })
-
-  it('applies correct styles from verticalAlign prop', () => {
-    const expectedStyles = {
-      top: { alignItems: 'flex-start' },
-      middle: { alignItems: 'center' },
-      bottom: { alignItems: 'flex-end' }
-    }
-
-    const { getByText } = render(
-      <Theme>
-        <Viewport>
-          <FlexGrid>
-            <FlexGrid.Row verticalAlign="top">
-              <Text>top</Text>
-            </FlexGrid.Row>
-            <FlexGrid.Row verticalAlign="middle">
-              <Text>middle</Text>
-            </FlexGrid.Row>
-            <FlexGrid.Row verticalAlign="bottom">
-              <Text>bottom</Text>
-            </FlexGrid.Row>
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-    const top = getByText('top').parent
-    const middle = getByText('middle').parent
-    const bottom = getByText('bottom').parent
-
-    expect(top).toHaveStyle(expectedStyles.top)
-    expect(top).not.toHaveStyle(expectedStyles.middle)
-    expect(top).not.toHaveStyle(expectedStyles.bottom)
-
-    expect(middle).toHaveStyle(expectedStyles.middle)
-    expect(middle).not.toHaveStyle(expectedStyles.top)
-    expect(middle).not.toHaveStyle(expectedStyles.bottom)
-
-    expect(bottom).toHaveStyle(expectedStyles.bottom)
-    expect(bottom).not.toHaveStyle(expectedStyles.top)
-    expect(bottom).not.toHaveStyle(expectedStyles.middle)
-  })
-
-  it('applies correct styles from distribute prop', () => {
-    const expectedStyles = {
-      around: { justifyContent: 'space-around' },
-      between: { justifyContent: 'space-between' }
-    }
-
-    const { getByText } = render(
-      <Theme>
-        <Viewport>
-          <FlexGrid>
-            <FlexGrid.Row distribute="around">
-              <Text>around</Text>
-            </FlexGrid.Row>
-            <FlexGrid.Row distribute="between">
-              <Text>between</Text>
-            </FlexGrid.Row>
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-    const around = getByText('around').parent
-    const between = getByText('between').parent
-
-    expect(around).toHaveStyle(expectedStyles.around)
-    expect(around).not.toHaveStyle(expectedStyles.between)
-
-    expect(between).toHaveStyle(expectedStyles.between)
-    expect(between).not.toHaveStyle(expectedStyles.around)
-  })
-
-  const renderEachReverseProp = (viewport) =>
-    render(
-      <Theme>
-        <Viewport viewport={viewport}>
-          <FlexGrid>
-            {viewports.keys.map((reverseViewport) => {
-              const propName = `${reverseViewport}Reverse`
-              const props = { [propName]: true }
-              const content = `${viewport}--${propName}`
-              return (
-                <FlexGrid.Row key={content} {...props}>
-                  <Text>{content}</Text>
-                </FlexGrid.Row>
-              )
-            })}
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-
-  it('applies correct row order for each reverse prop at viewport "xs"', () => {
-    const { getByText } = renderEachReverseProp('xs')
-    expect(getByText('xs--xsReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('xs--smReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-    expect(getByText('xs--mdReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-    expect(getByText('xs--lgReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-    expect(getByText('xs--xlReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-  })
-
-  it('applies correct row order for each reverse prop at viewport "sm"', () => {
-    const { getByText } = renderEachReverseProp('sm')
-    expect(getByText('sm--xsReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('sm--smReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('sm--mdReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-    expect(getByText('sm--lgReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-    expect(getByText('sm--xlReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-  })
-
-  it('applies correct row order for each reverse prop at viewport "md"', () => {
-    const { getByText } = renderEachReverseProp('md')
-    expect(getByText('md--xsReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('md--smReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('md--mdReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('md--lgReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-    expect(getByText('md--xlReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-  })
-
-  it('applies correct row order for each reverse prop at viewport "lg"', () => {
-    const { getByText } = renderEachReverseProp('lg')
-
-    expect(getByText('lg--xsReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('lg--smReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('lg--mdReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('lg--lgReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('lg--xlReverse').parent).toHaveStyle({
-      flexDirection: 'row',
-      flexWrap: 'wrap'
-    })
-  })
-
-  it('applies correct row order for each reverse prop at viewport "xl"', () => {
-    const { getByText } = renderEachReverseProp('xl')
-
-    expect(getByText('xl--xsReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('xl--smReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('xl--mdReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('xl--lgReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-    expect(getByText('xl--xlReverse').parent).toHaveStyle({
-      flexDirection: 'row-reverse',
-      flexWrap: 'wrap-reverse'
-    })
-  })
-})

package/__tests17__/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/__tests17__/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/__tests17__/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/__tests17__/InputLabel/InputLabel.test.jsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-
-import InputLabel from '../../src/InputLabel'
-import Theme from '../../__fixtures__/Theme'
-import tooltipDictionary from '../../src/Tooltip/dictionary'
-
-const label = 'Test label'
-
-const setup = (props) =>
-  render(<InputLabel label={label} {...props} />, {
-    wrapper: Theme
-  })
-
-describe('InputLabel', () => {
-  it('renders correctly and matches the snapshot', () => {
-    const { container, getByText } = setup()
-
-    expect(getByText(label)).toBeTruthy()
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('passes the copy prop down to the tooltip component', () => {
-    const { getByA11yLabel } = setup({ copy: 'fr', tooltip: 'Test tooltip' })
-
-    expect(getByA11yLabel(tooltipDictionary.fr.a11yText)).toBeTruthy()
-  })
-})

package/__tests17__/InputLabel/__snapshots__/InputLabel.test.jsx.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InputLabel renders correctly and matches the snapshot 1`] = `undefined`;

package/__tests17__/InputSupports/InputSupports.test.jsx

@@ -1,60 +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'
-import tooltipDictionary from '../../src/Tooltip/dictionary'
-
-// 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()
-  })
-
-  it('passes the copy prop down to the tooltip component', () => {
-    const { getByA11yLabel } = render(
-      <InputSupports copy="fr" label="Test label content" tooltip="Test tooltip content" />,
-      { wrapper: Wrapper }
-    )
-
-    expect(getByA11yLabel(tooltipDictionary.fr.a11yText)).toBeTruthy()
-  })
-})