Merge branch 'develop' into tgriesser/feat/UNIFY-1774-auto-source-web…

…pack * develop: fix: UNIFY-1408, warnings should be nested appropriately & clearable (#21630) chore: fix unit-tests-release job (#21652) chore(deps): update dependency eventsource to v2 [security] (#21639) fix: Add hover states for test titles in reporter (#21635) docs(CONTRIBUTING): Fix link to "good first issue" for newcomers (#21614) chore: compare `cy.screenshot` images in percy (#21598) fix: switching from ct to e2e (non-configured) does not go through setup (#21607) fix: issue with compilation failures in component testing (#21599) test: fix flaky launchpad test (#21637) docs: remove gitter link in contributing guide. (#21592) fix: order projects by most recently opened (#21589) fix: prevent crash on runs visit when offline (#21618) fix: pass family parameter to connect method (#21545) chore: clean up `debug` statements in preparation for 10.0 release, add `debug` docs (#21621) chore: add regression test for ts detection (#21578)
cypress-io · May 27, 2022 · 1625647 · 1625647
2 parents 50e6d4c + b0e32f8
commit 1625647
Show file tree

Hide file tree

Showing 133 changed files with 2,460 additions and 727 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -4,7 +4,7 @@ Thanks for taking the time to contribute! :smile:
 
 **Once you learn how to use Cypress, you can contribute in many ways:**
 
-- Join the [Cypress Gitter chat](https://on.cypress.io/chat) or [Discord](https://on.cypress.io/discord) and answer questions. Teaching others how to use Cypress is a great way to learn more about how it works.
+- Join the [Cypress Discord](https://on.cypress.io/discord) and answer questions. Teaching others how to use Cypress is a great way to learn more about how it works.
 - Blog about Cypress. We display blogs featuring Cypress on our [Examples](https://on.cypress.io/examples) page. If you'd like your blog featured, [open a PR to add it to our docs](https://github.com/cypress-io/cypress-documentation/blob/develop/CONTRIBUTING.md#adding-examples).
 - Write some documentation or improve our existing docs. See our [guide to contributing to our docs](https://github.com/cypress-io/cypress-documentation/blob/master/CONTRIBUTING.md).
 - Give a talk about Cypress. [Contact us](mailto:support@cypress.io) ahead of time and we'll send you some swag. :shirt:
@@ -14,7 +14,7 @@ Thanks for taking the time to contribute! :smile:
 - [Report bugs](https://github.com/cypress-io/cypress/issues/new) by opening an issue.
 - [Request features](https://github.com/cypress-io/cypress/issues/new) by opening an issue.
 - [Help triage existing issues](#triaging-issues).
-- Write code to address an issue. We have some issues labeled as [`first-timers-only`](https://github.com/cypress-io/cypress/labels/first-timers-only) that are a good place to start. Please thoroughly read our [Writing Code guide](#writing-code).
+- Write code to address an issue. We have some issues labeled as [`good first issue`](https://github.com/cypress-io/cypress/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) that are a good place to start. Please thoroughly read our [Writing Code guide](#writing-code).
 
 ## Table of Contents
 
@@ -329,9 +329,7 @@ This will install all the dependencies for the repo and perform a preliminary bu
 yarn start
 ```
 
-If there are errors building the packages, prefix the commands with `DEBUG=cypress:*` to see more details.
-
-This outputs a lot of debugging lines. To focus on an individual module, run with `DEBUG=cypress:launcher` for instance.
+If there are errors building the packages, prefix the commands with `DEBUG=cypress:*` to see more details. This outputs a lot of debugging lines. To focus on an individual module, run with `DEBUG=cypress:launcher:*` for instance. See ["Debug logs"](./guides/debug-logs.md) for more info.
 
 When running `yarn start` this routes through the CLI and eventually calls `yarn dev` with the proper arguments. This enables Cypress day-to-day development to match the logic of the built binary + CLI integration.
 
@@ -411,30 +409,9 @@ Each package is responsible for building itself and testing itself and can do so
 | `test-integration` | Run all integration tests within the package; `exit 0` if N/A                                                                                            |
 | `test-watch`       | Run all unit tests in the package in watch mode                                                                                                          |
 
-#### Debugging
-
-Some packages use [debug](https://github.com/visionmedia/debug#readme) to
-log debug messages to the console. The naming scheme should be
-`cypress:<package name>`; where package name is without the `@packages` scope. For example to see launcher messages during unit
-tests start it using
-
-```bash
-$ DEBUG=cypress:launcher yarn test --scope @packages/launcher
-```
-
-If you want to see log messages from all Cypress projects use wild card
+#### Debug Logs
 
-```bash
-$ DEBUG=cypress:*
-```
-
-Or for an individual package:
-
-```bash
-DEBUG=cypress:cli
-DEBUG=cypress:server
-DEBUG=cypress:launcher
-```
+Many Cypress packages print out debugging information to console via the `debug` module. See ["Debug logs"](./guides/debug-logs.md) for more information.
 
 ### Coding Style
 

diff --git a/circle.yml b/circle.yml
@@ -28,7 +28,7 @@ mainBuildFilters: &mainBuildFilters
     branches:
       only:
         - develop
-        - 10.0-release
+        - fix-unit-tests-release
 
 # uncomment & add to the branch conditions below to disable the main linux
 # flow if we don't want to test it for a certain branch
@@ -45,7 +45,7 @@ macWorkflowFilters: &mac-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ '10.0-release', << pipeline.git.branch >> ]
+    - equal: [ 'fix-unit-tests-release', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -57,7 +57,7 @@ fullWindowsWorkflowFilters: &full-windows-workflow-filters
     branches:
       only:
       - develop
-      - '10.0-release'
+      - 'fix-unit-tests-release'
       - '*-release'
       - 'win*'
 
@@ -108,7 +108,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "tbiethman/issue-21236" && "$CIRCLE_BRANCH" != "10.0-release" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "fix-unit-tests-release" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi
@@ -494,7 +494,7 @@ commands:
       package:
         description: package to target
         type: enum
-        enum: ['frontend-shared', 'launchpad', 'app']
+        enum: ['frontend-shared', 'launchpad', 'app', 'reporter']
       browser:
         description: browser shortname to target
         type: string
@@ -519,11 +519,21 @@ commands:
             cmd=$([[ <<parameters.percy>> == 'true' ]] && echo 'yarn percy exec --parallel -- --') || true
             DEBUG=<<parameters.debug>> \
             CYPRESS_KONFIG_ENV=production \
-            CYPRESS_RECORD_KEY=$TEST_LAUNCHPAD_RECORD_KEY \
+            CYPRESS_RECORD_KEY=${TEST_LAUNCHPAD_RECORD_KEY:-$MAIN_RECORD_KEY} \
             PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
             PERCY_ENABLE=${PERCY_TOKEN:-0} \
             PERCY_PARALLEL_TOTAL=-1 \
             $cmd yarn workspace @packages/<<parameters.package>> cypress:run:<<parameters.type>> --browser <<parameters.browser>> --record --parallel --group <<parameters.package>>-<<parameters.type>>
+      - run:
+          command: |
+            if [[ <<parameters.package>> == 'app' && <<parameters.percy>> == 'true' && -d "packages/app/cypress/screenshots/runner/screenshot/screenshot.cy.tsx/percy" ]]; then
+              PERCY_PARALLEL_NONCE=$CIRCLE_SHA1 \
+              PERCY_ENABLE=${PERCY_TOKEN:-0} \
+              PERCY_PARALLEL_TOTAL=-1 \
+              yarn percy upload packages/app/cypress/screenshots/runner/screenshot/screenshot.cy.tsx/percy
+            else
+              echo "skipping percy screenshots uploading"
+            fi
       - store_test_results:
           path: /tmp/cypress
       - store_artifacts:
@@ -1132,6 +1142,7 @@ jobs:
             run-frontend-shared-component-tests-chrome,
             run-launchpad-component-tests-chrome,
             run-launchpad-integration-tests-chrome,
+            run-reporter-component-tests-chrome,
             run-webpack-dev-server-integration-tests,
             run-vite-dev-server-integration-tests
       - run:
@@ -1209,6 +1220,11 @@ jobs:
     parallelism: 1
     steps:
       - restore_cached_workspace
+      - run:
+          name: Update known_hosts with github.com keys
+          command: |
+            mkdir -p ~/.ssh
+            ssh-keyscan github.com >> ~/.ssh/known_hosts
       - run: yarn test-npm-package-release-script
 
   lint-types:
@@ -1475,6 +1491,21 @@ jobs:
           browser: electron
           experimentalSessionAndOrigin: true
 
+  run-reporter-component-tests-chrome:
+    <<: *defaults
+    parameters:
+      <<: *defaultsParameters
+      percy:
+        type: boolean
+        default: false
+    parallelism: 7
+    steps:
+      - run-new-ui-tests:
+          browser: chrome
+          percy: << parameters.percy >>
+          package: reporter
+          type: ct
+
   reporter-integration-tests:
     <<: *defaults
     parallelism: 3
@@ -2324,6 +2355,11 @@ linux-workflow: &linux-workflow
         percy: true
         requires:
           - build
+    - run-reporter-component-tests-chrome:
+        context: [test-runner:cypress-record-key, test-runner:percy]
+        percy: true
+        requires:
+          - build
     - reporter-integration-tests:
         context: [test-runner:cypress-record-key, test-runner:percy]
         requires:
@@ -2413,6 +2449,7 @@ linux-workflow: &linux-workflow
           - run-frontend-shared-component-tests-chrome
           - run-launchpad-component-tests-chrome
           - run-launchpad-integration-tests-chrome
+          - run-reporter-component-tests-chrome
 
     # various testing scenarios, like building full binary
     # and testing it on a real project

diff --git a/graphql-codegen.yml b/graphql-codegen.yml
@@ -103,7 +103,7 @@ generates:
     <<: *vueOperations
 
   './packages/frontend-shared/src/generated/graphql.ts':
-    documents: './packages/frontend-shared/src/gql-components/**/*.{vue,ts,tsx,js,jsx}'
+    documents: './packages/frontend-shared/src/{gql-components,graphql}/**/*.{vue,ts,tsx,js,jsx}'
     <<: *vueOperations
   ###
   # All GraphQL documents imported into the .spec.tsx files for component testing.

diff --git a/guides/README.md b/guides/README.md
@@ -10,11 +10,15 @@ For general contributor information, check out [`CONTRIBUTING.md`](../CONTRIBUTI
 
 ## Table of Contents
 
+* [App lifecycle](./app-lifecycle.md)
 * [Building release artifacts](./building-release-artifacts.md)
 * [Code signing](./code-signing.md)
+* [Debug logs](./debug-logs.md)
 * [Determining the next version of Cypress to be released](./next-version.md)
-* [Remaining Platform Agnostic](./remaining-platform-agnostic.md)
+* [E2E Open Mode Testing](./e2e-open-testing.md)
 * [Error handling](./error-handling.md)
 * [Patching packages](./patch-package.md)
 * [Release process](./release-process.md)
-* [Testing other projects](./testing-other-projects.md)
+* [Testing other projects](./testing-other-projects.md)
+* [Testing strategy and style guide (draft)](./testing-strategy-and-styleguide.md)
+* [Writing cross-platform JavaScript](./writing-cross-platform-javascript.md)
diff --git a/guides/debug-logs.md b/guides/debug-logs.md
@@ -0,0 +1,42 @@
+# Debug Logs
+
+Many Cypress packages use the [`debug` module][debug] to log runtime info to the console.
+
+## Choosing a namespace
+
+The naming scheme for debug namespaces should generally follow this pattern:
+
+```
+cypress:{packageName}:{relative path to file from src root, using : to separate directories, minus index if applicable}
+
+# examples:
+# packages/server/lib/util/file.js -> cypress:server:util:file
+# packages/launcher/windows/index.ts -> cypress:launcher:windows
+```
+
+`cypress-verbose` can be used instead of `cypress` if the logs are overly verbose and would make the output of `DEBUG=cypress:*` unreadable.
+
+Exceptions to these rules:
+* The `cli` uses `cypress:cli:*`.
+* NPM packages should use `{moduleName}` as a prefix instead of `cypress`, like `cypress-webpack-preprocessor` for `npm/webpack-preprocessor`.
+* In some places, like per-request in the `proxy` package, it's more useful to attach `debug` messages to something besides the module (like individual HTTP requests). In that case, it's okay to create namespaces as you see fit. But at least begin with `cypress:{packageName}` or `cypress-verbose:{packageName}`
+
+## Using debug logs
+
+Pass the `DEBUG` environment variable to select a set of logs to print to `stderr`. Example selectors:
+
+```shell
+# frequently useful to get a sense of what is happening in the app at a high level
+DEBUG=cypress:*
+# print all info and verbose logs, but don't print verbose logs from `some-noisy-package`
+DEBUG=cypress:*,cypress-verbose:*,-cypress-verbose:some-noisy-package:*
+# print out verbose per-request data for proxied HTTP requests
+DEBUG=cypress-verbose:proxy:http
+
+# in the browser, set `localStorage.DEBUG`:
+localStorage.DEBUG = 'cypress:driver,cypress:driver:*'
+```
+
+For more info, see the [public documentation for printing debug logs](https://docs.cypress.io/guides/references/troubleshooting#Print-DEBUG-logs) and the [`debug` module docs][debug]
+
+[debug]: https://github.com/visionmedia/debug#readme
diff --git a/npm/vite-dev-server/cypress/e2e/react.cy.ts b/npm/vite-dev-server/cypress/e2e/react.cy.ts
@@ -1,6 +1,7 @@
 /// <reference types="cypress" />
 /// <reference path="../support/e2e.ts" />
 import type { fixtureDirs } from '@tooling/system-tests'
+import dedent from 'dedent'
 
 type ProjectDirs = typeof fixtureDirs
 
@@ -24,17 +25,19 @@ for (const project of VITE_REACT) {
     it('should mount a passing test', () => {
       cy.visitApp()
       cy.contains('App.cy.jsx').click()
+      cy.waitForSpecToFinish()
       cy.get('.passed > .num').should('contain', 1)
     })
 
     it('MissingReact: should fail, rerun, succeed', () => {
-      cy.once('uncaught:exception', () => {
+      cy.on('uncaught:exception', () => {
         // Ignore the uncaught exception in the AUT
         return false
       })
 
       cy.visitApp()
       cy.contains('MissingReact.cy.jsx').click()
+      cy.waitForSpecToFinish()
       cy.get('.failed > .num').should('contain', 1)
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(`src/MissingReact.jsx`,
@@ -46,8 +49,14 @@ for (const project of VITE_REACT) {
     })
 
     it('MissingReactInSpec: should fail, rerun, succeed', () => {
+      cy.on('uncaught:exception', () => {
+        // Ignore the uncaught exception in the AUT
+        return false
+      })
+
       cy.visitApp()
       cy.contains('MissingReactInSpec.cy.jsx').click()
+      cy.waitForSpecToFinish()
       cy.get('.failed > .num').should('contain', 1)
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(`src/MissingReactInSpec.cy.jsx`,
@@ -56,5 +65,55 @@ for (const project of VITE_REACT) {
 
       cy.get('.passed > .num').should('contain', 1)
     })
+
+    it('AppCompilationError: should fail with uncaught exception error', () => {
+      cy.on('uncaught:exception', () => {
+        // Ignore the uncaught exception in the AUT
+        return false
+      })
+
+      cy.visitApp()
+      cy.contains('AppCompilationError.cy.jsx').click()
+      cy.waitForSpecToFinish()
+      cy.get('.failed > .num').should('contain', 1)
+      cy.contains('An uncaught error was detected outside of a test')
+      cy.contains('The following error originated from your test code, not from Cypress.')
+
+      // Correct the problem
+      cy.withCtx(async (ctx) => {
+        await ctx.actions.file.writeFileInProject(
+          `src/AppCompilationError.cy.jsx`,
+          await ctx.file.readFileInProject('src/App.cy.jsx'),
+        )
+      })
+
+      cy.waitForSpecToFinish()
+      cy.get('.passed > .num').should('contain', 1)
+
+      const appCompilationErrorSpec = dedent`
+        import React from 'react'
+        import { mount } from 'cypress/react'
+        import { App } from './App'
+
+        it('renders hello world', () => {
+          mount(<App />)
+          cy.get('h1').contains('Hello World')
+        }
+        })
+      `
+
+      // Cause the problem again
+      cy.withCtx(async (ctx, o) => {
+        await ctx.actions.file.writeFileInProject(
+          `src/AppCompilationError.cy.jsx`,
+          o.appCompilationErrorSpec,
+        )
+      }, { appCompilationErrorSpec })
+
+      cy.waitForSpecToFinish()
+      cy.get('.failed > .num').should('contain', 1)
+      cy.contains('An uncaught error was detected outside of a test')
+      cy.contains('The following error originated from your test code, not from Cypress.')
+    })
   })
 }
diff --git a/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts b/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts
@@ -9,6 +9,7 @@ describe('Config options', () => {
 
     cy.visitApp()
     cy.contains('App.cy.jsx').click()
+    cy.waitForSpecToFinish()
     cy.get('.passed > .num').should('contain', 1)
   })