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

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

@@ -0,0 +1,160 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+
+import { Pagination } 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('Pagination', () => {
+  it('truncates the number of rendered elements', () => {
+    const { getByText } = render(
+      <Pagination tokens={{ truncateAbove: 3 }}>
+        <Pagination.PageButton onPress={() => {}} />
+        <Pagination.PageButton onPress={() => {}} />
+        <Pagination.PageButton onPress={() => {}} />
+        <Pagination.PageButton onPress={() => {}} />
+        <Pagination.PageButton onPress={() => {}} />
+      </Pagination>,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    expect(() => getByText('1')).not.toThrow()
+    expect(() => getByText('2')).not.toThrow()
+    expect(() => getByText('...')).not.toThrow()
+    expect(() => getByText('3')).toThrow()
+    expect(() => getByText('4')).toThrow()
+    expect(() => getByText('5')).not.toThrow()
+  })
+
+  it('renders the "Next Page" button when applicable', () => {
+    const { getByA11yLabel } = render(
+      <Pagination>
+        <Pagination.PageButton onPress={() => {}} isActive />
+        <Pagination.PageButton onPress={() => {}} />
+      </Pagination>,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    expect(() => getByA11yLabel(/next/)).not.toThrow()
+    expect(() => getByA11yLabel(/previous/)).toThrow()
+  })
+
+  it('renders the "Previous Page" button when applicable', () => {
+    const { getByA11yLabel } = render(
+      <Pagination>
+        <Pagination.PageButton onPress={() => {}} />
+        <Pagination.PageButton onPress={() => {}} isActive />
+      </Pagination>,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    expect(() => getByA11yLabel(/next/)).toThrow()
+    expect(() => getByA11yLabel(/previous/)).not.toThrow()
+  })
+
+  it('uses correct copy', () => {
+    const { getByA11yLabel } = render(
+      <Pagination copy="fr">
+        <Pagination.PageButton onPress={() => {}} isActive />
+      </Pagination>,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    expect(() => getByA11yLabel(/page actuelle/)).not.toThrow()
+  })
+
+  describe('Pagination Page Button', () => {
+    it('triggers the onPress callback when pressed', () => {
+      const onPress = jest.fn()
+
+      const { getByA11yLabel } = render(
+        <Pagination>
+          <Pagination.PageButton onPress={() => {}} isActive />
+          <Pagination.PageButton onPress={onPress} />
+        </Pagination>,
+        {
+          wrapper: Wrapper
+        }
+      )
+
+      expect(onPress).not.toHaveBeenCalled()
+
+      fireEvent.press(getByA11yLabel('Go to page number 2'))
+
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+
+    it('renders a link and passes down hrefAttrs', () => {
+      const { getByA11yLabel } = render(
+        <Pagination>
+          <Pagination.PageButton onPress={() => {}} isActive />
+          <Pagination.PageButton href="test-url" hrefAttrs={{ target: '_blank' }} />
+        </Pagination>,
+        {
+          wrapper: Wrapper
+        }
+      )
+
+      const button = getByA11yLabel('Go to page number 2')
+
+      expect(button).toHaveProp('accessibilityRole', 'link')
+      expect(button).toHaveProp('href', 'test-url')
+      expect(button).toHaveProp('target', '_blank')
+    })
+  })
+
+  describe('Pagination Side Button', () => {
+    it('triggers the onPress event of the item next to the active one', () => {
+      const onPress = jest.fn()
+
+      const { getByA11yLabel } = render(
+        <Pagination>
+          <Pagination.PageButton onPress={() => {}} isActive />
+          <Pagination.PageButton onPress={onPress} />
+        </Pagination>,
+        {
+          wrapper: Wrapper
+        }
+      )
+
+      expect(onPress).not.toHaveBeenCalled()
+
+      fireEvent.press(getByA11yLabel(/next/))
+
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+
+    it('renders a link with href props of the item next to the active one', () => {
+      const { getByA11yLabel } = render(
+        <Pagination>
+          <Pagination.PageButton onPress={() => {}} isActive />
+          <Pagination.PageButton href="test-url" hrefAttrs={{ target: '_blank' }} />
+        </Pagination>,
+        {
+          wrapper: Wrapper
+        }
+      )
+
+      const button = getByA11yLabel(/next/)
+
+      expect(button).toHaveProp('accessibilityRole', 'link')
+      expect(button).toHaveProp('href', 'test-url')
+      expect(button).toHaveProp('target', '_blank')
+    })
+  })
+})

package/__tests__/Spacer/Spacer.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+
+import { Spacer } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+const testID = 'spacer'
+
+describe('Spacer', () => {
+  it('has smallest size from spacing scale by default', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const { getByTestId } = render(<Spacer testID={testID} />, { wrapper: Theme })
+    expect(getByTestId(testID)).toHaveStyle({
+      height: expectedSize
+    })
+  })
+
+  it('has size from spacing scale if space prop passed', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const { getByTestId } = render(<Spacer space={2} testID={testID} />, { wrapper: Theme })
+    expect(getByTestId(testID)).toHaveStyle({
+      height: expectedSize
+    })
+  })
+
+  it('has no size if 0 passed in', () => {
+    const expectedSize = 0
+    const { getByTestId } = render(<Spacer space={0} testID={testID} />, { wrapper: Theme })
+    expect(getByTestId(testID)).toHaveStyle({
+      height: expectedSize
+    })
+  })
+})
+
+describe('Spacer (row)', () => {
+  it('has smallest size from spacing scale by default', () => {
+    const expectedSize = 4 // from __fixtures__/testTheme.js
+    const { getByTestId } = render(<Spacer testID={testID} direction="row" />, { wrapper: Theme })
+    expect(getByTestId(testID)).toHaveStyle({
+      width: expectedSize
+    })
+  })
+
+  it('has size from spacing scale if space prop passed', () => {
+    const expectedSize = 8 // from __fixtures__/testTheme.js
+    const { getByTestId } = render(<Spacer space={2} testID={testID} direction="row" />, {
+      wrapper: Theme
+    })
+    expect(getByTestId(testID)).toHaveStyle({
+      width: expectedSize
+    })
+  })
+
+  it('has no size if 0 passed in', () => {
+    const expectedSize = 0
+    const { getByTestId } = render(<Spacer space={0} testID={testID} direction="row" />, {
+      wrapper: Theme
+    })
+    expect(getByTestId(testID)).toHaveStyle({
+      width: expectedSize
+    })
+  })
+})

package/__tests__/StackView/StackView.test.jsx

@@ -0,0 +1,242 @@
+import React from 'react'
+import { View } from 'react-native'
+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 separators and children as direct children of parent if "inherit" is set', () => {
+    // Some arbitrary custom style we apply to the parent
+    const expectedStyle = { color: '#012345', flexBasis: 12345 }
+
+    const { getByTestId } = render(
+      <View style={expectedStyle}>
+        <StackView inherit>
+          <Typography>A</Typography>
+          <Typography>B</Typography>
+        </StackView>
+      </View>,
+      { wrapper: Theme }
+    )
+    const parent = getFirstAncestorAboveType(getByTestId('Stack-Spacer-1'), Spacer)
+    // Expect an empty StackView fiber node with no styles of its own
+    expect(parent.type).toBe(StackView)
+    expect(parent).not.toHaveStyle({ flexDirection: 'column' })
+    expect(parent).not.toHaveStyle({ flexDirection: 'row' })
+
+    // Expect next parent to be a rendered View with styles
+    const renderedParent = getFirstAncestorAboveType(parent, StackView)
+    expect(renderedParent.type).toBe('View')
+    expect(renderedParent).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)
+  })
+})