From 5acb14da9651d3489b2a6b69096e62d76e4ce4a8 Mon Sep 17 00:00:00 2001 From: Jethary Date: Wed, 28 Feb 2024 13:26:00 -0500 Subject: [PATCH] update some components tests and add react-redux to package.json --- components/package.json | 3 + .../__tests__/CheckboxField.test.tsx | 7 +- .../__tests__/AlertPrimaryButton.test.tsx | 20 +-- .../buttons/__tests__/PrimaryButton.test.tsx | 59 +++----- .../__tests__/SecondaryButton.test.tsx | 38 ++--- .../DeprecatedCheckboxField.test.tsx | 2 + .../forms/__tests__/DropdownField.test.tsx | 2 + .../src/forms/__tests__/InputField.test.tsx | 2 + .../src/forms/__tests__/Select.test.tsx | 2 + .../src/forms/__tests__/SelectField.test.tsx | 2 + .../src/forms/__tests__/ToggleField.test.tsx | 2 + .../Labware/__tests__/LabwareRender.test.tsx | 48 +++--- .../__tests__/StrokedWells.test.tsx | 25 ++-- .../__tests__/WellLabels.test.tsx | 28 ++-- .../__tests__/EightEmanatingNozzles.test.tsx | 15 +- .../__tests__/EmanatingNozzle.test.tsx | 1 + .../Pipette/__tests__/PipetteRender.test.tsx | 140 +++++++----------- .../getLabwareInforByLiquidId.test.ts | 1 + .../__tests__/useConditionalConfirm.test.tsx | 2 + .../src/hooks/__tests__/useDrag.test.ts | 1 + .../src/hooks/__tests__/useIdle.test.ts | 3 +- .../src/hooks/__tests__/useInterval.test.tsx | 2 + .../src/hooks/__tests__/useLongPress.test.ts | 1 + .../hooks/__tests__/useMountEffect.test.tsx | 2 + .../src/hooks/__tests__/usePrevious.test.tsx | 2 + .../src/hooks/__tests__/useScrolling.test.tsx | 13 +- .../src/hooks/__tests__/useSwipe.test.tsx | 1 + .../src/hooks/__tests__/useTimeout.test.tsx | 2 + .../src/hooks/__tests__/useToggle.test.tsx | 2 + pnpm-lock.yaml | 7 +- 30 files changed, 193 insertions(+), 242 deletions(-) diff --git a/components/package.json b/components/package.json index 661d6b373e7..a63028a0609 100644 --- a/components/package.json +++ b/components/package.json @@ -41,6 +41,9 @@ "redux": "4.0.5", "styled-components": "5.3.6" }, + "devDependencies": { + "react-redux": "8.1.2" + }, "browser": { "jest-when": false } diff --git a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx index 02d5910a9cb..e6328eea822 100644 --- a/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx +++ b/components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' -import { describe, beforeEach, afterEach } from 'vitest' +import { describe, beforeEach, afterEach, vi, expect } 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 { COLORS } from '../../../helix-design-system' @@ -16,7 +17,7 @@ describe('CheckboxField', () => { beforeEach(() => { props = { - onChange: jest.fn(), + onChange: vi.fn(), value: false, name: 'mockCheckboxField', label: 'checkMockCheckboxField', @@ -26,7 +27,7 @@ describe('CheckboxField', () => { }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders label with correct style', () => { diff --git a/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx index c3d909c6eb4..071e205776f 100644 --- a/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx @@ -1,5 +1,7 @@ -import 'jest-styled-components' import * as React from 'react' +import { describe, it, beforeEach, expect } from 'vitest' +import { screen } from '@testing-library/react' +import '@testing-library/jest-dom/vitest' import { renderWithProviders } from '../../../testing/utils' import { COLORS } from '../../../helix-design-system' import { BORDERS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants' @@ -20,8 +22,8 @@ describe('AlertPrimaryButton', () => { }) it('renders alert primary button with text', () => { - const { getByText } = render(props) - const button = getByText('alert primary button') + render(props) + const button = screen.getByText('alert primary button') expect(button).toHaveStyle(`background-color: ${COLORS.red50}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}` @@ -38,16 +40,8 @@ describe('AlertPrimaryButton', () => { it('renders alert primary button with text and disabled', () => { props.disabled = true - const { getByText } = render(props) - const button = getByText('alert primary button') + render(props) + const button = screen.getByText('alert primary button') expect(button).toBeDisabled() }) - - it('applies the correct states to the button - hover', () => { - const { getByText } = render(props) - const button = getByText('alert primary button') - expect(button).toHaveStyleRule('box-shadow', '0 0 0', { - modifier: ':hover', - }) - }) }) diff --git a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx index dc2604a6dab..457fc8f2637 100644 --- a/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx @@ -1,5 +1,7 @@ -import 'jest-styled-components' import * as React from 'react' +import { describe, it, beforeEach, expect } from 'vitest' +import { fireEvent, screen } from '@testing-library/react' +import '@testing-library/jest-dom/vitest' import { renderWithProviders } from '../../../testing/utils' import { COLORS } from '../../../helix-design-system' import { BORDERS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants' @@ -19,9 +21,9 @@ describe('PrimaryButton', () => { }) it('renders primary button with text', () => { - const { getByText } = render(props) - const button = getByText('primary button') - expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`) + render(props) + const button = screen.getByText('primary button') + expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}` ) @@ -38,53 +40,38 @@ describe('PrimaryButton', () => { it('renders primary button with text and disabled', () => { props.disabled = true - const { getByText } = render(props) - const button = getByText('primary button') + render(props) + const button = screen.getByText('primary button') expect(button).toBeDisabled() expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`) expect(button).toHaveStyle(`color: ${COLORS.grey50}`) }) it('applies the correct states to the button - focus', () => { - const { getByText } = render(props) - const button = getByText('primary button') - expect(button).toHaveStyleRule('background-color', `${COLORS.blue55}`, { - modifier: ':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', () => { - const { getByText } = render(props) - const button = getByText('primary button') - expect(button).toHaveStyleRule('background-color', `${COLORS.blue55}`, { - modifier: ':hover', - }) - }) - - it('applies the correct states to the button - active', () => { - const { getByText } = render(props) - const button = getByText('primary button') - expect(button).toHaveStyleRule('background-color', `${COLORS.blue60}`, { - modifier: ':active', - }) + 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 - focus-visible', () => { - const { getByText } = render(props) - const button = getByText('primary button') - expect(button).toHaveStyleRule( - 'box-shadow', - `0 0 0 3px ${COLORS.yellow50}`, - { - modifier: ':focus-visible', - } - ) + 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}`) }) it('renders primary button with text and different background color', () => { props.backgroundColor = COLORS.red50 - const { getByText } = render(props) - const button = getByText('primary button') + render(props) + const button = screen.getByText('primary button') expect(button).toHaveStyle(`background-color: ${COLORS.red50}`) expect(button).toHaveStyle(`color: ${COLORS.white}`) }) diff --git a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx index 2fb1f4079c5..a5f2b29ed1a 100644 --- a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx @@ -1,5 +1,7 @@ -import 'jest-styled-components' import * as React from 'react' +import { describe, it, beforeEach, expect } from 'vitest' +import { screen } from '@testing-library/react' +import '@testing-library/jest-dom/vitest' import { renderWithProviders } from '../../../testing/utils' import { BORDERS, TYPOGRAPHY, SPACING } from '../../../ui-style-constants' import { COLORS } from '../../../helix-design-system' @@ -20,8 +22,8 @@ describe('SecondaryButton', () => { }) it('renders primary button with text', () => { - const { getByText } = render(props) - const button = getByText('secondary button') + render(props) + const button = screen.getByText('secondary button') expect(button).toHaveStyle(`background-color: ${COLORS.transparent}`) expect(button).toHaveStyle( `padding: ${SPACING.spacing8} ${SPACING.spacing16}` @@ -33,40 +35,20 @@ describe('SecondaryButton', () => { expect(button).toHaveStyle( `text-transform: ${TYPOGRAPHY.textTransformNone}` ) - expect(button).toHaveStyle(`color: ${COLORS.blue50}`) + expect(button).toHaveStyle(`color: ${COLORS.blue55}`) }) it('renders secondary button with text and disabled', () => { props.disabled = true - const { getByText } = render(props) - const button = getByText('secondary button') + render(props) + const button = screen.getByText('secondary button') expect(button).toBeDisabled() }) - it('applies the correct states to the button - hover', () => { - const { getByText } = render(props) - const button = getByText('secondary button') - expect(button).toHaveStyleRule('box-shadow', '0 0 0', { - modifier: ':hover', - }) - }) - - it('applies the correct states to the button - focus-visible', () => { - const { getByText } = render(props) - const button = getByText('secondary button') - expect(button).toHaveStyleRule( - 'box-shadow', - `0 0 0 3px ${COLORS.yellow50}`, - { - modifier: ':focus-visible', - } - ) - }) - it('renders secondary button with text and different background color', () => { props.color = COLORS.red50 - const { getByText } = render(props) - const button = getByText('secondary button') + render(props) + const button = screen.getByText('secondary button') expect(button).toHaveStyle(`color: ${COLORS.red50}`) }) }) diff --git a/components/src/forms/__tests__/DeprecatedCheckboxField.test.tsx b/components/src/forms/__tests__/DeprecatedCheckboxField.test.tsx index caa4206ba43..aee3a745784 100644 --- a/components/src/forms/__tests__/DeprecatedCheckboxField.test.tsx +++ b/components/src/forms/__tests__/DeprecatedCheckboxField.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('DeprecatedCheckboxField', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/DropdownField.test.tsx b/components/src/forms/__tests__/DropdownField.test.tsx index 3137327e6c1..7e39375e08e 100644 --- a/components/src/forms/__tests__/DropdownField.test.tsx +++ b/components/src/forms/__tests__/DropdownField.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('DropdownField', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/InputField.test.tsx b/components/src/forms/__tests__/InputField.test.tsx index 34f85779a3e..7c385f0d3d3 100644 --- a/components/src/forms/__tests__/InputField.test.tsx +++ b/components/src/forms/__tests__/InputField.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('InputField', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/Select.test.tsx b/components/src/forms/__tests__/Select.test.tsx index a4f66e143b4..15d79208764 100644 --- a/components/src/forms/__tests__/Select.test.tsx +++ b/components/src/forms/__tests__/Select.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('Select', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/SelectField.test.tsx b/components/src/forms/__tests__/SelectField.test.tsx index 2516876fd0d..1f0d14e7744 100644 --- a/components/src/forms/__tests__/SelectField.test.tsx +++ b/components/src/forms/__tests__/SelectField.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('SelectField', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/forms/__tests__/ToggleField.test.tsx b/components/src/forms/__tests__/ToggleField.test.tsx index 96cb7e5ec77..93e459a6824 100644 --- a/components/src/forms/__tests__/ToggleField.test.tsx +++ b/components/src/forms/__tests__/ToggleField.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('ToggleField', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx b/components/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx index 394a29aef30..089565dc2dd 100644 --- a/components/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx +++ b/components/src/hardware-sim/Labware/__tests__/LabwareRender.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react' -import { render } from '@testing-library/react' -import { resetAllWhenMocks, when } from 'jest-when' -import _uncasted_troughFixture12 from '@opentrons/shared-data/labware/fixtures/2/fixture_12_trough_v2.json' +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, @@ -11,71 +13,61 @@ import { import { LabwareRender, WELL_LABEL_OPTIONS } from '../LabwareRender' import type { LabwareDefinition2 } from '@opentrons/shared-data' -jest.mock('../labwareInternals') +vi.mock('../labwareInternals') -const mockStaticLabware = StaticLabware as jest.MockedFunction< - typeof StaticLabware -> -const mockWellLabels = WellLabels as jest.MockedFunction -const mockStrokedWells = StrokedWells as jest.MockedFunction< - typeof StrokedWells -> - -const troughFixture12 = _uncasted_troughFixture12 as LabwareDefinition2 +const troughFixture12 = fixture12Trough as LabwareDefinition2 describe('LabwareRender', () => { beforeEach(() => { - when(mockStaticLabware) + when(StaticLabware) .calledWith(componentPropsMatcher({ definition: troughFixture12 })) - .mockReturnValue(
mock static labware
) - }) - afterEach(() => { - resetAllWhenMocks() + .thenReturn(
mock static labware
) }) + it('should render a static labware component', () => { const props = { definition: troughFixture12 } - const { getByText } = render( + render( ) - getByText('mock static labware') + screen.getByText('mock static labware') }) it('should render stroked wells', () => { const props = { definition: troughFixture12, wellStroke: { A1: 'blue' } } - when(mockStrokedWells) + when(StrokedWells) .calledWith( componentPropsMatcher({ definition: troughFixture12, strokeByWell: { A1: 'blue' }, }) ) - .mockReturnValue(
mock stroked wells
) - const { getByText } = render( + .thenReturn(
mock stroked wells
) + render( ) - getByText('mock stroked wells') + screen.getByText('mock stroked wells') }) it('should render well labels', () => { const props = { definition: troughFixture12, wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE, } - when(mockWellLabels) + when(WellLabels) .calledWith( componentPropsMatcher({ definition: troughFixture12, wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE, }) ) - .mockReturnValue(
mock well labels
) - const { getByText } = render( + .thenReturn(
mock well labels
) + render( ) - getByText('mock well labels') + screen.getByText('mock well labels') }) }) diff --git a/components/src/hardware-sim/Labware/labwareInternals/__tests__/StrokedWells.test.tsx b/components/src/hardware-sim/Labware/labwareInternals/__tests__/StrokedWells.test.tsx index 69aee1ada12..e4b8c99581c 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/__tests__/StrokedWells.test.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/__tests__/StrokedWells.test.tsx @@ -1,36 +1,31 @@ import * as React from 'react' -import { render } from '@testing-library/react' -import _uncasted_troughFixture12 from '@opentrons/shared-data/labware/fixtures/2/fixture_12_trough_v2.json' +import { describe, it, vi } from 'vitest' +import { render, screen } from '@testing-library/react' +import '@testing-library/jest-dom/vitest' +import { LabwareDefinition2, fixture12Trough } from '@opentrons/shared-data' import { StrokedWells } from '../StrokedWells' import { WellComponent as Well } from '../Well' -import type { LabwareDefinition2 } from '@opentrons/shared-data' -jest.mock('../Well') +vi.mock('../Well') -const troughFixture12 = _uncasted_troughFixture12 as LabwareDefinition2 - -const mockWell = Well as jest.MockedFunction +const troughFixture12 = fixture12Trough as LabwareDefinition2 describe('StrokedWells', () => { - beforeEach(() => {}) - afterEach(() => { - jest.restoreAllMocks() - }) it('should render a series of wells with the given stroke', () => { - mockWell.mockImplementation(({ stroke, wellName }) => + vi.mocked(Well).mockImplementation(({ stroke, wellName }) => // eslint-disable-next-line @typescript-eslint/restrict-template-expressions { return
{`well ${wellName} with stroke ${stroke}`}
} ) - const { getByText } = render( + render( ) - getByText('well A1 with stroke blue') - getByText('well A2 with stroke blue') + screen.getByText('well A1 with stroke blue') + screen.getByText('well A2 with stroke blue') }) }) diff --git a/components/src/hardware-sim/Labware/labwareInternals/__tests__/WellLabels.test.tsx b/components/src/hardware-sim/Labware/labwareInternals/__tests__/WellLabels.test.tsx index a8cbcec37c3..61f9c77abaf 100644 --- a/components/src/hardware-sim/Labware/labwareInternals/__tests__/WellLabels.test.tsx +++ b/components/src/hardware-sim/Labware/labwareInternals/__tests__/WellLabels.test.tsx @@ -1,11 +1,15 @@ import * as React from 'react' -import { render } from '@testing-library/react' -import { LabwareDefinition2 } from '@opentrons/shared-data' -import _uncasted_troughFixture12 from '@opentrons/shared-data/labware/fixtures/2/fixture_12_trough_v2.json' +import { describe, it, expect } from 'vitest' +import { render, screen } from '@testing-library/react' +import '@testing-library/jest-dom/vitest' +import { + LabwareDefinition2, + fixture12Trough as _fixture12Trough, +} from '@opentrons/shared-data' import { WellLabels } from '../WellLabels' import { WELL_LABEL_OPTIONS } from '../../LabwareRender' -const troughFixture12 = _uncasted_troughFixture12 as LabwareDefinition2 +const troughFixture12 = _fixture12Trough as LabwareDefinition2 describe('WellLabels', () => { it('should render well labels outside of the labware', () => { @@ -14,12 +18,12 @@ describe('WellLabels', () => { definition: troughFixture12, wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE, } - const { getAllByTestId } = render( + render( ) - const wellLabels = getAllByTestId('WellsLabels_show_inside') + const wellLabels = screen.getAllByTestId('WellsLabels_show_inside') expect(wellLabels.length).toBe(13) // 1 label for the single "A" row + 12 labels for the trough columns expect(wellLabels[0]).toHaveTextContent('A') // assertions for each of the numbered columns, skipping the first well label which has the letter row @@ -35,12 +39,12 @@ describe('WellLabels', () => { definition: troughFixture12, wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE, } - const { getAllByTestId } = render( + render( ) - const wellLabels = getAllByTestId('WellsLabels_show_outside') + const wellLabels = screen.getAllByTestId('WellsLabels_show_outside') expect(wellLabels.length).toBe(13) // 1 label for the single "A" row + 12 labels for the trough columns expect(wellLabels[0]).toHaveTextContent('A') // assertions for each of the numbered columns, skipping the first well label which has the letter row @@ -60,12 +64,12 @@ describe('WellLabels', () => { color: 'blue', }, } - const { getAllByTestId } = render( + render( ) - const wellLabels = getAllByTestId('WellsLabels_show_outside') + const wellLabels = screen.getAllByTestId('WellsLabels_show_outside') wellLabels.forEach(wellLabel => expect(wellLabel.getAttribute('fill')).toBe('blue') ) @@ -77,12 +81,12 @@ describe('WellLabels', () => { wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_OUTSIDE, wellLabelColor: 'red', } - const { getAllByTestId } = render( + render( ) - const wellLabels = getAllByTestId('WellsLabels_show_outside') + const wellLabels = screen.getAllByTestId('WellsLabels_show_outside') wellLabels.forEach(wellLabel => expect(wellLabel.getAttribute('fill')).toBe('red') ) diff --git a/components/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx b/components/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx index e31ee337dfb..1d37e6b4648 100644 --- a/components/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx +++ b/components/src/hardware-sim/Pipette/__tests__/EightEmanatingNozzles.test.tsx @@ -1,24 +1,17 @@ import * as React from 'react' +import { describe, it, expect, vi, beforeEach } from 'vitest' import { render } from '@testing-library/react' -import { when } from 'jest-when' -import { anyProps } from '../../../testing/utils' import { EightEmanatingNozzles } from '../EightEmanatingNozzles' import { EmanatingNozzle } from '../EmanatingNozzle' -jest.mock('../EmanatingNozzle') - -const mockEmanatingNozzle = EmanatingNozzle as jest.MockedFunction< - typeof EmanatingNozzle -> +vi.mock('../EmanatingNozzle') describe('EightEmanatingNozzles', () => { beforeEach(() => { - when(mockEmanatingNozzle) - .calledWith(anyProps()) - .mockReturnValue(
mock emanating nozzle
) + vi.mocked(EmanatingNozzle).mockReturnValue(
mock emanating nozzle
) }) it('should render eight emanating nozzles', () => { render() - expect(mockEmanatingNozzle).toHaveBeenCalledTimes(8) + expect(EmanatingNozzle).toHaveBeenCalledTimes(8) }) }) diff --git a/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx b/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx index 31479495620..2c01475da16 100644 --- a/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx +++ b/components/src/hardware-sim/Pipette/__tests__/EmanatingNozzle.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import { describe, it, expect } from 'vitest' import { render } from '@testing-library/react' import { C_SELECTED_DARK, C_TRANSPARENT } from '../../../styles' import { EmanatingNozzle } from '../EmanatingNozzle' diff --git a/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx b/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx index a1831cf2e68..dc3a4969912 100644 --- a/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx +++ b/components/src/hardware-sim/Pipette/__tests__/PipetteRender.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react' -import { when, resetAllWhenMocks } from 'jest-when' -import { render } from '@testing-library/react' -import _uncasted_fixtureTiprack300Ul from '@opentrons/shared-data/labware/fixtures/2/fixture_tiprack_300_ul.json' -import { anyProps, partialComponentPropsMatcher } from '../../../testing/utils' +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 { RobotCoordsForeignDiv } from '../../Deck/RobotCoordsForeignDiv' import { PipetteRender } from '../PipetteRender' import { EmanatingNozzle } from '../EmanatingNozzle' @@ -16,117 +17,84 @@ import { import type { LabwareDefinition2 } from '@opentrons/shared-data' -jest.mock('../../Deck/RobotCoordsForeignDiv') -jest.mock('../EmanatingNozzle') -jest.mock('../EightEmanatingNozzles') +vi.mock('../../Deck/RobotCoordsForeignDiv') +vi.mock('../EmanatingNozzle') +vi.mock('../EightEmanatingNozzles') -const fixtureTiprack300Ul = _uncasted_fixtureTiprack300Ul as LabwareDefinition2 +const fixtureTiprack300Ul = _fixtureTiprack300ul as LabwareDefinition2 -const mockRobotCoordsForeignDiv = RobotCoordsForeignDiv as jest.MockedFunction< - typeof RobotCoordsForeignDiv -> - -const mockEmanatingNozzle = EmanatingNozzle as jest.MockedFunction< - typeof EmanatingNozzle -> - -const mockEightEmanatingNozzles = EightEmanatingNozzles as jest.MockedFunction< - typeof EightEmanatingNozzles -> +const render = (props: React.ComponentProps) => { + return renderWithProviders()[0] +} describe('PipetteRender', () => { + let props: React.ComponentProps beforeEach(() => { - when(mockRobotCoordsForeignDiv).mockReturnValue(
) - }) - - afterEach(() => { - resetAllWhenMocks() + props = { + labwareDef: fixtureTiprack300Ul, + pipetteName: 'p1000_single', + } + vi.mocked(RobotCoordsForeignDiv).mockReturnValue(
) }) describe('when the pipette is single channel', () => { beforeEach(() => { - when(mockRobotCoordsForeignDiv) - .calledWith( - partialComponentPropsMatcher({ - width: SINGLE_CHANNEL_PIPETTE_WIDTH, - height: SINGLE_CHANNEL_PIPETTE_HEIGHT, - }) - ) - .mockImplementation(({ children }) => ( -
- {`rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`}{' '} - {children} -
- )) + vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => ( +
+ {`rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}`}{' '} + {children} +
+ )) - when(mockEmanatingNozzle) + when(EmanatingNozzle) .calledWith(anyProps()) - .mockReturnValue(
mock emanating nozzle
) + .thenReturn(
mock emanating nozzle
) }) it('should render a rectangle with the correct dimensions', () => { - const { getByText } = render( - - ) - getByText( + render(props) + screen.getByText( `rectangle with width ${SINGLE_CHANNEL_PIPETTE_WIDTH} and height ${SINGLE_CHANNEL_PIPETTE_HEIGHT}` ) - mockEmanatingNozzle.mockRestore() + vi.mocked(EmanatingNozzle).mockRestore() }) it('should render a single emanating nozzle', () => { - const { getByText } = render( - - ) - getByText('mock emanating nozzle') - expect(mockEightEmanatingNozzles).not.toHaveBeenCalled() + render(props) + screen.getByText('mock emanating nozzle') + expect(EightEmanatingNozzles).not.toHaveBeenCalled() }) }) describe('when the pipette is 8 channel', () => { beforeEach(() => { - when(mockRobotCoordsForeignDiv) - .calledWith( - partialComponentPropsMatcher({ - width: MULTI_CHANNEL_PIPETTE_WIDTH, - height: MULTI_CHANNEL_PIPETTE_HEIGHT, - }) - ) - .mockImplementation(({ children }) => ( -
- {`rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`}{' '} - {children} -
- )) + vi.mocked(RobotCoordsForeignDiv).mockImplementation(({ children }) => ( +
+ {`rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}`}{' '} + {children} +
+ )) - when(mockEightEmanatingNozzles) - .calledWith(anyProps()) - .mockReturnValue(
mock eight emanating nozzles
) + vi.mocked(EightEmanatingNozzles).mockReturnValue( +
mock eight emanating nozzles
+ ) }) it('should render a rectangle with the correct dimensions', () => { - const { getByText } = render( - - ) - getByText( + props = { + ...props, + pipetteName: 'p10_multi', + } + render(props) + screen.getByText( `rectangle with width ${MULTI_CHANNEL_PIPETTE_WIDTH} and height ${MULTI_CHANNEL_PIPETTE_HEIGHT}` ) - mockEightEmanatingNozzles.mockRestore() + vi.mocked(EightEmanatingNozzles).mockRestore() }) it('should render eight emanating nozzles', () => { - const { getByText } = render( - - ) - getByText('mock eight emanating nozzles') + props = { + ...props, + pipetteName: 'p10_multi', + } + render(props) + screen.getByText('mock eight emanating nozzles') }) }) }) diff --git a/components/src/hardware-sim/ProtocolDeck/utils/__tests__/getLabwareInforByLiquidId.test.ts b/components/src/hardware-sim/ProtocolDeck/utils/__tests__/getLabwareInforByLiquidId.test.ts index 68eeb31a1d6..2f43a9a2dc4 100644 --- a/components/src/hardware-sim/ProtocolDeck/utils/__tests__/getLabwareInforByLiquidId.test.ts +++ b/components/src/hardware-sim/ProtocolDeck/utils/__tests__/getLabwareInforByLiquidId.test.ts @@ -1,3 +1,4 @@ +import { describe, it, expect } from 'vitest' import { RunTimeCommand } from '@opentrons/shared-data' import { getLabwareInfoByLiquidId } from '../getLabwareInfoByLiquidId' diff --git a/components/src/hooks/__tests__/useConditionalConfirm.test.tsx b/components/src/hooks/__tests__/useConditionalConfirm.test.tsx index e507afa777c..8405757f4a2 100644 --- a/components/src/hooks/__tests__/useConditionalConfirm.test.tsx +++ b/components/src/hooks/__tests__/useConditionalConfirm.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('useConditionalConfirm', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/useDrag.test.ts b/components/src/hooks/__tests__/useDrag.test.ts index d8f56926bf4..38b0d9dc708 100644 --- a/components/src/hooks/__tests__/useDrag.test.ts +++ b/components/src/hooks/__tests__/useDrag.test.ts @@ -1,3 +1,4 @@ +import { describe, it, expect } from 'vitest' import { act, renderHook } from '@testing-library/react' import { useDrag } from '../useDrag' import type { ElementPosition } from '../useDrag' diff --git a/components/src/hooks/__tests__/useIdle.test.ts b/components/src/hooks/__tests__/useIdle.test.ts index 09ef34dc0a1..8063c317325 100644 --- a/components/src/hooks/__tests__/useIdle.test.ts +++ b/components/src/hooks/__tests__/useIdle.test.ts @@ -1,3 +1,4 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest' import { renderHook } from '@testing-library/react' import { useIdle } from '../useIdle' @@ -14,7 +15,7 @@ const MOCK_OPTIONS = { describe('useIdle', () => { beforeEach(() => { - jest.useFakeTimers() + vi.useFakeTimers({ shouldAdvanceTime: true }) }) it('should return the default initialState', () => { diff --git a/components/src/hooks/__tests__/useInterval.test.tsx b/components/src/hooks/__tests__/useInterval.test.tsx index bc8626bac10..49675e8db2a 100644 --- a/components/src/hooks/__tests__/useInterval.test.tsx +++ b/components/src/hooks/__tests__/useInterval.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('useInterval hook', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/useLongPress.test.ts b/components/src/hooks/__tests__/useLongPress.test.ts index e671309d91d..f324f5634ff 100644 --- a/components/src/hooks/__tests__/useLongPress.test.ts +++ b/components/src/hooks/__tests__/useLongPress.test.ts @@ -1,3 +1,4 @@ +import { describe, it, expect } from 'vitest' import { act, renderHook, waitFor } from '@testing-library/react' import { useLongPress } from '../useLongPress' diff --git a/components/src/hooks/__tests__/useMountEffect.test.tsx b/components/src/hooks/__tests__/useMountEffect.test.tsx index 71179291375..2614f91101b 100644 --- a/components/src/hooks/__tests__/useMountEffect.test.tsx +++ b/components/src/hooks/__tests__/useMountEffect.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('useMountEffect hook', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/usePrevious.test.tsx b/components/src/hooks/__tests__/usePrevious.test.tsx index 92f12e38d85..7f130f2688d 100644 --- a/components/src/hooks/__tests__/usePrevious.test.tsx +++ b/components/src/hooks/__tests__/usePrevious.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('usePrevious hook', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/useScrolling.test.tsx b/components/src/hooks/__tests__/useScrolling.test.tsx index 67397621a8e..bb4c78a59f4 100644 --- a/components/src/hooks/__tests__/useScrolling.test.tsx +++ b/components/src/hooks/__tests__/useScrolling.test.tsx @@ -1,15 +1,16 @@ +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' import { renderHook, act } from '@testing-library/react' import { useScrolling } from '../' describe('useScrolling', () => { beforeEach(() => { - jest.useFakeTimers() + vi.useFakeTimers() }) afterEach(() => { - jest.resetAllMocks() - jest.clearAllTimers() - jest.useRealTimers() + vi.resetAllMocks() + vi.clearAllTimers() + vi.useRealTimers() }) it('returns false when there is no scrolling', () => { @@ -29,6 +30,7 @@ describe('useScrolling', () => { }) it('returns false after scrolling stops', () => { + vi.useFakeTimers({ shouldAdvanceTime: true }) const ref = document.createElement('div') const { result } = renderHook(() => useScrolling(ref)) ref.scrollTop = 10 @@ -37,9 +39,8 @@ describe('useScrolling', () => { }) expect(result.current).toBe(true) act(() => { - jest.runTimersToTime(300) + vi.advanceTimersByTime(300) }) - jest.runTimersToTime(300) expect(result.current).toBe(false) }) }) diff --git a/components/src/hooks/__tests__/useSwipe.test.tsx b/components/src/hooks/__tests__/useSwipe.test.tsx index 21f409ac714..f8ace05ba2a 100644 --- a/components/src/hooks/__tests__/useSwipe.test.tsx +++ b/components/src/hooks/__tests__/useSwipe.test.tsx @@ -1,3 +1,4 @@ +import { describe, it, expect } from 'vitest' import { act, renderHook } from '@testing-library/react' import { useSwipe } from '..' diff --git a/components/src/hooks/__tests__/useTimeout.test.tsx b/components/src/hooks/__tests__/useTimeout.test.tsx index 33c48337018..4b9e2bd34dc 100644 --- a/components/src/hooks/__tests__/useTimeout.test.tsx +++ b/components/src/hooks/__tests__/useTimeout.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('useTimeouthook', () => { it.todo('replace deprecated enzyme test') }) diff --git a/components/src/hooks/__tests__/useToggle.test.tsx b/components/src/hooks/__tests__/useToggle.test.tsx index b6ad18aa94d..481d94d1085 100644 --- a/components/src/hooks/__tests__/useToggle.test.tsx +++ b/components/src/hooks/__tests__/useToggle.test.tsx @@ -1,3 +1,5 @@ +import { describe, it } from 'vitest' + describe('useToggle hook', () => { it.todo('replace deprecated enzyme test') }) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cacac02cac7..7d2ed3bcfeb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -857,6 +857,10 @@ importers: styled-components: specifier: 5.3.6 version: 5.3.6(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) + devDependencies: + react-redux: + specifier: 8.1.2 + version: 8.1.2(@types/react-dom@18.2.0)(@types/react@18.2.51)(react-dom@18.2.0)(react@18.2.0)(redux@4.0.5) discovery-client: dependencies: @@ -6634,7 +6638,6 @@ packages: /@types/use-sync-external-store@0.0.3: resolution: {integrity: sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==} - dev: false /@types/uuid@3.4.13: resolution: {integrity: sha512-pAeZeUbLE4Z9Vi9wsWV2bYPTweEHeJJy0G4pEjOA/FSvy1Ad5U5Km8iDV6TKre1mjBiVNfAdVHKruP8bAh4Q5A==} @@ -19348,7 +19351,6 @@ packages: react-is: 18.2.0 redux: 4.0.5 use-sync-external-store: 1.2.0(react@18.2.0) - dev: false /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} @@ -22815,7 +22817,6 @@ packages: react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: react: 18.2.0 - dev: false /use@3.1.1: resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}