Skip to content

Commit c479d4a

Browse files
kojikoji
committed
update the rest tests for vitest migration
1 parent 60d03ef commit c479d4a

7 files changed

+203
-234
lines changed

‎app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/LabwareListItem.test.tsx

+65-67
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import * as React from 'react'
2-
import { fireEvent } from '@testing-library/react'
3-
import { useCreateLiveCommandMutation } from '@opentrons/react-api-client'
2+
import { fireEvent, screen } from '@testing-library/react'
3+
import { describe, it, beforeEach, vi, expect } from 'vitest'
44
import { StaticRouter } from 'react-router-dom'
5-
import { renderWithProviders } from '@opentrons/components'
6-
import fixture_adapter from '@opentrons/shared-data/labware/definitions/2/opentrons_96_pcr_adapter/1.json'
5+
6+
import { opentrons96PcrAdapterV1 } from '@opentrons/shared-data'
7+
import { useCreateLiveCommandMutation } from '@opentrons/react-api-client'
8+
9+
import { renderWithProviders } from '../../../../../__testing-utils__'
710
import { i18n } from '../../../../../i18n'
811
import {
912
mockHeaterShaker,
@@ -24,17 +27,10 @@ import type {
2427
import type { AttachedModule } from '../../../../../redux/modules/types'
2528
import type { ModuleRenderInfoForProtocol } from '../../../hooks'
2629

27-
jest.mock('../SecureLabwareModal')
28-
jest.mock('@opentrons/react-api-client')
29-
30-
const mockSecureLabwareModal = SecureLabwareModal as jest.MockedFunction<
31-
typeof SecureLabwareModal
32-
>
33-
const mockUseLiveCommandMutation = useCreateLiveCommandMutation as jest.MockedFunction<
34-
typeof useCreateLiveCommandMutation
35-
>
30+
vi.mock('../SecureLabwareModal')
31+
vi.mock('@opentrons/react-api-client')
3632

37-
const mockAdapterDef = fixture_adapter as LabwareDefinition2
33+
const mockAdapterDef = opentrons96PcrAdapterV1 as LabwareDefinition2
3834
const mockAdapterId = 'mockAdapterId'
3935
const mockNestedLabwareDisplayName = 'nested labware display name'
4036
const mockLocationInfo = {
@@ -82,17 +78,19 @@ const render = (props: React.ComponentProps<typeof LabwareListItem>) => {
8278
}
8379

8480
describe('LabwareListItem', () => {
85-
const mockCreateLiveCommand = jest.fn()
81+
const mockCreateLiveCommand = vi.fn()
8682
beforeEach(() => {
8783
mockCreateLiveCommand.mockResolvedValue(null)
88-
mockSecureLabwareModal.mockReturnValue(<div>mock secure labware modal</div>)
89-
mockUseLiveCommandMutation.mockReturnValue({
84+
vi.mocked(SecureLabwareModal).mockReturnValue(
85+
<div>mock secure labware modal</div>
86+
)
87+
vi.mocked(useCreateLiveCommandMutation).mockReturnValue({
9088
createLiveCommand: mockCreateLiveCommand,
9189
} as any)
9290
})
9391

9492
it('renders the correct info for a thermocycler (OT2), clicking on secure labware instructions opens the modal', () => {
95-
const { getByText } = render({
93+
render({
9694
commands: [],
9795
nickName: mockNickName,
9896
definition: mockLabwareDef,
@@ -111,18 +109,18 @@ describe('LabwareListItem', () => {
111109
isFlex: false,
112110
nestedLabwareInfo: null,
113111
})
114-
getByText('Mock Labware Definition')
115-
getByText('nickName')
116-
getByText('Thermocycler Module GEN1')
117-
getByText('7,8,10,11')
118-
const button = getByText('Secure labware instructions')
112+
screen.getByText('Mock Labware Definition')
113+
screen.getByText('nickName')
114+
screen.getByText('Thermocycler Module GEN1')
115+
screen.getByText('7,8,10,11')
116+
const button = screen.getByText('Secure labware instructions')
119117
fireEvent.click(button)
120-
getByText('mock secure labware modal')
121-
getByText('nickName')
118+
screen.getByText('mock secure labware modal')
119+
screen.getByText('nickName')
122120
})
123121

124122
it('renders the correct info for a thermocycler (OT3)', () => {
125-
const { getByText } = render({
123+
render({
126124
commands: [],
127125
nickName: mockNickName,
128126
definition: mockLabwareDef,
@@ -141,13 +139,13 @@ describe('LabwareListItem', () => {
141139
isFlex: true,
142140
nestedLabwareInfo: null,
143141
})
144-
getByText('Mock Labware Definition')
145-
getByText('A1+B1')
146-
getByText('Thermocycler Module GEN1')
142+
screen.getByText('Mock Labware Definition')
143+
screen.getByText('A1+B1')
144+
screen.getByText('Thermocycler Module GEN1')
147145
})
148146

149147
it('renders the correct info for a labware on top of a magnetic module', () => {
150-
const { getByText, getByTestId } = render({
148+
render({
151149
commands: [],
152150
nickName: mockNickName,
153151
definition: mockLabwareDef,
@@ -172,17 +170,17 @@ describe('LabwareListItem', () => {
172170
isFlex: false,
173171
nestedLabwareInfo: null,
174172
})
175-
getByText('Mock Labware Definition')
176-
getByTestId('slot_info_7')
177-
getByText('Magnetic Module GEN1')
178-
const button = getByText('Secure labware instructions')
173+
screen.getByText('Mock Labware Definition')
174+
screen.getByTestId('slot_info_7')
175+
screen.getByText('Magnetic Module GEN1')
176+
const button = screen.getByText('Secure labware instructions')
179177
fireEvent.click(button)
180-
getByText('mock secure labware modal')
181-
getByText('nickName')
178+
screen.getByText('mock secure labware modal')
179+
screen.getByText('nickName')
182180
})
183181

184182
it('renders the correct info for a labware on top of a temperature module', () => {
185-
const { getByText, getByTestId } = render({
183+
render({
186184
commands: [],
187185
nickName: mockNickName,
188186
definition: mockLabwareDef,
@@ -206,10 +204,10 @@ describe('LabwareListItem', () => {
206204
isFlex: false,
207205
nestedLabwareInfo: null,
208206
})
209-
getByText('Mock Labware Definition')
210-
getByTestId('slot_info_7')
211-
getByText('Temperature Module GEN1')
212-
getByText('nickName')
207+
screen.getByText('Mock Labware Definition')
208+
screen.getByTestId('slot_info_7')
209+
screen.getByText('Temperature Module GEN1')
210+
screen.getByText('nickName')
213211
})
214212

215213
it('renders the correct info for a labware on an adapter on top of a temperature module', () => {
@@ -240,7 +238,7 @@ describe('LabwareListItem', () => {
240238
},
241239
} as any
242240

243-
const { getByText, getAllByText } = render({
241+
render({
244242
commands: [mockAdapterLoadCommand, mockModuleLoadCommand],
245243
nickName: mockNickName,
246244
definition: mockLabwareDef,
@@ -269,12 +267,12 @@ describe('LabwareListItem', () => {
269267
nestedLabwareDefinition: mockLabwareDef,
270268
},
271269
})
272-
getByText('Mock Labware Definition')
273-
getAllByText('7')
274-
getByText('Temperature Module GEN2')
275-
getByText('mock nested display name')
276-
getByText('nestedLabwareNickName')
277-
getByText('nickName')
270+
screen.getByText('Mock Labware Definition')
271+
screen.getAllByText('7')
272+
screen.getByText('Temperature Module GEN2')
273+
screen.getByText('mock nested display name')
274+
screen.getByText('nestedLabwareNickName')
275+
screen.getByText('nickName')
278276
})
279277

280278
it('renders the correct info for a labware on an adapter on the deck', () => {
@@ -294,7 +292,7 @@ describe('LabwareListItem', () => {
294292
},
295293
} as any
296294

297-
const { getByText } = render({
295+
render({
298296
commands: [mockAdapterLoadCommand],
299297
nickName: mockNickName,
300298
definition: mockLabwareDef,
@@ -311,16 +309,16 @@ describe('LabwareListItem', () => {
311309
nestedLabwareDefinition: mockLabwareDef,
312310
},
313311
})
314-
getByText('Mock Labware Definition')
315-
getByText('A2')
316-
getByText('mock nested display name')
317-
getByText('nestedLabwareNickName')
318-
getByText('nickName')
319-
getByText('On deck')
312+
screen.getByText('Mock Labware Definition')
313+
screen.getByText('A2')
314+
screen.getByText('mock nested display name')
315+
screen.getByText('nestedLabwareNickName')
316+
screen.getByText('nickName')
317+
screen.getByText('On deck')
320318
})
321319

322320
it('renders the correct info for a labware on top of a heater shaker', () => {
323-
const { getByText, getByLabelText, getByTestId } = render({
321+
render({
324322
nickName: mockNickName,
325323
commands: [],
326324
definition: mockLabwareDef,
@@ -344,14 +342,14 @@ describe('LabwareListItem', () => {
344342
isFlex: false,
345343
nestedLabwareInfo: null,
346344
})
347-
getByText('Mock Labware Definition')
348-
getByTestId('slot_info_7')
349-
getByText('Heater-Shaker Module GEN1')
350-
getByText('nickName')
351-
getByText('To add labware, use the toggle to control the latch')
352-
getByText('Labware Latch')
353-
getByText('Secure')
354-
const button = getByLabelText('heater_shaker_7_latch_toggle')
345+
screen.getByText('Mock Labware Definition')
346+
screen.getByTestId('slot_info_7')
347+
screen.getByText('Heater-Shaker Module GEN1')
348+
screen.getByText('nickName')
349+
screen.getByText('To add labware, use the toggle to control the latch')
350+
screen.getByText('Labware Latch')
351+
screen.getByText('Secure')
352+
const button = screen.getByLabelText('heater_shaker_7_latch_toggle')
355353
fireEvent.click(button)
356354
expect(mockCreateLiveCommand).toHaveBeenCalledWith({
357355
command: {
@@ -364,7 +362,7 @@ describe('LabwareListItem', () => {
364362
})
365363

366364
it('renders the correct info for an off deck labware', () => {
367-
const { getByText } = render({
365+
render({
368366
nickName: null,
369367
definition: mockLabwareDef,
370368
initialLocation: 'offDeck',
@@ -376,7 +374,7 @@ describe('LabwareListItem', () => {
376374
isFlex: false,
377375
nestedLabwareInfo: null,
378376
})
379-
getByText('Mock Labware Definition')
380-
getByText('Off deck')
377+
screen.getByText('Mock Labware Definition')
378+
screen.getByText('Off deck')
381379
})
382380
})

‎app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import * as React from 'react'
22
import { StaticRouter } from 'react-router-dom'
3-
import { renderWithProviders } from '@opentrons/components'
3+
import { screen } from '@testing-library/react'
4+
import { describe, it, beforeEach, vi, expect } from 'vitest'
5+
6+
import { renderWithProviders } from '../../../../../__testing-utils__'
47
import { i18n } from '../../../../../i18n'
58
import { mockLabwareDef } from '../../../../LabwarePositionCheck/__fixtures__/mockLabwareDef'
69
import { LabwareListItem } from '../LabwareListItem'
710
import { OffDeckLabwareList } from '../OffDeckLabwareList'
811

9-
jest.mock('../LabwareListItem')
10-
11-
const mockLabwareListItem = LabwareListItem as jest.MockedFunction<
12-
typeof LabwareListItem
13-
>
12+
vi.mock('../LabwareListItem')
1413

1514
const render = (props: React.ComponentProps<typeof OffDeckLabwareList>) => {
1615
return renderWithProviders(
@@ -25,7 +24,9 @@ const render = (props: React.ComponentProps<typeof OffDeckLabwareList>) => {
2524

2625
describe('OffDeckLabwareList', () => {
2726
beforeEach(() => {
28-
mockLabwareListItem.mockReturnValue(<div>mock labware list item</div>)
27+
vi.mocked(LabwareListItem).mockReturnValue(
28+
<div>mock labware list item</div>
29+
)
2930
})
3031
it('renders null if labware items is null', () => {
3132
const { container } = render({
@@ -36,7 +37,7 @@ describe('OffDeckLabwareList', () => {
3637
expect(container.firstChild).toBeNull()
3738
})
3839
it('renders additional offdeck labware info if there is an offdeck labware', () => {
39-
const { getByText } = render({
40+
render({
4041
labwareItems: [
4142
{
4243
nickName: 'nickName',
@@ -49,7 +50,7 @@ describe('OffDeckLabwareList', () => {
4950
isFlex: false,
5051
commands: [],
5152
})
52-
getByText('Additional Off-Deck Labware')
53-
getByText('mock labware list item')
53+
screen.getByText('Additional Off-Deck Labware')
54+
screen.getByText('mock labware list item')
5455
})
5556
})

‎app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/SecureLabwareModal.test.tsx

+19-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react'
2-
import { fireEvent } from '@testing-library/react'
3-
import { renderWithProviders } from '@opentrons/components'
2+
import { fireEvent, screen } from '@testing-library/react'
3+
import { describe, it, beforeEach, vi, expect } from 'vitest'
4+
5+
import { renderWithProviders } from '../../../../../__testing-utils__'
46
import { i18n } from '../../../../../i18n'
57
import { SecureLabwareModal } from '../SecureLabwareModal'
68

@@ -15,15 +17,16 @@ const mockTypeTC = 'thermocyclerModuleType'
1517
describe('SecureLabwareModal', () => {
1618
let props: React.ComponentProps<typeof SecureLabwareModal>
1719
beforeEach(() => {
18-
props = { type: mockTypeMagDeck, onCloseClick: jest.fn() }
20+
props = { type: mockTypeMagDeck, onCloseClick: vi.fn() }
1921
})
22+
2023
it('should render the correct modal for magnetic module type', () => {
21-
const { getByText } = render(props)
22-
getByText('Securing labware to the Magnetic Module')
23-
getByText(
24+
render(props)
25+
screen.getByText('Securing labware to the Magnetic Module')
26+
screen.getByText(
2427
'Opentrons recommends ensuring your labware locks to the Magnetic Module by adjusting the black plate bracket on top of the module.'
2528
)
26-
getByText(
29+
screen.getByText(
2730
'Please note there are two sizes of plate brackets supplied with your module: standard and deep well. These brackets can be removed and swapped by unscrewing the modules thumb screw (the silver knob on the front).'
2831
)
2932
})
@@ -34,19 +37,21 @@ describe('SecureLabwareModal', () => {
3437
fireEvent.click(closeButton)
3538
expect(props.onCloseClick).toHaveBeenCalled()
3639
})
40+
3741
it('should render the correct modal for thermocycler module type', () => {
38-
props = { type: mockTypeTC, onCloseClick: jest.fn() }
39-
const { getByText } = render(props)
40-
getByText('Securing labware to the Thermocycler')
41-
getByText(
42+
props = { type: mockTypeTC, onCloseClick: vi.fn() }
43+
render(props)
44+
screen.getByText('Securing labware to the Thermocycler')
45+
screen.getByText(
4246
'Opentrons recommends securing your labware to the Thermocycler module by closing its latch. Doing so ensures level and accurate plate placement for optimal results.'
4347
)
4448
})
49+
4550
it('should render tc module type modal and call onCloseClick when button is pressed', () => {
46-
props = { type: mockTypeTC, onCloseClick: jest.fn() }
47-
const { getByRole } = render(props)
51+
props = { type: mockTypeTC, onCloseClick: vi.fn() }
52+
render(props)
4853
expect(props.onCloseClick).not.toHaveBeenCalled()
49-
const closeButton = getByRole('button', { name: 'close' })
54+
const closeButton = screen.getByRole('button', { name: 'close' })
5055
fireEvent.click(closeButton)
5156
expect(props.onCloseClick).toHaveBeenCalled()
5257
})

0 commit comments

Comments
 (0)