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

package/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx

@@ -1,99 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { screen } from '@testing-library/react'
-import { fixtureTiprack300ul as _fixtureTiprack300ul } from '@opentrons/shared-data'
-import { renderWithProviders } from '../../../testing/utils'
-import { RobotCoordsForeignDiv } from '../../Deck/RobotCoordsForeignDiv'
-import { PipetteRender } from '../PipetteRender'
-import { EmanatingNozzle } from '../EmanatingNozzle'
-import { EightEmanatingNozzles } from '../EightEmanatingNozzles'
-import {
-  SINGLE_CHANNEL_PIPETTE_WIDTH,
-  SINGLE_CHANNEL_PIPETTE_HEIGHT,
-  MULTI_CHANNEL_PIPETTE_WIDTH,
-  MULTI_CHANNEL_PIPETTE_HEIGHT,
-} from '../constants'
-
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
-
-vi.mock('../../Deck/RobotCoordsForeignDiv')
-vi.mock('../EmanatingNozzle')
-vi.mock('../EightEmanatingNozzles')
-
-const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition2
-
-const render = (props: React.ComponentProps<typeof PipetteRender>) => {
-  return renderWithProviders(<PipetteRender {...props} />)[0]
-}
-
-describe('PipetteRender', () => {
-  let props: React.ComponentProps<typeof PipetteRender>
-  beforeEach(() => {
-    props = {
-      labwareDef: fixtureTiprack300Ul,
-      pipetteName: 'p1000_single',
-    }
-    vi.mocked(RobotCoordsForeignDiv).mockReturnValue(<div></div>)
-  })
-
-  describe('when the pipette is single channel', () => {
-    beforeEach(() => {
-      vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => (
-        <div>
-          {`rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`}{' '}
-          {children}
-        </div>
-      ))
-
-      vi.mocked(EmanatingNozzle).mockReturnValue(
-        <div>mock emanating nozzle</div>
-      )
-    })
-
-    it('should render a rectangle with the correct dimensions', () => {
-      render(props)
-      screen.getByText(
-        `rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`
-      )
-      vi.mocked(EmanatingNozzle).mockRestore()
-    })
-    it('should render a single emanating nozzle', () => {
-      render(props)
-      screen.getByText('mock emanating nozzle')
-      expect(EightEmanatingNozzles).not.toHaveBeenCalled()
-    })
-  })
-  describe('when the pipette is 8 channel', () => {
-    beforeEach(() => {
-      vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => (
-        <div>
-          {`rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`}{' '}
-          {children}
-        </div>
-      ))
-
-      vi.mocked(EightEmanatingNozzles).mockReturnValue(
-        <div>mock eight emanating nozzles</div>
-      )
-    })
-    it('should render a rectangle with the correct dimensions', () => {
-      props = {
-        ...props,
-        pipetteName: 'p10_multi',
-      }
-      render(props)
-      screen.getByText(
-        `rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`
-      )
-      vi.mocked(EightEmanatingNozzles).mockRestore()
-    })
-    it('should render eight emanating nozzles', () => {
-      props = {
-        ...props,
-        pipetteName: 'p10_multi',
-      }
-      render(props)
-      screen.getByText('mock eight emanating nozzles')
-    })
-  })
-})

package/src/hardware-sim/ProtocolDeck/utils/__tests__/getLabwareInforByLiquidId.test.ts

@@ -1,158 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { getLabwareInfoByLiquidId } from '../getLabwareInfoByLiquidId'
-import type { RunTimeCommand } from '@opentrons/shared-data'
-
-const mockLoadLiquidRunTimeCommands = [
-  {
-    id: '97ba49a5-04f6-4f91-986a-04a0eb632882',
-    createdAt: '2022-09-07T19:47:42.781065+00:00',
-    commandType: 'loadPipette',
-    key: '0feeecaf-3895-46d7-ab71-564601265e35',
-    status: 'succeeded',
-    params: {
-      pipetteName: 'p20_single_gen2',
-      mount: 'left',
-      pipetteId: '90183a18-a1df-4fd6-9636-be3bcec63fe4',
-    },
-    result: {
-      pipetteId: '90183a18-a1df-4fd6-9636-be3bcec63fe4',
-    },
-    startedAt: '2022-09-07T19:47:42.782665+00:00',
-    completedAt: '2022-09-07T19:47:42.785061+00:00',
-  },
-  {
-    id: '846e0b7b-1e54-4f42-9ab1-964ebda45da5',
-    createdAt: '2022-09-07T19:47:42.781281+00:00',
-    commandType: 'loadLiquid',
-    key: '1870d1a2-8dcd-46f2-9e27-16578365913b',
-    status: 'succeeded',
-    params: {
-      liquidId: '1',
-      labwareId: 'mockLabwareId1',
-      volumeByWell: {
-        A2: 20,
-        B2: 20,
-        C2: 20,
-        D2: 20,
-        E2: 20,
-        F2: 20,
-        G2: 20,
-        H2: 20,
-      },
-    },
-    result: {},
-    startedAt: '2022-09-07T19:47:42.785987+00:00',
-    completedAt: '2022-09-07T19:47:42.786087+00:00',
-  },
-  {
-    id: '1e03ae10-7e9b-465c-bc72-21ab5706bfb0',
-    createdAt: '2022-09-07T19:47:42.781323+00:00',
-    commandType: 'loadLiquid',
-    key: '48df9766-04ff-4927-9f2d-4efdcf0b3df8',
-    status: 'succeeded',
-    params: {
-      liquidId: '1',
-      labwareId: 'mockLabwareId2',
-      volumeByWell: {
-        D3: 40,
-      },
-    },
-    result: {},
-    startedAt: '2022-09-07T19:47:42.786212+00:00',
-    completedAt: '2022-09-07T19:47:42.786285+00:00',
-  },
-  {
-    id: '1e03ae10-7e9b-465c-bc72-21ab5706bfb0',
-    createdAt: '2022-09-07T19:47:42.781323+00:00',
-    commandType: 'loadLiquid',
-    key: '48df9766-04ff-4927-9f2d-4efdcf0b3df8',
-    status: 'succeeded',
-    params: {
-      liquidId: '1',
-      labwareId: 'mockLabwareId2',
-      volumeByWell: {
-        A3: 33,
-        B3: 33,
-        C3: 33,
-      },
-    },
-    result: {},
-    startedAt: '2022-09-07T19:47:42.786212+00:00',
-    completedAt: '2022-09-07T19:47:42.786285+00:00',
-  },
-  {
-    id: 'e8596bb3-b650-4d62-9bb5-dfc6e9e63249',
-    createdAt: '2022-09-07T19:47:42.781363+00:00',
-    commandType: 'loadLiquid',
-    key: '69d19b03-fdcc-4964-a2f8-3cbb30f4ddf3',
-    status: 'succeeded',
-    params: {
-      liquidId: '0',
-      labwareId: 'mockLabwareId1',
-      volumeByWell: {
-        A1: 33,
-        B1: 33,
-        C1: 33,
-        D1: 33,
-        E1: 33,
-        F1: 33,
-        G1: 33,
-        H1: 33,
-      },
-    },
-    result: {},
-    startedAt: '2022-09-07T19:47:42.786347+00:00',
-    completedAt: '2022-09-07T19:47:42.786412+00:00',
-  },
-]
-
-describe('getLabwareInfoByLiquidId', () => {
-  it('returns labware info by liquid id', () => {
-    const expected = {
-      '0': [
-        {
-          labwareId: 'mockLabwareId1',
-          volumeByWell: {
-            A1: 33,
-            B1: 33,
-            C1: 33,
-            D1: 33,
-            E1: 33,
-            F1: 33,
-            G1: 33,
-            H1: 33,
-          },
-        },
-      ],
-      '1': [
-        {
-          labwareId: 'mockLabwareId1',
-          volumeByWell: {
-            A2: 20,
-            B2: 20,
-            C2: 20,
-            D2: 20,
-            E2: 20,
-            F2: 20,
-            G2: 20,
-            H2: 20,
-          },
-        },
-        {
-          labwareId: 'mockLabwareId2',
-          volumeByWell: {
-            A3: 33,
-            B3: 33,
-            C3: 33,
-            D3: 40,
-          },
-        },
-      ],
-    }
-    expect(
-      getLabwareInfoByLiquidId(
-        mockLoadLiquidRunTimeCommands as RunTimeCommand[]
-      )
-    ).toEqual(expected)
-  })
-})

package/src/hooks/__tests__/useConditionalConfirm.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('useConditionalConfirm', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/hooks/__tests__/useDrag.test.ts

@@ -1,46 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { act, renderHook } from '@testing-library/react'
-import { useDrag } from '../useDrag'
-import type { ElementPosition } from '../useDrag'
-
-const mockPosition: ElementPosition = {
-  width: 100,
-  height: 200,
-  x: 10,
-  y: 20,
-}
-
-describe('useDrag', () => {
-  it('useDrag returns UseDragResult', () => {
-    const { result } = renderHook(() => useDrag(mockPosition))
-
-    expect(result.current.position.width).toBe(mockPosition.width)
-    expect(result.current.position.height).toBe(mockPosition.height)
-    expect(result.current.position.x).toBe(mockPosition.x)
-    expect(result.current.position.y).toBe(mockPosition.y)
-    expect(result.current.style.width).toBe(`${mockPosition.width}px`)
-    expect(result.current.style.height).toBe(`${mockPosition.height}px`)
-    expect(result.current.style.touchAction).toBe('none')
-    expect(result.current.style.transform).toBe(
-      `translate3D(${mockPosition.x}px, ${mockPosition.y}px, 0)`
-    )
-    expect(result.current.style.position).toBe('absolute')
-    expect(typeof result.current.isEnabled).toBe('boolean')
-  })
-
-  it('When calling enable, isEnabled true', () => {
-    const { result } = renderHook(() => useDrag(mockPosition))
-    act(() => {
-      result.current.enable()
-    })
-    expect(result.current.isEnabled).toBe(true)
-  })
-
-  it('When calling disable, isEnabled false', () => {
-    const { result } = renderHook(() => useDrag(mockPosition))
-    act(() => {
-      result.current.disable()
-    })
-    expect(result.current.isEnabled).toBe(false)
-  })
-})

package/src/hooks/__tests__/useIdle.test.ts

@@ -1,68 +0,0 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { renderHook } from '@testing-library/react'
-import { useIdle } from '../useIdle'
-
-const MOCK_EVENTS: Array<keyof DocumentEventMap> = [
-  'mousedown',
-  'click',
-  'scroll',
-]
-
-const MOCK_OPTIONS = {
-  events: MOCK_EVENTS,
-  initialState: false,
-}
-
-describe('useIdle', () => {
-  beforeEach(() => {
-    vi.useFakeTimers({ shouldAdvanceTime: true })
-  })
-
-  it('should return the default initialState', () => {
-    const mockTime = 1000
-    const { result } = renderHook(() => useIdle(mockTime))
-    expect(result.current).toBe(true)
-  })
-
-  it('should return the given initialState', () => {
-    const mockTime = 1000
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
-    expect(result.current).toBe(false)
-  })
-
-  it('should return true after 1000ms', () => {
-    const mockTime = 1000
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
-    expect(result.current).toBe(false)
-    setTimeout(() => {
-      expect(result.current).toBe(true)
-    }, 1001)
-  })
-
-  it('should return true after 180,000ms - 3min', () => {
-    const mockTime = 60 * 1000 * 3
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
-    expect(result.current).toBe(false)
-    setTimeout(() => {
-      expect(result.current).toBe(true)
-    }, 180001)
-  })
-
-  it('should return true after 180,0000ms - 30min', () => {
-    const mockTime = 60 * 1000 * 30
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
-    expect(result.current).toBe(false)
-    setTimeout(() => {
-      expect(result.current).toBe(true)
-    }, 1800001)
-  })
-
-  it('should return true after 3,600,000ms - 1 hour', () => {
-    const mockTime = 60 * 1000 * 60
-    const { result } = renderHook(() => useIdle(mockTime, MOCK_OPTIONS))
-    expect(result.current).toBe(false)
-    setTimeout(() => {
-      expect(result.current).toBe(true)
-    }, 3600001)
-  })
-})

package/src/hooks/__tests__/useInterval.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('useInterval hook', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/hooks/__tests__/useLongPress.test.ts

@@ -1,25 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { act, renderHook, waitFor } from '@testing-library/react'
-import { useLongPress } from '../useLongPress'
-
-describe('useLongPress', () => {
-  it('useLongPress returns typeof UseLongPressResult', () => {
-    const { result } = renderHook(() => useLongPress())
-    expect(result.current.style.touchAction).toBe('none')
-    expect(result.current.isEnabled).toBe(true)
-    expect(result.current.isLongPressed).toBe(false)
-    expect(result.current.isTapped).toBe(false)
-  })
-
-  it('when callling disable, isEnabled true', () => {
-    const { result } = renderHook(() => useLongPress())
-    act(() => result.current.enable())
-    waitFor(() => expect(result.current.isEnabled).toBe(true))
-  })
-
-  it('when callling disable, isEnabled false', () => {
-    const { result } = renderHook(() => useLongPress())
-    act(() => result.current.disable())
-    waitFor(() => expect(result.current.isEnabled).toBe(false))
-  })
-})

package/src/hooks/__tests__/useMountEffect.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('useMountEffect hook', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/hooks/__tests__/usePrevious.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('usePrevious hook', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/hooks/__tests__/useScrolling.test.tsx

@@ -1,46 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { renderHook, act } from '@testing-library/react'
-import { useScrolling } from '../useScrolling'
-
-describe('useScrolling', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.resetAllMocks()
-    vi.clearAllTimers()
-    vi.useRealTimers()
-  })
-
-  it('returns false when there is no scrolling', () => {
-    const ref = document.createElement('div')
-    const { result } = renderHook(() => useScrolling(ref))
-    expect(result.current).toBe(false)
-  })
-
-  it('returns true when scrolling', () => {
-    const ref = document.createElement('div')
-    const { result } = renderHook(() => useScrolling(ref))
-    ref.scrollTop = 10
-    act(() => {
-      ref.dispatchEvent(new Event('scroll'))
-    })
-    expect(result.current).toBe(true)
-  })
-
-  it('returns false after scrolling stops', () => {
-    vi.useFakeTimers({ shouldAdvanceTime: true })
-    const ref = document.createElement('div')
-    const { result } = renderHook(() => useScrolling(ref))
-    ref.scrollTop = 10
-    act(() => {
-      ref.dispatchEvent(new Event('scroll'))
-    })
-    expect(result.current).toBe(true)
-    act(() => {
-      vi.advanceTimersByTime(300)
-    })
-    expect(result.current).toBe(false)
-  })
-})

package/src/hooks/__tests__/useSwipe.test.tsx

@@ -1,26 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { act, renderHook } from '@testing-library/react'
-import { useSwipe } from '../useSwipe'
-
-describe('useSwipe hook', () => {
-  it('useSwipe returns UseSwipeResult object', () => {
-    const { result } = renderHook(() => useSwipe())
-    expect(result.current.style.touchAction).toBe('none')
-    expect(result.current.isEnabled).toBe(true)
-    expect(result.current.swipeType).toBe('')
-  })
-
-  it('When calling enable, isEnabled true', () => {
-    const { result } = renderHook(() => useSwipe())
-    result.current.enable()
-    expect(result.current.isEnabled).toBe(true)
-  })
-
-  it('When calling disable, isEnabled false', () => {
-    const { result } = renderHook(() => useSwipe())
-    act(() => {
-      result.current.disable()
-    })
-    expect(result.current.isEnabled).toBe(false)
-  })
-})

package/src/hooks/__tests__/useTimeout.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('useTimeouthook', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/hooks/__tests__/useToggle.test.tsx

@@ -1,5 +0,0 @@
-import { describe, it } from 'vitest'
-
-describe('useToggle hook', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/index.module.css

@@ -1,9 +0,0 @@
-/* opentrons style library */
-
-@import './styles/colors.module.css';
-@import './styles/typography.module.css';
-@import './styles/borders.module.css';
-
-:global(*) {
-  box-sizing: border-box;
-}

package/src/instrument/PipetteSelect.module.css

@@ -1,14 +0,0 @@
-.pipette_volume_class {
-  cursor: default;
-  min-width: 3.5rem;
-}
-
-.pipette_channels {
-  cursor: default;
-  min-width: 7rem;
-}
-
-.pipette_category {
-  cursor: default;
-  min-width: 2.5rem;
-}

package/src/instrument/__tests__/InstrumentInfo.test.tsx

@@ -1,55 +0,0 @@
-import type * as React from 'react'
-import { screen } from '@testing-library/react'
-import { describe, beforeEach, it, vi } from 'vitest'
-import { LEFT, RIGHT, fixtureP1000SingleV2Specs } from '@opentrons/shared-data'
-import { renderWithProviders } from '../../testing/utils'
-import { InstrumentInfo } from '../InstrumentInfo'
-import { InstrumentDiagram } from '../InstrumentDiagram'
-
-vi.mock('../InstrumentDiagram')
-
-const render = (props: React.ComponentProps<typeof InstrumentInfo>) => {
-  return renderWithProviders(<InstrumentInfo {...props} />)[0]
-}
-
-describe('InstrumentInfo', () => {
-  let props: React.ComponentProps<typeof InstrumentInfo>
-
-  beforeEach(() => {
-    props = {
-      mount: LEFT,
-      description: 'mock description',
-      pipetteSpecs: fixtureP1000SingleV2Specs,
-      tiprackModels: ['mock1', 'mock2'],
-      showMountLabel: true,
-    }
-    vi.mocked(InstrumentDiagram).mockReturnValue(
-      <div>mock instrumentDiagram</div>
-    )
-  })
-  it('renders a p1000 pipette with 2 tiprack models for left mount', () => {
-    render(props)
-    screen.getByText('mock instrumentDiagram')
-    screen.getByText('left pipette')
-    screen.getByText('mock description')
-    screen.getByText('Tip rack')
-    screen.getByText('mock1')
-    screen.getByText('mock2')
-  })
-  it('renders a p1000 pipette with 1 tiprack model for right mount', () => {
-    props.mount = RIGHT
-    props.tiprackModels = ['mock1']
-    render(props)
-    screen.getByText('mock instrumentDiagram')
-    screen.getByText('right pipette')
-    screen.getByText('mock description')
-    screen.getByText('Tip rack')
-    screen.getByText('mock1')
-  })
-  it('renders none for pip and tiprack if none are selected', () => {
-    props.pipetteSpecs = undefined
-    props.tiprackModels = undefined
-    render(props)
-    screen.getByText('None')
-  })
-})

package/src/instrument/__tests__/PipetteSelect.test.tsx

@@ -1,4 +0,0 @@
-import { describe, it } from 'vitest'
-describe('PipetteSelect', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/instrument/instrument.module.css

@@ -1,45 +0,0 @@
-@import '@opentrons/components/styles';
-
-.pipette_group {
-  margin: 0 auto;
-  max-width: 46rem;
-  padding-bottom: 2rem;
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-areas: 'left right';
-}
-
-.right {
-  grid-area: right;
-  grid-template-columns: 40% 80%;
-  grid-template-areas: 'img info';
-}
-
-.pipette_info {
-  grid-area: info;
-  min-height: 8rem;
-}
-
-.flipped_image {
-  transform: scaleX(-1);
-  filter: FlipH;
-}
-
-.pipette_icon {
-  grid-area: img;
-  text-align: center;
-}
-
-.title {
-  font-size: var(--fs-body-2);
-  font-weight: var(--fw-semibold);
-  color: var(--c-font-dark);
-  text-transform: capitalize;
-  margin: 2rem 0 0.25rem;
-}
-
-.value {
-  font-size: var(--fs-body-2); /* from legacy --font-body-2-dark */
-  font-weight: var(--fw-regular); /* from legacy --font-body-2-dark */
-  color: var(--c-font-dark); /* from legacy --font-body-2-dark */
-}

package/src/interaction-enhancers/__tests__/useHover.test.tsx

@@ -1,4 +0,0 @@
-import { describe, it } from 'vitest'
-describe('useHover hook', () => {
-  it.todo('replace deprecated enzyme test')
-})

package/src/legacy-hardware-sim/LabwareNameOverlay.module.css

@@ -1,20 +0,0 @@
-@import '../index.module.css';
-
-.name_overlay {
-  width: 100%;
-  font-size: 0.5rem;
-  color: var(--c-font-light);
-  background-color: color-mod(var(--c-black) alpha(0.75));
-  padding: 0.25rem;
-  border-radius: 0 0 0.5rem 0.5rem;
-}
-
-.display_name {
-  font-weight: var(--fw-semibold);
-  color: var(--c-font-light);
-  overflow-wrap: break-word;
-}
-
-.deck_slot:active {
-  cursor: grabbing;
-}