Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Mar 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and here too


## 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
Loading