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

package/__tests__/RadioCard/RadioCardGroup.test.jsx

@@ -174,15 +174,14 @@ describe('RadioCardGroup (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 `checkedId` is passed", async () => {

package/__tests__/Search/Search.test.jsx

@@ -3,6 +3,7 @@ import { render, fireEvent } from '@testing-library/react-native'
 
 import { Search } from '../../src'
 import Theme from '../../__fixtures__/Theme'
+import { fireChange } from '../../__fixtures__/test-utils'
 
 describe('Search', () => {
   const commonProps = {
@@ -25,16 +26,16 @@ describe('Search', () => {
 
     expect(onSubmit).not.toHaveBeenCalled()
 
-    fireEvent.press(getByA11yLabel('submit-button'))
+    fireEvent(getByA11yLabel('submit-button'), 'press', { nativeEvent: 'example' })
 
     expect(onSubmit).toHaveBeenCalledTimes(1)
-    expect(onSubmit).toHaveBeenLastCalledWith('initial value')
+    expect(onSubmit).toHaveBeenLastCalledWith('initial value', { nativeEvent: 'example' })
 
-    fireEvent.changeText(getByA11yLabel('input'), 'new value')
-    fireEvent.press(getByA11yLabel('submit-button'))
+    fireChange(getByA11yLabel('input'), 'new value')
+    fireEvent(getByA11yLabel('submit-button'), 'press', { nativeEvent: 'example' })
 
     expect(onSubmit).toHaveBeenCalledTimes(2)
-    expect(onSubmit).toHaveBeenLastCalledWith('new value')
+    expect(onSubmit).toHaveBeenLastCalledWith('new value', { nativeEvent: 'example' })
   })
 
   it('shows the clear button when text is entered', () => {
@@ -44,7 +45,7 @@ describe('Search', () => {
 
     expect(() => getByA11yLabel('clear-button')).toThrow()
 
-    fireEvent.changeText(getByA11yLabel('input'), 'test value')
+    fireChange(getByA11yLabel('input'), 'test value')
 
     expect(() => getByA11yLabel('clear-button')).not.toThrow()
   })
@@ -63,10 +64,10 @@ describe('Search', () => {
     expect(onClear).not.toHaveBeenCalled()
     expect(onChange).not.toHaveBeenCalled()
 
-    fireEvent.press(getByA11yLabel('clear-button'))
+    fireEvent(getByA11yLabel('clear-button'), 'press', { nativeEvent: 'example' })
 
     expect(onClear).toHaveBeenCalledTimes(1)
     expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenLastCalledWith('')
+    expect(onChange).toHaveBeenLastCalledWith('', { nativeEvent: 'example' })
   })
 })

package/__tests__/Select/Select.test.jsx

@@ -64,10 +64,11 @@ describe('Select', () => {
 
       expect(onChange).not.toHaveBeenCalled()
 
-      fireEvent.change(getByTestId('Test-Select'), { target: { value: 'item-1' } })
+      const event = { target: { value: 'item-1' } }
+      fireEvent.change(getByTestId('Test-Select'), event)
 
       expect(onChange).toHaveBeenCalledTimes(1)
-      expect(onChange).toHaveBeenLastCalledWith('item-1')
+      expect(onChange).toHaveBeenLastCalledWith('item-1', event)
     })
 
     it("doesn't change value when readOnly", () => {

package/__tests__/Tabs/Tabs.test.jsx

@@ -1,169 +1,9 @@
-import React, { useState } from 'react'
-import { Pressable, View, Text } from 'react-native'
+import React from 'react'
 import { fireEvent, render } from '@testing-library/react-native'
 
 import { Tabs } from '../../src'
-import {
-  getItemPositionLayoutHandler,
-  useItemPositions,
-  getItemPositionScrollTarget
-} from '../../src/Tabs/itemPositions'
 import Theme from '../../__fixtures__/Theme'
 
-// ScrollViewRef.scrollTo doesn't work in Jest - unit-test the utilities instead
-describe('Tabs getItemPositionScrollTarget', () => {
-  const positionsWithoutSpacing = {
-    0: { start: 0, end: 100 },
-    1: { start: 100, end: 200 },
-    2: { start: 200, end: 300 }
-  }
-  const positions = {
-    0: { start: 0, end: 50 },
-    1: { start: 100, end: 150 },
-    2: { start: 200, end: 250 }
-  }
-  it('scrolls to the start of an item rather than chopping it', () => {
-    const x = getItemPositionScrollTarget(150, 300, positionsWithoutSpacing)
-    expect(x).toBe(100)
-  })
-  it('offsets the position by a button clearance', () => {
-    const x = getItemPositionScrollTarget(150, 300, positionsWithoutSpacing, 20)
-    expect(x).toBe(80)
-  })
-  it('scrolls exactly if landing on a gap', () => {
-    const x = getItemPositionScrollTarget(170, 300, positions)
-    expect(x).toBe(170)
-  })
-  it('applies button clearance if landing on a gap', () => {
-    const x = getItemPositionScrollTarget(170, 300, positions, 40)
-    expect(x).toBe(130)
-  })
-  it('does not apply button clearance on reaching the end', () => {
-    const x = getItemPositionScrollTarget(300, 300, positions, 40)
-    expect(x).toBe(300)
-  })
-  it('does not exceed the maximum', () => {
-    const x = getItemPositionScrollTarget(320, 300, positions, 40)
-    expect(x).toBe(300)
-  })
-  it('does not go below 0', () => {
-    const x = getItemPositionScrollTarget(-420, 300, positions, 40)
-    expect(x).toBe(0)
-  })
-})
-
-// onLayout also doesn't work naturally in jest
-describe('Tabs getItemPositionLayoutHandler', () => {
-  // Test component using useItemPositions with getItemPositionLayoutHandler
-  // that can be rerendered manually and that outputs itemPositions value
-  const MockComponent = () => {
-    const [num, setNum] = useState()
-    const [{ positions }] = useItemPositions()
-    return (
-      <View>
-        <View testID="onlayout[0]" onLayout={getItemPositionLayoutHandler(positions, 0)} />
-        <View testID="onlayout[1]" onLayout={getItemPositionLayoutHandler(positions, 1)} />
-        <Text testID="output">{JSON.stringify(positions)}</Text>
-        <Pressable testID="rerender" onPress={() => setNum(num + 1)}>
-          <Text>{num}</Text>
-        </Pressable>
-      </View>
-    )
-  }
-  it('gets width and x positions from onLayout events', async () => {
-    const { getByTestId } = render(<MockComponent />)
-
-    // onLayout doesn't work in jest but can be called directly as an event, but we
-    // have to pass the event object. Can't test that it gets them correctly from style
-    await fireEvent(getByTestId('onlayout[0]'), 'layout', {
-      nativeEvent: {
-        layout: {
-          width: 200,
-          x: 0
-        }
-      }
-    })
-    await fireEvent(getByTestId('onlayout[1]'), 'layout', {
-      nativeEvent: {
-        layout: {
-          width: 100,
-          x: 250
-        }
-      }
-    })
-    await fireEvent.press(getByTestId('rerender'))
-    expect(getByTestId('output')).toHaveTextContent(
-      '{"0":{"start":0,"end":200},"1":{"start":250,"end":350}}'
-    )
-  })
-  it('does not cause a rerender from onLayout events alone', async () => {
-    const { getByTestId } = render(<MockComponent />)
-
-    expect(getByTestId('output')).toHaveTextContent('{}')
-    await fireEvent(getByTestId('onlayout[0]'), 'layout', {
-      nativeEvent: {
-        layout: {
-          width: 200,
-          x: 0
-        }
-      }
-    })
-    await fireEvent(getByTestId('onlayout[1]'), 'layout', {
-      nativeEvent: {
-        layout: {
-          width: 100,
-          x: 250
-        }
-      }
-    })
-    expect(getByTestId('output')).toHaveTextContent('{}')
-  })
-})
-
-describe('useItemPositions', () => {
-  // Again we're limited in what we can test; we can't test natural onLayout
-  // or page load timing, but we can affirm that calling `setIsReady` after layout
-  // events causes a re-render that can access positions data
-  const IsReadyMockComponent = () => {
-    const [{ positions, setIsReady }] = useItemPositions()
-    return (
-      <View testID="container" onLayout={setIsReady}>
-        <View testID="onlayout[0]" onLayout={getItemPositionLayoutHandler(positions, 0)} />
-        <View testID="onlayout[1]" onLayout={getItemPositionLayoutHandler(positions, 1)} />
-        <Text testID="output">{JSON.stringify(positions)}</Text>
-      </View>
-    )
-  }
-  it('causes a rerender when setIsReady is called', async () => {
-    const { getByTestId } = render(<IsReadyMockComponent />)
-
-    expect(getByTestId('output')).toHaveTextContent('{}')
-    await fireEvent(getByTestId('onlayout[0]'), 'layout', {
-      nativeEvent: {
-        layout: {
-          width: 200,
-          x: 0
-        }
-      }
-    })
-    await fireEvent(getByTestId('onlayout[1]'), 'layout', {
-      nativeEvent: {
-        layout: {
-          width: 100,
-          x: 250
-        }
-      }
-    })
-    await fireEvent(getByTestId('container'), 'layout', {
-      nativeEvent: { layout: {} }
-    })
-
-    expect(getByTestId('output')).toHaveTextContent(
-      '{"0":{"start":0,"end":200},"1":{"start":250,"end":350}}'
-    )
-  })
-})
-
 describe('Tabs', () => {
   const items = [{ label: 'one' }, { label: 'two' }, { label: 'three' }, { label: 'four' }]
   const linkItems = items.map((item) => ({ ...item, href: 'https://telus.com' }))

package/__tests__/Tags/Tags.test.jsx

@@ -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