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

package/__tests__/StepTracker/StepTracker.test.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import { render, within } from '@testing-library/react-native'
+
+import { StepTracker } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+import Viewport from '../../__fixtures__/Viewport'
+import dictionary from '../../src/StepTracker/dictionary'
+
+const defaultSteps = [...Array(5).keys()].map((key) => `Some Step Title ${key + 1}`)
+
+const setup = ({ current, steps = defaultSteps, tokens, viewport }) =>
+  render(
+    <Theme>
+      <Viewport viewport={viewport}>
+        <StepTracker current={current} steps={steps} tokens={tokens} />
+      </Viewport>
+    </Theme>
+  )
+
+describe('StepTracker', () => {
+  const currentStep = 2
+
+  it('renders the steps properly', () => {
+    const { getAllByTestId, getByA11yLabel } = setup({ current: currentStep })
+
+    expect(getAllByTestId(/StepTracker-Step/).length).toBe(defaultSteps.length)
+    expect(getAllByTestId(/StepTracker-Step-Completed/).length).toBe(
+      defaultSteps.length - currentStep - 1
+    )
+    expect(
+      within(getByA11yLabel(defaultSteps[currentStep])).getByTestId('StepTracker-Step-Current')
+    ).toBeTruthy()
+  })
+
+  it('only displays the step tracker label and no step labels on small screens', () => {
+    const { getByText, queryByText } = setup({
+      viewport: 'sm'
+    })
+
+    const stepTrackerLabel = dictionary.en.stepTrackerLabel
+      .replace('%{stepNumber}', 1)
+      .replace('%{stepCount}', defaultSteps.length)
+      .replace('%{stepLabel}', defaultSteps[0])
+    expect(getByText(stepTrackerLabel)).toBeTruthy()
+    expect(queryByText(defaultSteps[1])).toBeFalsy()
+  })
+
+  it('only displays the step labels and no step tracker label on large screens', () => {
+    const { getByText, queryByText } = setup({
+      viewport: 'lg'
+    })
+
+    const stepTrackerLabel = dictionary.en.stepTrackerLabel
+      .replace('%{stepNumber}', 1)
+      .replace('%{stepCount}', defaultSteps.length)
+      .replace('%{stepLabel}', defaultSteps[0])
+    expect(queryByText(stepTrackerLabel)).toBeFalsy()
+    expect(getByText(defaultSteps[1])).toBeTruthy()
+  })
+
+  it('displays the step tracker label if requested', () => {
+    const { getByText, queryByText } = setup({
+      current: currentStep,
+      tokens: { showStepTrackerLabel: true }
+    })
+
+    defaultSteps.forEach((stepTitle) => {
+      if (defaultSteps.indexOf(stepTitle) === currentStep) {
+        const stepTrackerLabel = dictionary.en.stepTrackerLabel
+          .replace('%{stepNumber}', currentStep + 1)
+          .replace('%{stepCount}', defaultSteps.length)
+          .replace('%{stepLabel}', stepTitle)
+        expect(getByText(stepTrackerLabel)).toBeTruthy()
+      } else {
+        expect(queryByText(stepTitle)).toBeFalsy()
+      }
+    })
+  })
+
+  it('displays the step names and titles if requested', () => {
+    const { getByText } = setup({ tokens: { showStepLabel: true } })
+
+    defaultSteps.forEach((stepTitle, index) => {
+      expect(getByText(dictionary.en.stepLabel.replace('%{stepNumber}', index + 1))).toBeTruthy()
+      expect(getByText(stepTitle)).toBeTruthy()
+    })
+  })
+
+  it('hides step names if requested', () => {
+    const { getByText } = setup({ tokens: { showStepLabel: true, showStepName: false } })
+
+    defaultSteps.forEach((stepTitle) => expect(getByText(stepTitle)).toBeTruthy())
+  })
+})

package/__tests__/Tabs/Tabs.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Tabs } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('Tabs', () => {
+  const items = [{ label: 'one' }, { label: 'two' }, { label: 'three' }, { label: 'four' }]
+  const linkItems = items.map((item) => ({ ...item, href: 'https://telus.com' }))
+
+  it('renders a menu', () => {
+    const { queryAllByA11yRole } = render(<Tabs items={items} />, { wrapper: Theme })
+    expect(queryAllByA11yRole('tablist')).toHaveLength(1)
+  })
+
+  it('renders menuitems by default', () => {
+    const { queryAllByA11yRole } = render(<Tabs items={items} />, { wrapper: Theme })
+    expect(queryAllByA11yRole('tab')).toHaveLength(4)
+    expect(queryAllByA11yRole('link')).toHaveLength(0)
+  })
+
+  it('renders links by if hrefs are passed', () => {
+    const { queryAllByA11yRole } = render(<Tabs items={linkItems} />, { wrapper: Theme })
+    expect(queryAllByA11yRole('tab')).toHaveLength(0)
+    expect(queryAllByA11yRole('link')).toHaveLength(4)
+  })
+
+  it('is selected when pressed', () => {
+    const { queryByA11yState, getByText } = render(<Tabs items={items} />, { wrapper: Theme })
+    let selected
+    selected = queryByA11yState({ selected: true })
+    expect(selected).toBeFalsy()
+
+    fireEvent.press(getByText('two'))
+
+    selected = queryByA11yState({ selected: true })
+    expect(selected).toBeTruthy()
+    expect(selected).toHaveTextContent('two')
+  })
+})

package/__tests__/Tags/Tags.test.jsx

@@ -143,7 +143,7 @@ describe('Tags (uncontrolled)', () => {
       </Theme>
     )
 
-    expect(queryAllByA11yRole('radioGroup')).toHaveLength(0)
+    expect(queryAllByA11yRole('radiogroup')).toHaveLength(0)
     expect(queryAllByA11yRole('radio')).toHaveLength(0)
 
     const checks = queryAllByA11yRole('checkbox')
@@ -238,15 +238,14 @@ describe('Tags (controlled)', () => {
     expect(handleChange).toHaveBeenCalledTimes(0)
 
     const one = getByText('One')
-    await fireEvent.press(one)
+    await fireEvent(one, 'press', { nativeEvent: 'example' })
     expect(handleChange).toHaveBeenCalledTimes(1)
-
-    expect(handleChange.mock.calls[0][0]).toEqual(['one'])
+    expect(handleChange).toHaveBeenLastCalledWith(['one'], { nativeEvent: 'example' })
 
     const two = getByText('Two')
-    await fireEvent.press(two)
+    await fireEvent(two, 'press', { nativeEvent: 'example2' })
     expect(handleChange).toHaveBeenCalledTimes(2)
-    expect(handleChange.mock.calls[1][0]).toEqual(['two'])
+    expect(handleChange).toHaveBeenLastCalledWith(['two'], { nativeEvent: 'example2' })
   })
 
   it("Doesn't change its own selection if `values` is passed", async () => {

package/__tests__/TextInput/TextArea.test.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import { fireEvent, render } from '@testing-library/react-native'
+import { render } from '@testing-library/react-native'
 
 import { Platform } from 'react-native'
 import { TextArea } from '../../src'
 import Theme from '../../__fixtures__/Theme'
+import { fireChange } from '../../__fixtures__/test-utils'
 
 describe('TextArea', () => {
   it('renders', () => {
@@ -26,7 +27,7 @@ describe('TextArea', () => {
 
       expect(textarea).toHaveStyle({ height: 20 })
 
-      fireEvent.changeText(textarea, '\n\n\n')
+      fireChange(textarea, '\n\n\n')
 
       expect(textarea).toHaveStyle({ height: 60 })
     })

package/__tests__/TextInput/TextInputBase.test.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import TextInputBase from '../../src/TextInput/TextInputBase'
 import Viewport from '../../__fixtures__/Viewport'
 import Theme from '../../__fixtures__/Theme'
+import { getMockEvent, fireChange } from '../../__fixtures__/test-utils'
 
 // eslint-disable-next-line react/prop-types
 const Wrapper = ({ children }) => (
@@ -11,6 +12,9 @@ const Wrapper = ({ children }) => (
   </Viewport>
 )
 
+const text = 'new value'
+const changeEvent = getMockEvent({ text })
+
 describe('TextInputBaseBase', () => {
   it('triggers the interactive callbacks', () => {
     const onFocus = jest.fn()
@@ -73,9 +77,9 @@ describe('TextInputBaseBase', () => {
     const input = getByA11yLabel('Input label')
 
     expect(onChange).not.toHaveBeenCalled()
-    fireEvent.changeText(input, 'new value')
+    fireChange(input, text)
     expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenLastCalledWith('new value')
+    expect(onChange).toHaveBeenLastCalledWith(text, changeEvent)
   })
 
   it('changes value when controlled', () => {
@@ -91,9 +95,10 @@ describe('TextInputBaseBase', () => {
     const input = getByA11yLabel('Input label')
 
     expect(onChange).not.toHaveBeenCalled()
-    fireEvent.changeText(input, 'new value')
+
+    fireChange(input, text)
     expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenLastCalledWith('new value')
+    expect(onChange).toHaveBeenLastCalledWith(text, changeEvent)
   })
 
   it("doesn't change value when readOnly", () => {
@@ -114,7 +119,7 @@ describe('TextInputBaseBase', () => {
     const input = getByA11yLabel('Input label')
 
     expect(onChange).not.toHaveBeenCalled()
-    fireEvent.changeText(input, 'new value')
+    fireChange(input, text)
     expect(onChange).not.toHaveBeenCalled()
   })
 })

package/__tests__/ThemeProvider/ThemeProvider.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { renderHook } from '@testing-library/react-hooks'
+import semVerSatisfies from 'semver/functions/satisfies'
+import ThemeProvider, { useTheme, useSetTheme } from '../../src/ThemeProvider'
+import pkg from '../../package.json'
+
+jest.mock('semver/functions/satisfies')
+
+const expectedThemeTokensVersion = 'expected'
+const actualThemeTokensVersion = 'actual'
+pkg.dependencies['@telus-uds/system-theme-tokens'] = expectedThemeTokensVersion
+const theme = {
+  metadata: {
+    name: 'tokens-test',
+    themeTokensVersion: actualThemeTokensVersion
+  },
+  components: {}
+}
+
+beforeEach(() => {
+  semVerSatisfies.mockReset()
+})
+
+describe('Uninitialized ThemeProvider context', () => {
+  test('throws on useTheme', () => {
+    const { result } = renderHook(useTheme)
+    expect(() => result.current).toThrow('Theme context used outside of ThemeProvider')
+  })
+
+  test('error useSetTheme hook without provider', () => {
+    const { result } = renderHook(useSetTheme)
+    expect(() => result.current).toThrow('Theme context used outside of ThemeProvider')
+  })
+})
+
+describe('ThemeProvider theme tokens version validation', () => {
+  const renderThemeHook = (hookFn) => {
+    const ThemeWrapper = ({ children }) => (
+      <ThemeProvider defaultTheme={theme}>{children}</ThemeProvider>
+    )
+    ThemeWrapper.propTypes = { children: PropTypes.node.isRequired }
+
+    return renderHook(hookFn, {
+      wrapper: ThemeWrapper
+    })
+  }
+
+  test('validates theme tokens version with semver', () => {
+    semVerSatisfies.mockImplementationOnce(() => true)
+
+    const { result } = renderThemeHook(useTheme)
+
+    expect(result.current).toEqual(theme)
+    expect(semVerSatisfies).toHaveBeenCalledWith(
+      actualThemeTokensVersion,
+      expectedThemeTokensVersion
+    )
+  })
+
+  test('warning if theme tokens version does not match', () => {
+    semVerSatisfies.mockImplementationOnce(() => false)
+
+    const { result } = renderThemeHook(useTheme)
+
+    expect(() => result.current).toThrow('Invalid UDS token schema version detected')
+  })
+
+  test('validates on every render', () => {
+    semVerSatisfies.mockImplementationOnce(() => true)
+
+    const { rerender } = renderThemeHook(useTheme)
+    rerender()
+
+    expect(semVerSatisfies).toHaveBeenCalledTimes(2)
+  })
+})

package/__tests__/ThemeProvider/useThemeTokens.test.jsx

@@ -4,10 +4,13 @@ import { renderHook } from '@testing-library/react-hooks'
 
 import ThemeProvider from '../../src/ThemeProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../../src/ThemeProvider/useThemeTokens'
-import {
-  doesThemeRuleApply,
-  doesThemeConditionApply
-} from '../../src/ThemeProvider/utils/theme-tokens'
+import * as tokenUtils from '../../src/ThemeProvider/utils/theme-tokens'
+
+// Mock out the function that checks the theme version
+const validateThemeTokensVersion = jest.spyOn(tokenUtils, 'validateThemeTokensVersion')
+validateThemeTokensVersion.mockImplementation(() => undefined)
+
+const { doesThemeRuleApply, doesThemeConditionApply } = tokenUtils
 
 const componentName = 'TestComponent'
 
@@ -48,7 +51,8 @@ const defaultTokens = {
 
 const theme = {
   metadata: {
-    name: 'tokens-test'
+    name: 'tokens-test',
+    themeTokensVersion: 'test-version'
   },
   components: {
     [componentName]: {

package/__tests__/ThemeProvider/utils/theme-tokens.test.js

@@ -0,0 +1,41 @@
+import pkg from '../../../package.json'
+import { validateThemeTokensVersion } from '../../../src/ThemeProvider/utils/theme-tokens'
+
+function validate({ expectedVersion, actualVersion }) {
+  pkg.dependencies['@telus-uds/system-theme-tokens'] = expectedVersion
+  const theme = {
+    metadata: {
+      themeTokensVersion: actualVersion
+    }
+  }
+  validateThemeTokensVersion(theme)
+}
+
+describe('validateThemeTokensVersion', () => {
+  test('No error on matching version', async () => {
+    const expectedVersion = '1.2.3'
+    const actualVersion = '1.2.3'
+
+    validate({ expectedVersion, actualVersion })
+
+    // No errors, no problem...
+  })
+
+  test('Throws if theme version is old', async () => {
+    const expectedVersion = '^2.3.4'
+    const actualVersion = '2.3.3'
+
+    expect(() => validate({ expectedVersion, actualVersion })).toThrow(
+      'Invalid UDS token schema version detected.'
+    )
+  })
+
+  test('Throws if theme version is new', async () => {
+    const expectedVersion = '^1.2.3'
+    const actualVersion = '2.3.4'
+
+    expect(() => validate({ expectedVersion, actualVersion })).toThrow(
+      'Invalid UDS token schema version detected.'
+    )
+  })
+})

package/__tests__/ToggleSwitch/ToggleSwitch.test.jsx

@@ -63,9 +63,10 @@ describe('ToggleSwitch', () => {
     expect(handleChange).toHaveBeenCalledTimes(0)
     const toggleSwitch = getByA11yRole('switch')
     expect(queryAllByA11yState(checked)).toHaveLength(0)
-    await fireEvent.press(toggleSwitch)
+
+    await fireEvent(toggleSwitch, 'press', { nativeEvent: 'example' })
     expect(handleChange).toHaveBeenCalledTimes(1)
-    expect(handleChange.mock.calls[0][0]).toEqual(true)
+    expect(handleChange).toHaveBeenLastCalledWith(true, { nativeEvent: 'example' })
     expect(queryAllByA11yState(checked)).toHaveLength(0)
   })
 })

package/__tests__/utils/children.test.jsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { render } from '@testing-library/react-native'
+import { Text, View } from 'react-native'
+
+import { wrapStringsInText } from '../../src/utils'
+import A11yText from '../../src/A11yText'
+
+const TestComponent = ({ children }) => (
+  <View testID="wrapper">{wrapStringsInText(children, { testID: 'text' })}</View>
+)
+TestComponent.propTypes = {
+  children: PropTypes.node
+}
+
+describe('wrapStringsInText', () => {
+  it('combines adjacent strings into one text', () => {
+    const secondString = 'Second string'
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        {secondString}
+        Third string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(1)
+  })
+  it('combines adjacent strings and numbers into one `Text`', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        {12345}
+        Third string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(1)
+  })
+  it('combines adjacent strings, numbers and A11yText into one `Text`', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        <A11yText text="Some inserted A11yText" />
+        Third string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(1)
+  })
+  it('combines clusters seperated by another component into multiple `Text`s', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        {12345}
+        Third string
+        <View />
+        Fourth string
+        <A11yText text="Some inserted A11yText" />
+        Fifth string
+        <View />
+        Sixth string
+        {12345}
+        <A11yText text="Some inserted A11yText" />
+        Seventh string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(3)
+  })
+  it('does not wrap elements that do not need wrapping', () => {
+    const { getByTestId, queryAllByTestId } = render(
+      <TestComponent>
+        Unwrapped text
+        {12345}
+        <View>
+          <Text>
+            Wrapped text inside View
+            {12345}
+          </Text>
+        </View>
+        More unwrapped text
+        {12345}
+        <Text>
+          Wrapped text separate from above unwrapped text
+          {12345}
+        </Text>
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(2)
+    expect(getByTestId('wrapper').children.map((child) => child.type)).toEqual([
+      Text,
+      View,
+      Text,
+      Text
+    ])
+  })
+  it('does not wrap a singular A11yText in `Text`', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        <A11yText text="Some inserted A11yText" />
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(0)
+  })
+  it('does not wrap an A11yText in `Text` if it is sandwiched by non-text', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        First string
+        {12345}
+        Third string
+        <View />
+        <A11yText text="Some inserted A11yText" />
+        <View />
+        Sixth string
+        {12345}
+        <A11yText text="Some inserted A11yText" />
+        Seventh string
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(2)
+  })
+  it('does not double-wrap already wrapped `Text`', () => {
+    const { queryAllByTestId } = render(
+      <TestComponent>
+        <Text>Already wrapped</Text>
+        <Text>Also already wrapped</Text>
+      </TestComponent>
+    )
+    expect(queryAllByTestId('text')).toHaveLength(0)
+  })
+})

package/__tests__/utils/input.test.js

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
-import { useInputValue, useMultipleInputValues } from '../../lib/utils'
+import { useInputValue, useMultipleInputValues } from '../../src/utils'
 
 /**
  * Tests for errors thrown on incorrect props usage
@@ -90,6 +90,17 @@ describe('useInputValue (uncontrolled)', () => {
     expect(result.current.currentValue).toBe('some value')
   })
 
+  it('Changes currentValue based on old value when `setValue` is passed a function', () => {
+    const { result } = renderHook(() => useInputValue({ initialValue: 1 }))
+    expect(result.current.currentValue).toBe(1)
+
+    act(() => result.current.setValue((oldValue) => oldValue + 1))
+    expect(result.current.currentValue).toBe(2)
+
+    act(() => result.current.setValue((oldValue) => oldValue + 2))
+    expect(result.current.currentValue).toBe(4)
+  })
+
   it('Sets currentValue to initialValue if provided, which may be changed', () => {
     const { result } = renderHook(() => useInputValue({ initialValue: 'first value' }))
     expect(result.current.currentValue).toBe('first value')
@@ -210,6 +221,29 @@ describe('useMultipleInputValues (uncontrolled)', () => {
     expect(result.current.currentValues).toEqual(['second value', 'third value'])
   })
 
+  it('Replaces values on calling setValues', () => {
+    const { result } = renderHook(() =>
+      useMultipleInputValues({
+        initialValues: ['first value', 'second value', 'third value']
+      })
+    )
+    act(() => result.current.setValues(['new value', 'another value']))
+    expect(result.current.currentValues).toEqual(['new value', 'another value'])
+  })
+
+  it('Replaces values based on old values on passing function to setValues', () => {
+    const { result } = renderHook(() =>
+      useMultipleInputValues({
+        initialValues: [1, 2, 3, 4]
+      })
+    )
+    act(() => result.current.setValues((oldValues) => oldValues.map((value) => value + 1)))
+    expect(result.current.currentValues).toEqual([2, 3, 4, 5])
+
+    act(() => result.current.setValues((oldValues) => oldValues.map((value) => value + 2)))
+    expect(result.current.currentValues).toEqual([4, 5, 6, 7])
+  })
+
   it('Empties values on calling unsetValues', () => {
     const { result } = renderHook(() =>
       useMultipleInputValues({
@@ -237,6 +271,18 @@ describe('useInputValue (controlled)', () => {
     expect(onChange.mock.calls[0][0]).toEqual('second value')
   })
 
+  it('Calls `onChange` with result from old value when `setValue` is passed a function', () => {
+    const onChange = jest.fn((arg) => arg)
+    const { result } = renderHook(() => useInputValue({ value: 1, onChange }))
+    expect(result.current.currentValue).toBe(1)
+    expect(onChange).toHaveBeenCalledTimes(0)
+
+    act(() => result.current.setValue((oldValue) => oldValue + 1))
+    expect(result.current.currentValue).toBe(1)
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange.mock.calls[0][0]).toEqual(2)
+  })
+
   it('Returns updated `currentValue` when non-undefined `value` prop changes', () => {
     const onChange = () => {}
     const { result, rerender } = renderHook(({ value }) => useInputValue({ value, onChange }), {
@@ -296,6 +342,18 @@ describe('useMultipleInputValues (controlled)', () => {
     expect(onChange.mock.calls[0][0]).toEqual(['second value', 'third value'])
   })
 
+  it('Calls `onChange` with results from old values when `setValues` is passed a function', () => {
+    const onChange = jest.fn((arg) => arg)
+    const { result } = renderHook(() => useMultipleInputValues({ values: [1, 2, 3, 4], onChange }))
+    expect(result.current.currentValues).toEqual([1, 2, 3, 4])
+    expect(onChange).toHaveBeenCalledTimes(0)
+
+    act(() => result.current.setValues((oldValues) => oldValues.map((value) => value + 1)))
+    expect(result.current.currentValues).toEqual([1, 2, 3, 4])
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange.mock.calls[0][0]).toEqual([2, 3, 4, 5])
+  })
+
   it('Calls onChange with an empty array on calling unsetValues', () => {
     const onChange = jest.fn((arg) => arg)
     const { result, rerender } = renderHook(

package/__tests__/utils/semantics.test.jsx

@@ -0,0 +1,43 @@
+import { Platform } from 'react-native'
+
+import { getA11yPropsFromHtmlTag, tagsToRoles, supportedTags } from '../../src'
+
+// Note that currently all tests run as ios so only native logic can be tested here
+// until cross-platform tests are set up. See issue:
+// https://github.com/telus/universal-design-system/issues/319
+
+// As a temporary measure, there are tests on web-context HTML output for Box component
+// in @telus-uds/ds-allium which test the actual output when the tags are rendered.
+
+// These tests will therefore just test the values returned in a native context.
+describe('getA11yPropsFromHtmlTag', () => {
+  it.each(Object.entries(tagsToRoles))(
+    'responds to tag "%s" with accessibilityRole "%s"',
+    (tag, role) => {
+      expect(getA11yPropsFromHtmlTag(tag)).toEqual({ accessibilityRole: role })
+    }
+  )
+
+  it.each([
+    [1, 'h1'],
+    [2, 'h2'],
+    [3, 'h3'],
+    [4, 'h4'],
+    [5, 'h5'],
+    [6, 'h6']
+  ])('returns accessibility role "header" and level "%s" for header tag "%s"', (level, tag) => {
+    expect(getA11yPropsFromHtmlTag(tag)).toEqual({
+      accessibilityRole: 'header',
+      accessibilityLevel: level
+    })
+  })
+
+  if (Platform.OS !== 'web') {
+    it.each(supportedTags.map((tag) => [tag]))(
+      'responds to tag "%s" and an arbitrary nativeRole with given nativeRole override',
+      (tag) => {
+        expect(getA11yPropsFromHtmlTag(tag, 'link')).toEqual({ accessibilityRole: 'link' })
+      }
+    )
+  }
+})