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

package/__tests__/StackView/getStackedContent.test.jsx

@@ -0,0 +1,295 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+import { render } from '@testing-library/react-native'
+
+import Theme from '../../__fixtures__/Theme'
+import { getStackedContent, Typography } from '../../src'
+
+// Make test composition simpler by wrapping getStackedContent in a component
+const StackedContent = ({ children, ...props }) => <View>{getStackedContent(children, props)}</View>
+StackedContent.propTypes = { children: PropTypes.node }
+
+describe('getStackedContent (Spacers)', () => {
+  it('renders spacers between simple children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent space={1}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(2)
+  })
+
+  it('gives spacers sizes according to own space prop and spacing scale', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+
+    const { getByTestId } = render(
+      <StackedContent space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Spacer-1')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Spacer-2')).toHaveStyle(expectedStyle)
+  })
+
+  it('renders spacers between children wrapped in one Fragment', () => {
+    const content = (
+      <>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </>
+    )
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(2)
+  })
+
+  it('renders spacers between children wrapped in sibling Fragments', () => {
+    // Simulate common pattern of using fragments for conditional rendering
+    const someCondition = true
+
+    const content = (
+      <>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        {someCondition && (
+          <>
+            <Typography>C</Typography>
+            <Typography>D</Typography>
+            <Typography>E</Typography>
+          </>
+        )}
+      </>
+    )
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(4)
+  })
+
+  it('does not render spacers between children wrapped in a component', () => {
+    const content = (
+      <View>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </View>
+    )
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('does not render spacers between empty or nullish children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent space={1}>
+        <Typography>A</Typography>
+        {/* this is a comment */}
+        <Typography>B</Typography>
+        {null}
+        <Typography>C</Typography>
+        {false}
+        <Typography>D</Typography>
+        {undefined}
+        {null}
+        {false}
+        <Typography>E</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(4)
+  })
+
+  it('renders spacers between valid children in an array', () => {
+    const content = [
+      <Typography key="A">A</Typography>,
+      null,
+      false,
+      <Typography key="B">B</Typography>,
+      undefined,
+      <View key="C">
+        <Typography key="D">D</Typography>
+        <Typography key="E">E</Typography>
+        <Typography key="F">F</Typography>
+      </View>,
+      <Fragment key="G">
+        <Typography key="H">H</Typography>
+        <Typography key="I">I</Typography>
+      </Fragment>
+    ]
+
+    const { queryAllByTestId } = render(<StackedContent space={1}>{content}</StackedContent>, {
+      wrapper: Theme
+    })
+
+    // Between A, B, C, H, I = 4
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(4)
+  })
+})
+
+describe('getStackedContent (Dividers)', () => {
+  it('renders dividers between simple children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(queryAllByTestId(/Stack-Divider-\d$/)).toHaveLength(2)
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('renders dividers between valid children in an array', () => {
+    const content = [
+      <Typography key="A">A</Typography>,
+      null,
+      false,
+      <Typography key="B">B</Typography>,
+      undefined,
+      <View key="C">
+        <Typography key="D">D</Typography>
+        <Typography key="E">E</Typography>
+        <Typography key="F">F</Typography>
+      </View>,
+      <Fragment key="G">
+        <Typography key="H">H</Typography>
+        <Typography key="I">I</Typography>
+      </Fragment>
+    ]
+
+    const { queryAllByTestId } = render(
+      <StackedContent space={1} divider>
+        {content}
+      </StackedContent>,
+      {
+        wrapper: Theme
+      }
+    )
+
+    // Between A, B, C, H, I = 4
+    expect(queryAllByTestId(/Stack-Divider-\d+$/)).toHaveLength(4)
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('gives dividers spacing according to own space prop and spacing scale', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+
+    const { getByTestId } = render(
+      <StackedContent space={2} divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    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('can pass props down to dividers', () => {
+    const tokens = { color: '#012345' }
+
+    const { getByTestId } = render(
+      <StackedContent divider={{ tokens, vertical: true }}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: tokens.color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: tokens.color })
+  })
+})
+
+describe('getStackedContent (Boxes)', () => {
+  it('renders boxes around simple children', () => {
+    const { queryAllByTestId } = render(
+      <StackedContent box>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(queryAllByTestId(/Stack-Box-\d$/)).toHaveLength(3)
+    expect(queryAllByTestId(/Stack-Divider/)).toHaveLength(0)
+    expect(queryAllByTestId(/Stack-Spacer/)).toHaveLength(0)
+  })
+
+  it('gives boxes spacing according to own space prop and spacing scale', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = {
+      paddingTop: expectedSize,
+      paddingLeft: expectedSize,
+      paddingBottom: expectedSize,
+      paddingRight: expectedSize
+    }
+
+    const { getByTestId } = render(
+      <StackedContent space={2} box>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Box-0')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-2')).toHaveStyle(expectedStyle)
+  })
+
+  it('gives boxes spacing on specified sides only, if box props object is passed', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const expectedStyle = {
+      paddingTop: expectedSize,
+      paddingLeft: expectedSize
+    }
+    const unexpectedStyle = {
+      paddingBottom: expectedSize,
+      paddingRight: expectedSize
+    }
+
+    const { getByTestId } = render(
+      <StackedContent box={{ top: 2, left: 2 }}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackedContent>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Box-0')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
+    expect(getByTestId('Stack-Box-2')).toHaveStyle(expectedStyle)
+
+    expect(getByTestId('Stack-Box-0')).not.toHaveStyle(unexpectedStyle)
+    expect(getByTestId('Stack-Box-1')).not.toHaveStyle(unexpectedStyle)
+    expect(getByTestId('Stack-Box-2')).not.toHaveStyle(unexpectedStyle)
+  })
+})

package/__tests__/TextInput/TextInput.test.jsx

@@ -0,0 +1,146 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { TextInput } 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('TextInput', () => {
+  it('renders the label', () => {
+    const { queryByText } = render(<TextInput label="Test label content" />, { wrapper: Wrapper })
+
+    expect(queryByText('Test label content')).toBeTruthy()
+  })
+
+  it('renders the hint', () => {
+    const { queryByText } = render(
+      <TextInput label="Test label content" hint="Test hint content" />,
+      { wrapper: Wrapper }
+    )
+
+    expect(queryByText('Test hint content')).toBeTruthy()
+  })
+
+  it('renders the feedback', () => {
+    const { queryByText } = render(<TextInput feedback="Test feedback content" />, {
+      wrapper: Wrapper
+    })
+
+    expect(queryByText('Test feedback content')).toBeTruthy()
+  })
+
+  it('renders the tooltip', () => {
+    const { queryByText } = render(
+      <TextInput label="Test label content" tooltip="Test tooltip content" />,
+      { wrapper: Wrapper }
+    )
+
+    // TODO: check for either the actual content or accessible text when the Tooltip is rendered
+    expect(queryByText('?')).toBeTruthy()
+  })
+
+  it('triggers the interactive callbacks', () => {
+    const onFocus = jest.fn()
+    const onBlur = jest.fn()
+    const onMouseOver = jest.fn()
+    const onMouseOut = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInput
+        label="Input label"
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+      />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onFocus).not.toHaveBeenCalled()
+    fireEvent(input, 'focus')
+    expect(onFocus).toHaveBeenCalledTimes(1)
+
+    expect(onBlur).not.toHaveBeenCalled()
+    fireEvent(input, 'blur')
+    expect(onBlur).toHaveBeenCalledTimes(1)
+
+    expect(onMouseOver).not.toHaveBeenCalled()
+    fireEvent(input, 'mouseOver')
+    expect(onMouseOver).toHaveBeenCalledTimes(1)
+
+    expect(onMouseOut).not.toHaveBeenCalled()
+    fireEvent(input, 'mouseOut')
+    expect(onMouseOut).toHaveBeenCalledTimes(1)
+  })
+
+  it("can't be edited when inactive", () => {
+    const { getByA11yLabel } = render(<TextInput label="Input label" inactive />, {
+      wrapper: Wrapper
+    })
+
+    const input = getByA11yLabel('Input label')
+
+    expect(input).toHaveProp('editable', false)
+  })
+
+  it('changes value when uncontrolled', () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(<TextInput label="Input label" onChange={onChange} />, {
+      wrapper: Wrapper
+    })
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('new value')
+  })
+
+  it('changes value when controlled', () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInput label="Input label" onChange={onChange} value="initial value" />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('new value')
+  })
+
+  it("doesn't change value when readOnly", () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInput label="Input label" onChange={onChange} value="initial value" readOnly />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})

package/__tests__/ThemeProvider/useThemeTokens.test.jsx

@@ -291,9 +291,11 @@ describe('useThemeTokens', () => {
     })
   })
 
+  // Simulate a scenario where a parent component passes tokens to a child component.
+  // Imagine a component that contains a button and wants to tell it what colour to be when pressed.
   it('overrides default theme tokens using passed-in tokens function', () => {
-    // ExtendedComponent is built on TestComponent with additional theming rules,
-    // setting the TestComponent's colour to lilac when "off" and to red when "on".
+    // ExtendedComponent is a parent to TestComponent and passes it additional theming rules,
+    // setting child TestComponent's colour to lilac when child's state is "off", and red when "on".
     const getTokensByExtendedRules = getHookResult(() =>
       useThemeTokensCallback('ExtendedComponent')
     )
@@ -301,7 +303,7 @@ describe('useThemeTokens', () => {
     // If the extending component uses different naming to its inner component, we need to map names
     const selectInnerTokens = ({ innerColour }) => ({ colour: innerColour })
     const tokensFn = (innerAppearances) =>
-      selectInnerTokens(getTokensByExtendedRules({}, {}, { innerOn: innerAppearances.on }))
+      selectInnerTokens(getTokensByExtendedRules({ innerOn: innerAppearances.on }))
 
     const on = { on: true }