@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.8

package/__tests__/Tabs/Tabs.test.jsx

@@ -0,0 +1,200 @@
+import React, { useState } from 'react'
+import { Pressable, View, Text } from 'react-native'
+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' }))
+
+  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

@@ -0,0 +1,328 @@
+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 Tags from '../../src/Tags'
+
+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('Tags', () => {
+  // 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>
+          <Tags 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>
+          <Tags items={items} values={['one']} readOnly />
+        </Theme>
+      )
+    ).not.toThrow()
+  })
+  it('Throws if has both `values` and `initialValues`', () => {
+    expect(() =>
+      render(
+        <Theme>
+          <Tags items={items} values={['one']} initialValues={['one']} onChange={() => {}} />
+        </Theme>
+      )
+    ).toThrow(/both(?=.*initialValues)(?=.*values){2}/)
+  })
+})
+
+describe('Tags (uncontrolled)', () => {
+  // These tests are almost the same as ButtonGroup while Tags-specific behaviours are still TBC
+  it('Selects one and only one item if maxValues is passed', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} maxValues={1} />
+      </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>
+        <Tags 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('Selects <= two items when maxValues === 2', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags 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 by default', async () => {
+    const { queryAllByA11yRole, queryAllByA11yState } = render(
+      <Theme>
+        <Tags items={items} />
+      </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 by default', async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags 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(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>
+        <Tags 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('Tags (controlled)', () => {
+  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <Tags items={items} values={[]} onChange={handleChange} />
+      </Theme>
+    )
+
+    expect(handleChange).toHaveBeenCalledTimes(0)
+
+    const one = getByText('One')
+    await fireEvent.press(one)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+
+    expect(handleChange.mock.calls[0][0]).toEqual(['one'])
+
+    const two = getByText('Two')
+    await fireEvent.press(two)
+    expect(handleChange).toHaveBeenCalledTimes(2)
+    expect(handleChange.mock.calls[1][0]).toEqual(['two'])
+  })
+
+  it("Doesn't change its own selection if `values` is passed", async () => {
+    const { getByText, queryAllByA11yState } = render(
+      <Theme>
+        <Tags 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>
+        <Tags 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('Tags (read-only)', () => {
+  it("Doesn't call onChange handler when read-only", async () => {
+    const handleChange = jest.fn((arg) => arg)
+    const { getByText } = render(
+      <Theme>
+        <Tags 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>
+        <Tags 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/__tests__/TextInput/TextArea.test.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { fireEvent, render } from '@testing-library/react-native'
+
+import { Platform } from 'react-native'
+import { TextArea } from '../../src'
+import Theme from '../../__fixtures__/Theme'
+
+describe('TextArea', () => {
+  it('renders', () => {
+    // at least one called test is required in a suite
+    render(<TextArea />, { wrapper: Theme })
+  })
+
+  // 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('grows in size on input', () => {
+      const { getByTestId } = render(
+        <TextArea tokens={{ minLines: 1, maxLines: 5, lineHeight: 20 }} testID="textarea" />,
+        {
+          wrapper: Theme
+        }
+      )
+
+      const textarea = getByTestId('textarea')
+
+      expect(textarea).toHaveStyle({ height: 20 })
+
+      fireEvent.changeText(textarea, '\n\n\n')
+
+      expect(textarea).toHaveStyle({ height: 60 })
+    })
+  }
+})

package/__tests__/TextInput/TextInputBase.test.jsx

@@ -0,0 +1,120 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import TextInputBase from '../../src/TextInput/TextInputBase'
+import Viewport from '../../__fixtures__/Viewport'
+import Theme from '../../__fixtures__/Theme'
+
+// eslint-disable-next-line react/prop-types
+const Wrapper = ({ children }) => (
+  <Viewport viewport="xs">
+    <Theme>{children}</Theme>
+  </Viewport>
+)
+
+describe('TextInputBaseBase', () => {
+  it('triggers the interactive callbacks', () => {
+    const onFocus = jest.fn()
+    const onBlur = jest.fn()
+    const onMouseOver = jest.fn()
+    const onMouseOut = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInputBase
+        accessibilityLabel="Input label"
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+      />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onFocus).not.toHaveBeenCalled()
+    fireEvent(input, 'focus')
+    expect(onFocus).toHaveBeenCalledTimes(1)
+
+    expect(onBlur).not.toHaveBeenCalled()
+    fireEvent(input, 'blur')
+    expect(onBlur).toHaveBeenCalledTimes(1)
+
+    expect(onMouseOver).not.toHaveBeenCalled()
+    fireEvent(input, 'mouseOver')
+    expect(onMouseOver).toHaveBeenCalledTimes(1)
+
+    expect(onMouseOut).not.toHaveBeenCalled()
+    fireEvent(input, 'mouseOut')
+    expect(onMouseOut).toHaveBeenCalledTimes(1)
+  })
+
+  it("can't be edited when inactive", () => {
+    const { getByA11yLabel } = render(<TextInputBase accessibilityLabel="Input label" inactive />, {
+      wrapper: Wrapper
+    })
+
+    const input = getByA11yLabel('Input label')
+
+    expect(input).toHaveProp('editable', false)
+  })
+
+  it('changes value when uncontrolled', () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInputBase accessibilityLabel="Input label" onChange={onChange} />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('new value')
+  })
+
+  it('changes value when controlled', () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInputBase accessibilityLabel="Input label" onChange={onChange} value="initial value" />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('new value')
+  })
+
+  it("doesn't change value when readOnly", () => {
+    const onChange = jest.fn()
+
+    const { getByA11yLabel } = render(
+      <TextInputBase
+        accessibilityLabel="Input label"
+        onChange={onChange}
+        value="initial value"
+        readOnly
+      />,
+      {
+        wrapper: Wrapper
+      }
+    )
+
+    const input = getByA11yLabel('Input label')
+
+    expect(onChange).not.toHaveBeenCalled()
+    fireEvent.changeText(input, 'new value')
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})