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

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

@@ -1,35 +0,0 @@
-import type * as React from 'react'
-import { describe, it, beforeEach } from 'vitest'
-import { screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-
-import { ListButtonAccordion } from '..'
-
-const render = (props: React.ComponentProps<typeof ListButtonAccordion>) =>
-  renderWithProviders(<ListButtonAccordion {...props} />)
-
-describe('ListButtonAccordion', () => {
-  let props: React.ComponentProps<typeof ListButtonAccordion>
-
-  beforeEach(() => {
-    props = {
-      children: <div>mock ListButtonAccordion content</div>,
-      headline: 'mock headline',
-      isExpanded: true,
-    }
-  })
-
-  it('should render non nested accordion', () => {
-    render(props)
-    screen.getByText('mock headline')
-    screen.getByText('mock ListButtonAccordion content')
-  })
-  it('should render non nested accordion with main headline', () => {
-    props.isNested = true
-    props.mainHeadline = 'mock main headline'
-    render(props)
-    screen.getByText('mock main headline')
-    screen.getByText('mock headline')
-    screen.getByText('mock ListButtonAccordion content')
-  })
-})

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

@@ -1,27 +0,0 @@
-import type * as React from 'react'
-import { describe, it, beforeEach, vi, expect } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-
-import { ListButtonRadioButton } from '..'
-
-const render = (props: React.ComponentProps<typeof ListButtonRadioButton>) =>
-  renderWithProviders(<ListButtonRadioButton {...props} />)
-
-describe('ListButtonRadioButton', () => {
-  let props: React.ComponentProps<typeof ListButtonRadioButton>
-
-  beforeEach(() => {
-    props = {
-      buttonText: 'mock text',
-      buttonValue: 'mockValue',
-      onChange: vi.fn(),
-    }
-  })
-
-  it('should render non nested accordion', () => {
-    render(props)
-    fireEvent.click(screen.getByText('mock text'))
-    expect(props.onChange).toHaveBeenCalled()
-  })
-})

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

@@ -1,61 +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 { BORDERS, COLORS } from '../../../helix-design-system'
-
-import { ListItem } from '..'
-
-const render = (props: React.ComponentProps<typeof ListItem>) =>
-  renderWithProviders(<ListItem {...props} />)
-
-describe('ListItem', () => {
-  let props: React.ComponentProps<typeof ListItem>
-
-  beforeEach(() => {
-    props = {
-      type: 'error',
-      children: <div>mock listitem content</div>,
-      onClick: vi.fn(),
-    }
-  })
-
-  it('should render correct style - error', () => {
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_error')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.red35}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-  it('should render correct style - noActive', () => {
-    props.type = 'noActive'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_noActive')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.grey20}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-  it('should render correct style - success', () => {
-    props.type = 'success'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_success')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.green35}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-  it('should render correct style - warning', () => {
-    props.type = 'warning'
-    render(props)
-    screen.getByText('mock listitem content')
-    const listItem = screen.getByTestId('ListItem_warning')
-    expect(listItem).toHaveStyle(`backgroundColor: ${COLORS.yellow35}`)
-    expect(listItem).toHaveStyle(`borderRadius: ${BORDERS.borderRadius4}`)
-  })
-  it('should call on click when pressed', () => {
-    render(props)
-    const listItem = screen.getByText('mock listitem content')
-    fireEvent.click(listItem)
-    expect(props.onClick).toHaveBeenCalled()
-  })
-})

package/src/atoms/MenuList/__tests__/MenuItem.test.tsx

@@ -1,50 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { screen } from '@testing-library/react'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { COLORS } from '../../../helix-design-system'
-import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
-
-import { MenuItem } from '../MenuItem'
-
-const render = (props: React.ComponentProps<typeof MenuItem>) => {
-  return renderWithProviders(<MenuItem {...props} />)[0]
-}
-
-describe('MenuItem', () => {
-  let props: React.ComponentProps<typeof MenuItem>
-
-  beforeEach(() => {
-    props = {
-      children: 'mockMenuItem',
-      isAlert: false,
-    }
-  })
-
-  it('render button with styles', () => {
-    render(props)
-    const menuItem = screen.getByText('mockMenuItem')
-    expect(menuItem).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(menuItem).toHaveStyle(`color: ${COLORS.black90}`)
-    expect(menuItem)
-      .toHaveStyle(`padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
-    ${SPACING.spacing12}`)
-    expect(menuItem).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
-  })
-
-  it('render button with styles disabled', () => {
-    props = {
-      ...props,
-      disabled: true,
-    }
-    render(props)
-    const menuItem = screen.getByText('mockMenuItem')
-    expect(menuItem).toHaveStyle(`background-color: ${COLORS.transparent}`)
-    expect(menuItem).toHaveStyle(`color: ${COLORS.grey40}`)
-    expect(menuItem)
-      .toHaveStyle(`padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8}
-    ${SPACING.spacing12}`)
-    expect(menuItem).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
-  })
-})

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

@@ -1,36 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { MenuList } from '..'
-
-const render = (props: React.ComponentProps<typeof MenuList>) => {
-  return renderWithProviders(<MenuList {...props} />)[0]
-}
-
-const mockBtn = <div key="fakeKey">mockBtn</div>
-
-describe('MenuList', () => {
-  let props: React.ComponentProps<typeof MenuList>
-  beforeEach(() => {
-    props = {
-      children: mockBtn,
-    }
-  })
-
-  it('renders a child not on device', () => {
-    render(props)
-    screen.getByText('mockBtn')
-  })
-  it('renders isOnDevice child, clicking background overlay calls onClick', () => {
-    props = {
-      ...props,
-      isOnDevice: true,
-      onClick: vi.fn(),
-    }
-    render(props)
-    fireEvent.click(screen.getByLabelText('BackgroundOverlay_ModalShell'))
-    expect(props.onClick).toHaveBeenCalled()
-  })
-})

package/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx

@@ -1,33 +0,0 @@
-import type * as React from 'react'
-import { vi, it, expect, describe } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-
-import { COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { OverflowBtn } from '../OverflowBtn'
-
-const render = (props: React.ComponentProps<typeof OverflowBtn>) => {
-  return renderWithProviders(<OverflowBtn {...props} />)[0]
-}
-
-describe('OverflowBtn', () => {
-  it('renders a clickable button', () => {
-    const handleClick = vi.fn()
-    render({
-      onClick: handleClick,
-    })
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('renders a hover state', () => {
-    render({
-      onClick: vi.fn(),
-    })
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.transparent}`
-    )
-  })
-})

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

@@ -1,73 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-import { screen, act } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { Snackbar } from '..'
-import { COLORS } from '../../../helix-design-system'
-
-const render = (props: React.ComponentProps<typeof Snackbar>) => {
-  return renderWithProviders(<Snackbar {...props} />)[0]
-}
-
-describe('Snackbar', () => {
-  let props: React.ComponentProps<typeof Snackbar>
-  beforeEach(() => {
-    props = {
-      message: 'test message',
-      onClose: vi.fn(),
-    }
-  })
-
-  it('renders correct message', () => {
-    render(props)
-    screen.getByText('test message')
-  })
-
-  it('should have proper styling', () => {
-    props = {
-      message: 'test message',
-    }
-    render(props)
-    const testSnackbar = screen.getByTestId('Snackbar')
-    expect(testSnackbar).toHaveStyle(`background-color: ${COLORS.black90}`)
-  })
-
-  it('after 4 seconds the snackbar should be closed automatically', async () => {
-    vi.useFakeTimers()
-    props = {
-      message: 'test message',
-      duration: 4000,
-      onClose: vi.fn(),
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(5000)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-
-  it('should stay more than 4 seconds when given a longer duration', async () => {
-    vi.useFakeTimers()
-    props = {
-      message: 'test message',
-      duration: 8000,
-      onClose: vi.fn(),
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(4100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(5000)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-})

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

@@ -1,55 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect } from 'vitest'
-import { screen } from '@testing-library/react'
-import { COLORS } from '../../../helix-design-system'
-import { renderWithProviders } from '../../../testing/utils'
-import { Tag } from '../index'
-
-const render = (props: React.ComponentProps<typeof Tag>) => {
-  return renderWithProviders(<Tag {...props} />)
-}
-
-describe('Tag', () => {
-  let props: React.ComponentProps<typeof Tag>
-
-  it('should render text, icon with default', () => {
-    props = {
-      text: 'mockDefault',
-      type: 'default',
-      iconName: 'ot-alert',
-      iconPosition: 'left',
-    }
-    render(props)
-    const tag = screen.getByTestId('Tag_default')
-    screen.getByText('mockDefault')
-    expect(tag).toHaveStyle(
-      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
-    )
-    screen.getByLabelText('icon_left_mockDefault')
-  })
-  it('should render text, right icon with branded', () => {
-    props = {
-      text: 'mockBranded',
-      type: 'branded',
-      iconName: 'ot-alert',
-      iconPosition: 'right',
-    }
-    render(props)
-    const tag = screen.getByTestId('Tag_branded')
-    screen.getByText('mockBranded')
-    expect(tag).toHaveStyle(`background-color: ${COLORS.blue50}`)
-    screen.getByLabelText('icon_right_mockBranded')
-  })
-  it('should render text with interactive', () => {
-    props = {
-      text: 'mockInteractive',
-      type: 'interactive',
-    }
-    render(props)
-    const tag = screen.getByTestId('Tag_interactive')
-    screen.getByText('mockInteractive')
-    expect(tag).toHaveStyle(
-      `background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
-    )
-  })
-})

package/src/atoms/Toast/__tests__/ODDToast.test.tsx

@@ -1,178 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-import { act, fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { Toast, TOAST_ANIMATION_DURATION } from '..'
-
-const render = (props: React.ComponentProps<typeof Toast>) => {
-  return renderWithProviders(<Toast {...props} displayType="odd" />)[0]
-}
-
-describe('Toast', () => {
-  let props: React.ComponentProps<typeof Toast>
-  beforeEach(() => {
-    props = {
-      id: '1',
-      message: 'test message',
-      heading: 'heading message',
-      type: 'success',
-      closeButton: true,
-      buttonText: 'Close',
-      onClose: vi.fn(),
-      displayType: 'odd',
-      exitNow: false,
-    }
-  })
-
-  it('renders correct message', () => {
-    render(props)
-    screen.getByText('test message')
-    screen.getByText('heading message')
-  })
-  it('truncates heading message whern too long', () => {
-    props = {
-      ...props,
-      heading: 'Super-long-protocol-file-name-that-the-user-made.py',
-    }
-    render(props)
-    screen.getByText('Super-long-protocol-file-name-that-the-u...py')
-  })
-  it('calls onClose when close button is pressed', () => {
-    vi.useFakeTimers()
-    render(props)
-    const closeButton = screen.getByRole('button')
-    fireEvent.click(closeButton)
-    act(() => {
-      vi.advanceTimersByTime(TOAST_ANIMATION_DURATION)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-  it('does not render close button if buttonText and closeButton are undefined', () => {
-    props = {
-      ...props,
-      buttonText: undefined,
-      closeButton: undefined,
-    }
-    render(props)
-    expect(screen.queryByRole('button')).toBeNull()
-  })
-  it('should have success styling when passing success as type', () => {
-    render(props)
-    const successToast = screen.getByTestId('Toast_success')
-    expect(successToast).toHaveStyle(`color: #04aa65
-    background-color: ##baffcd`)
-    screen.getByLabelText('icon_success')
-  })
-  it('should have warning styling when passing warning as type', () => {
-    props = {
-      ...props,
-      type: 'warning',
-    }
-    render(props)
-    const warningToast = screen.getByTestId('Toast_warning')
-    expect(warningToast).toHaveStyle(`color: #f09d20
-    background-color: #ffe9be`)
-    screen.getByLabelText('icon_warning')
-  })
-
-  it('after 7 seconds the toast should be closed automatically', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      duration: 7000,
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(8000)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-
-  it('should stay more than 7 seconds when disableTimeout is true', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      disableTimeout: true,
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(7000)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-  })
-
-  it('should not stay more than 7 seconds when disableTimeout is false', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      disableTimeout: false,
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(9000)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-
-  it('should dismiss when a second toast appears', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      disableTimeout: true,
-      exitNow: true,
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(TOAST_ANIMATION_DURATION)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-  it('renders link text with an optional callback', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      linkText: 'test link',
-      onLinkClick: vi.fn(),
-    }
-    render(props)
-    const clickableLink = screen.getByText('test link')
-    fireEvent.click(clickableLink)
-    expect(props.onLinkClick).toHaveBeenCalled()
-  })
-  it('toast will not disappear on a general click if both close button and clickable link present', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      linkText: 'test link',
-      closeButton: true,
-    }
-    render(props)
-    const clickableLink = screen.getByText('test message')
-    fireEvent.click(clickableLink)
-    act(() => {
-      vi.advanceTimersByTime(TOAST_ANIMATION_DURATION)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-  })
-})