cypress-io · BlueWinds · May 26, 2022 · May 25, 2022 · May 25, 2022 · May 25, 2022
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
@@ -1132,6 +1132,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:
@@ -1475,6 +1476,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 +2340,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 +2434,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,8 @@
+import { mount } from 'cypress/react'
+import 'cypress-real-events/support'
+import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
+
+import '../../src/main.scss'
+
+Cypress.Commands.add('mount', mount)
+installCustomPercyCommand()
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/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)
     })