@telus-uds/components-base 1.14.1 → 1.15.0

package/__tests17__/Feedback/Feedback.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Text } from 'react-native'
+import { render } from '@testing-library/react-native'
+
+import Feedback from '../../src/Feedback'
+import Theme from '../../__fixtures__/Theme'
+
+describe('Feedback', () => {
+  it('renders title', () => {
+    const { queryByText } = render(<Feedback title="Test title" />, { wrapper: Theme })
+
+    expect(queryByText('Test title')).toBeTruthy()
+  })
+
+  it('renders content when passed a string', () => {
+    const { queryByText } = render(<Feedback>Test content</Feedback>, { wrapper: Theme })
+
+    expect(queryByText('Test content')).toBeTruthy()
+  })
+
+  it('renders content when passed a React element', () => {
+    const { queryByText } = render(
+      <Feedback>
+        <Text>Test content</Text>
+      </Feedback>,
+      { wrapper: Theme }
+    )
+
+    expect(queryByText('Test content')).toBeTruthy()
+  })
+
+  it("renders content with theme's style prop when passed a function", () => {
+    const { getByText } = render(
+      <Feedback>{({ textStyles }) => <Text style={textStyles}>Test content</Text>}</Feedback>,
+      {
+        wrapper: Theme
+      }
+    )
+
+    expect(getByText('Test content')).toHaveStyle({ fontSize: 14 })
+  })
+})

package/__tests17__/FlexGrid/Col.test.jsx

@@ -0,0 +1,261 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { Text } from 'react-native'
+import { viewports } from '@telus-uds/system-constants'
+
+import FlexGrid from '../../src/FlexGrid'
+import Theme from '../../__fixtures__/Theme'
+import Viewport from '../../__fixtures__/Viewport'
+
+describe('FlexGrid.Col offsets', () => {
+  const offsetLevels = {
+    xs: 1,
+    sm: 2,
+    md: 3,
+    lg: 4,
+    xl: 5
+  }
+  const getOffsetStyle = (viewport) => ({ marginLeft: `${(offsetLevels[viewport] / 12) * 100}%` })
+
+  it.each(
+    // true here indicates offset styles should apply and follow the provided level for that prop
+    // Align expected results like a table so they're easier to read
+    /* prettier-ignore */ [
+    ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
+    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
+    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
+    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
+    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
+  ]
+  )('applies styles from one offset prop at viewport "%s"', (viewport, expected) => {
+    // Render flexgrids with one each of xsOffset={1}, smOffset={2} etc based on offsetLevels above
+    const { getByText } = render(
+      <Theme>
+        <Viewport viewport={viewport}>
+          <FlexGrid>
+            {viewports.keys.map((offsetViewport) => {
+              const propName = `${offsetViewport}Offset`
+              const level = offsetLevels[offsetViewport]
+              return (
+                <FlexGrid.Col key={propName} {...{ [propName]: level }}>
+                  <Text>{propName}</Text>
+                </FlexGrid.Col>
+              )
+            })}
+          </FlexGrid>
+        </Viewport>
+      </Theme>
+    )
+    const expectIfOffsetExpected = (propViewport) => {
+      const target = getByText(`${propViewport}Offset`).parent
+      // eslint-disable-next-line jest/valid-expect
+      return expected[propViewport] ? expect(target) : expect(target).not
+    }
+    expectIfOffsetExpected('xs').toHaveStyle(getOffsetStyle('xs'))
+    expectIfOffsetExpected('sm').toHaveStyle(getOffsetStyle('sm'))
+    expectIfOffsetExpected('md').toHaveStyle(getOffsetStyle('md'))
+    expectIfOffsetExpected('lg').toHaveStyle(getOffsetStyle('lg'))
+    expectIfOffsetExpected('xl').toHaveStyle(getOffsetStyle('xl'))
+  })
+})
+
+describe('FlexGrid.Col sizes', () => {
+  const sizeLevels = {
+    xs: 1,
+    sm: 2,
+    md: 3,
+    lg: 4,
+    xl: 5
+  }
+  const getNumericSizeStyle = (viewport) => ({
+    maxWidth: `${(sizeLevels[viewport] / 12) * 100}%`,
+    flexBasis: `${(sizeLevels[viewport] / 12) * 100}%`
+  })
+
+  it.each(
+    // true here indicates size styles should apply: following the provided level for that prop
+    // Align expected results like a table so they're easier to read
+    /* prettier-ignore */ [
+    ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
+    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
+    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
+    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
+    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
+  ]
+  )('applies styles from one size prop at viewport "%s"', (viewport, expected) => {
+    // Render flexgrids with one each of xs={1}, sm={2} etc based on sizeLevels above
+    const { getByText } = render(
+      <Theme>
+        <Viewport viewport={viewport}>
+          <FlexGrid>
+            {viewports.keys.map((sizeViewport) => {
+              const propName = sizeViewport
+              const level = sizeLevels[sizeViewport]
+              return (
+                <FlexGrid.Col key={propName} {...{ [propName]: level }}>
+                  <Text>{propName}</Text>
+                </FlexGrid.Col>
+              )
+            })}
+          </FlexGrid>
+        </Viewport>
+      </Theme>
+    )
+
+    const expectIfSizeExpected = (propViewport) => {
+      const target = getByText(propViewport).parent
+      // eslint-disable-next-line jest/valid-expect
+      return expected[propViewport] ? expect(target) : expect(target).not
+    }
+    expectIfSizeExpected('xs').toHaveStyle(getNumericSizeStyle('xs'))
+    expectIfSizeExpected('sm').toHaveStyle(getNumericSizeStyle('sm'))
+    expectIfSizeExpected('md').toHaveStyle(getNumericSizeStyle('md'))
+    expectIfSizeExpected('lg').toHaveStyle(getNumericSizeStyle('lg'))
+    expectIfSizeExpected('xl').toHaveStyle(getNumericSizeStyle('xl'))
+  })
+
+  it.each(
+    // true here indicates size styles should apply: inheriting until level is passed as `true` resetting inheritance
+    // Align expected results like a table so they're easier to read
+    /* prettier-ignore */ [
+    ['xs', { 'xs-md': true,  'xs-lg': true,  'xs-xl': true,  'sm-lg': false, 'sm-xl': false, 'md-xl': false }],
+    ['sm', { 'xs-md': true,  'xs-lg': true,  'xs-xl': true,  'sm-lg': true,  'sm-xl': true,  'md-xl': false }],
+    ['md', { 'xs-md': false, 'xs-lg': true,  'xs-xl': true,  'sm-lg': true,  'sm-xl': true,  'md-xl': true  }],
+    ['lg', { 'xs-md': false, 'xs-lg': false, 'xs-xl': true,  'sm-lg': false, 'sm-xl': true,  'md-xl': true  }],
+    ['xl', { 'xs-md': false, 'xs-lg': false, 'xs-xl': false, 'sm-lg': false, 'sm-xl': false, 'md-xl': false }]
+  ]
+  )('inherits size levels until a size prop is `true` at viewport "%s"', (viewport, expected) => {
+    const { getByText } = render(
+      <Theme>
+        <Viewport viewport={viewport}>
+          <FlexGrid>
+            <FlexGrid.Col xs={sizeLevels.xs} md={true}>
+              <Text>xs-md</Text>
+            </FlexGrid.Col>
+            <FlexGrid.Col xs={sizeLevels.xs} lg={true}>
+              <Text>xs-lg</Text>
+            </FlexGrid.Col>
+            <FlexGrid.Col xs={sizeLevels.xs} xl={true}>
+              <Text>xs-xl</Text>
+            </FlexGrid.Col>
+            <FlexGrid.Col sm={sizeLevels.sm} lg={true}>
+              <Text>sm-lg</Text>
+            </FlexGrid.Col>
+            <FlexGrid.Col sm={sizeLevels.sm} xl={true}>
+              <Text>sm-xl</Text>
+            </FlexGrid.Col>
+            <FlexGrid.Col md={sizeLevels.md} xl={true}>
+              <Text>md-xl</Text>
+            </FlexGrid.Col>
+          </FlexGrid>
+        </Viewport>
+      </Theme>
+    )
+
+    const expectIfSizeExpected = (text) => {
+      const target = getByText(text).parent
+      // eslint-disable-next-line jest/valid-expect
+      return expected[text] ? expect(target) : expect(target).not
+    }
+    expectIfSizeExpected('xs-md').toHaveStyle(getNumericSizeStyle('xs'))
+    expectIfSizeExpected('xs-lg').toHaveStyle(getNumericSizeStyle('xs'))
+    expectIfSizeExpected('xs-xl').toHaveStyle(getNumericSizeStyle('xs'))
+    expectIfSizeExpected('sm-lg').toHaveStyle(getNumericSizeStyle('sm'))
+    expectIfSizeExpected('sm-xl').toHaveStyle(getNumericSizeStyle('sm'))
+    expectIfSizeExpected('md-xl').toHaveStyle(getNumericSizeStyle('md'))
+  })
+
+  // Testing special "hiding" case on passing xs, sm, md, lg, xl props as 0.
+  // Should inherit like other values for these props, confirmed in:
+  // https://github.com/telus/universal-design-system/pull/364#discussion_r671382300
+  it.each(
+    // true here indicates hiding styles should apply
+    // Align expected results like a table so they're easier to read
+    /* prettier-ignore */ [
+    ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
+    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
+    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
+    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
+    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
+  ]
+  )('applies hiding styles from one prop at viewport "%s"', (viewport, expected) => {
+    const hidingStyle = { display: 'none' }
+
+    // Render flexgrids with one each of xs={0}, sm={0} etc based on sizeLevels above
+    const { getByText } = render(
+      <Theme>
+        <Viewport viewport={viewport}>
+          <FlexGrid>
+            {viewports.keys.map((sizeViewport) => {
+              const propName = sizeViewport
+              return (
+                <FlexGrid.Col key={propName} {...{ [propName]: 0 }}>
+                  <Text>{propName}</Text>
+                </FlexGrid.Col>
+              )
+            })}
+          </FlexGrid>
+        </Viewport>
+      </Theme>
+    )
+    const expectIfHidingExpected = (propViewport) => {
+      const target = getByText(propViewport).parent
+      // eslint-disable-next-line jest/valid-expect
+      return expected[propViewport] ? expect(target) : expect(target).not
+    }
+    expectIfHidingExpected('xs').toHaveStyle(hidingStyle)
+    expectIfHidingExpected('sm').toHaveStyle(hidingStyle)
+    expectIfHidingExpected('md').toHaveStyle(hidingStyle)
+    expectIfHidingExpected('lg').toHaveStyle(hidingStyle)
+    expectIfHidingExpected('xl').toHaveStyle(hidingStyle)
+  })
+})
+
+describe('FlexGrid.Col horizontalAlign', () => {
+  const alignRightStyle = { textAlign: 'right' }
+
+  it.each(
+    // true here indicates offset styles should apply and follow the provided level for that prop
+    // Align expected results like a table so they're easier to read
+    /* prettier-ignore */ [
+    ['xs', { xs: true,  sm: false, md: false, lg: false, xl: false }],
+    ['sm', { xs: true,  sm: true,  md: false, lg: false, xl: false }],
+    ['md', { xs: true,  sm: true,  md: true,  lg: false, xl: false }],
+    ['lg', { xs: true,  sm: true,  md: true,  lg: true,  xl: false }],
+    ['xl', { xs: true,  sm: true,  md: true,  lg: true,  xl: true  }]
+  ]
+  )('applies right align from one horizontalAlign value at viewport "%s"', (viewport, expected) => {
+    // Render flexgrids with horizontalAlign={{ xs: 'right' }}, horizontalAlign={{ sm: 'right' }}, etc
+    const { getByText } = render(
+      <Theme>
+        <Viewport viewport={viewport}>
+          <FlexGrid>
+            {viewports.keys.map((alignViewport) => {
+              return (
+                <FlexGrid.Col
+                  key={alignViewport}
+                  horizontalAlign={{
+                    [alignViewport]: 'right'
+                  }}
+                >
+                  <Text>{alignViewport}</Text>
+                </FlexGrid.Col>
+              )
+            })}
+          </FlexGrid>
+        </Viewport>
+      </Theme>
+    )
+
+    const expectIfAlignExpected = (propViewport) => {
+      const target = getByText(propViewport).parent
+      // eslint-disable-next-line jest/valid-expect
+      return expected[propViewport] ? expect(target) : expect(target).not
+    }
+    expectIfAlignExpected('xs').toHaveStyle(alignRightStyle)
+    expectIfAlignExpected('sm').toHaveStyle(alignRightStyle)
+    expectIfAlignExpected('md').toHaveStyle(alignRightStyle)
+    expectIfAlignExpected('lg').toHaveStyle(alignRightStyle)
+    expectIfAlignExpected('xl').toHaveStyle(alignRightStyle)
+  })
+})

package/__tests17__/FlexGrid/FlexGrid.test.jsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { Text } from 'react-native'
+import { viewports } from '@telus-uds/system-constants'
+
+import FlexGrid from '../../src/FlexGrid'
+import applyInheritance from '../../src/FlexGrid/helpers'
+import Theme from '../../__fixtures__/Theme'
+import Viewport from '../../__fixtures__/Viewport'
+
+const contents = (
+  <FlexGrid.Col>
+    <FlexGrid.Row>
+      <Text>Some text</Text>
+    </FlexGrid.Row>
+  </FlexGrid.Col>
+)
+
+// Keep these on one line, wrapping some makes them harder to read
+/* prettier-ignore */
+describe('FlexGrid applyInheritance', () => {
+  it('fills undefined values with last defined value', () => {
+    expect(applyInheritance([1, undefined, undefined, undefined, undefined])).toEqual([1, 1, 1, 1, 1])
+    expect(applyInheritance([1, 2, undefined, undefined, undefined])).toEqual([1, 2, 2, 2, 2])
+    expect(applyInheritance([1, 2, 3, undefined, undefined])).toEqual([1, 2, 3, 3, 3])
+    expect(applyInheritance([1, 2, 3, 4, undefined])).toEqual([1, 2, 3, 4, 4])
+  })
+
+  it("doesn't change an array's values where everything is defined", () => {
+    expect(applyInheritance([1, 2, 3, 4, 5])).toEqual([1, 2, 3, 4, 5])
+  })
+
+  it("doesn't change an array's values where nothing is defined", () => {
+    expect(applyInheritance([undefined, undefined, undefined, undefined, undefined])).toEqual([undefined, undefined, undefined, undefined, undefined])
+  })
+
+  // TODO: check implementation, see if it really needs to return undefined for [0] and '' for others
+  it("doesn't change undefined values before the first defined value", () => {
+    expect(applyInheritance([undefined, 1, 2, 3, 4])).toEqual([undefined, 1, 2, 3, 4])
+    expect(applyInheritance([undefined, undefined, 1, 2, 3])).toEqual([undefined, undefined, 1, 2, 3])
+    expect(applyInheritance([undefined, undefined, undefined, 1, 2])).toEqual([undefined, undefined, undefined, 1, 2])
+    expect(applyInheritance([undefined, undefined, undefined, undefined, 1])).toEqual([undefined, undefined, undefined, undefined, 1])
+  })
+
+  it('fills undefined values after any defined value while leaving those before', () => {
+    expect(applyInheritance([undefined, 1, undefined, 2, undefined])).toEqual([undefined, 1, 1, 2, 2])
+    expect(applyInheritance([undefined, undefined, 1, undefined, 2])).toEqual([undefined, undefined, 1, 1, 2])
+    expect(applyInheritance([undefined, undefined, undefined, 1, undefined])).toEqual([undefined, undefined, undefined, 1, 1])
+  })
+})
+
+describe('FlexGrid', () => {
+  it('Sets style correctly if outsideGutter is passed', () => {
+    const withID = 'with-outsideGutter'
+    const withoutID = 'without-outsideGutter'
+
+    const withStyle = { width: '100%' }
+
+    const withoutStyle = { marginHorizontal: -16 }
+
+    const { getByTestId } = render(
+      <Theme>
+        <Viewport>
+          <FlexGrid outsideGutter={true} testID={withID}>
+            {contents}
+          </FlexGrid>
+          <FlexGrid outsideGutter={false} testID={withoutID}>
+            {contents}
+          </FlexGrid>
+        </Viewport>
+      </Theme>
+    )
+
+    expect(getByTestId(withID)).toHaveStyle(withStyle)
+    expect(getByTestId(withoutID)).toHaveStyle(withoutStyle)
+
+    expect(getByTestId(withID)).not.toHaveStyle(withoutStyle)
+    expect(getByTestId(withoutID)).not.toHaveStyle(withStyle)
+  })
+
+  it.each(Array.from(viewports.map.entries()))(
+    `applies correct limitWidth styles at viewport "%s"`,
+    (viewport, breakpoint) => {
+      const testID = 'testID'
+      const { getByTestId } = render(
+        <Theme>
+          <Viewport viewport={viewport}>
+            <FlexGrid limitWidth testID={testID}>
+              {contents}
+            </FlexGrid>
+          </Viewport>
+        </Theme>
+      )
+      if (viewport !== viewports.xs) {
+        expect(typeof breakpoint).toBe('number')
+        expect(breakpoint).toBeGreaterThan(0)
+        expect(getByTestId(testID)).toHaveStyle({ maxWidth: breakpoint })
+      } else {
+        expect(getByTestId(testID)).not.toHaveStyle({ maxWidth: breakpoint })
+      }
+    }
+  )
+
+  it.each(
+    // Align expected results like a table so they're easier to read
+    /* prettier-ignore */ [
+    ['xs', { xs: 'column-reverse', sm: 'column',         md: 'column',         lg: 'column',         xl: 'column'         }],
+    ['sm', { xs: 'column-reverse', sm: 'column-reverse', md: 'column',         lg: 'column',         xl: 'column'         }],
+    ['md', { xs: 'column-reverse', sm: 'column-reverse', md: 'column-reverse', lg: 'column',         xl: 'column'         }],
+    ['lg', { xs: 'column-reverse', sm: 'column-reverse', md: 'column-reverse', lg: 'column-reverse', xl: 'column'         }],
+    ['xl', { xs: 'column-reverse', sm: 'column-reverse', md: 'column-reverse', lg: 'column-reverse', xl: 'column-reverse' }]
+  ]
+  )('applies correct column order for each reverse prop at viewport "%s"', (viewport, expected) => {
+    // Render flexgrids for each of xsReverse, smReverse, mdReverse etc etc
+    const { getByTestId } = render(
+      <Theme>
+        <Viewport viewport={viewport}>
+          {viewports.keys.map((reverseViewport) => {
+            const propName = `${reverseViewport}Reverse`
+            return (
+              <FlexGrid key={propName} testID={propName} {...{ [propName]: true }}>
+                {contents}
+              </FlexGrid>
+            )
+          })}
+        </Viewport>
+      </Theme>
+    )
+
+    expect(getByTestId('xsReverse')).toHaveStyle({ flexDirection: expected.xs })
+    expect(getByTestId('smReverse')).toHaveStyle({ flexDirection: expected.sm })
+    expect(getByTestId('mdReverse')).toHaveStyle({ flexDirection: expected.md })
+    expect(getByTestId('lgReverse')).toHaveStyle({ flexDirection: expected.lg })
+    expect(getByTestId('xlReverse')).toHaveStyle({ flexDirection: expected.xl })
+  })
+})