@telus-uds/components-base 0.0.2-prerelease.3 → 0.0.2-prerelease.7

package/__tests__/StackView/StackView.test.jsx

@@ -0,0 +1,216 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { Spacer, StackView, Typography } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import testTheme from '../../__fixtures__/testTheme'
+
+const getFirstAncestorAboveType = (element, ComponentType) => {
+  if (element.type === ComponentType) return element.parent
+  if (element.parent) return getFirstAncestorAboveType(element.parent, ComponentType)
+  return null
+}
+
+describe('StackView', () => {
+  it('renders separators and children as direct children of a flex column by default', () => {
+    const expectedStyle = { flexDirection: 'column' }
+
+    const { getByTestId } = render(
+      <StackView space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of a flex column if direction is "column-reverse"', () => {
+    const expectedStyle = { flexDirection: 'column-reverse' }
+
+    const { getByTestId } = render(
+      <StackView direction="column-reverse" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of a flex row if direction is "row"', () => {
+    const expectedStyle = { flexDirection: 'row' }
+
+    const { getByTestId } = render(
+      <StackView direction="row" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders separators and children as direct children of a flex row if direction is "row-reverse"', () => {
+    const expectedStyle = { flexDirection: 'row-reverse' }
+
+    const { getByTestId } = render(
+      <StackView direction="row-reverse" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    expect(parent.type).toBe('View')
+    expect(parent).toHaveStyle(expectedStyle)
+  })
+
+  it('renders horizontal dividers by default', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+    const { color } = testTheme.components.Divider.tokens
+
+    const { getByTestId } = render(
+      <StackView divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderRightColor: color })
+
+    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('renders horizontal dividers if direction is "column-reverse"', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { height: expectedSize }
+    const { color } = testTheme.components.Divider.tokens
+
+    const { getByTestId } = render(
+      <StackView direction="column-reverse" divider>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderRightColor: color })
+
+    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('renders vertical dividers if direction is "row"', () => {
+    const { color } = testTheme.components.Divider.tokens
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { width: expectedSize }
+
+    const { getByTestId } = render(
+      <StackView divider direction="row">
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: color })
+
+    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('renders vertical dividers if direction is "row-reverse"', () => {
+    const { color } = testTheme.components.Divider.tokens
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const expectedStyle = { width: expectedSize }
+
+    const { getByTestId } = render(
+      <StackView divider direction="row-reverse">
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Divider-1')).not.toHaveStyle({ borderBottomColor: color })
+    expect(getByTestId('Stack-Divider-2')).not.toHaveStyle({ borderBottomColor: color })
+
+    expect(getByTestId('Stack-Divider-1')).toHaveStyle({ borderRightColor: color })
+    expect(getByTestId('Stack-Divider-2')).toHaveStyle({ borderRightColor: color })
+
+    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('renders row spacers if direction is "row"', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+
+    const { getByTestId } = render(
+      <StackView direction="row" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Spacer-1')).not.toHaveStyle({ height: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).not.toHaveStyle({ height: expectedSize })
+
+    expect(getByTestId('Stack-Spacer-1')).toHaveStyle({ width: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).toHaveStyle({ width: expectedSize })
+  })
+
+  it('renders row spacers if direction is "row-reverse"', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+
+    const { getByTestId } = render(
+      <StackView direction="row-reverse" space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackView>,
+      { wrapper: Theme }
+    )
+
+    expect(getByTestId('Stack-Spacer-1')).not.toHaveStyle({ height: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).not.toHaveStyle({ height: expectedSize })
+
+    expect(getByTestId('Stack-Spacer-1')).toHaveStyle({ width: expectedSize })
+    expect(getByTestId('Stack-Spacer-2')).toHaveStyle({ width: expectedSize })
+  })
+})

package/__tests__/StackView/StackWrap.test.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { StackWrap, Typography } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('StackWrap', () => {
+  it('renders no spacers (because they would wrap badly)', () => {
+    const { queryAllByTestId } = render(
+      <StackWrap space={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+        <Typography>C</Typography>
+      </StackWrap>,
+      { wrapper: Theme }
+    )
+    expect(queryAllByTestId(/Spacer/)).toHaveLength(0)
+  })
+
+  it('puts a `gap` between lines which may be different to `space` between items', () => {
+    // This test unavoidably hangs on some implementation details,
+    // which isn't ideal, but it does test something a user would see.
+    const expectedStyle = { paddingBottom: 8, paddingRight: 4 }
+
+    const { getByTestId } = render(
+      <StackWrap space={1} gap={2}>
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackWrap>,
+      { wrapper: Theme }
+    )
+    expect(getByTestId('Stack-Box-1')).toHaveStyle(expectedStyle)
+  })
+
+  it('accepts accessibility props on the container responsible for wrapping content', () => {
+    const expectedStyle = { flexWrap: 'wrap' }
+
+    const { getByRole } = render(
+      <StackWrap accessibilityRole="radiogroup">
+        <Typography>A</Typography>
+        <Typography>B</Typography>
+      </StackWrap>,
+      { wrapper: Theme }
+    )
+    expect(getByRole('radiogroup')).toHaveStyle(expectedStyle)
+  })
+})

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)
+  })
+})