@telus-uds/components-base 0.0.2-prerelease.9 → 1.1.0

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' })
+      }
+    )
+  }
+})

package/babel.config.js

@@ -1,20 +1,13 @@
-module.exports = {
-  env: {
-    /*
-     * we actually want this setup to be used whenever we're not in `test` but
-     * babel merges plugins array rather than replacing so we can't set it as a
-     * default. However the default BABEL_ENV value is development (jest sets it
-     * to test)
-     */
-    development: {
-      presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
-      plugins: [['react-native-web', { commonjs: true }]]
-    },
-    /*
-     * jest is testing for just ios at the moment, use a preset which best matches that env
-     */
-    test: {
+module.exports = (api) => {
+  const env = api.cache(() => process.env.NODE_ENV)
+  if (env === 'test') {
+    // configuration for jest
+    return {
       presets: ['module:metro-react-native-babel-preset']
     }
   }
+  return {
+    presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
+    plugins: [['react-native-web', { commonjs: true }]]
+  }
 }