test(protocol-designer): redesign E2E test beginning

protocol-designer/cypress/e2e/redesignCreateLanding.cy.js

@@ -0,0 +1,52 @@
+describe('The Redesigned Create Protocol Landing Page', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.enableRedesign()
+  })
+
+  it('step 1 flow works', () => {
+    cy.contains('button', 'Create a protocol').click()
+    cy.contains('p', 'Step 1').should('be.visible').should('be.visible')
+    cy.contains('p', 'Let’s start with the basics').should('be.visible')
+    cy.contains('p', 'What kind of robot do you have?').should('be.visible')
+    // Flex is the default
+    cy.contains('Opentrons Flex').should(
+      'have.css',
+      'background-color',
+      'rgb(0, 108, 250)'
+    )
+
+    cy.contains('Opentrons OT-2').should('be.visible').click()
+
+    cy.contains('Opentrons OT-2').should(
+      'have.css',
+      'background-color',
+      'rgb(0, 108, 250)'
+    )
+
+    cy.contains('Opentrons Flex').should('be.visible').click()
+
+    cy.contains('Opentrons Flex').should(
+      'have.css',
+      'background-color',
+      'rgb(0, 108, 250)'
+    )
+
+    cy.contains('Confirm').should('be.visible').click()
+    // a couple validations to validate the click of the confirm button
+    // takes us to STEP 2
+    cy.contains('p', 'Step 2').should('be.visible')
+    cy.contains('Add a pipette').should('be.visible')
+    // since Flex was selected, validate the 96 channel pipette is visible
+    cy.contains('96-Channel').should('be.visible')
+    cy.contains('Go back').should('be.visible').click()
+    // validate we are back at the landing page
+    cy.contains('p', 'Step 1').should('be.visible')
+    // now select the OT-2
+    cy.contains('Opentrons OT-2').click()
+    cy.contains('Confirm').click()
+    // validate we are at step 2
+    cy.contains('p', 'Step 2').should('be.visible')
+    cy.contains('96-Channel').should('not.exist')
+  })
+})

protocol-designer/cypress/e2e/redesignHome.cy.js

@@ -0,0 +1,14 @@
+describe('The Redesigned Home Page', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.enableRedesign()
+  })
+
+  it('successfully loads', () => {
+    cy.title().should('equal', 'Opentrons Protocol Designer')
+    cy.document().should('have.property', 'charset').and('eq', 'UTF-8')
+    cy.contains('Welcome to Protocol Designer!')
+    cy.contains('button', 'Create a protocol').should('be.visible')
+    cy.contains('label', 'Edit existing protocol').should('be.visible')
+  })
+})

protocol-designer/cypress/support/commands.js

@@ -40,6 +40,22 @@ Cypress.Commands.add('closeAnnouncementModal', () => {
     .click({ force: true })
 })
 
+Cypress.Commands.add('enableRedesign', () => {
+  cy.window().then(win => {
+    win.enablePrereleaseMode()
+  })
+  // You select using the mouse thing on the upper right corner of
+  // The inspector window
+  // Use the element name and what's inside it
+  cy.get('button')
+    .contains('Got It!')
+    .should('be.visible')
+    .click({ force: true })
+  cy.openSettingsPage()
+  //
+  cy.contains('Enable redesign').next().click()
+  cy.contains('button', 'Continue').click()
+})
 //
 // File Page Actions
 //