@telus-uds/components-base 1.7.0 → 1.8.1

package/__tests__/FlexGrid/Col.test.jsx

@@ -1,256 +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
-      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
-      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
-      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
-      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
-      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/__tests__/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 })
-  })
-})

package/__tests__/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'
-    })
-  })
-})