fix(report): also show metrics in the x-dot-webpage reporter output (#…

…927)

## Description

- also show metrics in the x-dot-webpage reporter output
- fixes a problem where some non-ascii characters showed up wrong in the
output

## Motivation and Context

It didn't and that's a bug

## How Has This Been Tested?

- [x] green ci

## Types of changes

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] Documentation only change
- [ ] Refactor (non-breaking change which fixes an issue without
changing functionality)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

.github/workflows/ci.yml

@@ -50,6 +50,8 @@ jobs:
  node-version: ${{matrix.node-version}}
  - name: install & build
  run: |
+ sudo apt-get update
+ sudo apt-get install graphviz
  npm install
  npm run build
  - name: lint (run on node ${{env.NODE_LATEST}} only)
@@ -104,6 +106,7 @@ jobs:
  node-version: ${{env.NODE_LATEST}}
  - name: install & build
  run: |
+ choco install graphviz
  npm install
  npm run build
  - run: npm run depcruise

src/main/report-wrap.mjs

@@ -38,6 +38,10 @@ function reSummarizeResults(pResult, pFormatOptions) {
  };
 }
 
+function getReporterSection(pOutputType) {
+ return pOutputType === "x-dot-webpage" ? "dot" : pOutputType;
+}
+
 /**
  *
  * @param {import("../..).ICruiseResult} pResult result of a previous run of dependency-cruiser
@@ -47,8 +51,9 @@ function reSummarizeResults(pResult, pFormatOptions) {
 export default async function reportWrap(pResult, pFormatOptions) {
  const lReportFunction = await report.getReporter(pFormatOptions.outputType);
  const lReportOptions =
- pResult.summary.optionsUsed?.reporterOptions?.[pFormatOptions.outputType] ??
- {};
+ pResult.summary.optionsUsed?.reporterOptions?.[
+ getReporterSection(pFormatOptions.outputType)
+ ] ?? {};
 
  return lReportFunction(
  reSummarizeResults(pResult, pFormatOptions),

src/report/dot-webpage/dot-module.mjs

@@ -24,7 +24,7 @@ function convert(pDot, pOptions) {
  },
  );
  if (status === 0) {
- return stdout.toString("binary");
+ return stdout.toString("utf8");
  } else if (error) {
  throw error;
  } else {
@@ -61,15 +61,14 @@ function isAvailable(pOptions) {
  * @returns {IReporterOutput}
  */
 export default function dotWebpage(pResults, pDotWebpageReporterOptions) {
- const { output } = dotModuleReporter(pResults, pDotWebpageReporterOptions);
-
  if (!isAvailable(pDotWebpageReporterOptions)) {
  throw new Error(
  "GraphViz dot, which is required for the 'x-dot-webpage' reporter doesn't " +
  "seem to be available on this system. See the GraphViz download page for " +
  "instruction on how to get it on your system: https://www.graphviz.org/download/",
  );
  }
+ const { output } = dotModuleReporter(pResults, pDotWebpageReporterOptions);
  return {
  output: wrapInHTML(convert(output, pDotWebpageReporterOptions)),
  exitCode: 0,

test/main/main.format.spec.mjs

@@ -139,4 +139,14 @@ describe("[E] main.format - format", () => {
  // without includeOnly it'd be 53
  equal(lJSONResult.modules.length, 33);
  });
+
+ it("uses the 'dot' reporter section for the 'x-dot-webpage' output type", async () => {
+ const lResult = await format(cruiseResult, {
+ outputType: "x-dot-webpage",
+ });
+ ok(lResult.output.includes("<html"));
+ // the color ffcccc doesn't occur in the default dot theme, but it does
+ // occur in the one we have in the cruiseResult
+ ok(lResult.output.includes('fill="#ffcccc"'));
+ });
 });