@telus-uds/components-base 1.7.0 → 1.8.1

package/__tests__/A11yText/A11yText.test.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-import A11yText from '../../src/A11yText'
-
-describe('A11yText', () => {
-  it('has an accessible label', async () => {
-    const { getByA11yLabel } = render(<A11yText text="Some text" />)
-
-    const a11yText = getByA11yLabel('Some text')
-    expect(a11yText).toBeTruthy()
-    expect(() => getByA11yLabel('Not some text')).toThrow()
-  })
-
-  it("doesn't render regular text", async () => {
-    const { getByText } = render(<A11yText text="Some text" />)
-    expect(() => getByText('Some text')).toThrow()
-  })
-
-  it('defaults to text role', async () => {
-    const { getByRole } = render(<A11yText text="Some text" />)
-
-    const a11yText = getByRole('text')
-    expect(a11yText).toBeTruthy()
-    expect(() => getByRole('header')).toThrow()
-  })
-
-  it('can be set to header role', async () => {
-    const { getByRole } = render(<A11yText text="Some text" heading />)
-
-    const a11yText = getByRole('header')
-    expect(a11yText).toBeTruthy()
-    expect(() => getByRole('text')).toThrow()
-  })
-})

package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import { Platform } from 'react-native'
-import { render as baseRender } from '@testing-library/react-native'
-import Theme from '../../__fixtures__/Theme'
-import ActivityIndicator from '../../src/ActivityIndicator'
-import * as A11yInfoProvider from '../../src/A11yInfoProvider'
-
-// Used to remove the "Animated: `useNativeDriver` is not supported because the native animated module is missing." warnings
-jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
-
-const render = (jsx) => baseRender(jsx, { wrapper: Theme })
-
-describe('ActivityIndicator', () => {
-  it('has an accessible label', async () => {
-    const { getByA11yLabel } = render(<ActivityIndicator label="I'm a loader" />)
-
-    expect(getByA11yLabel("I'm a loader")).toBeTruthy()
-  })
-
-  it('has a role of progressbar', async () => {
-    const { getByRole } = render(<ActivityIndicator label="I'm a loader" />)
-
-    expect(getByRole('progressbar')).toBeTruthy()
-  })
-
-  it('has an a11y state of busy', async () => {
-    const { getAllByAccessibilityState } = render(<ActivityIndicator label="I'm a loader" />)
-    expect(getAllByAccessibilityState({ busy: true })).toBeTruthy()
-  })
-
-  it("doesn't render regular text for the label", async () => {
-    const { getByText } = render(<ActivityIndicator label="I'm a loader" />)
-    expect(() => getByText("I'm a loader")).toThrow()
-  })
-
-  it("doesn't animate when reduced motion is enabled", async () => {
-    jest
-      .spyOn(A11yInfoProvider, 'useA11yInfo')
-      .mockImplementation(() => ({ reduceMotionEnabled: true }))
-    // 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') {
-      const { container } = render(<ActivityIndicator label="I'm a loader" />)
-      expect(container.querySelector('[attributeName="transform"]')).not.toBeInTheDocument()
-      expect(container.querySelector('[attributeName="stroke-dashoffset"]')).not.toBeInTheDocument()
-      expect(container.querySelector('[attributeName="stroke-dasharray"]')).not.toBeInTheDocument()
-    } else {
-      const component = render(<ActivityIndicator label="I'm a loader" />)
-      expect(component).toMatchSnapshot()
-    }
-  })
-  it("animates when reduced motion isn't enabled", async () => {
-    jest
-      .spyOn(A11yInfoProvider, 'useA11yInfo')
-      .mockImplementation(() => ({ reduceMotionEnabled: false }))
-    // 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') {
-      const { container } = render(<ActivityIndicator label="I'm a loader" />)
-      expect(container.querySelector('[attributeName="transform"]')).toBeInTheDocument()
-      expect(container.querySelector('[attributeName="stroke-dashoffset"]')).toBeInTheDocument()
-      expect(container.querySelector('[attributeName="stroke-dasharray"]')).toBeInTheDocument()
-    } else {
-      const component = render(<ActivityIndicator label="I'm a loader" />)
-      expect(component).toMatchSnapshot()
-    }
-  })
-})

package/__tests__/ActivityIndicator/__snapshots__/ActivityIndicator.test.jsx.snap

@@ -1,287 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ActivityIndicator animates when reduced motion isn't enabled 1`] = `
-<View
-  accessibilityLabel="I'm a loader"
-  accessibilityRole="progressbar"
-  accessibilityState={
-    Object {
-      "busy": true,
-    }
-  }
-  accessible={true}
-  style={
-    Array [
-      Object {
-        "flexGrow": 0,
-        "flexShrink": 0,
-      },
-    ]
-  }
->
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "height": 24,
-        "width": 24,
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "alignItems": "center",
-          "bottom": 0,
-          "justifyContent": "center",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        style={
-          Object {
-            "height": 24,
-            "transform": Array [
-              Object {
-                "rotate": "45deg",
-              },
-            ],
-            "width": 24,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "height": 12,
-              "overflow": "hidden",
-              "width": 24,
-            }
-          }
-        >
-          <View
-            style={
-              Object {
-                "height": 24,
-                "transform": Array [
-                  Object {
-                    "translateY": 0,
-                  },
-                  Object {
-                    "rotate": "-165deg",
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              style={
-                Object {
-                  "height": 12,
-                  "overflow": "hidden",
-                  "width": 24,
-                }
-              }
-            >
-              <View
-                style={
-                  Object {
-                    "borderColor": "#0e6ac8",
-                    "borderRadius": 12,
-                    "borderWidth": 2,
-                    "height": 24,
-                    "width": 24,
-                  }
-                }
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        Object {
-          "alignItems": "center",
-          "bottom": 0,
-          "justifyContent": "center",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        style={
-          Object {
-            "height": 24,
-            "transform": Array [
-              Object {
-                "rotate": "45deg",
-              },
-            ],
-            "width": 24,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "height": 12,
-              "overflow": "hidden",
-              "top": 12,
-              "width": 24,
-            }
-          }
-        >
-          <View
-            style={
-              Object {
-                "height": 24,
-                "transform": Array [
-                  Object {
-                    "translateY": -12,
-                  },
-                  Object {
-                    "rotate": "345deg",
-                  },
-                ],
-                "width": 24,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              style={
-                Object {
-                  "height": 12,
-                  "overflow": "hidden",
-                  "width": 24,
-                }
-              }
-            >
-              <View
-                style={
-                  Object {
-                    "borderColor": "#0e6ac8",
-                    "borderRadius": 12,
-                    "borderWidth": 2,
-                    "height": 24,
-                    "width": 24,
-                  }
-                }
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`ActivityIndicator doesn't animate when reduced motion is enabled 1`] = `
-<View
-  accessibilityLabel="I'm a loader"
-  accessibilityRole="progressbar"
-  accessibilityState={
-    Object {
-      "busy": true,
-    }
-  }
-  accessible={true}
-  style={
-    Array [
-      Object {
-        "flexGrow": 0,
-        "flexShrink": 0,
-      },
-    ]
-  }
->
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "height": 24,
-        "width": 24,
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "alignItems": "center",
-          "bottom": 0,
-          "justifyContent": "center",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        style={
-          Object {
-            "height": 24,
-            "width": 24,
-          }
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "height": 16,
-              "overflow": "hidden",
-              "width": 24,
-            }
-          }
-        >
-          <View
-            style={
-              Object {
-                "height": 24,
-                "width": 24,
-              }
-            }
-          >
-            <View
-              collapsable={false}
-              style={
-                Object {
-                  "height": 16,
-                  "overflow": "hidden",
-                  "width": 24,
-                }
-              }
-            >
-              <View
-                style={
-                  Object {
-                    "borderColor": "#0e6ac8",
-                    "borderRadius": 12,
-                    "borderWidth": 2,
-                    "height": 24,
-                    "width": 24,
-                  }
-                }
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;

package/__tests__/Box/Box.test.jsx

@@ -1,111 +0,0 @@
-import React from 'react'
-import { Text } from 'react-native'
-import { render, fireEvent } from '@testing-library/react-native'
-import { Box } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-
-const textContent = 'Some text content'
-
-// Based on testTheme
-const expectedScale = [0, 4, 8, 16, 24, 32, 36]
-
-describe('Box', () => {
-  it('is scrollable if scroll props provided', async () => {
-    const onScroll = jest.fn()
-    const { getByText } = render(
-      <Theme>
-        <Box scroll={{ onScroll }}>
-          <Text>{textContent}</Text>
-        </Box>
-      </Theme>
-    )
-    const content = getByText(textContent)
-
-    expect(onScroll).toHaveBeenCalledTimes(0)
-    await fireEvent.scroll(content)
-    expect(onScroll).toHaveBeenCalledTimes(1)
-  })
-
-  it('maps regular props to RN styles', () => {
-    const props = {
-      top: 1,
-      bottom: 2,
-      left: 3,
-      right: 4
-    }
-    const { getByText } = render(
-      <Theme>
-        <Box {...props}>
-          <Text>{textContent}</Text>
-        </Box>
-      </Theme>
-    )
-    expect(getByText(textContent).parent).toHaveStyle({
-      paddingTop: expectedScale[1],
-      paddingBottom: expectedScale[2],
-      paddingLeft: expectedScale[3],
-      paddingRight: expectedScale[4]
-    })
-  })
-
-  it(`maps horizontal and vertical props to RN styles`, () => {
-    const props = {
-      horizontal: 1,
-      vertical: 2
-    }
-    const { getByText } = render(
-      <Theme>
-        <Box {...props}>
-          <Text>{textContent}</Text>
-        </Box>
-      </Theme>
-    )
-    expect(getByText(textContent).parent).toHaveStyle({
-      paddingLeft: expectedScale[1],
-      paddingRight: expectedScale[1],
-      paddingTop: expectedScale[2],
-      paddingBottom: expectedScale[2]
-    })
-  })
-
-  it(`maps all-sides space prop to RN styles`, () => {
-    const props = {
-      space: 3
-    }
-    const { getByText } = render(
-      <Theme>
-        <Box {...props}>
-          <Text>{textContent}</Text>
-        </Box>
-      </Theme>
-    )
-    expect(getByText(textContent).parent).toHaveStyle({
-      paddingLeft: expectedScale[3],
-      paddingRight: expectedScale[3],
-      paddingTop: expectedScale[3],
-      paddingBottom: expectedScale[3]
-    })
-  })
-
-  it(`applies side overrides in increasing specificity`, () => {
-    const props = {
-      space: 1,
-      horizontal: 2,
-      top: 3,
-      right: 4
-    }
-    const { getByText } = render(
-      <Theme>
-        <Box {...props}>
-          <Text>{textContent}</Text>
-        </Box>
-      </Theme>
-    )
-    expect(getByText(textContent).parent).toHaveStyle({
-      paddingLeft: expectedScale[2],
-      paddingRight: expectedScale[4],
-      paddingTop: expectedScale[3],
-      paddingBottom: expectedScale[1]
-    })
-  })
-})

package/__tests__/Button/Button.test.jsx

@@ -1,86 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react-native'
-import { StyleSheet } from 'react-native'
-import testTheme from '../../__fixtures__/testTheme'
-
-import Theme from '../../__fixtures__/Theme'
-import Button from '../../src/Button/Button'
-
-const label = 'Test label text'
-
-describe('Button', () => {
-  it('renders a labelled, pressable button', async () => {
-    const handlePress = jest.fn()
-    const { getByRole } = render(
-      <Theme>
-        <Button onPress={handlePress}>{label}</Button>
-      </Theme>
-    )
-
-    const button = getByRole('button')
-    expect(button).toHaveTextContent(label)
-
-    expect(handlePress).toHaveBeenCalledTimes(0)
-    await fireEvent.press(button)
-    expect(handlePress).toHaveBeenCalledTimes(1)
-  })
-
-  it('applies theme variants', () => {
-    const { tokens } = testTheme.components.Button
-    const { getByText } = render(
-      <Theme>
-        <Button onPress={() => {}}>regular</Button>
-        <Button variant={{ solid: true }} onPress={() => {}}>
-          solid
-        </Button>
-      </Theme>
-    )
-
-    expect(getByText('regular')).toHaveStyle({ color: tokens.color })
-    expect(getByText('solid')).toHaveStyle({ color: '#ffffff' })
-  })
-
-  it('maintains size if border width changes as state changes', async () => {
-    // React Native Testing Library doesn't seem to support Pressable states
-    // so we have to simulate the pressed-in state
-    const { getByText } = render(
-      <Theme>
-        <Button onPress={() => {}}>default</Button>
-        <Button variant={{ pressed: true }} onPress={() => {}}>
-          pressed
-        </Button>
-      </Theme>
-    )
-    const defaultButton = getByText('default')
-    const pressedButton = getByText('pressed')
-
-    const getStyle = (element) => StyleSheet.flatten(element.props.style)
-    const getElementHeight = ({
-      borderWidth = 0,
-      paddingVertical = 0,
-      paddingTop = 0,
-      paddingBottom = 0,
-      lineHeight = 0
-    }) =>
-      borderWidth * 2 +
-      (paddingTop || paddingVertical) +
-      (paddingBottom || paddingVertical) +
-      lineHeight
-    const getTotalHeight = (element) =>
-      getElementHeight(getStyle(element)) +
-      getElementHeight(getStyle(element.parent)) +
-      getElementHeight(getStyle(element.parent.parent))
-
-    const containerStyle = getStyle(defaultButton.parent.parent)
-    const pressedContainerStyle = getStyle(pressedButton.parent.parent)
-
-    // test theme has border width that increases during pressed state
-    expect(containerStyle.borderWidth).toEqual(2)
-    expect(pressedContainerStyle.borderWidth).toEqual(8)
-
-    // ensure that the overall height is balanced to not change
-    const expectedHeight = 56
-    expect(getTotalHeight(defaultButton)).toBe(expectedHeight)
-    expect(getTotalHeight(pressedButton)).toBe(expectedHeight)
-  })
-})

package/__tests__/Button/ButtonBase.test.jsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-import { Platform, Text } from 'react-native'
-import testTheme from '../../__fixtures__/testTheme'
-
-import Theme from '../../__fixtures__/Theme'
-import ButtonBase from '../../src/Button/ButtonBase'
-
-beforeEach(() => jest.clearAllMocks())
-
-describe('ButtonBase with render function child', () => {
-  it('receives tokens in render function child', () => {
-    const { tokens } = testTheme.components.Button
-    const arbitraryWeight = '300'
-    const { getByText } = render(
-      <Theme>
-        <ButtonBase onPress={() => {}} tokens={{ ...tokens, fontWeight: arbitraryWeight }}>
-          {({ textStyles }) => <Text style={textStyles}>Function child</Text>}
-        </ButtonBase>
-      </Theme>
-    )
-
-    // Check we're not getting false positive pass on undefined values
-    expect(tokens.color).toBeTruthy()
-    expect(tokens.fontSize).toBeTruthy()
-
-    expect(getByText('Function child')).toHaveStyle({
-      color: tokens.color,
-      fontSize: tokens.fontSize,
-      fontWeight: arbitraryWeight
-    })
-  })
-
-  it('receives button state in render function', () => {
-    const { getByText } = render(
-      <Theme>
-        <ButtonBase onPress={() => {}} selected>
-          {({ selected, inactive }) => (
-            <>
-              <Text>{`A: Selected: ${selected}`}</Text>
-              <Text>{`A: Inactive: ${inactive}`}</Text>
-            </>
-          )}
-        </ButtonBase>
-        <ButtonBase onPress={() => {}} inactive>
-          {({ selected, inactive }) => (
-            <>
-              <Text>{`B: Selected: ${selected}`}</Text>
-              <Text>{`B: Inactive: ${inactive}`}</Text>
-            </>
-          )}
-        </ButtonBase>
-        <ButtonBase onPress={() => {}}>
-          {({ pressed, hovered, focused }) => (
-            <>
-              <Text>{`C: Pressed: ${pressed}`}</Text>
-              <Text>{`C: Hovered: ${hovered}`}</Text>
-              <Text>{`C: Focused: ${focused}`}</Text>
-            </>
-          )}
-        </ButtonBase>
-      </Theme>
-    )
-
-    expect(getByText(/^A: Selected:/)).toHaveTextContent(/true$/)
-    expect(getByText(/^A: Inactive:/)).toHaveTextContent(/false$/)
-
-    expect(getByText(/^B: Selected:/)).toHaveTextContent(/false$/)
-    expect(getByText(/^B: Inactive:/)).toHaveTextContent(/true$/)
-
-    // React Native Testing Library doesn't seem to support Pressable state changes.
-    // Best we can do is confirm we're getting the default false and not undefined.
-    expect(getByText(/^C: Pressed:/)).toHaveTextContent(/false$/)
-
-    // 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') {
-      expect(getByText(/^C: Hovered:/)).toHaveTextContent(/false$/)
-      expect(getByText(/^C: Focused:/)).toHaveTextContent(/false$/)
-    }
-  })
-})