Merge branch 'tgriesser/fix/UNIFY-1408' of github.com:cypress-io/cypr…

…ess into tgriesser/fix/UNIFY-1408 * 'tgriesser/fix/UNIFY-1408' of github.com:cypress-io/cypress: 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)
cypress-io · May 26, 2022 · 4bd7f0c · 4bd7f0c
2 parents b75cf44 + de8e1e0
commit 4bd7f0c
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 10 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -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
 

diff --git a/circle.yml b/circle.yml
@@ -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,7 +519,7 @@ 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 \
@@ -1142,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:
@@ -1485,6 +1486,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
@@ -2334,6 +2350,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:
@@ -2423,6 +2444,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/packages/reporter/cypress.config.ts b/packages/reporter/cypress.config.ts
@@ -1,15 +1,19 @@
 import { defineConfig } from 'cypress'
+import webpackConfig from './webpack.config.ts'
 
 export default defineConfig({
   projectId: 'ypt4pf',
   reporter: '../../node_modules/cypress-multi-reporters/index.js',
+
   reporterOptions: {
     configFile: '../../mocha-reporter-config.json',
   },
+
   retries: {
     runMode: 2,
     openMode: 0,
   },
+
   e2e: {
     baseUrl: 'http://localhost:5006',
     setupNodeEvents (_on, config) {
@@ -22,4 +26,12 @@ export default defineConfig({
     viewportHeight: 660,
     viewportWidth: 400,
   },
+
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+      webpackConfig,
+    },
+  },
 })
diff --git a/packages/reporter/cypress/support/component-index.html b/packages/reporter/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root class="reporter" style="padding: 20px;"></div>
+  </body>
+</html>
diff --git a/packages/reporter/cypress/support/component.ts b/packages/reporter/cypress/support/component.ts
@@ -0,0 +1,16 @@
+import { mount } from 'cypress/react'
+import 'cypress-real-events/support'
+import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
+
+import '../../src/main.scss'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+installCustomPercyCommand()
diff --git a/packages/reporter/package.json b/packages/reporter/package.json
@@ -8,6 +8,7 @@
     "clean-deps": "rimraf node_modules",
     "cypress:open": "node ../../scripts/cypress open --project .",
     "cypress:run": "node ../../scripts/cypress run --project .",
+    "cypress:run:ct": "cross-env TZ=America/New_York node ../../scripts/cypress run --component --project .",
     "watch": "yarn build-for-tests --watch --progress"
   },
   "devDependencies": {

diff --git a/packages/reporter/src/hooks/hooks.cy.tsx b/packages/reporter/src/hooks/hooks.cy.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Hook } from './hooks'
+
+import '../main.scss'
+
+describe('hooks/hooks.tsx', () => {
+  it('should mount', () => {
+    const model = {
+      failed: false,
+      hookName: 'TEST BODY',
+    }
+
+    cy.mount(<div className="runnable suite">
+      <div className="hooks-container">
+        <Hook model={model} showNumber={false} />
+      </div>
+    </div>)
+
+    cy.percySnapshot()
+
+    cy.contains('TEST BODY').click().realHover()
+    cy.percySnapshot()
+  })
+})
diff --git a/packages/reporter/src/hooks/hooks.scss b/packages/reporter/src/hooks/hooks.scss
@@ -14,9 +14,7 @@
       width: 100%;
 
       &:hover {
-        .collapsible-header {
-          color: $gray-300;
-        }
+        background-color: $gray-900;
 
         .hook-open-in-ide {
           cursor: pointer;

diff --git a/packages/reporter/src/runnables/runnables.scss b/packages/reporter/src/runnables/runnables.scss
@@ -110,7 +110,7 @@
 
         .collapsible-header-inner {
           &:hover {
-            background-color: $gray-1000;
+            background-color: $gray-900;
             cursor: pointer;
           }
 

diff --git a/packages/reporter/src/test/test.cy.tsx b/packages/reporter/src/test/test.cy.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Test from './test'
+
+describe('test/test.tsx', () => {
+  it('should mount', () => {
+    const model = {
+      isOpen: false,
+      level: 0,
+      state: 'passed',
+      title: 'foobar',
+      attempts: [],
+    }
+
+    const appState = {
+      studioActive: false,
+    }
+
+    cy.mount(<div className="runnable suite">
+      <Test model={model} appState={appState} />
+    </div>)
+
+    cy.percySnapshot()
+
+    cy.contains('foobar').click().realHover()
+    cy.percySnapshot()
+  })
+})
diff --git a/packages/server/package.json b/packages/server/package.json
@@ -161,7 +161,7 @@
     "cross-env": "6.0.3",
     "devtools-protocol": "0.0.839267",
     "eol": "0.9.1",
-    "eventsource": "1.0.7",
+    "eventsource": "2.0.2",
     "https-proxy-agent": "3.0.1",
     "mocha": "7.1.0",
     "mocha-banner": "1.1.2",

diff --git a/packages/ui-components/cypress/support/customPercyCommand.ts b/packages/ui-components/cypress/support/customPercyCommand.ts
@@ -72,7 +72,7 @@ class ElementOverrideManager {
    */
   performOverrides (cy: Cypress.cy, overrides: NonNullable<CustomSnapshotOptions['elementOverrides']>) {
     const observer = new MutationObserver((mutations) => {
-      this.mutationStack ??= []
+      this.mutationStack = this.mutationStack || []
       this.mutationStack.push(...mutations)
     })
 

diff --git a/yarn.lock b/yarn.lock
@@ -17435,7 +17435,12 @@ events@^3.0.0, events@^3.2.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
-[email protected], eventsource@^1.0.7:
+[email protected]:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-2.0.2.tgz#76dfcc02930fb2ff339520b6d290da573a9e8508"
+  integrity sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==
+
+eventsource@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.0.7.tgz#8fbc72c93fcd34088090bc0a4e64f4b5cee6d8d0"
   integrity sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==