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
 

docker-compose.yml

@@ -49,6 +49,7 @@ x-e2e-env:
 
   # Cypress reporting.
   CY_TEST_JUNIT_REPORT: ${CY_TEST_JUNIT_REPORT}
+  CY_TEST_HTML_REPORT: ${CY_TEST_HTML_REPORT}
   CY_TEST_USER_REPORT: ${CY_TEST_USER_REPORT}
 
   # Cloud Manager build environment.

docs/development-guide/08-testing.md

@@ -210,6 +210,7 @@ Environment variables related to Cypress logging and reporting, as well as repor
 |---------------------------------|----------------------------------------------------|------------------|----------------------------|
 | `CY_TEST_USER_REPORT`           | Log test account information when tests begin      | `1`              | Unset; disabled by default |
 | `CY_TEST_JUNIT_REPORT`          | Enable JUnit reporting                             | `1`              | Unset; disabled by default |
+| `CY_TEST_HTML_REPORT`          | Generate html report containing E2E test results   | `1`              | Unset; disabled by default |
 | `CY_TEST_DISABLE_FILE_WATCHING` | Disable file watching in Cypress UI                | `1`              | Unset; disabled by default |
 | `CY_TEST_DISABLE_RETRIES`       | Disable test retries on failure in CI              | `1`              | Unset; disabled by default |
 | `CY_TEST_FAIL_ON_MANAGED`       | Fail affected tests when Managed is enabled        | `1`              | Unset; disabled by default |

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

@@ -3,7 +3,10 @@ import { defineConfig } from 'cypress';
 import { setupPlugins } from './cypress/support/plugins';
 import { configureBrowser } from './cypress/support/plugins/configure-browser';
 import { configureFileWatching } from './cypress/support/plugins/configure-file-watching';
-import { configureTestSuite } from './cypress/support/plugins/configure-test-suite';
+import {
+  enableJunitE2eReport,
+  enableJunitComponentReport,
+} from './cypress/support/plugins/junit-report';
 import { discardPassedTestRecordings } from './cypress/support/plugins/discard-passed-test-recordings';
 import { loadEnvironmentConfig } from './cypress/support/plugins/load-env-config';
 import { nodeVersionCheck } from './cypress/support/plugins/node-version-check';
@@ -13,14 +16,15 @@ import { configureApi } from './cypress/support/plugins/configure-api';
 import { fetchAccount } from './cypress/support/plugins/fetch-account';
 import { fetchLinodeRegions } from './cypress/support/plugins/fetch-linode-regions';
 import { splitCypressRun } from './cypress/support/plugins/split-run';
-import { enableJunitReport } from './cypress/support/plugins/junit-report';
 import { generateTestWeights } from './cypress/support/plugins/generate-weights';
 import { logTestTagInfo } from './cypress/support/plugins/test-tagging-info';
 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 { enableHtmlReport } from './cypress/support/plugins/html-report';
+import { configureMultiReporters } from './cypress/support/plugins/configure-multi-reporters';
+import cypressOnFix from 'cypress-on-fix';
 /**
  * Exports a Cypress configuration object.
  *
@@ -62,11 +66,14 @@ export default defineConfig({
     viewportWidth: 500,
     viewportHeight: 500,
 
-    setupNodeEvents(on, config) {
+    setupNodeEvents(cypressOn, config) {
+      const on = cypressOnFix(cypressOn);
       return setupPlugins(on, config, [
         loadEnvironmentConfig,
         discardPassedTestRecordings,
-        enableJunitReport('Component', true),
+        enableJunitComponentReport,
+        enableHtmlReport,
+        configureMultiReporters,
       ]);
     },
   },
@@ -76,18 +83,15 @@ export default defineConfig({
 
     // This can be overridden using `CYPRESS_BASE_URL`.
     baseUrl: 'http://localhost:3000',
-
-    // This is overridden when `CY_TEST_SUITE` is defined.
-    // 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,
         configureApi,
         configureFileWatching,
-        configureTestSuite,
         configureBrowser,
         vitePreprocess,
         discardPassedTestRecordings,
@@ -98,8 +102,10 @@ export default defineConfig({
         featureFlagOverrides,
         logTestTagInfo,
         splitCypressRun,
-        enableJunitReport(),
         generateTestWeights,
+        enableJunitE2eReport,
+        enableHtmlReport,
+        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,33 @@
+import { CypressPlugin } from './plugin';
+// The name of the environment variable to read when checking report configuration.
+const envVarJunit = 'CY_TEST_JUNIT_REPORT';
+const envVarHtml = 'CY_TEST_HTML_REPORT';
+
+/**
+ * Configure multiple reporters to be used by Cypress
+ * Multireporter uses between 0 and 2 reporters (junit, html)
+ * and for either core or component directory
+ *
+ * @returns Cypress configuration object.
+ */
+export const configureMultiReporters: CypressPlugin = (_on, config) => {
+  const arrReporters = [];
+  if (config.env[envVarJunit]) {
+    console.log('Junit reporting configuration added.');
+    arrReporters.push('mocha-junit-reporter');
+  }
+  if (config.env[envVarHtml]) {
+    console.log('Html reporting configuration added.');
+    arrReporters.push('cypress-mochawesome-reporter');
+  }
+  if (arrReporters.length > 0) {
+    config.reporter = 'cypress-multi-reporters';
+    if (!config.reporterOptions) {
+      config.reporterOptions = {};
+    }
+    config.reporterOptions.reporterEnabled = arrReporters.join(', ');
+  } else {
+    console.log('No reporters configured.');
+  }
+  return config;
+};

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

@@ -0,0 +1,33 @@
+import { CypressPlugin } from './plugin';
+import cypressReporterLib from 'cypress-mochawesome-reporter/lib';
+const { beforeRunHook, afterRunHook } = cypressReporterLib;
+
+// The name of the environment variable to read when checking report configuration.
+const envVarName = 'CY_TEST_HTML_REPORT';
+
+/**
+ * @returns Cypress configuration object.
+ */
+export const enableHtmlReport: CypressPlugin = async function (on, config) {
+  if (!!config.env[envVarName]) {
+    if (!config.reporterOptions) {
+      config.reporterOptions = {};
+    }
+    config.reporterOptions.cypressMochawesomeReporterReporterOptions = {
+      reportPageTitle: 'Cloud Manager E2e Test Results',
+      inlineAssets: true,
+      embeddedScreenshots: true,
+      videoOnFailOnly: true,
+      charts: true,
+      quiet: true,
+    };
+    on('before:run', async (results) => {
+      await beforeRunHook(results);
+    });
+
+    on('after:run', async () => {
+      await afterRunHook();
+    });
+  }
+  return config;
+};

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

@@ -8,42 +8,37 @@ const capitalize = (str: string): string => {
 };
 
 /**
- * Returns a plugin to enable JUnit reporting when `CY_TEST_JUNIT_REPORT` is defined.
- *
- * If no suite name is specified, this function will attempt to determine the
- * suite name using the Cypress configuration object.
- *
- * @param suiteName - Optional suite name in the JUnit output.
- *
  * @returns Cypress configuration object.
  */
-export const enableJunitReport = (
-  suiteName?: string,
-  jenkinsMode: boolean = false
-): CypressPlugin => {
-  return (_on, config) => {
-    if (!!config.env[envVarName]) {
-      // Use `suiteName` if it is specified.
-      // Otherwise, attempt to determine the test suite name using
-      // our Cypress configuration.
-      const testSuite = suiteName || config.env['cypress_test_suite'] || 'core';
-
-      const testSuiteName = `${capitalize(testSuite)} Test Suite`;
+export const enableJunitE2eReport: CypressPlugin = (_on, config) => {
+  const testSuiteName = 'core';
+  return getCommonJunitConfig(testSuiteName, config);
+};
 
-      // Cypress doesn't know to look for modules in the root `node_modules`
-      // directory, so we have to pass a relative path.
-      // See also: https://github.com/cypress-io/cypress/issues/6406
-      config.reporter = 'node_modules/mocha-junit-reporter';
+/**
+ * @returns Cypress configuration object.
+ */
+export const enableJunitComponentReport: CypressPlugin = (_on, config) => {
+  const testSuiteName = 'component';
+  return getCommonJunitConfig(testSuiteName, config);
+};
 
-      // See also: https://www.npmjs.com/package/mocha-junit-reporter#full-configuration-options
-      config.reporterOptions = {
-        mochaFile: 'cypress/results/test-results-[hash].xml',
-        rootSuiteTitle: 'Cloud Manager Cypress Tests',
-        testsuitesTitle: testSuiteName,
-        jenkinsMode,
-        suiteTitleSeparatedBy: jenkinsMode ? '→' : ' ',
-      };
+const getCommonJunitConfig = (
+  testSuite: string,
+  config: Cypress.PluginConfigOptions
+) => {
+  if (!!config.env[envVarName]) {
+    if (!config.reporterOptions) {
+      config.reporterOptions = {};
     }
-    return config;
-  };
+    const testSuiteName = `${capitalize(testSuite)} Test Suite`;
+    config.reporterOptions.mochaJunitReporterReporterOptions = {
+      mochaFile: 'cypress/results/test-results-[hash].xml',
+      rootSuiteTitle: 'Cloud Manager Cypress Tests',
+      testsuitesTitle: testSuiteName,
+      jenkinsMode: true,
+      suiteTitleSeparatedBy: '→',
+    };
+  }
+  return config;
 };

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

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

packages/manager/package.json

@@ -25,12 +25,12 @@
     "@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/shared": "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",
@@ -184,6 +184,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",