test(protocol-designer): fix e2e tests after vite migration (#14635)

Closes
[AUTH-86](https://opentrons.atlassian.net/jira/software/c/projects/AUTH/issues/AUTH-86)

Author: shlokamin

package.json

@@ -13,7 +13,6 @@
       "protocol-designer",
       "shared-data",
       "step-generation",
-      "webpack-config",
       "api-client",
       "react-api-client",
       "usb-bridge/node-client"

protocol-designer/README.md

@@ -1,10 +1,10 @@
-# Opentrons Protocol Designer Beta
+# Opentrons Protocol Designer
 
 ## Overview
 
 Protocol Designer is a tool for scientists and technicians to create protocols for their [OT-2 personal pipetting robot][ot-2] without having to write any code. It provides visual feedback including liquid tracking and tip tracking to allow users to see exactly what their protocol will do at each step. The protocols are saved to Opentrons JSON Protocol files, which can be uploaded to the Opentrons Desktop App to run on a robot.
 
-Protocol Designer Beta is optimized for [Chrome][chrome] browser. Other browsers are not fully supported.
+Protocol Designer is optimized for [Chrome][chrome] browser. Other browsers are not fully supported.
 
 ## Build setup for development
 

protocol-designer/cypress.json

@@ -2,5 +2,6 @@
   "baseUrl": "http://localhost:5173",
   "video": false,
   "viewportWidth": 1440,
-  "viewportHeight": 900
+  "viewportHeight": 900,
+  "pluginsFile": false
 }

protocol-designer/cypress/integration/batchEdit.spec.js

@@ -1,5 +1,3 @@
-import { beforeEach, describe, it } from 'vitest'
-
 describe('Batch Edit Transform', () => {
   beforeEach(() => {
     cy.visit('/')

protocol-designer/cypress/integration/home.spec.js

@@ -1,13 +1,11 @@
-import { beforeEach, describe, it } from 'vitest'
-
 describe('The Home Page', () => {
   beforeEach(() => {
     cy.visit('/')
     cy.closeAnnouncementModal()
   })
 
   it('successfully loads', () => {
-    cy.title().should('equal', 'Opentrons Protocol Designer BETA')
+    cy.title().should('equal', 'Opentrons Protocol Designer')
   })
 
   it('has the right charset', () => {

protocol-designer/cypress/integration/migrations.spec.js

@@ -1,4 +1,3 @@
-import { beforeEach, describe, it } from 'vitest'
 import 'cypress-file-upload'
 import cloneDeep from 'lodash/cloneDeep'
 import { expectDeepEqual } from '@opentrons/shared-data/js/cypressUtils'

protocol-designer/cypress/integration/mixSettings.spec.js

@@ -1,4 +1,3 @@
-import { describe, it } from 'vitest'
 const isMacOSX = Cypress.platform === 'darwin'
 const invalidInput = 'abcdefghijklmnopqrstuvwxyz!@#$%^&*()<>?,-'
 const batchEditClickOptions = { [isMacOSX ? 'metaKey' : 'ctrlKey']: true }
@@ -125,7 +124,7 @@ describe('Advanced Settings for Mix Form', () => {
     cy.get('[data-test="StepItem_2"]').click(batchEditClickOptions)
     cy.get('input[name="aspirate_flowRate"]').click({ force: true })
 
-    cy.get('div[class*=FlowRateInput__description]').contains(
+    cy.contains(
       'Our default aspirate speed is optimal for a P1000 Single-Channel GEN2 aspirating liquids with a viscosity similar to water'
     )
     cy.get('input[name="aspirate_flowRate_customFlowRate"]').type('100')
@@ -144,7 +143,7 @@ describe('Advanced Settings for Mix Form', () => {
   it('verify functionality of flowrate in batch edit mix form', () => {
     // Batch editing the Flowrate value
     cy.get('input[name="aspirate_flowRate"]').click({ force: true })
-    cy.get('div[class*=FlowRateInput__description]').contains(
+    cy.contains(
       'Our default aspirate speed is optimal for a P1000 Single-Channel GEN2 aspirating liquids with a viscosity similar to water'
     )
     cy.get('input[name="aspirate_flowRate_customFlowRate"]').type('100')

protocol-designer/cypress/integration/settings.spec.js

@@ -1,4 +1,3 @@
-import { describe, it, before } from 'vitest'
 describe('The Settings Page', () => {
   const exptlSettingText = 'Disable module placement restrictions'
 
@@ -142,7 +141,7 @@ describe('The Settings Page', () => {
     cy.contains(exptlSettingText).next().click()
     cy.get('button').contains('Continue').click()
     // Leave the settings page
-    cy.get("button[class*='navbar__tab__']").contains('FILE').click()
+    cy.get("button[id='NavTab_file']").contains('FILE').click()
     // Go back to settings
     cy.openSettingsPage()
     // The toggle is still on
@@ -160,7 +159,7 @@ describe('The Settings Page', () => {
     cy.contains(exptlSettingText).next().click()
     cy.get('button').contains('Continue').click()
     // Leave the settings page
-    cy.get("button[class*='navbar__tab__']").contains('FILE')
+    cy.get("button[id='NavTab_file']").contains('FILE')
     // Go back to settings
     cy.openSettingsPage()
     // The toggle is still off

protocol-designer/cypress/integration/sidebar.spec.js

@@ -1,49 +1,45 @@
-import { describe, it, beforeEach } from 'vitest'
-
 describe('Desktop Navigation', () => {
   beforeEach(() => {
     cy.visit('/')
     cy.closeAnnouncementModal()
   })
 
   it('contains a working file button', () => {
-    cy.get("button[class*='navbar__tab__']")
+    cy.get("button[id='NavTab_file']")
       .contains('FILE')
       .parent()
       .should('have.prop', 'disabled')
       .and('equal', false)
   })
 
   it('contains a disabled liquids button', () => {
-    cy.get("button[class*='navbar__tab__']")
+    cy.get("button[id='NavTab_liquids']")
       .contains('LIQUIDS')
       .parent()
       .should('have.prop', 'disabled')
   })
 
   it('contains a disabled design button', () => {
-    cy.get("button[class*='navbar__tab__']")
+    cy.get("button[id='NavTab_design']")
       .contains('DESIGN')
       .parent()
       .should('have.prop', 'disabled')
   })
 
   it('contains a help button with external link', () => {
-    cy.get("a[class*='navbar__tab__']")
+    cy.get('a')
       .contains('HELP')
       .parent()
       .should('have.prop', 'href')
       .and('equal', 'https://support.opentrons.com/s/protocol-designer')
   })
 
   it('contains a settings button', () => {
-    cy.get("button[class*='navbar__tab__']")
-      .contains('Settings')
-      .should('exist')
+    cy.get('button').contains('Settings').should('exist')
   })
 
   it('returns to the file controls when the file button is clicked', () => {
-    cy.get("button[class*='navbar__tab__']").contains('FILE').click()
+    cy.get("button[id='NavTab_file']").contains('FILE').click()
     cy.contains('Protocol File')
   })
 })

protocol-designer/cypress/integration/transferSettings.spec.js

@@ -1,5 +1,3 @@
-import { describe, it, before } from 'vitest'
-
 const isMacOSX = Cypress.platform === 'darwin'
 const batchEditClickOptions = { [isMacOSX ? 'metaKey' : 'ctrlKey']: true }
 
@@ -134,7 +132,7 @@ describe('Advanced Settings for Transfer Form', () => {
     cy.get('[data-test="StepItem_2"]').click(batchEditClickOptions)
     cy.get('input[name="aspirate_flowRate"]').click({ force: true })
 
-    cy.get('div[class*=FlowRateInput__description]').contains(
+    cy.contains(
       'Our default aspirate speed is optimal for a P1000 Single-Channel GEN2 aspirating liquids with a viscosity similar to water'
     )
     cy.get('input[name="aspirate_flowRate_customFlowRate"]').type('100')
@@ -153,7 +151,7 @@ describe('Advanced Settings for Transfer Form', () => {
   it('verify functionality of flowrate in batch edit transfer', () => {
     // Batch editing the Flowrate value
     cy.get('input[name="aspirate_flowRate"]').click({ force: true })
-    cy.get('div[class*=FlowRateInput__description]').contains(
+    cy.contains(
       'Our default aspirate speed is optimal for a P1000 Single-Channel GEN2 aspirating liquids with a viscosity similar to water'
     )
     cy.get('input[name="aspirate_flowRate_customFlowRate"]').type('100')

protocol-designer/cypress/support/commands.js

@@ -34,14 +34,17 @@ Cypress.Commands.add('closeAnnouncementModal', () => {
   cy.get('[data-test="ComputingSpinner"]', { timeout: 30000 }).should(
     'not.exist'
   )
-  cy.get('button').contains('Got It!').should('be.visible').click()
+  cy.get('button')
+    .contains('Got It!')
+    .should('be.visible')
+    .click({ force: true })
 })
 
 //
 // File Page Actions
 //
 Cypress.Commands.add('openFilePage', () => {
-  cy.get('button[class*="navbar__tab__"]').contains('FILE').click()
+  cy.get('button[id="NavTab_file"]').contains('FILE').click()
 })
 
 //
@@ -87,7 +90,7 @@ Cypress.Commands.add(
 // Design Page Actions
 //
 Cypress.Commands.add('openDesignPage', () => {
-  cy.get('button[class*="navbar__tab__"]').contains('DESIGN').parent().click()
+  cy.get('button[id="NavTab_design"]').contains('DESIGN').parent().click()
 })
 Cypress.Commands.add('addStep', stepName => {
   cy.get('button').contains('Add Step').click()
@@ -98,7 +101,7 @@ Cypress.Commands.add('addStep', stepName => {
 // Settings Page Actions
 //
 Cypress.Commands.add('openSettingsPage', () => {
-  cy.get('button[class*="navbar__tab__"]').contains('Settings').click()
+  cy.get('button').contains('Settings').click()
 })
 
 // Advance Settings for Transfer Steps

protocol-designer/index.html

@@ -7,7 +7,7 @@
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Protocol Designer</title>
+    <title>Opentrons Protocol Designer</title>
   </head>
   <body>
     <div id="root"></div>

protocol-designer/package.json

@@ -8,8 +8,7 @@
     "email": "[email protected]"
   },
   "name": "protocol-designer",
-  "type": "module",
-  "productName": "Opentrons Protocol Designer BETA",
+  "productName": "Opentrons Protocol Designer",
   "private": true,
   "version": "0.0.0-dev",
   "description": "Protocol designer app",

protocol-designer/src/components/DeckSetup/LabwareOverlays/SlotControls.tsx

@@ -70,7 +70,10 @@ export const SlotControls = (props: SlotControlsProps): JSX.Element | null => {
     accept: DND_TYPES.LABWARE,
     canDrop: (item: DroppedItem) => {
       const draggedDef = item?.labwareOnDeck?.def
-      assert(draggedDef, 'no labware def of dragged item, expected it on drop')
+      console.assert(
+        draggedDef,
+        'no labware def of dragged item, expected it on drop'
+      )
 
       if (moduleType != null && draggedDef != null) {
         // this is a module slot, prevent drop if the dragged labware is not compatible

protocol-designer/src/index.hbs

@@ -202,7 +202,7 @@
     }
   },
   "gate": {
-    "sign_up_below": "Sign Up For Opentrons Protocol Designer Beta",
+    "sign_up_below": "Sign Up For Opentrons Protocol Designer",
     "failed_verification": "Something Went Wrong",
     "sign_up_success": "Please confirm your email address to continue",
     "check_email": "We've sent a confirmation URL to your email that will take you to the Protocol Designer. Keep an eye out for a follow up email which contains links to resources such as our help documents."

protocol-designer/src/localization/en/modal.json

@@ -1,11 +1,12 @@
 import path from 'path'
-import { defineConfig } from 'vite'
+import { UserConfig, defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import postCssImport from 'postcss-import'
 import postCssApply from 'postcss-apply'
 import postColorModFunction from 'postcss-color-mod-function'
 import postCssPresetEnv from 'postcss-preset-env'
 import lostCss from 'lost'
+import { versionForProject } from '../scripts/git-version'
 
 const testAliases: {} | { 'file-saver': string } =
   process.env.CYPRESS === '1'
@@ -15,53 +16,59 @@ const testAliases: {} | { 'file-saver': string } =
       }
     : {}
 
-export default defineConfig({
-  // this makes imports relative rather than absolute
-  base: '',
-  build: {
-    // Relative to the root
-    outDir: 'dist',
-  },
-  plugins: [
-    react({
-      include: '**/*.tsx',
-      babel: {
-        // Use babel.config.js files
-        configFile: true,
+export default defineConfig(
+  async (): Promise<UserConfig> => {
+    const OT_PD_VERSION = await versionForProject('protocol-designer')
+    const OT_PD_BUILD_DATE = new Date().toUTCString()
+    return {
+      // this makes imports relative rather than absolute
+      base: '',
+      build: {
+        // Relative to the root
+        outDir: 'dist',
       },
-    }),
-  ],
-  optimizeDeps: {
-    esbuildOptions: {
-      target: 'es2020',
-    },
-  },
-  css: {
-    postcss: {
       plugins: [
-        postCssImport({ root: 'src/' }),
-        postCssApply(),
-        postColorModFunction(),
-        postCssPresetEnv({ stage: 0 }),
-        lostCss(),
+        react({
+          include: '**/*.tsx',
+          babel: {
+            // Use babel.config.js files
+            configFile: true,
+          },
+        }),
       ],
-    },
-  },
-  define: {
-    'process.env': process.env,
-    global: 'globalThis',
-  },
-  resolve: {
-    alias: {
-      '@opentrons/components/styles': path.resolve(
-        '../components/src/index.module.css'
-      ),
-      '@opentrons/components': path.resolve('../components/src/index.ts'),
-      '@opentrons/shared-data': path.resolve('../shared-data/js/index.ts'),
-      '@opentrons/step-generation': path.resolve(
-        '../step-generation/src/index.ts'
-      ),
-      ...testAliases,
-    },
-  },
-})
+      optimizeDeps: {
+        esbuildOptions: {
+          target: 'es2020',
+        },
+      },
+      css: {
+        postcss: {
+          plugins: [
+            postCssImport({ root: 'src/' }),
+            postCssApply(),
+            postColorModFunction(),
+            postCssPresetEnv({ stage: 0 }),
+            lostCss(),
+          ],
+        },
+      },
+      define: {
+        'process.env': { ...process.env, OT_PD_VERSION, OT_PD_BUILD_DATE },
+        global: 'globalThis',
+      },
+      resolve: {
+        alias: {
+          '@opentrons/components/styles': path.resolve(
+            '../components/src/index.module.css'
+          ),
+          '@opentrons/components': path.resolve('../components/src/index.ts'),
+          '@opentrons/shared-data': path.resolve('../shared-data/js/index.ts'),
+          '@opentrons/step-generation': path.resolve(
+            '../step-generation/src/index.ts'
+          ),
+          ...testAliases,
+        },
+      },
+    }
+  }
+)