Skip to content

Commit

Permalink
test(protocol-designer): fix e2e tests after vite migration (#14635)
Browse files Browse the repository at this point in the history
  • Loading branch information
shlokamin authored Mar 12, 2024
1 parent 5f40d06 commit 4b0a384
Show file tree
Hide file tree
Showing 21 changed files with 89 additions and 192 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
"protocol-designer",
"shared-data",
"step-generation",
"webpack-config",
"api-client",
"react-api-client",
"usb-bridge/node-client"
Expand Down
4 changes: 2 additions & 2 deletions protocol-designer/README.md
Original file line number Diff line number Diff line change
@@ -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

Expand Down
3 changes: 2 additions & 1 deletion protocol-designer/cypress.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@
"baseUrl": "http://localhost:5173",
"video": false,
"viewportWidth": 1440,
"viewportHeight": 900
"viewportHeight": 900,
"pluginsFile": false
}
2 changes: 0 additions & 2 deletions protocol-designer/cypress/integration/batchEdit.spec.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { beforeEach, describe, it } from 'vitest'

describe('Batch Edit Transform', () => {
beforeEach(() => {
cy.visit('/')
Expand Down
4 changes: 1 addition & 3 deletions protocol-designer/cypress/integration/home.spec.js
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down
1 change: 0 additions & 1 deletion protocol-designer/cypress/integration/migrations.spec.js
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
5 changes: 2 additions & 3 deletions protocol-designer/cypress/integration/mixSettings.spec.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { describe, it } from 'vitest'
const isMacOSX = Cypress.platform === 'darwin'
const invalidInput = 'abcdefghijklmnopqrstuvwxyz!@#$%^&*()<>?,-'
const batchEditClickOptions = { [isMacOSX ? 'metaKey' : 'ctrlKey']: true }
Expand Down Expand Up @@ -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')
Expand All @@ -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')
Expand Down
5 changes: 2 additions & 3 deletions protocol-designer/cypress/integration/settings.spec.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { describe, it, before } from 'vitest'
describe('The Settings Page', () => {
const exptlSettingText = 'Disable module placement restrictions'

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down
16 changes: 6 additions & 10 deletions protocol-designer/cypress/integration/sidebar.spec.js
Original file line number Diff line number Diff line change
@@ -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')
})
})
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { describe, it, before } from 'vitest'

const isMacOSX = Cypress.platform === 'darwin'
const batchEditClickOptions = { [isMacOSX ? 'metaKey' : 'ctrlKey']: true }

Expand Down Expand Up @@ -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')
Expand All @@ -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')
Expand Down
11 changes: 7 additions & 4 deletions protocol-designer/cypress/support/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})

//
Expand Down Expand Up @@ -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()
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion protocol-designer/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 1 addition & 2 deletions protocol-designer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
15 changes: 0 additions & 15 deletions protocol-designer/src/index.hbs

This file was deleted.

2 changes: 1 addition & 1 deletion protocol-designer/src/localization/en/modal.json
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down
103 changes: 55 additions & 48 deletions protocol-designer/vite.config.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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,
},
},
}
}
)
Loading

0 comments on commit 4b0a384

Please sign in to comment.