Added additionalInformation option

Author: Hargne

README.md

@@ -1,9 +1,16 @@
 import path from "path";
 import fs from "fs";
 import { JestHTMLReporterConfiguration } from "./types";
-import { parseBoolean, parseNumber, parseString } from "./utils";
+import {
+  isAdditionalInformationEntry,
+  parseArray,
+  parseBoolean,
+  parseNumber,
+  parseString,
+} from "./utils";
 
 const defaultValues: JestHTMLReporterConfiguration = {
+  additionalInformation: [],
   append: false,
   boilerplate: undefined,
   collapseSuitesByDefault: false,
@@ -49,8 +56,9 @@ export function readJsonFile(filePath: string) {
 const typeParsers: {
   [key in keyof JestHTMLReporterConfiguration]: (
     value: unknown
-  ) => string | number | boolean | undefined;
+  ) => string | number | boolean | unknown[] | undefined;
 } = {
+  additionalInformation: parseArray(isAdditionalInformationEntry),
   append: parseBoolean,
   boilerplate: parseString,
   collapseSuitesByDefault: parseBoolean,

src/extractConfiguration.ts

@@ -342,4 +342,23 @@ describe("HTMLReporter", () => {
       });
     });
   });
+
+  describe("additionalInformation", () => {
+    it("should add additional information to the report", async () => {
+      await renderReportToDOM({
+        options: {
+          additionalInformation: [{ label: "Environment", value: "Test" }],
+        },
+      });
+
+      const additionalInfoElements = document.querySelectorAll(
+        ".additional-information"
+      );
+      expect(additionalInfoElements.length).toBe(1);
+
+      expect(additionalInfoElements[0].textContent).toContain(
+        "Environment: Test"
+      );
+    });
+  });
 });

src/htmlreporter.test.ts

@@ -195,6 +195,11 @@ class HTMLReporter {
         }
       }
 
+      /**
+       * Additional Information
+       */
+      this.renderAdditionalInformation(metaDataContainer);
+
       // Summary
       const summaryContainer = metaDataContainer.ele("div", { id: "summary" });
       // Suite Summary
@@ -492,6 +497,27 @@ class HTMLReporter {
     );
   }
 
+  public renderAdditionalInformation(target: xmlbuilder.XMLElement) {
+    const additionalInformation = this.getConfigValue("additionalInformation");
+    if (
+      additionalInformation &&
+      Array.isArray(additionalInformation) &&
+      additionalInformation.length > 0
+    ) {
+      const container = target.ele("div", {
+        class: "additional-information-container",
+      });
+      for (const info of additionalInformation) {
+        container.ele(
+          "div",
+          { class: "additional-information" },
+          `${info.label}: ${info.value}`
+        );
+      }
+      return container;
+    }
+  }
+
   /**
    * Returns the configured value from the config in the following priority order:
    * Environment Variable > JSON configured value > Default value

src/htmlreporter.ts

@@ -10,6 +10,10 @@ export interface JestHTMLReporterProps {
 }
 
 export interface JestHTMLReporterConfiguration {
+  additionalInformation?: {
+    label: string;
+    value: string;
+  }[];
   append: boolean;
   boilerplate?: string;
   collapseSuitesByDefault: boolean;

src/types/index.d.ts

@@ -123,3 +123,23 @@ export function parseString(value: unknown): string | undefined {
   }
   return undefined;
 }
+
+export const parseArray =
+  <T>(isValidItem: (item: unknown) => item is T) =>
+  (value: unknown): T[] => {
+    if (Array.isArray(value)) {
+      return value.filter(isValidItem);
+    }
+    return [];
+  };
+
+export function isAdditionalInformationEntry(
+  item: unknown
+): item is { label: string; value: string } {
+  return (
+    typeof item === "object" &&
+    item !== null &&
+    typeof (item as { label: unknown }).label === "string" &&
+    typeof (item as { value: unknown }).value === "string"
+  );
+}

src/utils.ts

@@ -1,15 +1,15 @@
 :root {
   --text-primary: #111;
-  --text-secondary: #4F4F4F;
+  --text-secondary: #4f4f4f;
   --success: #006633;
-  --success-bright: #80FFBF;
-  --danger: #CC071E;
-  --danger-bright: #FBDFE0;
-  --warning: #995C00;
-  --warning-bright: #FFEEA8;
+  --success-bright: #80ffbf;
+  --danger: #cc071e;
+  --danger-bright: #fbdfe0;
+  --warning: #995c00;
+  --warning-bright: #ffeea8;
   --panel: #eee;
   --border: #949494;
-  --disabled: #6B6B6B;
+  --disabled: #6b6b6b;
 }
 
 html,
@@ -43,10 +43,23 @@ header {
   margin-top: 0.5rem;
 }
 
+#metadata-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.additional-information-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--text-secondary);
+}
+
 /** SUMMARY */
 #summary {
   color: var(--text-primary);
-  margin: 2rem 0;
   display: flex;
   font-family: monospace;
   font-size: 1rem;