@telus-uds/components-base 1.1.0 → 1.3.1

package/__tests__/ToggleSwitch/ToggleSwitchGroup.test.jsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { render, fireEvent, within } from '@testing-library/react-native'
+
+import Theme from '../../__fixtures__/Theme'
+import ToggleSwitchGroup from '../../src/ToggleSwitch/ToggleSwitchGroup'
+
+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 }
+const setup = (props) =>
+  render(
+    <Theme>
+      <ToggleSwitchGroup items={items} {...props} />
+    </Theme>
+  )
+
+const hasA11yLabel = (queryResult, label) =>
+  queryResult.some((testInstance) => within(testInstance).queryAllByA11yLabel(label).length)
+
+describe('ToggleSwitchGroup', () => {
+  describe('when uncontrolled', () => {
+    it('toggles on one and only one item by default', async () => {
+      const { getAllByA11yRole, queryAllByA11yState } = setup()
+
+      expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+      const switches = getAllByA11yRole('radio')
+      const one = switches[0]
+      await fireEvent.press(one)
+      let toggledOn = queryAllByA11yState(checked)
+      expect(toggledOn).toHaveLength(1)
+      expect(hasA11yLabel(toggledOn, 'Option one')).toBeTruthy()
+
+      const two = switches[1]
+      await fireEvent.press(two)
+      toggledOn = queryAllByA11yState(checked)
+      expect(toggledOn).toHaveLength(1)
+      expect(hasA11yLabel(toggledOn, 'Option two')).toBeTruthy()
+    })
+
+    it('is accessible as a radio group by default', async () => {
+      const { queryAllByA11yRole } = setup()
+      expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
+      expect(queryAllByA11yRole('radiogroup')).toHaveLength(1)
+      const switches = queryAllByA11yRole('radio')
+      expect(switches).toHaveLength(4)
+    })
+
+    it('is accessible as checkboxes button when maxValues > 1', async () => {
+      const { queryAllByA11yRole, queryAllByA11yState } = setup({ maxValues: 2 })
+
+      expect(queryAllByA11yRole('radiogroup')).toHaveLength(0)
+      expect(queryAllByA11yRole('radio')).toHaveLength(0)
+
+      const switches = queryAllByA11yRole('switch')
+      expect(switches).toHaveLength(4)
+
+      expect(queryAllByA11yState(checked)).toHaveLength(0)
+      await fireEvent.press(switches[0])
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+    })
+
+    it('selects unlimited items when maxValues is turned off', async () => {
+      const { getAllByA11yRole, queryAllByA11yState } = setup({ maxValues: null })
+
+      expect(queryAllByA11yState(checked)).toHaveLength(0)
+
+      const switches = getAllByA11yRole('switch')
+      const one = switches[0]
+      await fireEvent.press(one)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const two = switches[1]
+      await fireEvent.press(two)
+      expect(queryAllByA11yState(checked)).toHaveLength(2)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const three = switches[2]
+      await fireEvent.press(three)
+      expect(queryAllByA11yState(checked)).toHaveLength(3)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option three')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+    })
+
+    it('auto-selects any provided initialValues', async () => {
+      const { queryAllByA11yState } = setup({
+        initialValues: ['one', 'two'],
+        maxValues: 2
+      })
+      expect(queryAllByA11yState(checked)).toHaveLength(2)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option three')).not.toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option four')).not.toBeTruthy()
+    })
+  })
+
+  describe('when controlled', () => {
+    it('calls onChange handler on press in controlled mode, providing pressed id', async () => {
+      const handleChange = jest.fn((arg) => arg)
+      const { getAllByA11yRole } = setup({ values: [], onChange: handleChange })
+
+      expect(handleChange).toHaveBeenCalledTimes(0)
+
+      const switches = getAllByA11yRole('radio')
+      const one = switches[0]
+      await fireEvent(one, 'press', { nativeEvent: 'example' })
+      expect(handleChange).toHaveBeenCalledTimes(1)
+      expect(handleChange).toHaveBeenCalledWith(['one'], { nativeEvent: 'example' })
+
+      const two = switches[1]
+      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 { getByA11yLabel, queryAllByA11yState } = setup({ values: ['one'], onChange: () => {} })
+
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const one = getByA11yLabel('Option one')
+      await fireEvent.press(one)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const two = getByA11yLabel('Option two')
+      await fireEvent.press(two)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).not.toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+    })
+
+    it('does not render an invalid `values` invalidly', async () => {
+      const { queryAllByA11yState } = setup({
+        values: ['one', 'two', 'three'],
+        maxValues: 2,
+        onChange: () => {}
+      })
+      expect(queryAllByA11yState(checked)).toHaveLength(2)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).not.toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option three')).toBeTruthy()
+    })
+  })
+
+  describe('when read-only', () => {
+    it("doesn't call onChange handler when read-only", async () => {
+      const handleChange = jest.fn((arg) => arg)
+      const { getByA11yLabel } = setup({ values: [], onChange: handleChange, readOnly: true })
+
+      expect(handleChange).toHaveBeenCalledTimes(0)
+
+      const one = getByA11yLabel('Option one')
+      await fireEvent.press(one)
+      expect(handleChange).toHaveBeenCalledTimes(0)
+
+      const two = getByA11yLabel('Option two')
+      await fireEvent.press(two)
+      expect(handleChange).toHaveBeenCalledTimes(0)
+    })
+
+    it("doesn't change its selection on press", async () => {
+      const { getByA11yLabel, queryAllByA11yState } = setup({
+        values: ['one'],
+        readOnly: true
+      })
+
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const one = getByA11yLabel('Option one')
+      await fireEvent.press(one)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+
+      const two = getByA11yLabel('Option two')
+      await fireEvent.press(two)
+      expect(queryAllByA11yState(checked)).toHaveLength(1)
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option two')).not.toBeTruthy()
+      expect(hasA11yLabel(queryAllByA11yState(checked), 'Option one')).toBeTruthy()
+    })
+  })
+})

package/__tests__/utils/props.test.js

@@ -0,0 +1,36 @@
+import { selectSystemProps } from '../../src/utils'
+
+describe('selectSystemProps', () => {
+  it('reduces the selectors and the types correctly', () => {
+    const somePropNames = ['a', 'b']
+    const someTypes = { a: 1, b: 2 }
+    const someOtherPropNames = ['c', 'd']
+    const someOtherTypes = { c: 3, d: 4 }
+    const reducer = (props) => (acc, allowedPropName) =>
+      allowedPropName in props ? { ...acc, [allowedPropName]: props[allowedPropName] } : acc
+    const exampleProps = { a: 'a', c: 'c', e: 'e' }
+    const [selectProps, selectedPropTypes] = selectSystemProps([
+      { select: (props) => somePropNames.reduce(reducer(props), {}), types: someTypes },
+      { select: (props) => someOtherPropNames.reduce(reducer(props), {}), types: someOtherTypes }
+    ])
+    expect(selectProps(exampleProps)).toEqual({ a: 'a', c: 'c' })
+    expect(selectedPropTypes).toEqual({ a: 1, b: 2, c: 3, d: 4 })
+  })
+
+  it('returns selector throwing if one of the prop helpers does not have any valid prop selectors', () => {
+    const [selectProps] = selectSystemProps([{ types: {} }])
+    expect(() => {
+      selectProps({ someProp: 'some value' })
+    }).toThrowError(
+      "An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in"
+    )
+  })
+
+  it('throws if one of the prop helpers does not have any valid prop types selectors', () => {
+    expect(() => {
+      selectSystemProps([{ select: () => {} }])
+    }).toThrowError(
+      "An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in"
+    )
+  })
+})

package/__tests__/utils/semantics.test.jsx

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native'
 
-import { getA11yPropsFromHtmlTag, tagsToRoles, supportedTags } from '../../src'
+import { getA11yPropsFromHtmlTag, 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:
@@ -8,16 +8,7 @@ import { getA11yPropsFromHtmlTag, tagsToRoles, supportedTags } from '../../src'
 
 // 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'],

package/babel.config.js

@@ -1,13 +1,35 @@
 module.exports = (api) => {
-  const env = api.cache(() => process.env.NODE_ENV)
-  if (env === 'test') {
-    // configuration for jest
+  // configuration for jest
+  if (api.env('test')) {
     return {
       presets: ['module:metro-react-native-babel-preset']
     }
   }
+
+  // Default to CJS for docs generators etc; build as ESM modules when requested.
+  const isModule = api.env('module')
+
   return {
-    presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
-    plugins: [['react-native-web', { commonjs: true }]]
+    presets: [
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      [
+        '@babel/preset-env',
+        {
+          // `false` in babel env options means preserve ESM import / export syntax
+          // https://babeljs.io/docs/en/babel-preset-env#modules
+          modules: isModule ? false : 'cjs'
+        }
+      ]
+    ],
+    plugins: [
+      [
+        'react-native-web',
+        {
+          // Use the build of React Native Web that matches our build. ESM prefered, for treeshaking etc.
+          // Be careful not to have both RNW builds in an app as init will run twice, shuffling styles.
+          commonjs: !isModule
+        }
+      ]
+    ]
   }
 }