test [M3-9256]: display cypress test results in html report

.gitignore

@@ -128,6 +128,7 @@ packages/manager/test-report.xml
 **/manager/cypress/downloads/
 **/manager/cypress/results/
 **/manager/cypress/screenshots/
+**/manager/cypress/reports/
 
 packages/manager/cypress/fixtures/example.json
 

packages/manager/.changeset/pr-11795-tests-1741634978355.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+html presentation for cypress test results ([#11795](https://github.com/linode/manager/pull/11795))

packages/manager/cypress.config.ts

@@ -20,7 +20,8 @@ import cypressViteConfig from './cypress/vite.config';
 import { featureFlagOverrides } from './cypress/support/plugins/feature-flag-override';
 import { postRunCleanup } from './cypress/support/plugins/post-run-cleanup';
 import { resetUserPreferences } from './cypress/support/plugins/reset-user-preferences';
-
+import { configureMultiReporters } from './cypress/support/plugins/configure-multi-reporters';
+import cypressOnFix from 'cypress-on-fix';
 /**
  * Exports a Cypress configuration object.
  *
@@ -81,7 +82,8 @@ export default defineConfig({
     // See `cypress/support/plugins/configure-test-suite.ts`.
     specPattern: 'cypress/e2e/core/**/*.spec.{ts,tsx}',
 
-    setupNodeEvents(on, config) {
+    setupNodeEvents(cypressOn, config) {
+      const on = cypressOnFix(cypressOn);
       return setupPlugins(on, config, [
         loadEnvironmentConfig,
         nodeVersionCheck,
@@ -98,8 +100,8 @@ export default defineConfig({
         featureFlagOverrides,
         logTestTagInfo,
         splitCypressRun,
-        enableJunitReport(),
         generateTestWeights,
+        configureMultiReporters,
         postRunCleanup,
       ]);
     },

packages/manager/cypress/support/e2e.ts

@@ -14,6 +14,8 @@
 // ***********************************************************
 
 import '@testing-library/cypress/add-commands';
+// reporter needs to register for events in order to attach media to test results in html report
+import 'cypress-mochawesome-reporter/register';
 // Cypress command and assertion setup.
 import chaiString from 'chai-string';
 import 'cypress-axe';

packages/manager/cypress/support/plugins/configure-multi-reporters.ts

@@ -0,0 +1,38 @@
+import { CypressPlugin } from './plugin';
+import cypressReporterLib from 'cypress-mochawesome-reporter/lib';
+const { beforeRunHook, afterRunHook } = cypressReporterLib;
+import { jUnitE2EReportOptions } from './junit-report';
+
+/**
+ * Configure multiple reporters to be used by Cypress
+ *
+ * @returns Cypress configuration object.
+ */
+export const configureMultiReporters: CypressPlugin = (on, config) => {
+  config.reporter = 'cypress-multi-reporters';
+  config.reporterOptions = {
+    reporterEnabled: 'mocha-junit-reporter, cypress-mochawesome-reporter',
+    //config.env['cypress_test_suite'] = 'core'
+    mochaJunitReporterReporterOptions: jUnitE2EReportOptions(
+      config.env['cypress_test_suite'],
+      false
+    ),
+    cypressMochawesomeReporterReporterOptions: {
+      reportPageTitle: 'Cloud Manager E2e Test Results',
+      embeddedScreenshots: true,
+      videoOnFailOnly: true,
+      charts: true,
+      quiet: true,
+    },
+  };
+
+  // need hooks to insert results into html file by cypress-mochawesome-reporter
+  on('before:run', async (results) => {
+    await beforeRunHook(results);
+  });
+
+  on('after:run', async () => {
+    await afterRunHook();
+  });
+  return config;
+};

packages/manager/cypress/support/plugins/junit-report.ts

@@ -47,3 +47,28 @@ export const enableJunitReport = (
     return config;
   };
 };
+
+/**
+ * Used to get config options for E2E test suite
+ * @param suiteName - Optional suite name in the JUnit output.
+ * @param jenkinsMode - If test is execute in Jenkins env
+ *
+ * @returns object.
+ */
+export const jUnitE2EReportOptions = (
+  testSuite?: string,
+  jenkinsMode: boolean = false
+) => {
+  if (testSuite) {
+    const testSuiteName = `${capitalize(testSuite)} Test Suite`;
+    return {
+      mochaFile: 'cypress/results/test-results-[hash].xml',
+      rootSuiteTitle: 'Cloud Manager Cypress Tests',
+      testsuitesTitle: testSuiteName,
+      jenkinsMode,
+      suiteTitleSeparatedBy: jenkinsMode ? '→' : ' ',
+    };
+  } else {
+    return {};
+  }
+};

packages/manager/cypress/support/util/cypress-mochawesome-reporter.d.ts

@@ -0,0 +1 @@
+declare module 'cypress-mochawesome-reporter/lib';

packages/manager/package.json

@@ -25,11 +25,11 @@
     "@hookform/resolvers": "3.9.1",
     "@linode/api-v4": "workspace:*",
     "@linode/design-language-system": "^4.0.0",
-    "@linode/validation": "workspace:*",
     "@linode/queries": "workspace:*",
     "@linode/search": "workspace:*",
     "@linode/ui": "workspace:*",
     "@linode/utilities": "workspace:*",
+    "@linode/validation": "workspace:*",
     "@lukemorales/query-key-factory": "^1.3.4",
     "@mui/icons-material": "^6.4.5",
     "@mui/material": "^6.4.5",
@@ -120,7 +120,9 @@
       "prettier --write",
       "eslint --ext .js,.ts,.tsx --quiet"
     ],
-    "*.{ts,tsx}": ["sh -c 'pnpm typecheck'"]
+    "*.{ts,tsx}": [
+      "sh -c 'pnpm typecheck'"
+    ]
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.3.0",
@@ -181,6 +183,9 @@
     "cypress": "14.0.1",
     "cypress-axe": "^1.6.0",
     "cypress-file-upload": "^5.0.8",
+    "cypress-mochawesome-reporter": "^3.8.2",
+    "cypress-multi-reporters": "^2.0.5",
+    "cypress-on-fix": "^1.1.0",
     "cypress-real-events": "^1.14.0",
     "cypress-vite": "^1.6.0",
     "dotenv": "^16.0.3",