Merge branch 'protocol_designer-migrate-webpack-to-vite' of https://g…

…ithub.com/Opentrons/opentrons into protocol_designer-migrate-webpack-to-vite
Opentrons · Feb 29, 2024 · 6ca27b4 · 6ca27b4
2 parents bc85fee + d219837
commit 6ca27b4
Show file tree

Hide file tree

Showing 50 changed files with 1,219 additions and 1,330 deletions.
diff --git a/app-shell/vite.config.ts b/app-shell/vite.config.ts
@@ -18,6 +18,7 @@ export default defineConfig(
         commonjsOptions: {
           transformMixedEsModules: true,
           esmExternals: true,
+          exclude: [/node_modules/],
         },
         lib: {
           entry: {
@@ -32,6 +33,7 @@ export default defineConfig(
         esbuildOptions: {
           target: 'CommonJs',
         },
+        exclude: ['node_modules']
       },
       define: {
         'process.env': process.env,

diff --git a/app/src/assets/localization/en/top_navigation.json b/app/src/assets/localization/en/top_navigation.json
@@ -1,9 +1,10 @@
 {
+  "all_protocols": "All Protocols",
   "attached_pipettes_do_not_match": "Attached pipettes do not match pipettes specified in loaded protocol",
   "calibrate_deck_to_proceed": "Calibrate your deck to proceed",
   "deck_setup": "Deck Setup",
   "devices": "Devices",
-  "instruments": "instruments",
+  "instruments": "Instruments",
   "labware": "Labware",
   "modules": "modules",
   "pipettes_not_calibrated": "Please calibrate all pipettes specified in loaded protocol to proceed",
@@ -14,5 +15,5 @@
   "protocols": "Protocols",
   "robot_settings": "Robot Settings",
   "run": "run",
-  "settings": "settings"
+  "settings": "Settings"
 }
diff --git a/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx b/app/src/organisms/ModuleCard/__tests__/AboutModuleSlideout.test.tsx
@@ -1,27 +1,26 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
 import {
   RUN_STATUS_IDLE,
   RUN_STATUS_RUNNING,
   RUN_STATUS_FINISHING,
 } from '@opentrons/api-client'
+
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
-import { useCurrentRunStatus } from '../../RunTimeControl/hooks'
 import {
   mockMagneticModule,
   mockMagneticModuleGen2,
   mockTemperatureModule,
   mockTemperatureModuleGen2,
   mockThermocycler,
 } from '../../../redux/modules/__fixtures__'
+import { useCurrentRunStatus } from '../../RunTimeControl/hooks'
 import { AboutModuleSlideout } from '../AboutModuleSlideout'
 
-jest.mock('../../RunTimeControl/hooks')
-
-const mockUseCurrentRunStatus = useCurrentRunStatus as jest.MockedFunction<
-  typeof useCurrentRunStatus
->
+vi.mock('../../RunTimeControl/hooks')
 
 const render = (props: React.ComponentProps<typeof AboutModuleSlideout>) => {
   return renderWithProviders(<AboutModuleSlideout {...props} />, {
@@ -35,119 +34,119 @@ describe('AboutModuleSlideout', () => {
     props = {
       module: mockMagneticModule,
       isExpanded: true,
-      onCloseClick: jest.fn(),
-      firmwareUpdateClick: jest.fn(),
+      onCloseClick: vi.fn(),
+      firmwareUpdateClick: vi.fn(),
     }
-    mockUseCurrentRunStatus.mockReturnValue(RUN_STATUS_IDLE)
+    vi.mocked(useCurrentRunStatus).mockReturnValue(RUN_STATUS_IDLE)
   })
   afterEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
   })
 
   it('renders correct info when module is a magnetic module  GEN1 and exit button works correctly', () => {
-    const { getByText, getByRole } = render(props)
-
-    getByText('About Magnetic Module GEN1')
-    getByText('def456')
-    getByText('SERIAL NUMBER')
-    getByText('CURRENT VERSION')
-    getByText('v2.0.0')
-    const button = getByRole('button', { name: /exit/i })
+    render(props)
+
+    screen.getByText('About Magnetic Module GEN1')
+    screen.getByText('def456')
+    screen.getByText('SERIAL NUMBER')
+    screen.getByText('CURRENT VERSION')
+    screen.getByText('v2.0.0')
+    const button = screen.getByRole('button', { name: /exit/i })
     fireEvent.click(button)
     expect(props.onCloseClick).toHaveBeenCalled()
   })
 
   it('renders no banner when run is running', () => {
-    mockUseCurrentRunStatus.mockReturnValue(RUN_STATUS_RUNNING)
-    const { getByText } = render(props)
-
-    getByText('About Magnetic Module GEN1')
-    getByText('def456')
-    getByText('SERIAL NUMBER')
-    getByText('CURRENT VERSION')
-    getByText('v2.0.0')
+    vi.mocked(useCurrentRunStatus).mockReturnValue(RUN_STATUS_RUNNING)
+    render(props)
+
+    screen.getByText('About Magnetic Module GEN1')
+    screen.getByText('def456')
+    screen.getByText('SERIAL NUMBER')
+    screen.getByText('CURRENT VERSION')
+    screen.getByText('v2.0.0')
   })
 
   it('renders no banner when run is finishing', () => {
-    mockUseCurrentRunStatus.mockReturnValue(RUN_STATUS_FINISHING)
-    const { getByText } = render(props)
-
-    getByText('About Magnetic Module GEN1')
-    getByText('def456')
-    getByText('SERIAL NUMBER')
-    getByText('CURRENT VERSION')
-    getByText('v2.0.0')
+    vi.mocked(useCurrentRunStatus).mockReturnValue(RUN_STATUS_FINISHING)
+    render(props)
+
+    screen.getByText('About Magnetic Module GEN1')
+    screen.getByText('def456')
+    screen.getByText('SERIAL NUMBER')
+    screen.getByText('CURRENT VERSION')
+    screen.getByText('v2.0.0')
   })
 
   it('renders correct info when module is a magnetic module GEN2', () => {
     props = {
       module: mockMagneticModuleGen2,
       isExpanded: true,
-      onCloseClick: jest.fn(),
-      firmwareUpdateClick: jest.fn(),
+      onCloseClick: vi.fn(),
+      firmwareUpdateClick: vi.fn(),
     }
-    const { getByText } = render(props)
+    render(props)
 
-    getByText('About Magnetic Module GEN2')
-    getByText('def456')
-    getByText('SERIAL NUMBER')
-    getByText('CURRENT VERSION')
-    getByText('v2.0.0')
+    screen.getByText('About Magnetic Module GEN2')
+    screen.getByText('def456')
+    screen.getByText('SERIAL NUMBER')
+    screen.getByText('CURRENT VERSION')
+    screen.getByText('v2.0.0')
   })
 
   it('renders correct info when module is a temperature module GEN2', () => {
     props = {
       module: mockTemperatureModuleGen2,
       isExpanded: true,
-      onCloseClick: jest.fn(),
-      firmwareUpdateClick: jest.fn(),
+      onCloseClick: vi.fn(),
+      firmwareUpdateClick: vi.fn(),
     }
-    const { getByText } = render(props)
+    render(props)
 
-    getByText('About Temperature Module GEN2')
-    getByText('abc123')
-    getByText('SERIAL NUMBER')
-    getByText('CURRENT VERSION')
-    getByText('v2.0.0')
+    screen.getByText('About Temperature Module GEN2')
+    screen.getByText('abc123')
+    screen.getByText('SERIAL NUMBER')
+    screen.getByText('CURRENT VERSION')
+    screen.getByText('v2.0.0')
   })
 
   it('renders correct info when module is a temperature module GEN1', () => {
     props = {
       module: mockTemperatureModule,
       isExpanded: true,
-      onCloseClick: jest.fn(),
-      firmwareUpdateClick: jest.fn(),
+      onCloseClick: vi.fn(),
+      firmwareUpdateClick: vi.fn(),
     }
-    const { getByText } = render(props)
+    render(props)
 
-    getByText('About Temperature Module GEN1')
-    getByText('abc123')
-    getByText('SERIAL NUMBER')
-    getByText('CURRENT VERSION')
-    getByText('v2.0.0')
+    screen.getByText('About Temperature Module GEN1')
+    screen.getByText('abc123')
+    screen.getByText('SERIAL NUMBER')
+    screen.getByText('CURRENT VERSION')
+    screen.getByText('v2.0.0')
   })
 
   it('renders correct info when module is a thermocycler module with an update available', () => {
     props = {
       module: mockThermocycler,
       isExpanded: true,
-      onCloseClick: jest.fn(),
-      firmwareUpdateClick: jest.fn(),
+      onCloseClick: vi.fn(),
+      firmwareUpdateClick: vi.fn(),
     }
-    const { getByText, getByRole, getByLabelText } = render(props)
-
-    getByText('About Thermocycler Module GEN1')
-    getByText('ghi789')
-    getByText('SERIAL NUMBER')
-    getByText('CURRENT VERSION')
-    getByText('v2.0.0')
-    getByText('Firmware update available.')
-    const viewUpdate = getByRole('button', { name: 'Update now' })
+    render(props)
+
+    screen.getByText('About Thermocycler Module GEN1')
+    screen.getByText('ghi789')
+    screen.getByText('SERIAL NUMBER')
+    screen.getByText('CURRENT VERSION')
+    screen.getByText('v2.0.0')
+    screen.getByText('Firmware update available.')
+    const viewUpdate = screen.getByRole('button', { name: 'Update now' })
     fireEvent.click(viewUpdate)
     expect(props.firmwareUpdateClick).toHaveBeenCalled()
     expect(props.onCloseClick).toHaveBeenCalled()
     expect(viewUpdate).toBeEnabled()
-    const exit = getByLabelText('close_icon')
+    const exit = screen.getByLabelText('close_icon')
     fireEvent.click(exit)
     expect(exit).not.toBeVisible()
   })
@@ -156,17 +155,17 @@ describe('AboutModuleSlideout', () => {
     props = {
       module: mockTemperatureModule,
       isExpanded: true,
-      onCloseClick: jest.fn(),
-      firmwareUpdateClick: jest.fn(),
+      onCloseClick: vi.fn(),
+      firmwareUpdateClick: vi.fn(),
     }
-    const { getByText, getByRole } = render(props)
-
-    getByText('About Temperature Module GEN1')
-    getByText('abc123')
-    getByText('SERIAL NUMBER')
-    getByText('CURRENT VERSION')
-    getByText('v2.0.0')
-    const button = getByRole('button', { name: 'close' })
+    render(props)
+
+    screen.getByText('About Temperature Module GEN1')
+    screen.getByText('abc123')
+    screen.getByText('SERIAL NUMBER')
+    screen.getByText('CURRENT VERSION')
+    screen.getByText('v2.0.0')
+    const button = screen.getByRole('button', { name: 'close' })
     fireEvent.click(button)
     expect(props.onCloseClick).toHaveBeenCalled()
   })

diff --git a/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx b/app/src/organisms/ModuleCard/__tests__/Collapsible.test.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
-import { fireEvent } from '@testing-library/react'
-import { renderWithProviders } from '@opentrons/components'
+import { fireEvent, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders } from '../../../__testing-utils__'
 import { Collapsible } from '../Collapsible'
 
 const render = (props: React.ComponentProps<typeof Collapsible>) => {
@@ -13,61 +15,57 @@ describe('Collapsible', () => {
     props = {
       expanded: false,
       title: 'title',
-      toggleExpanded: jest.fn(),
+      toggleExpanded: vi.fn(),
       children: <div>children</div>,
     }
   })
 
   afterEach(() => {
-    jest.resetAllMocks()
-  })
-
-  afterEach(() => {
-    jest.resetAllMocks()
+    vi.resetAllMocks()
   })
 
   it('renders collapsible with default icons and not expanded', () => {
-    const { getByRole, getByText } = render(props)
-    fireEvent.click(getByRole('heading', { name: 'title' }))
+    render(props)
+    fireEvent.click(screen.getByRole('heading', { name: 'title' }))
     expect(props.toggleExpanded).toHaveBeenCalled()
-    getByText('children')
+    screen.getByText('children')
   })
   it('renders collapsible with default icon and expanded', () => {
     props = {
       expanded: true,
       title: 'title',
-      toggleExpanded: jest.fn(),
+      toggleExpanded: vi.fn(),
       children: <div>children</div>,
     }
-    const { getByRole } = render(props)
-    fireEvent.click(getByRole('heading', { name: 'title' }))
+    render(props)
+    fireEvent.click(screen.getByRole('heading', { name: 'title' }))
     expect(props.toggleExpanded).toHaveBeenCalled()
   })
   it('renders collapsible with different icon and not expanded', () => {
     props = {
       expanded: true,
       title: 'title',
-      toggleExpanded: jest.fn(),
+      toggleExpanded: vi.fn(),
       children: <div>children</div>,
       expandedIcon: 'chevron-down',
       collapsedIcon: 'chevron-up',
     }
-    const { getByRole, getByText } = render(props)
-    fireEvent.click(getByRole('heading', { name: 'title' }))
+    render(props)
+    fireEvent.click(screen.getByRole('heading', { name: 'title' }))
     expect(props.toggleExpanded).toHaveBeenCalled()
-    getByText('children')
+    screen.getByText('children')
   })
   it('renders collapsible with different icon and expanded', () => {
     props = {
       expanded: true,
       title: 'title',
-      toggleExpanded: jest.fn(),
+      toggleExpanded: vi.fn(),
       children: <div>children</div>,
       expandedIcon: 'chevron-down',
       collapsedIcon: 'chevron-up',
     }
-    const { getByRole } = render(props)
-    fireEvent.click(getByRole('heading', { name: 'title' }))
+    render(props)
+    fireEvent.click(screen.getByRole('heading', { name: 'title' }))
     expect(props.toggleExpanded).toHaveBeenCalled()
   })
 })