diff --git a/app/src/organisms/ProtocolsLanding/__tests__/ProtocolOverflowMenu.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/ProtocolOverflowMenu.test.tsx index c7df7543569..0af53c19c91 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/ProtocolOverflowMenu.test.tsx +++ b/app/src/organisms/ProtocolsLanding/__tests__/ProtocolOverflowMenu.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' import { MemoryRouter } from 'react-router-dom' -import { renderWithProviders } from '@opentrons/components' +import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { useTrackEvent, @@ -17,21 +18,11 @@ import { import { ProtocolOverflowMenu } from '../ProtocolOverflowMenu' -jest.mock('../../../redux/analytics') -jest.mock('../../../redux/protocol-storage') +vi.mock('../../../redux/analytics') +vi.mock('../../../redux/protocol-storage') -const mockHandleRunProtocol = jest.fn() -const mockHandleSendProtocolToFlex = jest.fn() - -const mockViewProtocolSourceFolder = viewProtocolSourceFolder as jest.MockedFunction< - typeof viewProtocolSourceFolder -> -const mockRemoveProtocol = removeProtocol as jest.MockedFunction< - typeof removeProtocol -> -const mockUseTrackEvent = useTrackEvent as jest.MockedFunction< - typeof useTrackEvent -> +const mockHandleRunProtocol = vi.fn() +const mockHandleSendProtocolToFlex = vi.fn() const render = () => { return renderWithProviders( @@ -46,32 +37,32 @@ const render = () => { ) } -let mockTrackEvent: jest.Mock +let mockTrackEvent: vi.Mock describe('ProtocolOverflowMenu', () => { beforeEach(() => { - mockTrackEvent = jest.fn() - mockUseTrackEvent.mockReturnValue(mockTrackEvent) + mockTrackEvent = vi.fn() + vi.mocked(useTrackEvent).mockReturnValue(mockTrackEvent) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('should render label when clicking overflowMenu', () => { - const [{ getByTestId, getByText }] = render() - const button = getByTestId('ProtocolOverflowMenu_overflowBtn') + render() + const button = screen.getByTestId('ProtocolOverflowMenu_overflowBtn') fireEvent.click(button) - getByText('Show in folder') - getByText('Start setup') - getByText('Delete') + screen.getByText('Show in folder') + screen.getByText('Start setup') + screen.getByText('Delete') }) it('should call run protocol when clicking Start setup button', () => { - const [{ getByTestId, getByText }] = render() - const button = getByTestId('ProtocolOverflowMenu_overflowBtn') + render() + const button = screen.getByTestId('ProtocolOverflowMenu_overflowBtn') fireEvent.click(button) - const runButton = getByText('Start setup') + const runButton = screen.getByText('Start setup') fireEvent.click(runButton) expect(mockTrackEvent).toHaveBeenCalledWith({ name: ANALYTICS_PROTOCOL_PROCEED_TO_RUN, @@ -93,47 +84,49 @@ describe('ProtocolOverflowMenu', () => { }) it('should call folder open function when clicking show in folder', () => { - const [{ getByTestId, getByText }] = render() - const button = getByTestId('ProtocolOverflowMenu_overflowBtn') + render() + const button = screen.getByTestId('ProtocolOverflowMenu_overflowBtn') fireEvent.click(button) - const folderButton = getByText('Show in folder') + const folderButton = screen.getByText('Show in folder') fireEvent.click(folderButton) - expect(mockViewProtocolSourceFolder).toHaveBeenCalled() + expect(vi.mocked(viewProtocolSourceFolder)).toHaveBeenCalled() }) it('should render modal when clicking delete button', () => { - const [{ getByTestId, getByText, getByRole }] = render() - const button = getByTestId('ProtocolOverflowMenu_overflowBtn') + render() + const button = screen.getByTestId('ProtocolOverflowMenu_overflowBtn') fireEvent.click(button) - const deleteButton = getByText('Delete') + const deleteButton = screen.getByText('Delete') fireEvent.click(deleteButton) - getByText('Delete this protocol?') - getByText( + screen.getByText('Delete this protocol?') + screen.getByText( 'This protocol will be moved to this computer’s trash and may be unrecoverable.' ) - getByRole('button', { name: 'Yes, delete protocol' }) - getByRole('button', { name: 'cancel' }) + screen.getByRole('button', { name: 'Yes, delete protocol' }) + screen.getByRole('button', { name: 'cancel' }) }) it('should call delete function when clicking yes button', () => { - const [{ getByTestId, getByText, getByRole }] = render() - const button = getByTestId('ProtocolOverflowMenu_overflowBtn') + render() + const button = screen.getByTestId('ProtocolOverflowMenu_overflowBtn') fireEvent.click(button) - const deleteButton = getByText('Delete') + const deleteButton = screen.getByText('Delete') fireEvent.click(deleteButton) - const yesButton = getByRole('button', { name: 'Yes, delete protocol' }) + const yesButton = screen.getByRole('button', { + name: 'Yes, delete protocol', + }) fireEvent.click(yesButton) - expect(mockRemoveProtocol).toHaveBeenCalled() + expect(vi.mocked(removeProtocol)).toHaveBeenCalled() }) it('should close modal when clicking cancel button', () => { - const [{ getByTestId, getByText, getByRole, queryByText }] = render() - const button = getByTestId('ProtocolOverflowMenu_overflowBtn') + render() + const button = screen.getByTestId('ProtocolOverflowMenu_overflowBtn') fireEvent.click(button) - const deleteButton = getByText('Delete') + const deleteButton = screen.getByText('Delete') fireEvent.click(deleteButton) - const cancelButton = getByRole('button', { name: 'cancel' }) + const cancelButton = screen.getByRole('button', { name: 'cancel' }) fireEvent.click(cancelButton) - expect(queryByText('Delete this protocol?')).not.toBeInTheDocument() + expect(screen.queryByText('Delete this protocol?')).not.toBeInTheDocument() }) }) diff --git a/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx index 457e467675a..516d38c76c9 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx +++ b/app/src/organisms/ProtocolsLanding/__tests__/UploadInput.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' import { fireEvent, screen } from '@testing-library/react' import { BrowserRouter } from 'react-router-dom' -import { renderWithProviders } from '@opentrons/components' +import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { useTrackEvent, @@ -9,13 +10,13 @@ import { } from '../../../redux/analytics' import { ProtocolUploadInput } from '../ProtocolUploadInput' -jest.mock('../../../redux/analytics') +vi.mock('../../../redux/analytics') -const mockUseTrackEvent = useTrackEvent as jest.Mock +const mockUseTrackEvent = useTrackEvent as vi.Mock describe('ProtocolUploadInput', () => { - let onUpload: jest.MockedFunction<() => {}> - let trackEvent: jest.MockedFunction + let onUpload: vi.MockedFunction<() => {}> + let trackEvent: vi.MockedFunction const render = () => { return renderWithProviders( @@ -28,12 +29,12 @@ describe('ProtocolUploadInput', () => { } beforeEach(() => { - onUpload = jest.fn() - trackEvent = jest.fn() + onUpload = vi.fn() + trackEvent = vi.fn() mockUseTrackEvent.mockReturnValue(trackEvent) }) afterEach(() => { - jest.resetAllMocks() + vi.resetAllMocks() }) it('renders correct contents for empty state', () => { @@ -52,7 +53,7 @@ describe('ProtocolUploadInput', () => { render() const button = screen.getByRole('button', { name: 'Upload' }) const input = screen.getByTestId('file_input') - input.click = jest.fn() + input.click = vi.fn() fireEvent.click(button) expect(input.click).toHaveBeenCalled() }) diff --git a/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx b/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx index dc9e5c0b01a..49243c2b790 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx +++ b/app/src/organisms/ProtocolsLanding/__tests__/hooks.test.tsx @@ -2,6 +2,8 @@ import * as React from 'react' import { Provider } from 'react-redux' import { createStore } from 'redux' import { renderHook } from '@testing-library/react' +import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest' + import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data' import { useSortedProtocols } from '../hooks' @@ -277,12 +279,12 @@ const mockStoredProtocolData = [ ] as StoredProtocolData[] describe('useSortedProtocols', () => { - const store: Store = createStore(jest.fn(), {}) + const store: Store = createStore(vi.fn(), {}) beforeEach(() => { - store.dispatch = jest.fn() + store.dispatch = vi.fn() }) afterEach(() => { - jest.restoreAllMocks() + vi.restoreAllMocks() }) it('should return an object with protocols sorted alphabetically', () => { diff --git a/app/src/organisms/ProtocolsLanding/__tests__/utils.test.ts b/app/src/organisms/ProtocolsLanding/__tests__/utils.test.ts index 8cd0ed765ff..e4383c842b9 100644 --- a/app/src/organisms/ProtocolsLanding/__tests__/utils.test.ts +++ b/app/src/organisms/ProtocolsLanding/__tests__/utils.test.ts @@ -1,3 +1,4 @@ +import { describe, it, expect } from 'vitest' import { getisFlexProtocol, getRobotTypeDisplayName } from '../utils' import type { ProtocolAnalysisOutput } from '@opentrons/shared-data'