@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.10

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__/ExpandCollapse/ExpandCollapse.test.jsx

@@ -64,10 +64,10 @@ describe('ExpandCollapse', () => {
     expect(onPress).toHaveBeenCalledTimes(0)
     expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
 
-    await fireEvent.press(getByText('First control'))
+    await fireEvent(getByText('First control'), 'press', { nativeEvent: 'example' })
     expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
     expect(onPress).toHaveBeenCalledTimes(1)
-    expect(onPress).toHaveBeenLastCalledWith(panelId)
+    expect(onPress).toHaveBeenLastCalledWith(panelId, { nativeEvent: 'example' })
   })
 })
 

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__/HorizontalScroll/HorizontalScroll.test.jsx

@@ -0,0 +1,164 @@
+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

@@ -16,7 +16,7 @@ describe('Icon', () => {
   it('gets default styles from theme', () => {
     const { getByTestId } = render(
       <Theme>
-        <Icon IconSvg={InnerComponent} />
+        <Icon icon={InnerComponent} />
       </Theme>
     )
 
@@ -29,7 +29,7 @@ describe('Icon', () => {
   it('gets styles from variant', () => {
     const { getByTestId } = render(
       <Theme>
-        <Icon IconSvg={InnerComponent} variant={{ size: 'small' }} />
+        <Icon icon={InnerComponent} variant={{ size: 'small' }} />
       </Theme>
     )
 
@@ -46,7 +46,7 @@ describe('Icon', () => {
     const props = { tokens: { size: 30 } }
     const { getByTestId } = render(
       <Theme>
-        <Icon IconSvg={InnerComponent} {...props} />
+        <Icon icon={InnerComponent} {...props} />
       </Theme>
     )
 

package/__tests__/IconButton/IconButton.test.jsx

@@ -0,0 +1,52 @@
+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

@@ -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__/Link/LinkBase.test.jsx

@@ -8,20 +8,6 @@ import LinkBase from '../../src/Link/LinkBase'
 beforeEach(() => jest.clearAllMocks())
 
 describe('LinkBase', () => {
-  it('throws if both href and onPress are provided', async () => {
-    jest.spyOn(console, 'error').mockImplementation()
-    expect(() =>
-      render(
-        <Theme>
-          <LinkBase href="example.com" onPress={jest.fn()}>
-            click me
-          </LinkBase>
-        </Theme>
-      )
-    ).toThrow()
-    expect(console.error).toHaveBeenCalledTimes(1)
-  })
-
   it('throws if neither href nor onPress are provided', async () => {
     jest.spyOn(console, 'error').mockImplementation()
     expect(() =>

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__/Modal/Modal.test.jsx

@@ -0,0 +1,47 @@
+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

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