@opentrons/components 0.1.6-alpha.17 → 0.1.6-alpha.19

package/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx

@@ -1,141 +0,0 @@
-import type * as React from 'react'
-import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
-import { CheckboxField } from '..'
-
-const render = (props: React.ComponentProps<typeof CheckboxField>) => {
-  return renderWithProviders(<CheckboxField {...props} />)[0]
-}
-
-describe('CheckboxField', () => {
-  let props: React.ComponentProps<typeof CheckboxField>
-
-  beforeEach(() => {
-    props = {
-      onChange: vi.fn(),
-      value: false,
-      name: 'mockCheckboxField',
-      label: 'checkMockCheckboxField',
-      disabled: false,
-      isIndeterminate: false,
-    }
-  })
-
-  afterEach(() => {
-    vi.resetAllMocks()
-  })
-
-  it('renders label with correct style', () => {
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'checkMockCheckboxField',
-    })
-    const checkBoxFieldBox = screen.getByText('checkMockCheckboxField')
-    const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-
-    // INNER_STYLE_NO_VALUE
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
-    expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(
-      `border-radius: ${String(BORDERS.borderRadius2)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(
-      `justify-content: ${String(JUSTIFY_CENTER)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
-
-    // INPUT_STYLE
-    expect(checkBoxInput).toHaveStyle(`position: absolute`)
-    expect(checkBoxInput).toHaveStyle(`overflow: hidden`)
-    expect(checkBoxInput).toHaveStyle(`clip: rect(0 0 0 0)`)
-    expect(checkBoxInput).toHaveStyle(`height: 1px`)
-    expect(checkBoxInput).toHaveStyle(`width: 1px`)
-    expect(checkBoxInput).toHaveStyle(`margin: -1px`)
-    expect(checkBoxInput).toHaveStyle(`padding: 0`)
-    expect(checkBoxInput).toHaveStyle(`border: 0`)
-    expect(checkBoxInput).toHaveAttribute('tabindex', '0')
-
-    // LABEL_TEXT_STYLE
-    expect(checkBoxFieldBox).toHaveStyle(
-      `font-size: ${String(TYPOGRAPHY.fontSizeP)}`
-    )
-    expect(checkBoxFieldBox).toHaveStyle(
-      `font-weight: ${String(TYPOGRAPHY.fontWeightRegular)}`
-    )
-    expect(checkBoxFieldBox).toHaveStyle(`color: ${String(COLORS.black90)}`)
-    expect(checkBoxFieldBox).toHaveStyle(`flex: 0 0 auto`)
-    expect(checkBoxFieldBox).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing8}`
-    )
-  })
-
-  it('render icon with correct style - value true', () => {
-    props.value = true
-    render(props)
-    const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.blue50)}`)
-    expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(
-      `border-radius: ${String(BORDERS.borderRadius2)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(
-      `justify-content: ${String(JUSTIFY_CENTER)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
-  })
-
-  it('renders label with correct style - value undefined', () => {
-    props.value = undefined
-    render(props)
-    const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
-    expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
-    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
-    expect(checkBoxIcon).toHaveStyle(`display: flex`)
-    expect(checkBoxIcon).toHaveStyle(
-      `border-radius: ${String(BORDERS.borderRadius2)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(
-      `justify-content: ${String(JUSTIFY_CENTER)}`
-    )
-    expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
-  })
-
-  it('renders label with correct style - disabled true', () => {
-    props.disabled = true
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'checkMockCheckboxField',
-    })
-    expect(checkBoxInput).toBeDisabled()
-  })
-
-  it('renders label with correct style - tabIndex 1', () => {
-    props.tabIndex = 1
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'checkMockCheckboxField',
-    })
-    const checkBoxFieldBox = screen.getByText('checkMockCheckboxField')
-    expect(checkBoxInput).toHaveAttribute('tabindex', '1')
-    expect(checkBoxFieldBox).toHaveAttribute('tabindex', '1')
-  })
-
-  it('calls mock function when clicking checkboxfield', () => {
-    render(props)
-    const checkBoxInput = screen.getByRole('checkbox', {
-      name: 'checkMockCheckboxField',
-    })
-    fireEvent.click(checkBoxInput)
-    expect(props.onChange).toHaveBeenCalled()
-  })
-})

package/src/atoms/Chip/__tests__/Chip.test.tsx

@@ -1,429 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { screen } from '@testing-library/react'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { SPACING } from '../../../ui-style-constants'
-import { renderWithProviders } from '../../../testing/utils'
-import { Chip } from '..'
-
-const render = (props: React.ComponentProps<typeof Chip>) => {
-  return renderWithProviders(<Chip {...props} />)
-}
-
-describe('Chip Touchscreen', () => {
-  let props: React.ComponentProps<typeof Chip>
-
-  it('should render text, icon, bgcolor with success colors', () => {
-    props = {
-      text: 'mockSuccess',
-      type: 'success',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_success')
-    const chipText = screen.getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    const icon = screen.getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
-    // ToDo (kk:03/28/2024) seems that jsdom doesn't support switching via media query
-    // I will keep investigating this
-    // expect(icon).toHaveStyle(`width: 1.5rem`)
-  })
-
-  it('should render text, icon, no bgcolor with success colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockSuccess',
-      type: 'success',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_success')
-    const chipText = screen.getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    const icon = screen.getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
-  })
-
-  it('should render text, icon, bgcolor with warning colors', () => {
-    props = {
-      text: 'mockWarning',
-      type: 'warning',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_warning')
-    const chipText = screen.getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
-    const icon = screen.getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
-  })
-
-  it('should render text, icon, no bgcolor with warning colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockWarning',
-      type: 'warning',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_warning')
-    const chipText = screen.getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
-    const icon = screen.getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
-  })
-
-  it('should render text, icon, bgcolor with neutral colors', () => {
-    props = {
-      text: 'mockNeutral',
-      type: 'neutral',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_neutral')
-    const chipText = screen.getByText('mockNeutral')
-    expect(chip).toHaveStyle(
-      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
-    )
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = screen.getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
-  })
-
-  it('should render text, icon, no bgcolor with neutral colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockNeutral',
-      type: 'neutral',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_neutral')
-    const chipText = screen.getByText('mockNeutral')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = screen.getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
-  })
-
-  it('should render text, icon, bgcolor with error colors', () => {
-    props = {
-      text: 'mockError',
-      type: 'error',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_error')
-    const chipText = screen.getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = screen.getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
-  })
-
-  it('should render text, icon, no bgcolor with error colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockError',
-      type: 'error',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_error')
-    const chipText = screen.getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = screen.getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
-  })
-
-  it('should render text, icon, bgcolor with info colors', () => {
-    props = {
-      text: 'mockInfo',
-      type: 'info',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    const chipText = screen.getByText('mockInfo')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
-  })
-
-  it('should render text, icon, no bgcolor with info colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockInfo',
-      type: 'info',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    const chipText = screen.getByText('mockInfo')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
-  })
-  it('renders no icon when hasIcon is false', () => {
-    props = {
-      text: 'mockInfo',
-      hasIcon: false,
-      type: 'info',
-    }
-    render(props)
-    expect(screen.queryByText('icon_mockInfo')).not.toBeInTheDocument()
-  })
-
-  it('render text with smaller padding and smaller icon when chip size is small and background is false', () => {
-    props = {
-      background: false,
-      text: 'mockInfo',
-      type: 'info',
-      chipSize: 'small',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} 0`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`width: 0.75rem`)
-  })
-
-  // ToDo (kk:03/28/2024) seems that jsdom doesn't support switching via media query
-  // I will keep investigating this
-  // it('render text with smaller padding and smaller icon when chip size is small and background is true', () => {
-  //   props = {
-  //     background: true,
-  //     text: 'mockInfo',
-  //     type: 'info',
-  //     chipSize: 'small',
-  //   }
-  //   render(props)
-  //   const chip = screen.getByTestId('Chip_info')
-  //   expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing8}`)
-  //   const icon = screen.getByLabelText('icon_mockInfo')
-  //   expect(icon).toHaveStyle(`width: 1.25rem`)
-  // })
-})
-
-describe('Chip Web', () => {
-  let props: React.ComponentProps<typeof Chip>
-
-  beforeEach(() => {
-    Object.defineProperty(window, 'innerWidth', {
-      writable: true,
-      configurable: true,
-      value: 1024,
-    })
-
-    Object.defineProperty(window, 'innerHeight', {
-      writable: true,
-      configurable: true,
-      value: 768,
-    })
-  })
-  it('should render text, icon, bgcolor with success colors', () => {
-    props = {
-      text: 'mockSuccess',
-      type: 'success',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_success')
-    const chipText = screen.getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    // expect(chipText).toHaveStyle(
-    //   `padding: ${SPACING.spacing2} ${SPACING.spacing8}`
-    // )
-    const icon = screen.getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
-    expect(icon).toHaveStyle(`width: 1rem`)
-  })
-
-  it('should render text, icon, no bgcolor with success colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockSuccess',
-      type: 'success',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_success')
-    const chipText = screen.getByText('mockSuccess')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
-    const icon = screen.getByLabelText('icon_mockSuccess')
-    expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
-  })
-
-  it('should render text, icon, bgcolor with warning colors', () => {
-    props = {
-      text: 'mockWarning',
-      type: 'warning',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_warning')
-    const chipText = screen.getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
-    const icon = screen.getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
-  })
-
-  it('should render text, icon, no bgcolor with warning colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockWarning',
-      type: 'warning',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_warning')
-    const chipText = screen.getByText('mockWarning')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
-    const icon = screen.getByLabelText('icon_mockWarning')
-    expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
-  })
-
-  it('should render text, icon, bgcolor with neutral colors', () => {
-    props = {
-      text: 'mockNeutral',
-      type: 'neutral',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_neutral')
-    const chipText = screen.getByText('mockNeutral')
-    expect(chip).toHaveStyle(
-      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
-    )
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = screen.getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
-  })
-
-  it('should render text, icon, no bgcolor with neutral colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockNeutral',
-      type: 'neutral',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_neutral')
-    const chipText = screen.getByText('mockNeutral')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
-    const icon = screen.getByLabelText('icon_mockNeutral')
-    expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
-  })
-
-  it('should render text, icon, bgcolor with error colors', () => {
-    props = {
-      text: 'mockError',
-      type: 'error',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_error')
-    const chipText = screen.getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = screen.getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
-  })
-
-  it('should render text, icon, no bgcolor with error colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockError',
-      type: 'error',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_error')
-    const chipText = screen.getByText('mockError')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
-    const icon = screen.getByLabelText('icon_mockError')
-    expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
-  })
-
-  it('should render text, icon, bgcolor with info colors', () => {
-    props = {
-      text: 'mockInfo',
-      type: 'info',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    const chipText = screen.getByText('mockInfo')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
-  })
-
-  it('should render text, icon, no bgcolor with info colors and bg false', () => {
-    props = {
-      background: false,
-      text: 'mockInfo',
-      type: 'info',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    const chipText = screen.getByText('mockInfo')
-    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
-  })
-  it('renders no icon when hasIcon is false', () => {
-    props = {
-      text: 'mockInfo',
-      hasIcon: false,
-      type: 'info',
-    }
-    render(props)
-    expect(screen.queryByText('icon_mockInfo')).not.toBeInTheDocument()
-  })
-
-  it('render text with smaller padding and smaller icon when chip size is small and background is false', () => {
-    props = {
-      background: false,
-      text: 'mockInfo',
-      type: 'info',
-      chipSize: 'small',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} 0`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`width: 0.75rem`)
-  })
-
-  it('render text with smaller padding and smaller icon when chip size is small and background is true', () => {
-    props = {
-      background: true,
-      text: 'mockInfo',
-      type: 'info',
-      chipSize: 'small',
-    }
-    render(props)
-    const chip = screen.getByTestId('Chip_info')
-    expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing6}`)
-    const icon = screen.getByLabelText('icon_mockInfo')
-    expect(icon).toHaveStyle(`width: 0.75rem`)
-  })
-})

package/src/atoms/InputField/__tests__/InputField.test.tsx

@@ -1,63 +0,0 @@
-import type * as React from 'react'
-import { describe, it, vi, beforeEach, expect } from 'vitest'
-import { screen, fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { InputField } from '..'
-
-const render = (props: React.ComponentProps<typeof InputField>) => {
-  return renderWithProviders(<InputField {...props} />)[0]
-}
-
-describe('HeaterShakerSlideout', () => {
-  let props: React.ComponentProps<typeof InputField>
-  beforeEach(() => {
-    props = {
-      type: 'number',
-      caption: 'caption',
-      max: 10,
-      min: 1,
-      units: 'rpm',
-      value: '5',
-      disabled: false,
-      onFocus: vi.fn(),
-      onBlur: vi.fn(),
-      onChange: vi.fn(),
-      readOnly: false,
-      autoFocus: false,
-    }
-  })
-  it('renders correct information when type is number', () => {
-    render(props)
-    screen.getByText('caption')
-    screen.getByText('rpm')
-  })
-  it('renders correct information when type is text', () => {
-    props = {
-      type: 'text',
-      value: 'string',
-      units: 'C',
-      onChange: vi.fn(),
-    }
-    render(props)
-    screen.getByText('C')
-  })
-  it('renders error message when value is outside of number type range', () => {
-    props = {
-      type: 'number',
-      caption: 'caption',
-      max: 10,
-      min: 1,
-      units: 'rpm',
-      value: '9',
-      error: 'error',
-      onChange: vi.fn(),
-      id: 'input_id',
-    }
-    render(props)
-    const input = screen.getByTestId('input_id')
-    fireEvent.change(input, { target: { value: ['12'] } })
-    expect(props.onChange).toHaveBeenCalled()
-    screen.getByText('caption')
-    screen.getByText('error')
-  })
-})

package/src/atoms/ListButton/__tests__/ListButton.test.tsx

@@ -1,46 +0,0 @@
-import type * as React from 'react'
-import { vi, describe, it, expect, beforeEach } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { COLORS } from '../../../helix-design-system'
-
-import { ListButton } from '..'
-
-const render = (props: React.ComponentProps<typeof ListButton>) =>
-  renderWithProviders(<ListButton {...props} />)
-
-describe('ListButton', () => {
-  let props: React.ComponentProps<typeof ListButton>
-
-  beforeEach(() => {
-    props = {
-      type: 'noActive',
-      children: <div>mock ListButton content</div>,
-      onClick: vi.fn(),
-    }
-  })
-
-  it('should render correct style - noActive', () => {
-    render(props)
-    const listButton = screen.getByTestId('ListButton_noActive')
-    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.grey30}`)
-  })
-  it('should render correct style - connected', () => {
-    props.type = 'connected'
-    render(props)
-    const listButton = screen.getByTestId('ListButton_connected')
-    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.green30}`)
-  })
-  it('should render correct style - notConnected', () => {
-    props.type = 'notConnected'
-    render(props)
-    const listButton = screen.getByTestId('ListButton_notConnected')
-    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.yellow30}`)
-  })
-  it('should call on click when pressed', () => {
-    render(props)
-    fireEvent.click(screen.getByText('mock ListButton content'))
-    expect(props.onClick).toHaveBeenCalled()
-  })
-})