@telus-uds/components-base 1.26.0 → 1.28.0

package/__tests17__/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.parent)) +
-      getElementHeight(getStyle(element.parent.parent.parent))
-
-    const containerStyle = getStyle(defaultButton.parent.parent.parent)
-    const pressedContainerStyle = getStyle(pressedButton.parent.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/__tests17__/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$/)
-    }
-  })
-})

package/__tests17__/Button/ButtonGroup.test.jsx

@@ -1,347 +0,0 @@
-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 ButtonGroup from '../../src/Button/ButtonGroup'
-
-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('ButtonGroup', () => {
-  // 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>
-          <ButtonGroup 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>
-          <ButtonGroup items={items} values={['one']} readOnly />
-        </Theme>
-      )
-    ).not.toThrow()
-  })
-  it('Throws if has both `values` and `initialValues`', () => {
-    expect(() =>
-      render(
-        <Theme>
-          <ButtonGroup items={items} values={['one']} initialValues={['one']} onChange={() => {}} />
-        </Theme>
-      )
-    ).toThrow(/both(?=.*initialValues)(?=.*values){2}/)
-  })
-})
-
-describe('ButtonGroup (uncontrolled)', () => {
-  it('Selects one and only one item by default', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <ButtonGroup 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(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>
-        <ButtonGroup 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('Is accessible as a radio button by default', async () => {
-    const { queryAllByA11yRole, queryAllByA11yState } = render(
-      <Theme>
-        <ButtonGroup items={items} />
-      </Theme>
-    )
-    expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
-    expect(queryAllByA11yRole('radiogroup')).toHaveLength(1)
-    const radios = queryAllByA11yRole('radio')
-    expect(radios).toHaveLength(4)
-
-    expect(queryAllByA11yState(checked)).toHaveLength(0)
-    await fireEvent.press(radios[0])
-    expect(queryAllByA11yState(checked)).toHaveLength(1)
-  })
-
-  it('Selects <= two items when maxValues === 2', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <ButtonGroup 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 button when maxValues > 1', async () => {
-    const { queryAllByA11yRole, queryAllByA11yState } = render(
-      <Theme>
-        <ButtonGroup items={items} maxValues={2} />
-      </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 when maxValues is turned off', async () => {
-    const { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <ButtonGroup items={items} maxValues={null} />
-      </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>
-        <ButtonGroup 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('ButtonGroup (controlled)', () => {
-  it('Calls onChange handler on press in controlled mode, providing pressed id', async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <ButtonGroup items={items} values={[]} onChange={handleChange} />
-      </Theme>
-    )
-
-    expect(handleChange).toHaveBeenCalledTimes(0)
-
-    const one = getByText('One')
-    await fireEvent(one, 'press', { nativeEvent: 'example' })
-    expect(handleChange).toHaveBeenCalledTimes(1)
-    expect(handleChange).toHaveBeenLastCalledWith(['one'], { nativeEvent: 'example' })
-
-    const two = getByText('Two')
-    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 { getByText, queryAllByA11yState } = render(
-      <Theme>
-        <ButtonGroup 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>
-        <ButtonGroup
-          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('ButtonGroup (read-only)', () => {
-  it("Doesn't call onChange handler when read-only", async () => {
-    const handleChange = jest.fn((arg) => arg)
-    const { getByText } = render(
-      <Theme>
-        <ButtonGroup 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>
-        <ButtonGroup 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/__tests17__/Button/ButtonLink.test.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { Platform, Linking } from 'react-native'
-import { render, fireEvent } from '@testing-library/react-native'
-
-import Theme from '../../__fixtures__/Theme'
-import ButtonLink from '../../src/Button/ButtonLink'
-
-const href = 'https://example.com'
-const label = 'Test ButtonLink'
-
-describe('ButtonLink', () => {
-  it('renders an accessible link', async () => {
-    const { getByRole } = render(
-      <Theme>
-        <ButtonLink href={href}>{label}</ButtonLink>
-      </Theme>
-    )
-
-    const link = getByRole('link')
-    expect(link).toHaveTextContent(label)
-  })
-
-  // 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('defers to platform link handling (web)', async () => {
-      // This test is untested
-      jest.spyOn(Linking, 'openURL')
-      const originalValue = Platform.OS
-      Platform.OS = 'web'
-      const { getByRole } = render(
-        <Theme>
-          <ButtonLink href={href}>{label}</ButtonLink>
-        </Theme>
-      )
-
-      const el = getByRole('link')
-      fireEvent.press(el)
-      expect(Linking.openURL).not.toHaveBeenCalled()
-      Platform.OS = originalValue
-    })
-  }
-
-  // Default jest OS is ios, this will always be called until
-  // https://github.com/telus/universal-design-system/issues/319
-  if (Platform.OS !== 'web') {
-    it('calls Linking.openURL (mobile)', async () => {
-      jest.spyOn(Linking, 'openURL').mockImplementation(() => {})
-      const { getByRole } = render(
-        <Theme>
-          <ButtonLink href={href}>{label}</ButtonLink>
-        </Theme>
-      )
-
-      const el = getByRole('link')
-      fireEvent.press(el)
-      expect(Linking.openURL).toHaveBeenCalledTimes(1)
-      expect(Linking.openURL).toHaveBeenCalledWith(href)
-    })
-  }
-})

package/__tests17__/Card/Card.test.jsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react-native'
-import { Text } from 'react-native'
-
-import { Card } from '../../src'
-import Theme from '../../__fixtures__/Theme'
-import testTheme from '../../__fixtures__/testTheme'
-
-const contentText = 'This is a card'
-
-const setup = ({ tokens } = {}) =>
-  render(
-    <Theme>
-      <Card tokens={tokens}>
-        <Text>{contentText}</Text>
-      </Card>
-    </Theme>
-  )
-
-describe('Card', () => {
-  it('renders the card content', () => {
-    const { getByText } = setup()
-    const cardContent = getByText(contentText)
-    expect(cardContent).toBeTruthy()
-  })
-
-  it('renders the default style properly', () => {
-    const defaultStyle = testTheme.components.Card.tokens
-    const { getByText } = setup()
-    const card = getByText(contentText).parent
-    expect(card).toHaveStyle(defaultStyle)
-  })
-
-  it('renders a card with a custom background color', () => {
-    const backgroundColor = '#0F0F0F'
-    const { getByText } = setup({ tokens: { backgroundColor } })
-    const card = getByText(contentText).parent
-    expect(card).toHaveStyle({ backgroundColor })
-  })
-
-  it('renders a card with a custom border', () => {
-    const border = {
-      borderColor: '#123456',
-      borderWidth: 7,
-      borderRadius: 8
-    }
-    const { getByText } = setup({ tokens: { ...border } })
-    const card = getByText(contentText).parent
-    expect(card).toHaveStyle({ ...border })
-  })
-
-  it('renders a card with a custom padding', () => {
-    const padding = {
-      paddingBottom: 1,
-      paddingLeft: 2,
-      paddingRight: 3,
-      paddingTop: 4
-    }
-    const { getByText } = setup({ tokens: { ...padding } })
-    const card = getByText(contentText).parent
-    expect(card).toHaveStyle({ ...padding })
-  })
-})