Merge branch 'develop' into 8.0-release

# Conflicts:
#	yarn.lock

.node-version

@@ -1 +1 @@
-14.17.0
+14.16.0

appveyor.yml

@@ -8,7 +8,7 @@ branches:
 # https://www.appveyor.com/docs/lang/nodejs-iojs/
 environment:
   # use matching version of Node.js
-  nodejs_version: "14.17.0"
+  nodejs_version: "14.16.0"
   # encode secure variables which will NOT be used
   # in pull requests
   # https://www.appveyor.com/docs/build-configuration/#secure-variables

browser-versions.json

@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "92.0.4515.93",
-  "chrome:stable": "91.0.4472.114"
+  "chrome:beta": "92.0.4515.101",
+  "chrome:stable": "91.0.4472.164"
 }

circle.yml

@@ -49,7 +49,7 @@ executors:
   # the Docker image with Cypress dependencies and Chrome browser
   cy-doc:
     docker:
-      - image: cypress/browsers:node14.17.0-chrome91-ff89
+      - image: cypress/browsers:node14.16.0-chrome90-ff88
     # by default, we use "small" to save on CI costs. bump on a per-job basis if needed.
     resource_class: small
     environment:
@@ -58,7 +58,7 @@ executors:
   # Docker image with non-root "node" user
   non-root-docker-user:
     docker:
-      - image: cypress/browsers:node14.17.0-chrome91-ff89
+      - image: cypress/browsers:node14.16.0-chrome90-ff88
         user: node
     environment:
       PLATFORM: linux
@@ -1126,7 +1126,6 @@ jobs:
 
   runner-integration-tests-electron:
     <<: *defaults
-    resource_class: medium
     parallelism: 2
     steps:
       - run-runner-integration-tests:

npm/react/README.md

@@ -43,11 +43,11 @@ If you are coming from Enzyme world, check out the [enzyme](cypress/component/ba
 
 - [My Vision for Component Tests in Cypress](https://glebbahmutov.com/blog/my-vision-for-component-tests/)
 - [Unit Testing React components with Cypress](https://itnext.io/unit-testing-react-components-with-cypress-4d4cf8cd59a0)
-- [Test React Component with @cypress/react Example](https://dev.to/bahmutov/test-react-component-with-@cypress/react-example-4d99)
+- [Test React Component with @cypress/react Example](https://dev.to/bahmutov/test-react-component-with-cypress-react-unit-test-example-4d99)
 - [Tic-Tac-Toe Component Tests](https://glebbahmutov.com/blog/tic-tac-toe-component-tests/)
 - [Using .env and .env.test from React component tests](https://medium.com/@bahmutov/using-env-and-env-test-from-react-component-tests-c11aa2040bc8)
 - [Visual testing for React components using open source tools](https://glebbahmutov.com/blog/open-source-visual-testing-of-components/)
-- [12 Recipes for testing React applications using @cypress/react](https://dev.to/bahmutov/12-recipes-for-testing-react-applications-using-@cypress/react-46g6) (compare to [12 Recipes for testing React applications using Testing Library](https://dev.to/jooforja/12-recipes-for-testing-react-applications-using-testing-library-1bh2#portal))
+- [12 Recipes for testing React applications using @cypress/react](https://dev.to/bahmutov/12-recipes-for-testing-react-applications-using-cypress-react-unit-test-46g6) (compare to [12 Recipes for testing React applications using Testing Library](https://dev.to/jooforja/12-recipes-for-testing-react-applications-using-testing-library-1bh2#portal))
 - [Cypress Unit Testing React Components With TypeScript](https://medium.com/swlh/cypress-unit-testing-react-components-with-typescript-77b38e5043b3)
 - [Test The Interface Not The Implementation](https://glebbahmutov.com/blog/test-the-interface/) compares Jest + React Testing Library to @cypress/react + Cypress Testing Library
 - [Components People Test](https://glebbahmutov.com/blog/components-people-test/) about testing a component inside a Next.js-powered blog

npm/vite-dev-server/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/vite-dev-server-v2.0.2](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v2.0.1...@cypress/vite-dev-server-v2.0.2) (2021-07-15)
+
+
+### Bug Fixes
+
+* **vite:** autorefresh new spec files ([#17270](https://github.com/cypress-io/cypress/issues/17270)) ([99f9352](https://github.com/cypress-io/cypress/commit/99f93528c87b22656d4d732dfb2ed6843991d861))
+
 # [@cypress/vite-dev-server-v2.0.1](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v2.0.0...@cypress/vite-dev-server-v2.0.1) (2021-06-18)
 
 

package.json

@@ -43,7 +43,7 @@
     "npm-release": "node scripts/npm-release.js",
     "prestart": "yarn ensure-deps",
     "start": "cypress open --dev --global",
-    "stop-only": "npx stop-only --skip .cy,.publish,.projects,node_modules,dist,dist-test,fixtures,lib,bower_components,src,__snapshots__ --exclude e2e.ts,cypress-tests.ts,unwritten.spec.ts",
+    "stop-only": "npx stop-only --skip .cy,.publish,.projects,node_modules,dist,dist-test,fixtures,lib,bower_components,src,__snapshots__ --exclude e2e.ts,cypress-tests.ts",
     "stop-only-all": "yarn stop-only --folder packages",
     "pretest": "yarn ensure-deps",
     "test": "yarn lerna exec yarn test --scope cypress --scope \"'@packages/{electron,extension,https-proxy,launcher,net-stubbing,network,proxy,rewriter,runner,runner-shared,socket}'\"",
@@ -196,7 +196,7 @@
     "yarn-deduplicate": "3.1.0"
   },
   "engines": {
-    "node": ">=14.17.0",
+    "node": ">=14.16.0",
     "yarn": ">=1.17.3"
   },
   "productName": "Cypress",
@@ -234,7 +234,9 @@
       "**/@ffmpeg-installer",
       "**/@ffmpeg-installer/**",
       "**/webpack-preprocessor/babel-loader",
-      "**/webpack-batteries-included-preprocessor/ts-loader"
+      "**/webpack-batteries-included-preprocessor/ts-loader",
+      "**/@vue/runtime-dom",
+      "**/vue"
     ]
   },
   "lint-staged": {

packages/electron/package.json

@@ -24,7 +24,7 @@
     "minimist": "1.2.5"
   },
   "devDependencies": {
-    "electron": "13.1.6",
+    "electron": "12.0.0-beta.14",
     "execa": "4.1.0",
     "mocha": "3.5.3"
   },

packages/reporter/cypress/integration/commands_spec.ts

@@ -306,13 +306,20 @@ describe('commands', () => {
     beforeEach(() => {
       cy.spy(runner, 'emit')
       cy.clock()
-      cy.get('.command').first().trigger('mouseover')
+      cy.get('.command-wrapper').first().trigger('mouseover')
+
+      // react uses mouseover for mouseenter events,
+      // and uses e.fromElement to decide to send it
+      cy.get('.command-method').first().trigger('mouseover', {
+        fromElement: cy.$$('.command-wrapper-text:first')[0],
+      })
     })
 
     it('shows snapshot after 50ms passes', () => {
       cy.wrap(runner.emit).should('not.be.calledWith', 'runner:show:snapshot')
       cy.tick(50)
       cy.wrap(runner.emit).should('be.calledWith', 'runner:show:snapshot', 1)
+      cy.wrap(runner.emit).should('be.calledOnce')
     })
 
     describe('then mousing out', () => {

packages/reporter/src/commands/command.tsx

@@ -187,8 +187,8 @@ class Command extends Component<Props> {
             'command-is-open': this.isOpen,
           },
         )}
-        onMouseOver={() => this._snapshot(true)}
-        onMouseOut={() => this._snapshot(false)}
+        onMouseEnter={() => this._snapshot(true)}
+        onMouseLeave={() => this._snapshot(false)}
       >
         <FlashOnClick
           message='Printed output to your console'

packages/runner-shared/src/event-manager.js

@@ -343,9 +343,7 @@ export const eventManager = {
             return
           }
 
-          this._restoreStudioFromState(state)
-
-          this._initializeStudio(config)
+          studioRecorder.initialize(config, state)
 
           const runnables = Cypress.runner.normalizeAll(state.tests)
 
@@ -405,9 +403,7 @@ export const eventManager = {
         reporterBus.emit('reporter:collect:run:state', (reporterState) => {
           resolve({
             ...reporterState,
-            studioTestId: studioRecorder.testId,
-            studioSuiteId: studioRecorder.suiteId,
-            studioUrl: studioRecorder.url,
+            studio: studioRecorder.state,
           })
         })
       })
@@ -482,14 +478,8 @@ export const eventManager = {
       localBus.emit('script:error', err)
     })
 
-    Cypress.on('test:before:run:async', (test) => {
-      if (studioRecorder.suiteId) {
-        studioRecorder.setTestId(test.id)
-      }
-
-      if (studioRecorder.hasRunnableId && test.invocationDetails) {
-        studioRecorder.setFileDetails(test.invocationDetails)
-      }
+    Cypress.on('test:before:run:async', (_attr, test) => {
+      studioRecorder.interceptTest(test)
     })
 
     Cypress.on('test:after:run', (test) => {
@@ -553,42 +543,6 @@ export const eventManager = {
     })
   },
 
-  _restoreStudioFromState (state) {
-    if (state.studioTestId) {
-      studioRecorder.setTestId(state.studioTestId)
-    }
-
-    if (state.studioSuiteId) {
-      studioRecorder.setSuiteId(state.studioSuiteId)
-    }
-
-    if (state.studioUrl) {
-      studioRecorder.setUrl(state.studioUrl)
-    }
-  },
-
-  _initializeStudio (config) {
-    if (studioRecorder.hasRunnableId) {
-      studioRecorder.startLoading()
-
-      if (studioRecorder.suiteId) {
-        Cypress.runner.setOnlySuiteId(studioRecorder.suiteId)
-
-        // root runnable always has id of r1
-        // and does not have invocationDetails so we must set manually from config
-        if (studioRecorder.suiteId === 'r1') {
-          studioRecorder.setFileDetails({
-            absoluteFile: config.spec.absolute,
-            line: null,
-            column: null,
-          })
-        }
-      } else if (studioRecorder.testId) {
-        Cypress.runner.setOnlyTestId(studioRecorder.testId)
-      }
-    }
-  },
-
   _interceptStudio (displayProps) {
     if (studioRecorder.isActive) {
       displayProps.hookId = studioRecorder.hookId

packages/runner-shared/src/studio/studio-recorder.js

@@ -7,6 +7,8 @@ const saveErrorMessage = (message) => {
   return `\
 ${message}\n\n\
 Cypress was unable to save these commands to your spec file. \
+You can use the copy button below to copy the commands to your clipboard. \
+\n
 Cypress Studio is still in beta and the team is working hard to \
 resolve issues like this. To help us fix this issue more quickly, \
 you can provide us with more information by clicking 'Learn more' below.`
@@ -45,6 +47,8 @@ export class StudioRecorder {
   @observable _hasStarted = false
 
   fileDetails = null
+  absoluteFile = null
+  runnableTitle = null
   _currentId = 1
   _previousMouseEvent = null
 
@@ -79,6 +83,14 @@ export class StudioRecorder {
     }
   }
 
+  @computed get state () {
+    return {
+      testId: this.testId,
+      suiteId: this.suiteId,
+      url: this.url,
+    }
+  }
+
   get Cypress () {
     return eventManager.getCypress()
   }
@@ -144,6 +156,14 @@ export class StudioRecorder {
     this.fileDetails = fileDetails
   }
 
+  setAbsoluteFile = (absoluteFile) => {
+    this.absoluteFile = absoluteFile
+  }
+
+  setRunnableTitle = (runnableTitle) => {
+    this.runnableTitle = runnableTitle
+  }
+
   _clearPreviousMouseEvent = () => {
     this._previousMouseEvent = null
   }
@@ -152,6 +172,55 @@ export class StudioRecorder {
     return this._previousMouseEvent && $(el).is(this._previousMouseEvent.element)
   }
 
+  @action initialize = (config, state) => {
+    const { studio } = state
+
+    if (studio) {
+      if (studio.testId) {
+        this.setTestId(studio.testId)
+      }
+
+      if (studio.suiteId) {
+        this.setSuiteId(studio.suiteId)
+      }
+
+      if (studio.url) {
+        this.setUrl(studio.url)
+      }
+    }
+
+    if (this.hasRunnableId) {
+      this.setAbsoluteFile(config.spec.absolute)
+      this.startLoading()
+
+      if (this.suiteId) {
+        this.Cypress.runner.setOnlySuiteId(this.suiteId)
+      } else if (this.testId) {
+        this.Cypress.runner.setOnlyTestId(this.testId)
+      }
+    }
+  }
+
+  @action interceptTest = (test) => {
+    if (this.suiteId) {
+      this.setTestId(test.id)
+    }
+
+    if (this.hasRunnableId) {
+      if (test.invocationDetails) {
+        this.setFileDetails(test.invocationDetails)
+      }
+
+      if (this.suiteId) {
+        if (test.parent && test.parent.id !== 'r1') {
+          this.setRunnableTitle(test.parent.title)
+        }
+      } else {
+        this.setRunnableTitle(test.title)
+      }
+    }
+  }
+
   @action start = (body) => {
     this.isActive = true
     this.isLoading = false
@@ -202,8 +271,11 @@ export class StudioRecorder {
 
     eventManager.emit('studio:save', {
       fileDetails: this.fileDetails,
+      absoluteFile: this.absoluteFile,
+      runnableTitle: this.runnableTitle,
       commands: this.logs,
       isSuite: !!this.suiteId,
+      isRoot: this.suiteId === 'r1',
       testName,
     })
   }