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

package/src/molecules/Banner/__tests__/Banner.test.tsx

@@ -1,94 +0,0 @@
-import type * as React from 'react'
-import { describe, it, vi, expect, beforeEach } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-
-import { Banner } from '..'
-
-const render = (props: React.ComponentProps<typeof Banner>) => {
-  return renderWithProviders(<Banner {...props} />)[0]
-}
-
-describe('Banner', () => {
-  let props: React.ComponentProps<typeof Banner>
-
-  beforeEach(() => {
-    props = {
-      type: 'success',
-      children: 'TITLE',
-    }
-  })
-
-  it('renders success banner', () => {
-    render(props)
-    screen.getByLabelText('icon_success')
-    screen.getByText('TITLE')
-  })
-
-  it('renders success banner with exit button and when click dismisses banner', () => {
-    props = {
-      type: 'success',
-      children: 'TITLE',
-      onCloseClick: vi.fn(),
-    }
-    render(props)
-    screen.getByText('TITLE')
-    const btn = screen.getByLabelText('close_icon')
-    fireEvent.click(btn)
-    expect(props.onCloseClick).toHaveBeenCalled()
-  })
-
-  it('renders warning banner', () => {
-    props = {
-      type: 'warning',
-      children: 'TITLE',
-    }
-    render(props)
-    screen.getByLabelText('icon_warning')
-    screen.getByText('TITLE')
-  })
-
-  it('renders error banner', () => {
-    props = {
-      type: 'error',
-      children: 'TITLE',
-    }
-    render(props)
-    screen.getByLabelText('icon_error')
-    screen.getByText('TITLE')
-  })
-
-  it('renders updating banner', () => {
-    props = {
-      type: 'updating',
-      children: 'TITLE',
-    }
-    render(props)
-    screen.getByLabelText('icon_updating')
-    screen.getByText('TITLE')
-  })
-
-  it('renders custom icon banner', () => {
-    props = {
-      type: 'warning',
-      children: 'TITLE',
-      icon: { name: 'ot-hot-to-touch' },
-    }
-    render(props)
-    screen.getByLabelText('icon_warning')
-    screen.getByText('TITLE')
-  })
-
-  it('renders custom close', () => {
-    props = {
-      type: 'warning',
-      children: 'TITLE',
-      closeButton: 'close button',
-      onCloseClick: vi.fn(),
-    }
-    render(props)
-    const btn = screen.getByText('close button')
-    fireEvent.click(btn)
-    expect(props.onCloseClick).toHaveBeenCalled()
-  })
-})

package/src/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.tsx

@@ -1,49 +0,0 @@
-import type * as React from 'react'
-import { describe, it, beforeEach, expect } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { screen } from '@testing-library/react'
-import { SPACING } from '../../../ui-style-constants'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-
-import { DeckInfoLabel } from '..'
-
-const render = (props: React.ComponentProps<typeof DeckInfoLabel>) => {
-  return renderWithProviders(<DeckInfoLabel {...props} />)
-}
-
-describe('DeckInfoLabel', () => {
-  let props: React.ComponentProps<typeof DeckInfoLabel>
-
-  beforeEach(() => {
-    props = {
-      deckLabel: 'A1',
-    }
-  })
-
-  it('should render the proper styles - web style', () => {
-    render(props)
-    const deckInfoLabel = screen.getByTestId('DeckInfoLabel_A1')
-    expect(deckInfoLabel).toHaveStyle(
-      `padding: ${SPACING.spacing2} ${SPACING.spacing4}`
-    )
-    expect(deckInfoLabel).toHaveStyle(`height: ${SPACING.spacing20}`)
-    expect(deckInfoLabel).toHaveStyle('width: max-content')
-    expect(deckInfoLabel).toHaveStyle(`border: 1px solid ${COLORS.black90}`)
-    expect(deckInfoLabel).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
-  })
-
-  it.todo('should render the proper styles - odd style')
-
-  it('should render deck label', () => {
-    render(props)
-    screen.getByText('A1')
-  })
-
-  it('should render an icon', () => {
-    props = {
-      iconName: 'ot-temperature-v2',
-    }
-    render(props)
-    screen.getByLabelText(props.iconName)
-  })
-})

package/src/molecules/DeckLabel/__tests__/DeckLabel.test.tsx

@@ -1,69 +0,0 @@
-import type * as React from 'react'
-import { screen } from '@testing-library/react'
-import { describe, it, beforeEach, expect } from 'vitest'
-
-import { COLORS } from '../../../helix-design-system'
-import { SPACING } from '../../../ui-style-constants'
-import { FLEX_MAX_CONTENT } from '../../../styles'
-import { renderWithProviders } from '../../../testing/utils'
-import { DeckLabel } from '..'
-
-const render = (props: React.ComponentProps<typeof DeckLabel>) => {
-  return renderWithProviders(<DeckLabel {...props} />)
-}
-
-describe('DeckLabel', () => {
-  let props: React.ComponentProps<typeof DeckLabel>
-
-  beforeEach(() => {
-    props = {
-      text: 'mock DeckLabel text',
-      isSelected: false,
-      isLast: true,
-    }
-  })
-
-  it('should render text and styles isSelected - false', () => {
-    render(props)
-    screen.getByText('mock DeckLabel text')
-    const deckLabel = screen.getByTestId('DeckLabel_UnSelected')
-    expect(deckLabel).toHaveStyle(`padding: ${SPACING.spacing2}`)
-    expect(deckLabel).toHaveStyle(`width: ${FLEX_MAX_CONTENT}`)
-    expect(deckLabel).toHaveStyle(`color: ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-right: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-bottom: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-left: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`background-color: ${COLORS.white}`)
-  })
-
-  it('should render text and styles isSelected - false not last', () => {
-    props = {
-      ...props,
-      isLast: false,
-    }
-    render(props)
-    screen.getByText('mock DeckLabel text')
-    const deckLabel = screen.getByTestId('DeckLabel_UnSelected')
-    expect(deckLabel).toHaveStyle(`padding: ${SPACING.spacing2}`)
-    expect(deckLabel).toHaveStyle(`width: ${FLEX_MAX_CONTENT}`)
-    expect(deckLabel).toHaveStyle(`color: ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-right: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`border-left: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`background-color: ${COLORS.white}`)
-  })
-
-  it('should render text and styles isSelected - true', () => {
-    props = {
-      ...props,
-      isSelected: true,
-    }
-    render(props)
-    screen.getByText('mock DeckLabel text')
-    const deckLabel = screen.getByTestId('DeckLabel_Selected')
-    expect(deckLabel).toHaveStyle(`padding: ${SPACING.spacing2}`)
-    expect(deckLabel).toHaveStyle(`width: ${FLEX_MAX_CONTENT}`)
-    expect(deckLabel).toHaveStyle(`color: ${COLORS.white}`)
-    expect(deckLabel).toHaveStyle(`border: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabel).toHaveStyle(`background-color: ${COLORS.blue50}`)
-  })
-})

package/src/molecules/DropdownMenu/__tests__/DropdownMenu.test.tsx

@@ -1,85 +0,0 @@
-import type * as React from 'react'
-import { screen, fireEvent } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { DropdownMenu } from '..'
-import type { DropdownOption } from '..'
-
-const mockOptions: DropdownOption[] = [
-  { name: 'Option 1', value: 'option1' },
-  { name: 'Option 2', value: 'option2' },
-  { name: 'Option 3', value: 'option3' },
-]
-
-const mockOnClick = vi.fn()
-
-const render = (props: React.ComponentProps<typeof DropdownMenu>) => {
-  return renderWithProviders(<DropdownMenu {...props} />)
-}
-
-describe('DropdownMenu', () => {
-  let props: React.ComponentProps<typeof DropdownMenu>
-
-  beforeEach(() => {
-    props = {
-      filterOptions: mockOptions,
-      onClick: mockOnClick,
-      currentOption: mockOptions[0],
-    }
-  })
-
-  it('renders with default props', () => {
-    render(props)
-    expect(screen.getByText('Option 1')).toBeInTheDocument()
-  })
-
-  it('renders with custom props', () => {
-    props = {
-      filterOptions: mockOptions,
-      onClick: mockOnClick,
-      currentOption: mockOptions[0],
-      dropdownType: 'neutral',
-      title: 'Custom Dropdown',
-      caption: 'Select an option',
-      tooltipText: 'This is a tooltip',
-    }
-    render(props)
-
-    expect(screen.getByText('Custom Dropdown')).toBeInTheDocument()
-    expect(screen.getByText('Select an option')).toBeInTheDocument()
-    expect(screen.getByText('Option 1')).toBeInTheDocument()
-  })
-
-  it('opens dropdown menu on click', () => {
-    render(props)
-    fireEvent.click(screen.getByText('Option 1'))
-    expect(screen.getByText('Option 2')).toBeInTheDocument()
-    expect(screen.getByText('Option 3')).toBeInTheDocument()
-  })
-
-  it('calls onClick when an option is selected', () => {
-    render(props)
-    fireEvent.click(screen.getByText('Option 1'))
-    fireEvent.click(screen.getByText('Option 2'))
-
-    expect(mockOnClick).toHaveBeenCalledWith('option2')
-  })
-
-  // ToDo (kk:08/13/2024) activate when jsdom is updated
-  //   it('renders tooltip when tooltipText is provided', () => {
-  //     props = {
-  //       filterOptions: mockOptions,
-  //       onClick: mockOnClick,
-  //       currentOption: mockOptions[0],
-  //       title: 'With Tooltip',
-  //       tooltipText: 'Tooltip content',
-  //     }
-  //     render(props)
-
-  //     expect(screen.getByText('With Tooltip')).toBeInTheDocument()
-  //     const infoIcon = screen.getByTestId('information_icon')
-  //     fireEvent.mouseOver(infoIcon)
-  //     expect(screen.getByText('Tooltip content')).toBeInTheDocument()
-  //   })
-})

package/src/molecules/InfoScreen/__tests__/InfoScreen.test.tsx

@@ -1,40 +0,0 @@
-import type * as React from 'react'
-import { screen } from '@testing-library/react'
-import { describe, it, expect, beforeEach } from 'vitest'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { InfoScreen } from '..'
-
-const render = (props: React.ComponentProps<typeof InfoScreen>) => {
-  return renderWithProviders(<InfoScreen {...props} />)
-}
-
-describe('InfoScreen', () => {
-  let props: React.ComponentProps<typeof InfoScreen>
-
-  beforeEach(() => {
-    props = {
-      content: 'mock info text',
-    }
-  })
-
-  it('should render text and icon with proper color - labware', () => {
-    render(props)
-    screen.getByLabelText('alert')
-    screen.getByText('mock info text')
-  })
-
-  it('should have proper styles', () => {
-    render(props)
-    expect(screen.getByTestId('InfoScreen')).toHaveStyle(
-      `background-color: ${COLORS.grey30}`
-    )
-    expect(screen.getByTestId('InfoScreen')).toHaveStyle(
-      `border-radius: ${BORDERS.borderRadius8}`
-    )
-    expect(screen.getByLabelText('alert')).toHaveStyle(
-      `color: ${COLORS.grey60}`
-    )
-  })
-})

package/src/molecules/LiquidIcon/__tests__/LiquidIcon.test.tsx

@@ -1,50 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { screen } from '@testing-library/react'
-import { SPACING } from '../../../ui-style-constants'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-
-import { LiquidIcon } from '..'
-
-const render = (props: React.ComponentProps<typeof LiquidIcon>) => {
-  return renderWithProviders(<LiquidIcon {...props} />)
-}
-
-describe('LiquidIcon', () => {
-  let props: React.ComponentProps<typeof LiquidIcon>
-
-  it('should render the proper style for large icon', () => {
-    props = {
-      size: 'medium',
-      color: COLORS.red50,
-    }
-    render(props)
-    const LiquidIcon = screen.getByTestId(`LiquidIcon_${COLORS.red50}`)
-    expect(LiquidIcon).toHaveStyle(`padding: ${SPACING.spacing12}`)
-    expect(LiquidIcon).toHaveStyle('height: max-content')
-    expect(LiquidIcon).toHaveStyle('width: max-content')
-    expect(LiquidIcon).toHaveStyle(`background-color: ${COLORS.white}`)
-    expect(LiquidIcon).toHaveStyle(`border-style: ${BORDERS.styleSolid}`)
-    expect(LiquidIcon).toHaveStyle(`border-width: 1px`)
-    expect(LiquidIcon).toHaveStyle(`border-color: ${COLORS.grey30}`)
-    expect(LiquidIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
-  })
-
-  it('should render the proper style for large icon', () => {
-    props = {
-      size: 'small',
-      color: COLORS.blue50,
-    }
-    render(props)
-    const LiquidIcon = screen.getByTestId(`LiquidIcon_${COLORS.blue50}`)
-    expect(LiquidIcon).toHaveStyle(`padding: ${SPACING.spacing8}`)
-    expect(LiquidIcon).toHaveStyle('height: max-content')
-    expect(LiquidIcon).toHaveStyle('width: max-content')
-    expect(LiquidIcon).toHaveStyle(`background-color: ${COLORS.white}`)
-    expect(LiquidIcon).toHaveStyle(`border-style: ${BORDERS.styleSolid}`)
-    expect(LiquidIcon).toHaveStyle(`border-width: 1px`)
-    expect(LiquidIcon).toHaveStyle(`border-color: ${COLORS.grey30}`)
-    expect(LiquidIcon).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
-  })
-})

package/src/molecules/ParametersTable/__tests__/ParametersTable.test.tsx

@@ -1,126 +0,0 @@
-import type * as React from 'react'
-import { renderWithProviders } from '../../../testing/utils'
-import { describe, it, beforeEach } from 'vitest'
-import { screen } from '@testing-library/react'
-import { ParametersTable } from '../index'
-
-import type { RunTimeParameter } from '@opentrons/shared-data'
-
-const tMock = (key: string) => key
-const mockRunTimeParameter: RunTimeParameter[] = [
-  {
-    displayName: 'Trash Tips',
-    variableName: 'TIP_TRASH',
-    description:
-      'to throw tip into the trash or to not throw tip into the trash',
-    type: 'bool',
-    default: true,
-    value: true,
-  },
-  {
-    displayName: 'EtoH Volume',
-    variableName: 'ETOH_VOLUME',
-    description: '70% ethanol volume',
-    type: 'float',
-    suffix: 'mL',
-    min: 1.5,
-    max: 10.0,
-    default: 6.5,
-    value: 6.5,
-  },
-  {
-    displayName: 'Default Module Offsets',
-    variableName: 'DEFAULT_OFFSETS',
-    description: 'default module offsets for temp, H-S, and none',
-    type: 'str',
-    value: 'none',
-    choices: [
-      {
-        displayName: 'No offsets',
-        value: 'none',
-      },
-      {
-        displayName: 'temp offset',
-        value: '1',
-      },
-      {
-        displayName: 'heater-shaker offset',
-        value: '2',
-      },
-    ],
-    default: 'none',
-  },
-  {
-    displayName: 'pipette mount',
-    variableName: 'mont',
-    description: 'pipette mount',
-    type: 'str',
-    value: 'left',
-    choices: [
-      {
-        displayName: 'Left',
-        value: 'left',
-      },
-      {
-        displayName: 'Right',
-        value: 'right',
-      },
-    ],
-    default: 'left',
-  },
-]
-
-const render = (props: React.ComponentProps<typeof ParametersTable>) => {
-  return renderWithProviders(<ParametersTable {...props} />)
-}
-
-describe('ParametersTable', () => {
-  let props: React.ComponentProps<typeof ParametersTable>
-
-  beforeEach(() => {
-    props = {
-      runTimeParameters: mockRunTimeParameter,
-    }
-  })
-
-  it('should render table header', () => {
-    render(props)
-    screen.getByText('Name')
-    screen.getByText('Default Value')
-    screen.getByText('Range')
-  })
-
-  it('should render parameters default information', () => {
-    render(props)
-    screen.getByText('Trash Tips')
-    screen.getByText('On')
-    screen.getByText('On, off')
-
-    screen.getByText('EtoH Volume')
-    screen.getByText('6.5 mL')
-    screen.getByText('1.5-10.0')
-
-    // more than 2 options
-    screen.getByText('Default Module Offsets')
-    screen.getByText('No offsets')
-    screen.getByText('3 options')
-
-    // 2 options
-    screen.getByText('pipette mount')
-    screen.getByText('Left')
-    screen.getByText('Left, Right')
-  })
-
-  it('should render the raw i18n values if a t prop is provided', () => {
-    props.t = tMock
-    render(props)
-    screen.getByText('name')
-    screen.getByText('default_value')
-    screen.getByText('range')
-  })
-
-  it('should render a description icon if description is provided', () => {
-    render(props)
-    screen.getByTestId('Icon_0')
-  })
-})

package/src/molecules/Tabs/__tests__/Tabs.test.tsx

@@ -1,90 +0,0 @@
-import type * as React from 'react'
-import { vi, describe, it, expect, beforeEach } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { SPACING } from '../../../ui-style-constants'
-import { POSITION_RELATIVE } from '../../../styles'
-import { renderWithProviders } from '../../../testing/utils'
-import { Tabs } from '../index'
-
-const render = (props: React.ComponentProps<typeof Tabs>) => {
-  return renderWithProviders(<Tabs {...props} />)
-}
-
-describe('Tabs', () => {
-  let props: React.ComponentProps<typeof Tabs>
-
-  beforeEach(() => {
-    props = {
-      tabs: [
-        { text: 'set up', onClick: vi.fn() },
-        { text: 'parameters', onClick: vi.fn() },
-        { text: 'module controls', onClick: vi.fn() },
-      ],
-    }
-  })
-
-  it('renders unclicked tabs with text', () => {
-    render(props)
-
-    const tabTexts = ['set up', 'parameters', 'module controls']
-    const tabStyles = {
-      backgroundColor: COLORS.purple30,
-      borderRadius: BORDERS.borderRadius8,
-      padding: `${SPACING.spacing8} ${SPACING.spacing16}`,
-      position: POSITION_RELATIVE,
-    }
-
-    tabTexts.forEach(text => {
-      const tab = screen.getByText(text)
-      expect(tab).not.toBeNull()
-
-      Object.entries(tabStyles).forEach(([key, value]) => {
-        expect(tab).toHaveStyle(`${key}: ${value}`)
-      })
-    })
-  })
-
-  it('renders an active tab', () => {
-    props.tabs[0].isActive = true
-
-    render(props)
-
-    const tab1 = screen.getByText('set up')
-
-    expect(tab1).toHaveStyle(`background-color: ${COLORS.purple50}`)
-    expect(tab1).toHaveStyle(`color: ${COLORS.white}`)
-  })
-
-  it('should call the right click handler when clicked', () => {
-    render(props)
-
-    const tabList = props.tabs
-
-    fireEvent.click(screen.getByText('set up'))
-    expect(tabList[0].onClick).toHaveBeenCalled()
-
-    fireEvent.click(screen.getByText('parameters'))
-    expect(tabList[1].onClick).toHaveBeenCalled()
-
-    fireEvent.click(screen.getByText('module controls'))
-    expect(tabList[2].onClick).toHaveBeenCalled()
-  })
-
-  it('should show right style when disabled', () => {
-    props = {
-      tabs: [
-        { text: 'set up', onClick: vi.fn(), disabled: true },
-        { text: 'parameters', onClick: vi.fn() },
-        { text: 'module controls', onClick: vi.fn() },
-      ],
-    }
-    render(props)
-    const tab = screen.getByText('set up')
-    expect(tab).toHaveStyle(`background-color: ${COLORS.grey30}`)
-    expect(tab).toHaveStyle(`color: ${COLORS.grey40}`)
-
-    fireEvent.click(tab)
-    expect(props.tabs[0].onClick).not.toHaveBeenCalled()
-  })
-})

package/src/nav/SidePanel.module.css

@@ -1,34 +0,0 @@
-@import '../index.module.css';
-
-:root {
-  --sidebar-width: 18.25rem;
-}
-
-.panel {
-  flex-shrink: 0;
-  overflow: visible;
-  border-right: var(--bd-light);
-  background-color: var(--c-bg-light);
-  position: relative;
-  padding: 0 4px;
-}
-
-.title_bar {
-  display: flex;
-  align-items: center;
-  width: var(--sidebar-width);
-}
-
-.title {
-  font-size: var(--fs-header); /* from legacy --font-header-dark */
-  font-weight: var(--fw-semibold); /* from legacy --font-header-dark */
-  color: var(--c-font-dark); /* from legacy --font-header-dark */
-  margin: 1rem auto;
-}
-
-.panel_contents {
-  width: var(--sidebar-width);
-  height: calc(100vh - 3.5rem);
-  overflow-x: hidden;
-  overflow-y: auto;
-}

package/src/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.tsx

@@ -1,49 +0,0 @@
-import type * as React from 'react'
-import { describe, it, vi, beforeEach, expect } from 'vitest'
-import { screen } from '@testing-library/react'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { DeckLabel } from '../../../molecules/DeckLabel'
-import { DeckLabelSet } from '..'
-
-vi.mock('../../../molecules/DeckLabel')
-
-const mockDeckLabels = [
-  {
-    text: 'Label',
-    isSelected: false,
-    labelBorderRadius: BORDERS.borderRadius4,
-  },
-  {
-    text: 'Label',
-    isSelected: false,
-    labelBorderRadius: BORDERS.borderRadius4,
-  },
-]
-
-const render = (props: React.ComponentProps<typeof DeckLabelSet>) => {
-  return renderWithProviders(<DeckLabelSet {...props} />)
-}
-describe('DeckLabelSet', () => {
-  let props: React.ComponentProps<typeof DeckLabelSet>
-
-  beforeEach(() => {
-    props = {
-      x: 1,
-      y: 1,
-      width: 50,
-      height: 50,
-      deckLabels: mockDeckLabels,
-    }
-    vi.mocked(DeckLabel).mockReturnValue(<div>mock DeckLabels</div>)
-  })
-
-  it('should render blue border and DeckLabel', () => {
-    render(props)
-    expect(screen.getAllByText('mock DeckLabels').length).toBe(2)
-    const deckLabelSet = screen.getByTestId('DeckLabeSet')
-    expect(deckLabelSet).toHaveStyle(`border: 1.5px solid ${COLORS.blue50}`)
-    expect(deckLabelSet).toHaveStyle(`border-radius: ${BORDERS.borderRadius4}`)
-  })
-})