@telus-uds/components-base 1.14.3 → 1.15.0

package/__tests17__/Button/ButtonBase.test.jsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { Platform, Text } from 'react-native'
+import testTheme from '../../__fixtures__/testTheme'
+
+import Theme from '../../__fixtures__/Theme'
+import ButtonBase from '../../src/Button/ButtonBase'
+
+beforeEach(() => jest.clearAllMocks())
+
+describe('ButtonBase with render function child', () => {
+  it('receives tokens in render function child', () => {
+    const { tokens } = testTheme.components.Button
+    const arbitraryWeight = '300'
+    const { getByText } = render(
+      <Theme>
+        <ButtonBase onPress={() => {}} tokens={{ ...tokens, fontWeight: arbitraryWeight }}>
+          {({ textStyles }) => <Text style={textStyles}>Function child</Text>}
+        </ButtonBase>
+      </Theme>
+    )
+
+    // Check we're not getting false positive pass on undefined values
+    expect(tokens.color).toBeTruthy()
+    expect(tokens.fontSize).toBeTruthy()
+
+    expect(getByText('Function child')).toHaveStyle({
+      color: tokens.color,
+      fontSize: tokens.fontSize,
+      fontWeight: arbitraryWeight
+    })
+  })
+
+  it('receives button state in render function', () => {
+    const { getByText } = render(
+      <Theme>
+        <ButtonBase onPress={() => {}} selected>
+          {({ selected, inactive }) => (
+            <>
+              <Text>{`A: Selected: ${selected}`}</Text>
+              <Text>{`A: Inactive: ${inactive}`}</Text>
+            </>
+          )}
+        </ButtonBase>
+        <ButtonBase onPress={() => {}} inactive>
+          {({ selected, inactive }) => (
+            <>
+              <Text>{`B: Selected: ${selected}`}</Text>
+              <Text>{`B: Inactive: ${inactive}`}</Text>
+            </>
+          )}
+        </ButtonBase>
+        <ButtonBase onPress={() => {}}>
+          {({ pressed, hovered, focused }) => (
+            <>
+              <Text>{`C: Pressed: ${pressed}`}</Text>
+              <Text>{`C: Hovered: ${hovered}`}</Text>
+              <Text>{`C: Focused: ${focused}`}</Text>
+            </>
+          )}
+        </ButtonBase>
+      </Theme>
+    )
+
+    expect(getByText(/^A: Selected:/)).toHaveTextContent(/true$/)
+    expect(getByText(/^A: Inactive:/)).toHaveTextContent(/false$/)
+
+    expect(getByText(/^B: Selected:/)).toHaveTextContent(/false$/)
+    expect(getByText(/^B: Inactive:/)).toHaveTextContent(/true$/)
+
+    // React Native Testing Library doesn't seem to support Pressable state changes.
+    // Best we can do is confirm we're getting the default false and not undefined.
+    expect(getByText(/^C: Pressed:/)).toHaveTextContent(/false$/)
+
+    // TODO: this won't be called until cross-platform Jest tests are configured
+    // see https://github.com/telus/universal-design-system/issues/319
+    if (Platform.OS === 'web') {
+      expect(getByText(/^C: Hovered:/)).toHaveTextContent(/false$/)
+      expect(getByText(/^C: Focused:/)).toHaveTextContent(/false$/)
+    }
+  })
+})

package/__tests17__/Button/ButtonGroup.test.jsx

@@ -0,0 +1,347 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+import { toHaveTextContent } from '@testing-library/jest-native'
+
+import Theme from '../../__fixtures__/Theme'
+import ButtonGroup from '../../src/Button/ButtonGroup'
+
+const items = [
+  { label: 'One', id: 'one', accessibilityLabel: 'Option one' },
+  { label: 'Two', id: 'two', accessibilityLabel: 'Option two' },
+  { label: 'Three', id: 'three', accessibilityLabel: 'Option three' },
+  { label: 'Four', id: 'four', accessibilityLabel: 'Option four' }
+]
+const checked = { checked: true }
+
+// expect().toHaveTextContent doesn't work on arrays, expect().toContain etc doesn't match elements
+const containsText = (queryResult, text) =>
+  queryResult.some((testInstance) => toHaveTextContent(testInstance, text).pass)
+
+describe('ButtonGroup', () => {
+  // eslint-disable-next-line no-console
+  const consoleError = console.error
+  beforeEach(() => {
+    // eslint-disable-next-line no-console
+    console.error = () => {}
+  })
+  afterEach(() => {
+    // eslint-disable-next-line no-console
+    console.error = consoleError
+  })
+
+  it('Throws if has `values` without `onChange`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <ButtonGroup items={items} values={['one']} />
+        </Theme>
+      )
+    ).toThrow(/values.+without.+onChange/)
+  })
+  it("Doesn't throw if has `values` without `onChange` and is read only", () => {
+    expect(() =>
+      render(
+        <Theme>
+          <ButtonGroup items={items} values={['one']} readOnly />
+        </Theme>
+      )
+    ).not.toThrow()
+  })
+  it('Throws if has both `values` and `initialValues`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <ButtonGroup items={items} values={['one']} initialValues={['one']} onChange={() => {}} />
+        </Theme>
+      )
+    ).toThrow(/both(?=.*initialValues)(?=.*values){2}/)
+  })
+})
+
+describe('ButtonGroup (uncontrolled)', () => {
+  it('Selects one and only one item by default', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup items={items} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+  })
+
+  it('Deselects if the selected item is pressed', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup items={items} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+    const three = getByText('Three')
+    await fireEvent.press(three)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+
+    await fireEvent.press(three)
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).not.toBeTruthy()
+  })
+
+  it('Is accessible as a radio button by default', async () => {
+    const { queryAllByA11yRole, queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup items={items} />
+      </Theme>
+    )
+    expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
+    expect(queryAllByA11yRole('radiogroup')).toHaveLength(1)
+    const radios = queryAllByA11yRole('radio')
+    expect(radios).toHaveLength(4)
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+    await fireEvent.press(radios[0])
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+  })
+
+  it('Selects <= two items when maxValues === 2', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup items={items} maxValues={2} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const three = getByText('Three')
+    await fireEvent.press(three)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+
+    const four = getByText('Four')
+    await fireEvent.press(four)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+  })
+
+  it('Is accessible as checkboxes button when maxValues > 1', async () => {
+    const { queryAllByA11yRole, queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup items={items} maxValues={2} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yRole('radiogroup')).toHaveLength(0)
+    expect(queryAllByA11yRole('radio')).toHaveLength(0)
+
+    const checks = queryAllByA11yRole('checkbox')
+    expect(checks).toHaveLength(4)
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+    await fireEvent.press(checks[0])
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+  })
+
+  it('Selects unlimited items when maxValues is turned off', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup items={items} maxValues={null} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const three = getByText('Three')
+    await fireEvent.press(three)
+    expect(queryAllByA11yState(checked)).toHaveLength(3)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const four = getByText('Four')
+    await fireEvent.press(four)
+    expect(queryAllByA11yState(checked)).toHaveLength(4)
+    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+  })
+
+  it('Auto-selects any provided initialValues', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup items={items} initialValues={['one', 'two']} maxValues={3} />
+      </Theme>
+    )
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+
+    const three = getByText('Three')
+    await fireEvent.press(three)
+
+    expect(queryAllByA11yState(checked)).toHaveLength(3)
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const four = getByText('Four')
+    await fireEvent.press(four)
+    expect(queryAllByA11yState(checked)).toHaveLength(3)
+    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'Four')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+  })
+})
+
+describe('ButtonGroup (controlled)', () => {
+  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <ButtonGroup items={items} values={[]} onChange={handleChange} />
+      </Theme>
+    )
+
+    expect(handleChange).toHaveBeenCalledTimes(0)
+
+    const one = getByText('One')
+    await fireEvent(one, 'press', { nativeEvent: 'example' })
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenLastCalledWith(['one'], { nativeEvent: 'example' })
+
+    const two = getByText('Two')
+    await fireEvent(two, 'press', { nativeEvent: 'example2' })
+    expect(handleChange).toHaveBeenCalledTimes(2)
+    expect(handleChange).toHaveBeenLastCalledWith(['two'], { nativeEvent: 'example2' })
+  })
+
+  it("Doesn't change its own selection if `values` is passed", async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup items={items} values={['one']} onChange={() => {}} />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+  })
+
+  it('Does not render an invalid `values` invalidly', async () => {
+    const { queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup
+          items={items}
+          values={['one', 'two', 'three']}
+          maxValues={2}
+          onChange={() => {}}
+        />
+      </Theme>
+    )
+    expect(queryAllByA11yState(checked)).toHaveLength(2)
+    expect(containsText(queryAllByA11yState(checked), 'One')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Two')).toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'Three')).toBeTruthy()
+  })
+})
+
+describe('ButtonGroup (read-only)', () => {
+  it("Doesn't call onChange handler when read-only", async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <ButtonGroup items={items} values={[]} onChange={handleChange} readOnly />
+      </Theme>
+    )
+
+    expect(handleChange).toHaveBeenCalledTimes(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(handleChange).toHaveBeenCalledTimes(0)
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(handleChange).toHaveBeenCalledTimes(0)
+  })
+
+  it("Doesn't change its selection on press", async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <ButtonGroup items={items} values={['one']} readOnly />
+      </Theme>
+    )
+
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(queryAllByA11yState(checked)).toHaveLength(1)
+    expect(containsText(queryAllByA11yState(checked), 'Two')).not.toBeTruthy()
+    expect(containsText(queryAllByA11yState(checked), 'One')).toBeTruthy()
+  })
+})

package/__tests17__/Button/ButtonLink.test.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Platform, Linking } from 'react-native'
+import { render, fireEvent } from '@testing-library/react-native'
+
+import Theme from '../../__fixtures__/Theme'
+import ButtonLink from '../../src/Button/ButtonLink'
+
+const href = 'https://example.com'
+const label = 'Test ButtonLink'
+
+describe('ButtonLink', () => {
+  it('renders an accessible link', async () => {
+    const { getByRole } = render(
+      <Theme>
+        <ButtonLink href={href}>{label}</ButtonLink>
+      </Theme>
+    )
+
+    const link = getByRole('link')
+    expect(link).toHaveTextContent(label)
+  })
+
+  // TODO: this won't be called until cross-platform Jest tests are configured
+  // see https://github.com/telus/universal-design-system/issues/319
+  if (Platform.OS === 'web') {
+    it('defers to platform link handling (web)', async () => {
+      // This test is untested
+      jest.spyOn(Linking, 'openURL')
+      const originalValue = Platform.OS
+      Platform.OS = 'web'
+      const { getByRole } = render(
+        <Theme>
+          <ButtonLink href={href}>{label}</ButtonLink>
+        </Theme>
+      )
+
+      const el = getByRole('link')
+      fireEvent.press(el)
+      expect(Linking.openURL).not.toHaveBeenCalled()
+      Platform.OS = originalValue
+    })
+  }
+
+  // Default jest OS is ios, this will always be called until
+  // https://github.com/telus/universal-design-system/issues/319
+  if (Platform.OS !== 'web') {
+    it('calls Linking.openURL (mobile)', async () => {
+      jest.spyOn(Linking, 'openURL').mockImplementation(() => {})
+      const { getByRole } = render(
+        <Theme>
+          <ButtonLink href={href}>{label}</ButtonLink>
+        </Theme>
+      )
+
+      const el = getByRole('link')
+      fireEvent.press(el)
+      expect(Linking.openURL).toHaveBeenCalledTimes(1)
+      expect(Linking.openURL).toHaveBeenCalledWith(href)
+    })
+  }
+})

package/__tests17__/Card/Card.test.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { Text } from 'react-native'
+
+import { Card } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import testTheme from '../../__fixtures__/testTheme'
+
+const contentText = 'This is a card'
+
+const setup = ({ tokens } = {}) =>
+  render(
+    <Theme>
+      <Card tokens={tokens}>
+        <Text>{contentText}</Text>
+      </Card>
+    </Theme>
+  )
+
+describe('Card', () => {
+  it('renders the card content', () => {
+    const { getByText } = setup()
+    const cardContent = getByText(contentText)
+    expect(cardContent).toBeTruthy()
+  })
+
+  it('renders the default style properly', () => {
+    const defaultStyle = testTheme.components.Card.tokens
+    const { getByText } = setup()
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle(defaultStyle)
+  })
+
+  it('renders a card with a custom background color', () => {
+    const backgroundColor = '#0F0F0F'
+    const { getByText } = setup({ tokens: { backgroundColor } })
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle({ backgroundColor })
+  })
+
+  it('renders a card with a custom border', () => {
+    const border = {
+      borderColor: '#123456',
+      borderWidth: 7,
+      borderRadius: 8
+    }
+    const { getByText } = setup({ tokens: { ...border } })
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle({ ...border })
+  })
+
+  it('renders a card with a custom padding', () => {
+    const padding = {
+      paddingBottom: 1,
+      paddingLeft: 2,
+      paddingRight: 3,
+      paddingTop: 4
+    }
+    const { getByText } = setup({ tokens: { ...padding } })
+    const card = getByText(contentText).parent
+    expect(card).toHaveStyle({ ...padding })
+  })
+})

package/__tests17__/Carousel/Carousel.test.jsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import { Text } from 'react-native'
+import { render, fireEvent } from '@testing-library/react-native'
+
+import { Carousel } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+const setup = (args = {}) =>
+  render(
+    <Theme>
+      <Carousel {...args}>
+        <Carousel.Item testID="firstSlide">
+          <Text>First</Text>
+        </Carousel.Item>
+        <Carousel.Item testID="secondSlide">
+          <Text>Second</Text>
+        </Carousel.Item>
+        <Carousel.Item testID="thirdSlide">
+          <Text>Third</Text>
+        </Carousel.Item>
+      </Carousel>
+    </Theme>
+  )
+
+const getButtonLabel = (item, of = 3, itemLabel = 'item') => `Show ${itemLabel} ${item} of ${of}`
+
+describe('Carousel', () => {
+  it('renders the first Carousel slide', () => {
+    const { getByTestId } = setup()
+
+    expect(getByTestId('firstSlide')).not.toHaveProp('focusable')
+    expect(getByTestId('secondSlide')).toHaveProp('focusable', false)
+    expect(getByTestId('thirdSlide')).toHaveProp('focusable', false)
+  })
+
+  it('renders the second Carousel slide when clicked on next button', async () => {
+    const { getByTestId, getByA11yLabel } = setup()
+
+    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
+
+    expect(getByTestId('firstSlide')).toHaveProp('focusable', false)
+    expect(getByTestId('secondSlide')).not.toHaveProp('focusable')
+    expect(getByTestId('thirdSlide')).toHaveProp('focusable', false)
+  })
+
+  it('renders the third Carousel slide when clicked on next button twice', async () => {
+    const { getByTestId, getByA11yLabel } = setup()
+
+    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
+    await fireEvent.press(getByA11yLabel(getButtonLabel(3)))
+
+    expect(getByTestId('firstSlide')).toHaveProp('focusable', false)
+    expect(getByTestId('secondSlide')).toHaveProp('focusable', false)
+    expect(getByTestId('thirdSlide')).not.toHaveProp('focusable')
+  })
+
+  it('has correct accessibilityValue values for each slide', async () => {
+    const { getByA11yLabel, getByTestId } = setup({ testID: 'outer-container' })
+
+    const getContainer = () => getByTestId('outer-container')
+
+    expect(getContainer()).toHaveProp('accessibilityValue', {
+      now: 1,
+      min: 1,
+      max: 3
+    })
+    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
+
+    expect(getContainer()).toHaveProp('accessibilityValue', {
+      now: 2,
+      min: 1,
+      max: 3
+    })
+
+    await fireEvent.press(getByA11yLabel(getButtonLabel(3)))
+
+    expect(getContainer()).toHaveProp('accessibilityValue', {
+      now: 3,
+      min: 1,
+      max: 3
+    })
+  })
+
+  it('hides previous button and displays next button when on first slide', async () => {
+    const { getByTestId } = setup()
+
+    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'hidden' })
+    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'visible' })
+  })
+
+  it('displays previous and next buttons when not on first or last slide', async () => {
+    const { getByTestId, getByA11yLabel } = setup()
+
+    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'hidden' })
+    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'visible' })
+
+    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
+
+    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'visible' })
+    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'visible' })
+  })
+
+  it('hides next button and displays previous button when on last slide', async () => {
+    const { getByTestId, getByA11yLabel } = setup()
+
+    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'hidden' })
+    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'visible' })
+
+    await fireEvent.press(getByA11yLabel(getButtonLabel(2)))
+    await fireEvent.press(getByA11yLabel(getButtonLabel(3)))
+
+    expect(getByTestId('previous-button-container')).toHaveStyle({ visibility: 'visible' })
+    expect(getByTestId('next-button-container')).toHaveStyle({ visibility: 'hidden' })
+  })
+
+  it('hides panel navigation when `showPanelNavigation` is false', () => {
+    const { queryByRole } = setup({ tokens: { showPanelNavigation: false } })
+
+    expect(queryByRole('progressbar')).toBeFalsy()
+  })
+
+  it('hides previous/next navigation when `showPreviousNextNavigation` is false', () => {
+    const { queryByTestId } = setup({ tokens: { showPreviousNextNavigation: false } })
+
+    expect(queryByTestId('previous-button-container')).toBeFalsy()
+    expect(queryByTestId('next-button-container')).toBeFalsy()
+  })
+})