@telus-uds/components-base 1.26.0 → 1.28.0

package/__tests17__/Divider/Divider.test.jsx

@@ -1,91 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-import { Text } from 'react-native'
-
-import Divider from '../../src/Divider'
-import Theme from '../../__fixtures__/Theme'
-import testTheme from '../../__fixtures__/testTheme'
-
-describe('Divider', () => {
-  const testID = 'testID'
-  const { width, color } = testTheme.components.Divider.tokens
-  const { width: thickWidth } = testTheme.components.Divider.rules.find(
-    (rule) => rule.if.weight === 'thick'
-  ).tokens
-
-  const horizontalStyles = {
-    borderBottomColor: color,
-    borderBottomWidth: width
-  }
-
-  const verticalStyles = {
-    borderRightColor: color,
-    borderRightWidth: width
-  }
-
-  const thickStyles = {
-    borderBottomColor: color,
-    borderBottomWidth: thickWidth
-  }
-
-  it('renders a horizontal line by default', () => {
-    const { getByTestId } = render(
-      <Theme>
-        <Text>Before</Text>
-        <Divider testID={testID} />
-        <Text>After</Text>
-      </Theme>
-    )
-    const divider = getByTestId(testID)
-    expect(divider).toHaveStyle(horizontalStyles)
-    expect(divider).not.toHaveStyle(verticalStyles)
-  })
-
-  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 testID={testID} space={2} />
-        <Text>After</Text>
-      </Theme>
-    )
-    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', () => {
-    const { getByTestId } = render(
-      <Theme>
-        <Text>Before</Text>
-        <Divider testID={testID} variant={{ weight: 'thick' }} />
-        <Text>After</Text>
-      </Theme>
-    )
-    const divider = getByTestId(testID)
-    expect(divider).toHaveStyle(thickStyles)
-    expect(divider).not.toHaveStyle(verticalStyles)
-    expect(divider).not.toHaveStyle(horizontalStyles)
-  })
-})

package/__tests17__/ExpandCollapse/ExpandCollapse.test.jsx

@@ -1,109 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import { Accordion, ExpandCollapse, Typography } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-describe('ExpandCollapse', () => {
-  it('expands multiple groups when accordion = false', async () => {
-    const { queryAllByA11yState, getByText } = render(
-      <ExpandCollapse>
-        {(expandProps) => (
-          <>
-            <ExpandCollapse.Panel
-              {...expandProps}
-              panelId="first"
-              control={<Typography>First control</Typography>}
-            >
-              <Typography>First content</Typography>
-            </ExpandCollapse.Panel>
-            <ExpandCollapse.Panel
-              {...expandProps}
-              panelId="second"
-              control={<Typography>Second control</Typography>}
-            >
-              <Typography>Second content</Typography>
-            </ExpandCollapse.Panel>
-          </>
-        )}
-      </ExpandCollapse>,
-      {
-        wrapper: Theme
-      }
-    )
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
-    await fireEvent.press(getByText('First control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-    await fireEvent.press(getByText('Second control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(2)
-    await fireEvent.press(getByText('Second control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-  })
-
-  it("calls a panel's provided onPress function in addition to open/close", async () => {
-    const panelId = 'group-id'
-    const onPress = jest.fn()
-
-    const { queryAllByA11yState, getByText } = render(
-      <ExpandCollapse>
-        {(expandProps) => (
-          <ExpandCollapse.Panel
-            {...expandProps}
-            onPress={onPress}
-            panelId={panelId}
-            control={<Typography>First control</Typography>}
-          >
-            <Typography>First content</Typography>
-          </ExpandCollapse.Panel>
-        )}
-      </ExpandCollapse>,
-      {
-        wrapper: Theme
-      }
-    )
-    expect(onPress).toHaveBeenCalledTimes(0)
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
-
-    await fireEvent(getByText('First control'), 'press', { nativeEvent: 'example' })
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-    expect(onPress).toHaveBeenCalledTimes(1)
-    expect(onPress).toHaveBeenLastCalledWith(panelId, { nativeEvent: 'example' })
-  })
-})
-
-describe('Accordion', () => {
-  it('expands only one group', async () => {
-    const { queryAllByA11yState, getByText } = render(
-      <Accordion>
-        {(expandProps) => (
-          <>
-            <Accordion.Panel
-              {...expandProps}
-              panelId="first"
-              control={<Typography>First control</Typography>}
-            >
-              <Typography>First content</Typography>
-            </Accordion.Panel>
-            <Accordion.Panel
-              {...expandProps}
-              panelId="second"
-              control={<Typography>Second control</Typography>}
-            >
-              <Typography>Second content</Typography>
-            </Accordion.Panel>
-          </>
-        )}
-      </Accordion>,
-      {
-        wrapper: Theme
-      }
-    )
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
-    await fireEvent.press(getByText('First control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-    await fireEvent.press(getByText('Second control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(1)
-    await fireEvent.press(getByText('Second control'))
-    expect(queryAllByA11yState({ expanded: true }).length).toBe(0)
-  })
-})

package/__tests17__/Feedback/Feedback.test.jsx

@@ -1,42 +0,0 @@
-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/__tests17__/FlexGrid/Col.test.jsx

@@ -1,261 +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.Col offsets', () => {
-  const offsetLevels = {
-    xs: 1,
-    sm: 2,
-    md: 3,
-    lg: 4,
-    xl: 5
-  }
-  const getOffsetStyle = (viewport) => ({ marginLeft: `${(offsetLevels[viewport] / 12) * 100}%` })
-
-  it.each(
-    // true here indicates offset styles should apply and follow the provided level for that prop
-    // Align expected results like a table so they're easier to read
-    /* prettier-ignore */ [
-    ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
-    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
-    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
-    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
-    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
-  ]
-  )('applies styles from one offset prop at viewport "%s"', (viewport, expected) => {
-    // Render flexgrids with one each of xsOffset={1}, smOffset={2} etc based on offsetLevels above
-    const { getByText } = render(
-      <Theme>
-        <Viewport viewport={viewport}>
-          <FlexGrid>
-            {viewports.keys.map((offsetViewport) => {
-              const propName = `${offsetViewport}Offset`
-              const level = offsetLevels[offsetViewport]
-              return (
-                <FlexGrid.Col key={propName} {...{ [propName]: level }}>
-                  <Text>{propName}</Text>
-                </FlexGrid.Col>
-              )
-            })}
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-    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'))
-    expectIfOffsetExpected('sm').toHaveStyle(getOffsetStyle('sm'))
-    expectIfOffsetExpected('md').toHaveStyle(getOffsetStyle('md'))
-    expectIfOffsetExpected('lg').toHaveStyle(getOffsetStyle('lg'))
-    expectIfOffsetExpected('xl').toHaveStyle(getOffsetStyle('xl'))
-  })
-})
-
-describe('FlexGrid.Col sizes', () => {
-  const sizeLevels = {
-    xs: 1,
-    sm: 2,
-    md: 3,
-    lg: 4,
-    xl: 5
-  }
-  const getNumericSizeStyle = (viewport) => ({
-    maxWidth: `${(sizeLevels[viewport] / 12) * 100}%`,
-    flexBasis: `${(sizeLevels[viewport] / 12) * 100}%`
-  })
-
-  it.each(
-    // true here indicates size styles should apply: following the provided level for that prop
-    // Align expected results like a table so they're easier to read
-    /* prettier-ignore */ [
-    ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
-    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
-    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
-    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
-    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
-  ]
-  )('applies styles from one size prop at viewport "%s"', (viewport, expected) => {
-    // Render flexgrids with one each of xs={1}, sm={2} etc based on sizeLevels above
-    const { getByText } = render(
-      <Theme>
-        <Viewport viewport={viewport}>
-          <FlexGrid>
-            {viewports.keys.map((sizeViewport) => {
-              const propName = sizeViewport
-              const level = sizeLevels[sizeViewport]
-              return (
-                <FlexGrid.Col key={propName} {...{ [propName]: level }}>
-                  <Text>{propName}</Text>
-                </FlexGrid.Col>
-              )
-            })}
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-
-    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'))
-    expectIfSizeExpected('sm').toHaveStyle(getNumericSizeStyle('sm'))
-    expectIfSizeExpected('md').toHaveStyle(getNumericSizeStyle('md'))
-    expectIfSizeExpected('lg').toHaveStyle(getNumericSizeStyle('lg'))
-    expectIfSizeExpected('xl').toHaveStyle(getNumericSizeStyle('xl'))
-  })
-
-  it.each(
-    // true here indicates size styles should apply: inheriting until level is passed as `true` resetting inheritance
-    // Align expected results like a table so they're easier to read
-    /* prettier-ignore */ [
-    ['xs', { 'xs-md': true,  'xs-lg': true,  'xs-xl': true,  'sm-lg': false, 'sm-xl': false, 'md-xl': false }],
-    ['sm', { 'xs-md': true,  'xs-lg': true,  'xs-xl': true,  'sm-lg': true,  'sm-xl': true,  'md-xl': false }],
-    ['md', { 'xs-md': false, 'xs-lg': true,  'xs-xl': true,  'sm-lg': true,  'sm-xl': true,  'md-xl': true  }],
-    ['lg', { 'xs-md': false, 'xs-lg': false, 'xs-xl': true,  'sm-lg': false, 'sm-xl': true,  'md-xl': true  }],
-    ['xl', { 'xs-md': false, 'xs-lg': false, 'xs-xl': false, 'sm-lg': false, 'sm-xl': false, 'md-xl': false }]
-  ]
-  )('inherits size levels until a size prop is `true` at viewport "%s"', (viewport, expected) => {
-    const { getByText } = render(
-      <Theme>
-        <Viewport viewport={viewport}>
-          <FlexGrid>
-            <FlexGrid.Col xs={sizeLevels.xs} md={true}>
-              <Text>xs-md</Text>
-            </FlexGrid.Col>
-            <FlexGrid.Col xs={sizeLevels.xs} lg={true}>
-              <Text>xs-lg</Text>
-            </FlexGrid.Col>
-            <FlexGrid.Col xs={sizeLevels.xs} xl={true}>
-              <Text>xs-xl</Text>
-            </FlexGrid.Col>
-            <FlexGrid.Col sm={sizeLevels.sm} lg={true}>
-              <Text>sm-lg</Text>
-            </FlexGrid.Col>
-            <FlexGrid.Col sm={sizeLevels.sm} xl={true}>
-              <Text>sm-xl</Text>
-            </FlexGrid.Col>
-            <FlexGrid.Col md={sizeLevels.md} xl={true}>
-              <Text>md-xl</Text>
-            </FlexGrid.Col>
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-
-    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'))
-    expectIfSizeExpected('xs-lg').toHaveStyle(getNumericSizeStyle('xs'))
-    expectIfSizeExpected('xs-xl').toHaveStyle(getNumericSizeStyle('xs'))
-    expectIfSizeExpected('sm-lg').toHaveStyle(getNumericSizeStyle('sm'))
-    expectIfSizeExpected('sm-xl').toHaveStyle(getNumericSizeStyle('sm'))
-    expectIfSizeExpected('md-xl').toHaveStyle(getNumericSizeStyle('md'))
-  })
-
-  // Testing special "hiding" case on passing xs, sm, md, lg, xl props as 0.
-  // Should inherit like other values for these props, confirmed in:
-  // https://github.com/telus/universal-design-system/pull/364#discussion_r671382300
-  it.each(
-    // true here indicates hiding styles should apply
-    // Align expected results like a table so they're easier to read
-    /* prettier-ignore */ [
-    ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
-    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
-    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
-    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
-    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
-  ]
-  )('applies hiding styles from one prop at viewport "%s"', (viewport, expected) => {
-    const hidingStyle = { display: 'none' }
-
-    // Render flexgrids with one each of xs={0}, sm={0} etc based on sizeLevels above
-    const { getByText } = render(
-      <Theme>
-        <Viewport viewport={viewport}>
-          <FlexGrid>
-            {viewports.keys.map((sizeViewport) => {
-              const propName = sizeViewport
-              return (
-                <FlexGrid.Col key={propName} {...{ [propName]: 0 }}>
-                  <Text>{propName}</Text>
-                </FlexGrid.Col>
-              )
-            })}
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-    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)
-    expectIfHidingExpected('sm').toHaveStyle(hidingStyle)
-    expectIfHidingExpected('md').toHaveStyle(hidingStyle)
-    expectIfHidingExpected('lg').toHaveStyle(hidingStyle)
-    expectIfHidingExpected('xl').toHaveStyle(hidingStyle)
-  })
-})
-
-describe('FlexGrid.Col horizontalAlign', () => {
-  const alignRightStyle = { textAlign: 'right' }
-
-  it.each(
-    // true here indicates offset styles should apply and follow the provided level for that prop
-    // Align expected results like a table so they're easier to read
-    /* prettier-ignore */ [
-    ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
-    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
-    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
-    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
-    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
-  ]
-  )('applies right align from one horizontalAlign value at viewport "%s"', (viewport, expected) => {
-    // Render flexgrids with horizontalAlign={{ xs: 'right' }}, horizontalAlign={{ sm: 'right' }}, etc
-    const { getByText } = render(
-      <Theme>
-        <Viewport viewport={viewport}>
-          <FlexGrid>
-            {viewports.keys.map((alignViewport) => {
-              return (
-                <FlexGrid.Col
-                  key={alignViewport}
-                  horizontalAlign={{
-                    [alignViewport]: 'right'
-                  }}
-                >
-                  <Text>{alignViewport}</Text>
-                </FlexGrid.Col>
-              )
-            })}
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-
-    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)
-    expectIfAlignExpected('sm').toHaveStyle(alignRightStyle)
-    expectIfAlignExpected('md').toHaveStyle(alignRightStyle)
-    expectIfAlignExpected('lg').toHaveStyle(alignRightStyle)
-    expectIfAlignExpected('xl').toHaveStyle(alignRightStyle)
-  })
-})

package/__tests17__/FlexGrid/FlexGrid.test.jsx

@@ -1,136 +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 applyInheritance from '../../src/FlexGrid/helpers'
-import Theme from '../../__fixtures__/Theme'
-import Viewport from '../../__fixtures__/Viewport'
-
-const contents = (
-  <FlexGrid.Col>
-    <FlexGrid.Row>
-      <Text>Some text</Text>
-    </FlexGrid.Row>
-  </FlexGrid.Col>
-)
-
-// Keep these on one line, wrapping some makes them harder to read
-/* prettier-ignore */
-describe('FlexGrid applyInheritance', () => {
-  it('fills undefined values with last defined value', () => {
-    expect(applyInheritance([1, undefined, undefined, undefined, undefined])).toEqual([1, 1, 1, 1, 1])
-    expect(applyInheritance([1, 2, undefined, undefined, undefined])).toEqual([1, 2, 2, 2, 2])
-    expect(applyInheritance([1, 2, 3, undefined, undefined])).toEqual([1, 2, 3, 3, 3])
-    expect(applyInheritance([1, 2, 3, 4, undefined])).toEqual([1, 2, 3, 4, 4])
-  })
-
-  it("doesn't change an array's values where everything is defined", () => {
-    expect(applyInheritance([1, 2, 3, 4, 5])).toEqual([1, 2, 3, 4, 5])
-  })
-
-  it("doesn't change an array's values where nothing is defined", () => {
-    expect(applyInheritance([undefined, undefined, undefined, undefined, undefined])).toEqual([undefined, undefined, undefined, undefined, undefined])
-  })
-
-  // TODO: check implementation, see if it really needs to return undefined for [0] and '' for others
-  it("doesn't change undefined values before the first defined value", () => {
-    expect(applyInheritance([undefined, 1, 2, 3, 4])).toEqual([undefined, 1, 2, 3, 4])
-    expect(applyInheritance([undefined, undefined, 1, 2, 3])).toEqual([undefined, undefined, 1, 2, 3])
-    expect(applyInheritance([undefined, undefined, undefined, 1, 2])).toEqual([undefined, undefined, undefined, 1, 2])
-    expect(applyInheritance([undefined, undefined, undefined, undefined, 1])).toEqual([undefined, undefined, undefined, undefined, 1])
-  })
-
-  it('fills undefined values after any defined value while leaving those before', () => {
-    expect(applyInheritance([undefined, 1, undefined, 2, undefined])).toEqual([undefined, 1, 1, 2, 2])
-    expect(applyInheritance([undefined, undefined, 1, undefined, 2])).toEqual([undefined, undefined, 1, 1, 2])
-    expect(applyInheritance([undefined, undefined, undefined, 1, undefined])).toEqual([undefined, undefined, undefined, 1, 1])
-  })
-})
-
-describe('FlexGrid', () => {
-  it('Sets style correctly if outsideGutter is passed', () => {
-    const withID = 'with-outsideGutter'
-    const withoutID = 'without-outsideGutter'
-
-    const withStyle = { width: '100%' }
-
-    const withoutStyle = { marginHorizontal: -16 }
-
-    const { getByTestId } = render(
-      <Theme>
-        <Viewport>
-          <FlexGrid outsideGutter={true} testID={withID}>
-            {contents}
-          </FlexGrid>
-          <FlexGrid outsideGutter={false} testID={withoutID}>
-            {contents}
-          </FlexGrid>
-        </Viewport>
-      </Theme>
-    )
-
-    expect(getByTestId(withID)).toHaveStyle(withStyle)
-    expect(getByTestId(withoutID)).toHaveStyle(withoutStyle)
-
-    expect(getByTestId(withID)).not.toHaveStyle(withoutStyle)
-    expect(getByTestId(withoutID)).not.toHaveStyle(withStyle)
-  })
-
-  it.each(Array.from(viewports.map.entries()))(
-    `applies correct limitWidth styles at viewport "%s"`,
-    (viewport, breakpoint) => {
-      const testID = 'testID'
-      const { getByTestId } = render(
-        <Theme>
-          <Viewport viewport={viewport}>
-            <FlexGrid limitWidth testID={testID}>
-              {contents}
-            </FlexGrid>
-          </Viewport>
-        </Theme>
-      )
-      if (viewport !== viewports.xs) {
-        expect(typeof breakpoint).toBe('number')
-        expect(breakpoint).toBeGreaterThan(0)
-        expect(getByTestId(testID)).toHaveStyle({ maxWidth: breakpoint })
-      } else {
-        expect(getByTestId(testID)).not.toHaveStyle({ maxWidth: breakpoint })
-      }
-    }
-  )
-
-  it.each(
-    // Align expected results like a table so they're easier to read
-    /* prettier-ignore */ [
-    ['xs', { xs: 'column-reverse', sm: 'column',         md: 'column',         lg: 'column',         xl: 'column'         }],
-    ['sm', { xs: 'column-reverse', sm: 'column-reverse', md: 'column',         lg: 'column',         xl: 'column'         }],
-    ['md', { xs: 'column-reverse', sm: 'column-reverse', md: 'column-reverse', lg: 'column',         xl: 'column'         }],
-    ['lg', { xs: 'column-reverse', sm: 'column-reverse', md: 'column-reverse', lg: 'column-reverse', xl: 'column'         }],
-    ['xl', { xs: 'column-reverse', sm: 'column-reverse', md: 'column-reverse', lg: 'column-reverse', xl: 'column-reverse' }]
-  ]
-  )('applies correct column order for each reverse prop at viewport "%s"', (viewport, expected) => {
-    // Render flexgrids for each of xsReverse, smReverse, mdReverse etc etc
-    const { getByTestId } = render(
-      <Theme>
-        <Viewport viewport={viewport}>
-          {viewports.keys.map((reverseViewport) => {
-            const propName = `${reverseViewport}Reverse`
-            return (
-              <FlexGrid key={propName} testID={propName} {...{ [propName]: true }}>
-                {contents}
-              </FlexGrid>
-            )
-          })}
-        </Viewport>
-      </Theme>
-    )
-
-    expect(getByTestId('xsReverse')).toHaveStyle({ flexDirection: expected.xs })
-    expect(getByTestId('smReverse')).toHaveStyle({ flexDirection: expected.sm })
-    expect(getByTestId('mdReverse')).toHaveStyle({ flexDirection: expected.md })
-    expect(getByTestId('lgReverse')).toHaveStyle({ flexDirection: expected.lg })
-    expect(getByTestId('xlReverse')).toHaveStyle({ flexDirection: expected.xl })
-  })
-})