Merge branch 'protocol_designer-migrate-webpack-to-vite' of github.com:Opentrons/opentrons into protocol_designer-migrate-webpack-to-vite

Author: b-cooper

.github/workflows/app-test-build-deploy.yaml

@@ -62,6 +62,9 @@ jobs:
       - uses: 'actions/setup-node@v3'
         with:
           node-version: '18.19.0'
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
       - name: 'install udev'
         run: sudo apt-get update && sudo apt-get install libudev-dev
       - name: 'set complex environment variables'
@@ -103,6 +106,9 @@ jobs:
       - uses: 'actions/setup-node@v3'
         with:
           node-version: '18.19.0'
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
       - uses: actions/setup-python@v4
         with:
           python-version: '3.10'
@@ -166,6 +172,11 @@ jobs:
             echo "both develop builds for edge"
             echo 'variants=["release", "internal-release"]' >> $GITHUB_OUTPUT
             echo 'type=develop' >> $GITHUB_OUTPUT
+          elif [ "${{ format('{0}', endsWith(github.ref, 'protocol_designer-migrate-webpack-to-vite')) }}" = "true" ] ; then
+            echo "REMOVE THIS AFTER APP TESTS ARE MIGRATED"
+            echo "HACK: run release builds for the vite migration branch"
+            echo 'variants=["release", "internal-release"]' >> $GITHUB_OUTPUT
+            echo 'type=develop' >> $GITHUB_OUTPUT
           elif [ "${{ format('{0}', endsWith(github.ref, 'app-build-internal')) }}" = "true" ] ; then
             echo "internal-release builds for app-build-internal suffixes"
             echo 'variants=["internal-release"]' >> $GITHUB_OUTPUT
@@ -228,6 +239,9 @@ jobs:
       - uses: 'actions/setup-node@v3'
         with:
           node-version: '18.19.0'
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
       - uses: actions/setup-python@v4
         with:
           python-version: '3.10'
@@ -290,8 +304,9 @@ jobs:
   deploy-release-app:
     name: 'Deploy built app artifacts to S3'
     runs-on: 'ubuntu-22.04'
+    # TODO: readd unit test dependency after tests are converted to vitest
     needs:
-      ['js-unit-test', 'backend-unit-test', 'build-app', 'determine-build-type']
+      ['build-app', 'determine-build-type']
     if: contains(fromJSON(needs.determine-build-type.outputs.variants), 'release') || contains(fromJSON(needs.determine-build-type.outputs.variants), 'internal-release')
     steps:
       - name: 'download run app builds'
@@ -401,6 +416,9 @@ jobs:
           cd ./monorepo
           git fetch -f origin ${{ github.ref }}:${{ github.ref }}
           git checkout ${{ github.ref }}
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
       - uses: 'actions/setup-node@v3'
         with:
           node-version: '18.19.0'

.github/workflows/pd-test-build-deploy.yaml

@@ -188,5 +188,4 @@ jobs:
           aws configure set role_arn ${{ secrets.OT_PD_DEPLOY_ROLE }} --profile deploy
           aws configure set source_profile identity --profile deploy
           aws s3 sync ./dist s3://sandbox.designer.opentrons.com/${{ env.OT_BRANCH }} --acl=public-read --profile=deploy
-          aws cloudfront create-invalidation --distribution-id ENGOO2NRYGWKN --paths "/${{ env.OT_BRANCH }}/*"
         shell: bash

app-shell-odd/package.json

@@ -42,7 +42,6 @@
     "@types/uuid": "^3.4.7",
     "ajv": "6.12.3",
     "dateformat": "3.0.3",
-    "electron-debug": "3.0.1",
     "electron-devtools-installer": "3.2.0",
     "electron-store": "5.1.1",
     "electron-updater": "4.1.2",

app-shell/package.json

@@ -44,16 +44,19 @@
     "@types/pump": "^1.1.0",
     "@types/uuid": "^3.4.7",
     "ajv": "6.12.3",
+    "axios": "^0.21.1",
     "dateformat": "3.0.3",
     "electron-context-menu": "3.6.1",
     "electron-debug": "3.0.1",
+    "electron-localshortcut": "3.2.1",
     "electron-devtools-installer": "3.2.0",
     "electron-store": "5.1.1",
     "electron-updater": "4.1.2",
     "execa": "4.0.0",
     "form-data": "2.5.0",
     "fs-extra": "10.0.0",
     "get-stream": "5.1.0",
+    "lodash": "4.17.21",
     "merge-options": "1.0.1",
     "mqtt": "4.3.8",
     "node-fetch": "2.6.7",

app/package.json

@@ -74,6 +74,10 @@
     "@types/mixpanel-browser": "^2.35.6",
     "@types/node-fetch": "2.6.11",
     "@types/styled-components": "^5.1.26",
-    "axios": "^0.21.1"
+    "axios": "^0.21.1",
+    "postcss-apply": "0.12.0",
+    "postcss-color-mod-function": "3.0.3",
+    "postcss-import": "16.0.0",
+    "postcss-preset-env": "9.3.0"
   }
 }

app/src/organisms/Devices/HeaterShakerIsRunningModal/__tests__/hooks.test.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react'
 import { Provider } from 'react-redux'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
+import '@testing-library/jest-dom/vitest'
 import { createStore } from 'redux'
 import { renderHook } from '@testing-library/react'
 import { HEATERSHAKER_MODULE_V1 } from '@opentrons/shared-data'
@@ -10,26 +12,18 @@ import { RUN_ID_1 } from '../../../RunTimeControl/__fixtures__'
 import type { Store } from 'redux'
 import type { State } from '../../../../redux/types'
 
-jest.mock('../../hooks')
-jest.mock('../../../LabwarePositionCheck/useMostRecentCompletedAnalysis')
-
-const mockUseMostRecentCompletedAnalysis = useMostRecentCompletedAnalysis as jest.MockedFunction<
-  typeof useMostRecentCompletedAnalysis
->
+vi.mock('../../hooks')
+vi.mock('../../../LabwarePositionCheck/useMostRecentCompletedAnalysis')
 
 describe('useHeaterShakerModuleIdsFromRun', () => {
-  const store: Store<State> = createStore(jest.fn(), {})
+  const store: Store<State> = createStore(vi.fn(), {})
 
   beforeEach(() => {
-    store.dispatch = jest.fn()
-  })
-
-  afterEach(() => {
-    jest.restoreAllMocks()
+    store.dispatch = vi.fn()
   })
 
   it('should return a heater shaker module id from protocol analysis load command result', () => {
-    mockUseMostRecentCompletedAnalysis.mockReturnValue({
+    vi.mocked(useMostRecentCompletedAnalysis).mockReturnValue({
       pipettes: {},
       labware: {},
       modules: {
@@ -76,7 +70,7 @@ describe('useHeaterShakerModuleIdsFromRun', () => {
   })
 
   it('should return two heater shaker module ids if two modules are loaded in the protocol', () => {
-    mockUseMostRecentCompletedAnalysis.mockReturnValue({
+    vi.mocked(useMostRecentCompletedAnalysis).mockReturnValue({
       pipettes: {},
       labware: {},
       modules: {

app/src/organisms/Devices/HeaterShakerWizard/__tests__/HeaterShakerModuleCard.test.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components'
+import { screen } from '@testing-library/react'
+import { describe, it, vi, beforeEach } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../../__testing-utils__'
 import { i18n } from '../../../../i18n'
 import { HeaterShakerModuleCard } from '../HeaterShakerModuleCard'
 import { HeaterShakerModuleData } from '../../../ModuleCard/HeaterShakerModuleData'
 import { mockHeaterShaker } from '../../../../redux/modules/__fixtures__'
 
-jest.mock('../../../ModuleCard/HeaterShakerModuleData')
-
-const mockHeaterShakerModuleData = HeaterShakerModuleData as jest.MockedFunction<
-  typeof HeaterShakerModuleData
->
+vi.mock('../../../ModuleCard/HeaterShakerModuleData')
 
 const render = (props: React.ComponentProps<typeof HeaterShakerModuleCard>) => {
   return renderWithProviders(<HeaterShakerModuleCard {...props} />, {
@@ -23,17 +22,17 @@ describe('HeaterShakerModuleCard', () => {
     props = {
       module: mockHeaterShaker,
     }
-    mockHeaterShakerModuleData.mockReturnValue(
+    vi.mocked(HeaterShakerModuleData).mockReturnValue(
       <div>mock heater shaker module data</div>
     )
   })
 
   it('renders the correct info', () => {
-    const { getByText, getByAltText, getByLabelText } = render(props)
-    getByText('usb-1')
-    getByText('Heater-Shaker Module GEN1')
-    getByText('mock heater shaker module data')
-    getByAltText('Heater-Shaker')
-    getByLabelText('heater-shaker')
+    render(props)
+    screen.getByText('usb-1')
+    screen.getByText('Heater-Shaker Module GEN1')
+    screen.getByText('mock heater shaker module data')
+    screen.getByAltText('Heater-Shaker')
+    screen.getByLabelText('heater-shaker')
   })
 })

app/src/organisms/Devices/PipetteCard/__tests__/AboutPipetteSlideout.test.tsx

@@ -1,17 +1,15 @@
 import * as React from 'react'
-import { renderWithProviders } from '@opentrons/components'
+import { describe, it, vi, beforeEach, expect } from 'vitest'
+import '@testing-library/jest-dom/vitest'
+import { renderWithProviders } from '../../../../__testing-utils__'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, screen } from '@testing-library/react'
 import { i18n } from '../../../../i18n'
 import { AboutPipetteSlideout } from '../AboutPipetteSlideout'
 import { mockLeftSpecs } from '../../../../redux/pipettes/__fixtures__'
 import { LEFT } from '../../../../redux/pipettes'
 
-jest.mock('@opentrons/react-api-client')
-
-const mockUseInstrumentsQuery = useInstrumentsQuery as jest.MockedFunction<
-  typeof useInstrumentsQuery
->
+vi.mock('@opentrons/react-api-client')
 
 const render = (props: React.ComponentProps<typeof AboutPipetteSlideout>) => {
   return renderWithProviders(<AboutPipetteSlideout {...props} />, {
@@ -27,28 +25,25 @@ describe('AboutPipetteSlideout', () => {
       pipetteName: mockLeftSpecs.displayName,
       mount: LEFT,
       isExpanded: true,
-      onCloseClick: jest.fn(),
+      onCloseClick: vi.fn(),
     }
-    mockUseInstrumentsQuery.mockReturnValue({
+    vi.mocked(useInstrumentsQuery).mockReturnValue({
       data: { data: [] },
     } as any)
   })
-  afterEach(() => {
-    jest.resetAllMocks()
-  })
 
   it('renders correct info', () => {
-    const { getByText, getByRole } = render(props)
+    render(props)
 
-    getByText('About Left Pipette Pipette')
-    getByText('123')
-    getByText('SERIAL NUMBER')
-    const button = getByRole('button', { name: /exit/i })
+    screen.getByText('About Left Pipette Pipette')
+    screen.getByText('123')
+    screen.getByText('SERIAL NUMBER')
+    const button = screen.getByRole('button', { name: /exit/i })
     fireEvent.click(button)
     expect(props.onCloseClick).toHaveBeenCalled()
   })
   it('renders the firmware version if it exists', () => {
-    mockUseInstrumentsQuery.mockReturnValue({
+    vi.mocked(useInstrumentsQuery).mockReturnValue({
       data: {
         data: [
           {
@@ -61,9 +56,9 @@ describe('AboutPipetteSlideout', () => {
       },
     } as any)
 
-    const { getByText } = render(props)
+    render(props)
 
-    getByText('CURRENT VERSION')
-    getByText('12')
+    screen.getByText('CURRENT VERSION')
+    screen.getByText('12')
   })
 })