Add integration with @cucumber/html-formatter

I believe this will benefit many. Fixes #780.

Author: badeball

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes to this project will be documented in this file.
 
 - Updated all `@cucumber/*` dependencies.
 
+- Added native support for HTML reports using `@cucumber/html-formatter`, fixes [#780](https://github.com/badeball/cypress-cucumber-preprocessor/issues/780).
+
 ## v11.5.1
 
 - Expose member `getStepDefinitionPatterns`.

docs/configuration.md

@@ -55,13 +55,15 @@ Every configuration option has a similar key which can be use to override it, sh
 
 | JSON path          | Environment key   | Example(s)                               |
 |--------------------|-------------------|------------------------------------------|
-| `stepDefinitions`  | `stepDefinitions` | `[filepath].{js,ts}` |
+| `stepDefinitions`  | `stepDefinitions` | `[filepath].{js,ts}`                     |
 | `messages.enabled` | `messagesEnabled` | `true`, `false`                          |
 | `messages.output`  | `messagesOutput`  | `cucumber-messages.ndjson`               |
 | `json.enabled`     | `jsonEnabled`     | `true`, `false`                          |
 | `json.formatter`   | `jsonFormatter`   | `/usr/bin/cucumber-json-formatter`       |
 | `json.args     `   | `jsonArgs     `   | `["custom-json-formatter.js"]`           |
 | `json.output`      | `jsonOutput`      | `cucumber-report.json`                   |
+| `html.enabled`     | `htmlEnabled`     | `true`, `false`                          |
+| `html.output`      | `htmlOutput`      | `cucumber-report.html`                   |
 | `filterSpecs`      | `filterSpecs`     | `true`, `false`                          |
 | `omitFiltered`     | `omitFiltered`    | `true`, `false`                          |
 

docs/html-report.md

@@ -0,0 +1,31 @@
+# HTML reports
+
+HTML reports can be enabled using the `html.enabled` property. The preprocessor uses [cosmiconfig](https://github.com/davidtheclark/cosmiconfig), which means you can place configuration options in EG. `.cypress-cucumber-preprocessorrc.json` or `package.json`. An example configuration is shown below.
+
+```json
+{
+  "html": {
+    "enabled": true
+  }
+}
+```
+
+This **requires** you to have registered this module in your [configuration file](https://docs.cypress.io/guides/references/configuration#Configuration-File), as shown below.
+
+```ts
+import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
+
+export default defineConfig({
+  e2e: {
+    async setupNodeEvents(
+      on: Cypress.PluginEvents,
+      config: Cypress.PluginConfigOptions
+    ) {
+      await addCucumberPreprocessorPlugin(on, config);
+
+      // Make sure to return the config object as it might have been modified by the plugin.
+      return config;
+    },
+  },
+});
+```

docs/readme.md

@@ -7,6 +7,7 @@
 * [Step definitions](step-definitions.md)
 * [Tags](tags.md)
 * [JSON report](json-report.md)
+* [HTML report](html-report.md)
 * [Localisation](localisation.md)
 * [Configuration](configuration.md)
 * [Test configuration](test-configuration.md)

features/html_report.feature

@@ -0,0 +1,26 @@
+Feature: html report
+  Background:
+    Given additional preprocessor configuration
+      """
+      {
+        "html": {
+          "enabled": true
+        }
+      }
+      """
+
+  Scenario: basic report
+    Given a file named "cypress/e2e/a.feature" with:
+      """
+      Feature: a feature
+        Scenario: a scenario
+          Given a step
+      """
+    And a file named "cypress/support/step_definitions/steps.js" with:
+      """
+      const { Given } = require("@badeball/cypress-cucumber-preprocessor");
+      Given("a step", function() {})
+      """
+    When I run cypress
+    Then it passes
+    And there should be a HTML report

features/step_definitions/html_steps.ts

@@ -0,0 +1,11 @@
+import { Then } from "@cucumber/cucumber";
+import path from "path";
+import { promises as fs } from "fs";
+import assert from "assert";
+
+Then("there should be a HTML report", async function () {
+  await assert.doesNotReject(
+    () => fs.access(path.join(this.tmpDir, "cucumber-report.html")),
+    "Expected there to be a HTML file"
+  );
+});

lib/add-cucumber-preprocessor-plugin.ts

@@ -4,8 +4,16 @@ import path from "path";
 
 import child_process from "child_process";
 
+import stream from "stream";
+
 import chalk from "chalk";
 
+import resolvePkg from "resolve-pkg";
+
+import { NdjsonToMessageStream } from "@cucumber/message-streams";
+
+import CucumberHtmlStream from "@cucumber/html-formatter";
+
 import messages, { IdGenerator, SourceMediaType } from "@cucumber/messages";
 
 import parse from "@cucumber/tag-expressions";
@@ -80,7 +88,7 @@ export async function beforeRunHandler(config: Cypress.PluginConfigOptions) {
 export async function afterRunHandler(config: Cypress.PluginConfigOptions) {
   const preprocessor = await resolve(config, config.env);
 
-  if (!preprocessor.json.enabled) {
+  if (!preprocessor.json.enabled && !preprocessor.html.enabled) {
     return;
   }
 
@@ -89,50 +97,88 @@ export async function afterRunHandler(config: Cypress.PluginConfigOptions) {
     preprocessor.messages.output
   );
 
-  const jsonPath = ensureIsAbsolute(
-    config.projectRoot,
-    preprocessor.json.output
-  );
-
   try {
     await fs.access(messagesPath, fsConstants.F_OK);
   } catch {
     return;
   }
 
-  await fs.mkdir(path.dirname(jsonPath), { recursive: true });
+  if (preprocessor.json.enabled) {
+    const jsonPath = ensureIsAbsolute(
+      config.projectRoot,
+      preprocessor.json.output
+    );
 
-  const messages = await fs.open(messagesPath, "r");
+    await fs.mkdir(path.dirname(jsonPath), { recursive: true });
 
-  try {
-    const json = await fs.open(jsonPath, "w");
+    const messages = await fs.open(messagesPath, "r");
 
     try {
-      const { formatter, args } = preprocessor.json;
-      const child = child_process.spawn(formatter, args, {
-        stdio: [messages.fd, json.fd, "inherit"],
-      });
-
-      await new Promise<void>((resolve, reject) => {
-        child.on("exit", (code) => {
-          if (code === 0) {
-            resolve();
-          } else {
-            reject(
-              new Error(
-                `${preprocessor.json.formatter} exited non-successfully`
-              )
-            );
-          }
+      const json = await fs.open(jsonPath, "w");
+
+      try {
+        const { formatter, args } = preprocessor.json;
+        const child = child_process.spawn(formatter, args, {
+          stdio: [messages.fd, json.fd, "inherit"],
         });
 
-        child.on("error", reject);
-      });
+        await new Promise<void>((resolve, reject) => {
+          child.on("exit", (code) => {
+            if (code === 0) {
+              resolve();
+            } else {
+              reject(
+                new Error(
+                  `${preprocessor.json.formatter} exited non-successfully`
+                )
+              );
+            }
+          });
+
+          child.on("error", reject);
+        });
+      } finally {
+        await json.close();
+      }
     } finally {
-      await json.close();
+      await messages.close();
     }
-  } finally {
-    await messages.close();
+  }
+
+  if (preprocessor.html.enabled) {
+    const htmlPath = ensureIsAbsolute(
+      config.projectRoot,
+      preprocessor.html.output
+    );
+
+    await fs.mkdir(path.dirname(htmlPath), { recursive: true });
+
+    const input = syncFs.createReadStream(messagesPath);
+
+    const output = syncFs.createWriteStream(htmlPath);
+
+    console.log("I am invoked!");
+
+    await new Promise<void>((resolve, reject) => {
+      stream.pipeline(
+        input,
+        new NdjsonToMessageStream(),
+        new CucumberHtmlStream(
+          resolvePkg("@cucumber/html-formatter", { cwd: __dirname }) +
+            "/dist/main.css",
+          resolvePkg("@cucumber/html-formatter", { cwd: __dirname }) +
+            "/dist/main.js"
+        ),
+        output,
+        (err) => {
+          if (err) {
+            reject(err);
+          } else {
+            resolve();
+          }
+        }
+      );
+    });
   }
 }
 

lib/preprocessor-configuration.ts

@@ -119,6 +119,37 @@ function validateConfigurationEntry(
       };
       return { [key]: messagesConfig };
     }
+    case "html": {
+      if (typeof value !== "object" || value == null) {
+        throw new Error(
+          `Expected an object (json), but got ${util.inspect(value)}`
+        );
+      }
+      let args: string[] | undefined;
+      if (
+        !hasOwnProperty(value, "enabled") ||
+        typeof value.enabled !== "boolean"
+      ) {
+        throw new Error(
+          `Expected a boolean (html.enabled), but got ${util.inspect(value)}`
+        );
+      }
+      let output: string | undefined;
+      if (hasOwnProperty(value, "output")) {
+        if (isString(value.output)) {
+          output = value.output;
+        } else {
+          throw new Error(
+            `Expected a string (html.output), but got ${util.inspect(value)}`
+          );
+        }
+      }
+      const messagesConfig = {
+        enabled: value.enabled,
+        output,
+      };
+      return { [key]: messagesConfig };
+    }
     case "filterSpecs": {
       if (!isBoolean(value)) {
         throw new Error(
@@ -243,6 +274,32 @@ function validateEnvironmentOverrides(
     }
   }
 
+  if (hasOwnProperty(environment, "htmlEnabled")) {
+    const { htmlEnabled } = environment;
+
+    if (isBoolean(htmlEnabled)) {
+      overrides.htmlEnabled = htmlEnabled;
+    } else if (isString(htmlEnabled)) {
+      overrides.htmlEnabled = stringToMaybeBoolean(htmlEnabled);
+    } else {
+      throw new Error(
+        `Expected a boolean (htmlEnabled), but got ${util.inspect(htmlEnabled)}`
+      );
+    }
+  }
+
+  if (hasOwnProperty(environment, "htmlOutput")) {
+    const { htmlOutput } = environment;
+
+    if (isString(htmlOutput)) {
+      overrides.htmlOutput = htmlOutput;
+    } else {
+      throw new Error(
+        `Expected a string (htmlOutput), but got ${util.inspect(htmlOutput)}`
+      );
+    }
+  }
+
   if (hasOwnProperty(environment, "filterSpecs")) {
     const { filterSpecs } = environment;
 
@@ -302,6 +359,10 @@ export interface IPreprocessorConfiguration {
     formatter?: string;
     output?: string;
   };
+  readonly html?: {
+    enabled: boolean;
+    output?: string;
+  };
   readonly filterSpecs?: boolean;
   readonly omitFiltered?: boolean;
 }
@@ -314,6 +375,8 @@ export interface IEnvironmentOverrides {
   jsonEnabled?: boolean;
   jsonFormatter?: string;
   jsonOutput?: string;
+  htmlEnabled?: boolean;
+  htmlOutput?: string;
   filterSpecs?: boolean;
   omitFiltered?: boolean;
 }
@@ -364,6 +427,7 @@ export class PreprocessorConfiguration implements IPreprocessorConfiguration {
     return {
       enabled:
         this.json.enabled ||
+        this.html.enabled ||
         (this.environmentOverrides.messagesEnabled ??
           this.explicitValues.messages?.enabled ??
           false),
@@ -394,6 +458,19 @@ export class PreprocessorConfiguration implements IPreprocessorConfiguration {
     };
   }
 
+  get html() {
+    return {
+      enabled:
+        this.environmentOverrides.htmlEnabled ??
+        this.explicitValues.html?.enabled ??
+        false,
+      output:
+        this.environmentOverrides.htmlOutput ??
+        this.explicitValues.html?.output ??
+        "cucumber-report.html",
+    };
+  }
+
   get filterSpecs() {
     return (
       this.environmentOverrides.filterSpecs ??

package.json

@@ -45,6 +45,8 @@
     "@badeball/cypress-configuration": "^4.0.0",
     "@cucumber/cucumber-expressions": "^16.0.0",
     "@cucumber/gherkin": "^24.0.0",
+    "@cucumber/html-formatter": "^19.2.0",
+    "@cucumber/message-streams": "^4.0.1",
     "@cucumber/messages": "^19.1.2",
     "@cucumber/tag-expressions": "^4.1.0",
     "base64-js": "^1.5.1",
@@ -53,6 +55,7 @@
     "debug": "^4.2.0",
     "glob": "^7.2.0",
     "is-path-inside": "^3.0.3",
+    "resolve-pkg": "^2.0.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {