Merge branch 'release/15.0.0' into merge_develop_15

Author: AtofStryker

packages/app/cypress/e2e/studio/helper.ts

@@ -14,12 +14,12 @@ export function loadProjectAndRunSpec ({ projectName = 'experimental-studio' as
   cy.waitForSpecToFinish()
 }
 
-export function launchStudio ({ specName = 'spec.cy.js', createNewTest = false, cliArgs = [''] } = {}) {
+export function launchStudio ({ specName = 'spec.cy.js', createNewTestFromSuite = false, createNewTestFromSpecHeader = false, cliArgs = [''] } = {}) {
   loadProjectAndRunSpec({ specName, cliArgs })
 
   const testTitle = 'visits a basic html page'
 
-  if (createNewTest) {
+  if (createNewTestFromSuite || createNewTestFromSpecHeader) {
     cy.contains('studio functionality').as('item')
   } else {
     cy.contains(testTitle).as('item')
@@ -28,8 +28,13 @@ export function launchStudio ({ specName = 'spec.cy.js', createNewTest = false,
   cy.get('@item')
   .closest('.runnable-wrapper').as('runnable-wrapper')
 
-  if (createNewTest) {
-    cy.get('@runnable-wrapper').realHover().findByTestId('create-new-test-button').click()
+  if (createNewTestFromSuite || createNewTestFromSpecHeader) {
+    if (createNewTestFromSpecHeader) {
+      cy.findByTestId('create-new-test-from-spec-header').click()
+    } else {
+      cy.get('@runnable-wrapper').realHover().findByTestId('create-new-test-from-suite').click()
+    }
+
     cy.findByTestId('studio-panel').should('be.visible')
     cy.findByTestId('new-test-button').should('be.visible')
   } else {

packages/app/cypress/e2e/studio/studio.cy.ts

@@ -2,6 +2,17 @@ import { launchStudio, loadProjectAndRunSpec, assertClosingPanelWithoutChanges }
 
 const urlPrompt = '// Visit a page by entering a url in the address bar or typing a cy.visit command here'
 
+const inputNewTestName = (name: string = 'new-test') => {
+  cy.findByTestId('new-test-button').click()
+  cy.findByTestId('test-name-input').type(name)
+  cy.findByTestId('create-test-button').click()
+
+  // verify recording is enabled to ensure the panel is fully ready
+  cy.findByTestId('record-button-recording').should('have.text', 'Recording...')
+
+  cy.get('.studio-single-test-container').should('be.visible')
+}
+
 describe('Cypress Studio', () => {
   function incrementCounter (initialCount: number) {
     cy.getAutIframe().within(() => {
@@ -165,7 +176,7 @@ describe('studio functionality', () => {
   })
 
   it('does not enter single test mode when creating a new test', () => {
-    launchStudio({ specName: 'spec-w-multiple-tests.cy.js', createNewTest: true })
+    launchStudio({ specName: 'spec-w-multiple-tests.cy.js', createNewTestFromSuite: true })
 
     // verify we are not in single test mode
     cy.get('.runnable-title').should('have.length', 4)
@@ -175,26 +186,22 @@ describe('studio functionality', () => {
     cy.get('.runnable-title').its(3).should('contain.text', 'visits a basic html page 3')
   })
 
-  it('creates a new test from an empty spec with url already defined', () => {
-    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTest: true })
+  it('creates a new test from spec header', () => {
+    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTestFromSpecHeader: true })
 
-    cy.findByTestId('new-test-button').click()
-    cy.findByTestId('test-name-input').type('new-test')
-    cy.findByTestId('create-test-button').click()
+    inputNewTestName()
 
     cy.contains('new-test').click()
 
-    // verify recording is enabled to ensure the panel is fully ready
-    cy.findByTestId('record-button-recording').should('have.text', 'Recording...')
-
-    cy.get('.studio-single-test-container').should('be.visible')
-
     cy.percySnapshot()
 
-    incrementCounter(0)
+    cy.get('.cm-content').invoke('text', 'cy.visit("cypress/e2e/index.html")')
 
     cy.findByTestId('studio-save-button').click()
 
+    // verify recording is enabled to ensure the panel is fully ready
+    cy.findByTestId('record-button-recording').should('have.text', 'Recording...')
+
     // we should have the commands we executed after we save
     cy.withCtx(async (ctx) => {
       const spec = await ctx.actions.file.readFileInProject('cypress/e2e/spec-w-visit.cy.js')
@@ -208,19 +215,18 @@ describe('studio functionality', () => {
   it('visits a basic html page', () => {
     cy.get('h1').should('have.text', 'Hello, Studio!')
   })
+})
 
-  it('new-test', function() {
-
-cy.get('#increment').click();
-  });
-})`.trim())
+it('new-test', function() {
+cy.visit("cypress/e2e/index.html")
+});`.trim())
     })
   })
 
   // TODO: this test fails in CI but passes locally
   // http://github.com/cypress-io/cypress/issues/31248
   it.skip('creates a new test with a url that changes top', function () {
-    launchStudio({ specName: 'spec-w-foobar.cy.js', createNewTest: true })
+    launchStudio({ specName: 'spec-w-foobar.cy.js', createNewTestFromSuite: true })
 
     cy.origin('http://foobar.com:4455', () => {
       Cypress.require('../support/execute-spec')
@@ -294,21 +300,12 @@ describe('studio functionality', () => {
   })
 
   it('creates a new test for a specific suite with the url already defined', () => {
-    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTest: true })
+    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTestFromSuite: true })
 
     // create a new test from a specific suite
-    cy.findByTestId('create-new-test-button').click()
-
-    cy.findByTestId('new-test-button').click()
-    cy.findByTestId('test-name-input').type('new-test')
-    cy.findByTestId('create-test-button').click()
+    cy.findByTestId('create-new-test-from-suite').click()
 
-    cy.contains('new-test').click()
-
-    // verify recording is enabled to ensure the panel is fully ready
-    cy.findByTestId('record-button-recording').should('have.text', 'Recording...')
-
-    cy.get('.studio-single-test-container').should('be.visible')
+    inputNewTestName()
 
     cy.percySnapshot()
 
@@ -618,11 +615,9 @@ describe('studio functionality', () => {
   })
 
   it('updates the AUT url when creating a new test', () => {
-    launchStudio({ specName: 'navigation.cy.js', createNewTest: true })
+    launchStudio({ specName: 'navigation.cy.js', createNewTestFromSuite: true })
 
-    cy.findByTestId('new-test-button').click()
-    cy.findByTestId('test-name-input').type('new-test')
-    cy.findByTestId('create-test-button').click()
+    inputNewTestName()
 
     cy.findByTestId('aut-url-input').should('have.focus').type('cypress/e2e/navigation.html{enter}')
 
@@ -650,7 +645,7 @@ describe('studio functionality', () => {
   })
 
   it('update the url with the suiteId and studio parameters when entering studio with a suite', () => {
-    launchStudio({ createNewTest: true })
+    launchStudio({ createNewTestFromSuite: true })
 
     cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=')
   })
@@ -663,9 +658,7 @@ describe('studio functionality', () => {
     cy.location().its('hash').should('contain', 'suiteId=r1').and('contain', 'studio=')
 
     // create a new test in the root suite
-    cy.findByTestId('new-test-button').click()
-    cy.findByTestId('test-name-input').type('new-test')
-    cy.findByTestId('create-test-button').click()
+    inputNewTestName()
 
     // the studio url parameters should be removed
     cy.location().its('hash').and('not.contain', 'suiteId=').and('contain', 'studio=').and('contain', 'testId=r2')
@@ -745,7 +738,7 @@ describe('studio functionality', () => {
   })
 
   it('removes the studio url parameters when closing studio new test', () => {
-    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTest: true })
+    launchStudio({ specName: 'spec-w-visit.cy.js', createNewTestFromSuite: true })
 
     cy.location().its('hash').should('contain', 'suiteId=r2').and('contain', 'studio=')
 

packages/reporter/cypress/e2e/suites.cy.ts

@@ -152,7 +152,7 @@ describe('suites', () => {
       cy.contains('nested suite 1')
       .closest('.runnable-wrapper')
       .realHover()
-      .get('[data-cy="create-new-test-button"]')
+      .get('[data-cy="create-new-test-from-suite"]')
       .should('be.visible')
     })
 
@@ -161,7 +161,7 @@ describe('suites', () => {
 
       cy.contains('suite 1').parents('.collapsible-header')
       .realHover().within(() => {
-        cy.get('[data-cy="create-new-test-button"]').click()
+        cy.get('[data-cy="create-new-test-from-suite"]').click()
       })
 
       cy.wrap(runner.emit).should('be.calledWith', 'studio:init:suite', 'r2')

packages/reporter/cypress/e2e/tests.cy.ts

@@ -216,14 +216,14 @@ describe('tests', () => {
       visitAndRenderReporter(true, false, '__all')
 
       cy.contains('suite 1').realHover()
-      cy.get('[data-cy="create-new-test-button"]').should('not.exist')
+      cy.get('[data-cy="create-new-test-from-suite"]').should('not.exist')
     })
 
     it('shows new test button in suites when running a single spec', () => {
       visitAndRenderReporter(true, false, 'relative/path/to/foo.js')
 
       cy.contains('suite 1').realHover()
-      cy.get('[data-cy="create-new-test-button"]').should('exist')
+      cy.get('[data-cy="create-new-test-from-suite"]').should('exist')
     })
   })
 })

packages/reporter/src/commands/commands.scss

@@ -351,7 +351,7 @@
         color: $pending;
 
         strong {
-          color: $indigo-300;
+          color: $gray-500;
         }
       }
     }

packages/reporter/src/header/CreateNewTestButton.tsx

@@ -0,0 +1,21 @@
+import Button from '@cypress-design/react-button'
+import { IconActionAddMedium } from '@cypress-design/react-icon'
+import React, { MouseEvent, useCallback } from 'react'
+import events from '../lib/events'
+import cs from 'classnames'
+
+export const CreateNewTestButton = ({ suiteId, dataCy }: { suiteId: string, dataCy?: string }) => {
+  const _launchStudio = useCallback((e: MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    events.emit('studio:init:suite', suiteId)
+  }, [events, suiteId])
+
+  return (
+    <Button data-cy={dataCy} size='20' onClick={_launchStudio} variant='outline-dark' className={cs('launch-studio-button')} >
+      <IconActionAddMedium strokeColor='gray-500' />
+      New Test
+    </Button>
+  )
+}

packages/reporter/src/lib/variables.scss

@@ -101,7 +101,7 @@ $white: white;
 
 $pass: $jade-400;
 $fail: $red-400;
-$pending: $indigo-400;
+$pending: $gray-700;
 $pinned: $purple-400;
 $retried: $orange-400;
 

packages/reporter/src/runnables/runnable-and-suite.tsx

@@ -1,7 +1,7 @@
 import cs from 'classnames'
 import _ from 'lodash'
 import { observer } from 'mobx-react'
-import React, { MouseEvent, useCallback, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 
 import appState from '../lib/app-state'
 import events, { Events } from '../lib/events'
@@ -11,9 +11,9 @@ import Collapsible, { CollapsibleHeaderComponentProps } from '../collapsible/col
 import type SuiteModel from './suite-model'
 import type TestModel from '../test/test-model'
 
-import { IconActionAddMedium, IconChevronDownMedium, IconChevronRightMedium, IconObjectStackFailed, IconObjectStackPassed, IconObjectStackQueued, IconObjectStackRunning, IconObjectStackSkipped, WindiColor } from '@cypress-design/react-icon'
-import Button from '@cypress-design/react-button'
+import { IconChevronDownMedium, IconChevronRightMedium, IconObjectStackFailed, IconObjectStackPassed, IconObjectStackQueued, IconObjectStackRunning, IconObjectStackSkipped, WindiColor } from '@cypress-design/react-icon'
 import { RunnableArray } from './runnables-store'
+import { CreateNewTestButton } from '../header/CreateNewTestButton'
 
 // should only show connection dots if the current runnable is a test and the next runnable is a test and is not the last runnable
 export const shouldShowConnectionDots = (runnables: RunnableArray, runnable: SuiteModel | TestModel, runnableIndex: number) => {
@@ -35,13 +35,6 @@ const headerIconDefaultProps = {
 }
 
 const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, studioEnabled, canSaveStudioLogs, spec }: SuiteProps) => {
-  const _launchStudio = useCallback((e: MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    eventManager.emit('studio:init:suite', model.id)
-  }, [eventManager, model.id])
-
   const headerIconStyle = {
     marginTop: '1px',
   }
@@ -85,16 +78,13 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
         <span className='runnable-title'>{model.title}</span>
         {(studioEnabled && !appState.studioActive && spec?.relative !== '__all') && (
           <>
-            <Button data-cy='create-new-test-button' size='20' onClick={_launchStudio} variant='outline-dark' className={cs('launch-studio-button')} >
-              <IconActionAddMedium strokeColor='gray-500' />
-              New Test
-            </Button>
+            <CreateNewTestButton suiteId={model.id} dataCy='create-new-test-from-suite' />
             <span className='button-hover-shadow' />
           </>
         )}
       </>
     )
-  }, [getHeaderIcon, model.title, studioEnabled, appState.studioActive, _launchStudio])
+  }, [getHeaderIcon, model.title, studioEnabled, appState.studioActive])
 
   const runnablesList = useMemo(() => (
     <ul className='runnables'>

packages/reporter/src/runnables/runnables.scss

@@ -396,7 +396,7 @@ $dotted-line-left-padding: 19px;
 
     &.test.runnable-pending {
       .runnable-title {
-        color: $indigo-300;
+        color: $gray-500;
       }
 
       .runnable-commands-region {

packages/reporter/src/shared/SpecFileName.scss

@@ -9,6 +9,18 @@
   position: relative;
   background: $gray-1100;
 
+  .open-in-ide-button {
+    right: 100px;
+  }
+
+  .button-hover-shadow {
+    right: 100px;
+  }
+
+  .launch-studio-button {
+    @include new-test-button;
+  }
+
   &:after {
     content: none;
   }
@@ -29,6 +41,10 @@
       opacity: 1;
     }
 
+    .launch-studio-button {
+      opacity: 1;
+    }
+
     .button-hover-shadow {
       opacity: 1;
     }