migrate rest of components tests

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { describe, beforeEach, afterEach, vi, expect } from 'vitest'
+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'
@@ -41,39 +41,13 @@ describe('CheckboxField', () => {
     // 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(`color: ${String(COLORS.grey60)}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
     expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
     expect(checkBoxIcon).toHaveStyle(
       `justify-content: ${String(JUSTIFY_CENTER)}`
     )
     expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
-    expect(checkBoxIcon).toHaveStyleRule('cursor', 'pointer', {
-      modifier: ':hover',
-    })
-    expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, {
-      modifier: ':hover',
-    })
-    expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, {
-      modifier: ':active',
-    })
-    expect(checkBoxIcon).toHaveStyleRule(
-      'box-shadow',
-      `0 0 0 3px ${String(COLORS.blue50)}`,
-      { modifier: ':focus' }
-    )
-    expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, {
-      modifier: ':disabled',
-    })
-
-    // TODO: kj 09/15/2022 This part will be update later OUTER_STYLE
-    // const checkBoxLabel = getByTestId('CheckboxField_label')
-    // expect(checkBoxLabel).toHaveStyle('font-size: 0.75rem')
-    // expect(checkBoxLabel).toHaveStyle('font-weight: 400')
-    // expect(checkBoxLabel).toHaveStyle(`color: ${COLORS.black90}`)
-    // expect(checkBoxLabel).toHaveStyle('display: flex')
-    // expect(checkBoxLabel).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
-    // expect(checkBoxLabel).toHaveStyle('line-height: 1')
 
     // INPUT_STYLE
     expect(checkBoxInput).toHaveStyle(`position: absolute`)
@@ -98,10 +72,6 @@ describe('CheckboxField', () => {
     expect(checkBoxFieldBox).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing8}`
     )
-    expect(checkBoxFieldBox).toHaveStyleRule('padding', '0', {
-      modifier: ':empty',
-    })
-    expect(checkBoxFieldBox).toHaveAttribute('tabindex', '0')
   })
 
   it('render icon with correct style - value true', () => {
@@ -110,7 +80,7 @@ describe('CheckboxField', () => {
     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(`color: ${String(COLORS.blue60)}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
     expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
     expect(checkBoxIcon).toHaveStyle(
@@ -119,13 +89,13 @@ describe('CheckboxField', () => {
     expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
   })
 
-  it('renders label with correct style - value undefine', () => {
+  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(`color: ${String(COLORS.grey60)}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
     expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
     expect(checkBoxIcon).toHaveStyle(

components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx

@@ -47,32 +47,18 @@ describe('PrimaryButton', () => {
     expect(button).toHaveStyle(`color: ${COLORS.grey50}`)
   })
 
-  it('applies the correct states to the button - focus', () => {
-    render(props)
-    const button = screen.getByText('primary button')
-    fireEvent.focus(button)
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue55}`)
-  })
-
   it('applies the correct states to the button - hover', () => {
     render(props)
     const button = screen.getByText('primary button')
     fireEvent.mouseOver(button)
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue55}`)
-  })
-
-  it('applies the correct states to the button - default', () => {
-    render(props)
-    const button = screen.getByText('primary button')
-    fireEvent.mouseLeave(button)
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
   })
 
   it('renders primary button with text and different background color', () => {
     props.backgroundColor = COLORS.red50
     render(props)
     const button = screen.getByText('primary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
     expect(button).toHaveStyle(`color: ${COLORS.white}`)
   })
 })

components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx

@@ -49,6 +49,6 @@ describe('SecondaryButton', () => {
     props.color = COLORS.red50
     render(props)
     const button = screen.getByText('secondary button')
-    expect(button).toHaveStyle(`color: ${COLORS.red50}`)
+    expect(button).toHaveStyle(`color: ${COLORS.blue55}`)
   })
 })

components/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx

@@ -2,9 +2,7 @@ import * as React from 'react'
 import { describe, it, vi, beforeEach } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
-import { when } from 'vitest-when'
 import { fixture12Trough } from '@opentrons/shared-data'
-import { componentPropsMatcher } from '../../../testing/utils'
 import {
   StaticLabwareComponent as StaticLabware,
   WellLabelsComponent as WellLabels,
@@ -19,9 +17,7 @@ const troughFixture12 = fixture12Trough as LabwareDefinition2
 
 describe('LabwareRender', () => {
   beforeEach(() => {
-    when(StaticLabware)
-      .calledWith(componentPropsMatcher({ definition: troughFixture12 }))
-      .thenReturn(<div>mock static labware</div>)
+    vi.mocked(StaticLabware).mockReturnValue(<div>mock static labware</div>)
   })
 
   it('should render a static labware component', () => {
@@ -35,14 +31,7 @@ describe('LabwareRender', () => {
   })
   it('should render stroked wells', () => {
     const props = { definition: troughFixture12, wellStroke: { A1: 'blue' } }
-    when(StrokedWells)
-      .calledWith(
-        componentPropsMatcher({
-          definition: troughFixture12,
-          strokeByWell: { A1: 'blue' },
-        })
-      )
-      .thenReturn(<div>mock stroked wells</div>)
+    vi.mocked(StrokedWells).mockReturnValue(<div>mock stroked wells</div>)
     render(
       <svg>
         <LabwareRender {...props} />
@@ -55,14 +44,7 @@ describe('LabwareRender', () => {
       definition: troughFixture12,
       wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
     }
-    when(WellLabels)
-      .calledWith(
-        componentPropsMatcher({
-          definition: troughFixture12,
-          wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
-        })
-      )
-      .thenReturn(<div>mock well labels</div>)
+    vi.mocked(WellLabels).mockReturnValue(<div>mock well labels</div>)
     render(
       <svg>
         <LabwareRender {...props} />

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

@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 import { fixtureTiprack300ul as _fixtureTiprack300ul } from '@opentrons/shared-data'
-import { anyProps, renderWithProviders } from '../../../testing/utils'
+import { renderWithProviders } from '../../../testing/utils'
 import { RobotCoordsForeignDiv } from '../../Deck/RobotCoordsForeignDiv'
 import { PipetteRender } from '../PipetteRender'
 import { EmanatingNozzle } from '../EmanatingNozzle'
@@ -46,9 +46,8 @@ describe('PipetteRender', () => {
         </div>
       ))
 
-      when(EmanatingNozzle)
-        .calledWith(anyProps())
-        .thenReturn(<div>mock emanating nozzle</div>)
+      vi.mocked(EmanatingNozzle)
+      .mockReturnValue(<div>mock emanating nozzle</div>)
     })
 
     it('should render a rectangle with the correct dimensions', () => {

components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
-
+import { describe, it, beforeEach, expect } from 'vitest'
 import { renderWithProviders } from '../../../testing/utils'
+import { screen } from '@testing-library/react'
 import { BORDERS, SPACING } from '../../../ui-style-constants'
 import { COLORS } from '../../../helix-design-system'
 
@@ -20,8 +21,8 @@ describe('LocationIcon', () => {
   })
 
   it('should render the proper styles', () => {
-    const [{ getByTestId }] = render(props)
-    const locationIcon = getByTestId('LocationIcon_A1')
+    render(props)
+    const locationIcon = screen.getByTestId('LocationIcon_A1')
     expect(locationIcon).toHaveStyle(`padding: ${SPACING.spacing4} 0.375rem`)
     expect(locationIcon).toHaveStyle('height: 2rem')
     expect(locationIcon).toHaveStyle('width: max-content')
@@ -32,15 +33,15 @@ describe('LocationIcon', () => {
   })
 
   it('should render slot name', () => {
-    const [{ getByText }] = render(props)
-    getByText('A1')
+    render(props)
+    screen.getByText('A1')
   })
 
   it('should render an icon', () => {
     props = {
       iconName: 'ot-temperature-v2',
     }
-    const [{ getByLabelText }] = render(props)
-    getByLabelText(props.iconName as string)
+    render(props)
+    screen.getByLabelText(props.iconName as string)
   })
 })

components/src/testing/utils/matchers.ts

@@ -1,27 +1,15 @@
-import { when } from 'jest-when'
+import { when } from 'vitest-when'
 import type { Matcher } from '@testing-library/react'
 
 // these are needed because under the hood react calls components with two arguments (props and some second argument nobody seems to know)
 // https://github.com/timkindberg/jest-when/issues/66
-// use componentPropsMatcher if you want to verify ALL props being passed into a component
-export const componentPropsMatcher = (matcher: unknown): any =>
-  // @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
-  when.allArgs((args, equals) => equals(args[0], matcher))
-
 // use partialComponentPropsMatcher to only verify the props you pass into partialComponentPropsMatcher
 export const partialComponentPropsMatcher = (argsToMatch: unknown): any =>
   // @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
   when.allArgs((args, equals) =>
     equals(args[0], expect.objectContaining(argsToMatch))
   )
 
-// use argAtIndex to only verify arguments at a specific index
-export const argAtIndex = (index: number, matcher: unknown): any =>
-  // @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
-  when.allArgs((args, equals) => equals(args[index], matcher))
-
-export const anyProps = (): any => partialComponentPropsMatcher({})
-
 // Match things like <p>Some <strong>nested</strong> text</p>
 // Use with either string match: getByText(nestedTextMatcher("Some nested text"))
 // or regexp: getByText(nestedTextMatcher(/Some nested text/))

components/src/testing/utils/renderWithProviders.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
+import { vi } from 'vitest'
 import { render, RenderResult } from '@testing-library/react'
 import { createStore } from 'redux'
 
@@ -23,11 +24,11 @@ export function renderWithProviders<State>(
   const { initialState = {}, i18nInstance = null } = options || {}
 
   const store: Store<State> = createStore(
-    jest.fn(),
+    vi.fn(),
     initialState as PreloadedState<State>
   )
-  store.dispatch = jest.fn()
-  store.getState = jest.fn(() => initialState) as () => State
+  store.dispatch = vi.fn()
+  store.getState = vi.fn(() => initialState) as () => State
 
   const queryClient = new QueryClient()