refactor: types for JSON output of IssueFormatter (ChromeDevTools#1007)

- makes the id required in types
- requires toString(), toStringDetailed() to use the JSON
representation.

Author: OrKoN

src/formatters/IssueFormatter.ts

@@ -11,7 +11,7 @@ import {DevTools} from '../third_party/index.js';
 export interface IssueFormatterOptions {
   requestIdResolver?: (requestId: string) => number | undefined;
   elementIdResolver?: (backendNodeId: number) => string | undefined;
-  id?: number;
+  id: number;
 }
 
 export interface AffectedResource {
@@ -20,6 +20,22 @@ export interface AffectedResource {
   request?: string | number;
 }
 
+interface IssueConcise {
+  type: 'issue';
+  title?: string;
+  count: number;
+  id: number;
+}
+
+interface IssueDetailed extends IssueConcise {
+  description?: string;
+  links?: Array<{
+    link: string;
+    linkTitle: string;
+  }>;
+  affectedResources: AffectedResource[];
+}
+
 export class IssueFormatter {
   #issue: DevTools.AggregatedIssue;
   #options: IssueFormatterOptions;
@@ -30,70 +46,14 @@ export class IssueFormatter {
   }
 
   toString(): string {
-    const title = this.#getTitle();
-    const count = this.#issue.getAggregatedIssuesCount();
-    const idPart =
-      this.#options.id !== undefined ? `msgid=${this.#options.id} ` : '';
-    return `${idPart}[issue] ${title} (count: ${count})`;
+    return convertIssueConciseToString(this.toJSON());
   }
 
   toStringDetailed(): string {
-    const result: string[] = [];
-    if (this.#options.id !== undefined) {
-      result.push(`ID: ${this.#options.id}`);
-    }
-
-    const bodyParts: string[] = [];
-
-    const description = this.#getDescription();
-    let processedMarkdown = description?.trim();
-    // Remove heading in order not to conflict with the whole console message response markdown
-    if (processedMarkdown?.startsWith('# ')) {
-      processedMarkdown = processedMarkdown.substring(2).trimStart();
-    }
-    if (processedMarkdown) {
-      bodyParts.push(processedMarkdown);
-    } else {
-      bodyParts.push(this.#getTitle() ?? 'Unknown Issue');
-    }
-
-    const links = this.#issue.getDescription()?.links;
-    if (links && links.length > 0) {
-      bodyParts.push('Learn more:');
-      for (const link of links) {
-        bodyParts.push(`[${link.linkTitle}](${link.link})`);
-      }
-    }
-
-    const affectedResources = this.#getAffectedResources();
-    if (affectedResources.length) {
-      bodyParts.push('### Affected resources');
-      bodyParts.push(
-        ...affectedResources.map(item => {
-          const details = [];
-          if (item.uid) {
-            details.push(`uid=${item.uid}`);
-          }
-          if (item.request) {
-            details.push(
-              (typeof item.request === 'number' ? `reqid=` : 'url=') +
-                item.request,
-            );
-          }
-          if (item.data) {
-            details.push(`data=${JSON.stringify(item.data)}`);
-          }
-          return details.join(' ');
-        }),
-      );
-    }
-
-    result.push(`Message: issue> ${bodyParts.join('\n')}`);
-
-    return result.join('\n');
+    return convertIssueDetailedToString(this.toJSONDetailed());
   }
 
-  toJSON(): object {
+  toJSON(): IssueConcise {
     return {
       type: 'issue',
       title: this.#getTitle(),
@@ -102,10 +62,11 @@ export class IssueFormatter {
     };
   }
 
-  toJSONDetailed(): object {
+  toJSONDetailed(): IssueDetailed {
     return {
       id: this.#options.id,
       type: 'issue',
+      count: this.#issue.getAggregatedIssuesCount(),
       title: this.#getTitle(),
       description: this.#getDescription(),
       links: this.#issue.getDescription()?.links,
@@ -251,3 +212,61 @@ export class IssueFormatter {
     }
   }
 }
+
+function convertIssueConciseToString(issue: IssueConcise): string {
+  return `msgid=${issue.id} [issue] ${issue.title} (count: ${issue.count})`;
+}
+
+function convertIssueDetailedToString(issue: IssueDetailed): string {
+  const result: string[] = [];
+  result.push(`ID: ${issue.id}`);
+
+  const bodyParts: string[] = [];
+
+  const description = issue.description;
+  let processedMarkdown = description?.trim();
+  // Remove heading in order not to conflict with the whole console message response markdown
+  if (processedMarkdown?.startsWith('# ')) {
+    processedMarkdown = processedMarkdown.substring(2).trimStart();
+  }
+  if (processedMarkdown) {
+    bodyParts.push(processedMarkdown);
+  } else {
+    bodyParts.push(issue.title ?? 'Unknown Issue');
+  }
+
+  const links = issue.links;
+  if (links && links.length > 0) {
+    bodyParts.push('Learn more:');
+    for (const link of links) {
+      bodyParts.push(`[${link.linkTitle}](${link.link})`);
+    }
+  }
+
+  const affectedResources = issue.affectedResources;
+  if (affectedResources.length) {
+    bodyParts.push('### Affected resources');
+    bodyParts.push(
+      ...affectedResources.map(item => {
+        const details = [];
+        if (item.uid) {
+          details.push(`uid=${item.uid}`);
+        }
+        if (item.request) {
+          details.push(
+            (typeof item.request === 'number' ? `reqid=` : 'url=') +
+              item.request,
+          );
+        }
+        if (item.data) {
+          details.push(`data=${JSON.stringify(item.data)}`);
+        }
+        return details.join(' ');
+      }),
+    );
+  }
+
+  result.push(`Message: issue> ${bodyParts.join('\n')}`);
+
+  return result.join('\n');
+}

tests/formatters/IssueFormatter.test.js.snapshot

@@ -1,9 +1,58 @@
-exports[`IssueFormatter > formats an issue message 1`] = `
+exports[`IssueFormatter > formats a detailed issue toJSONDetailed 1`] = `
+{
+  "id": 5,
+  "type": "issue",
+  "title": "Mock Issue Title",
+  "description": "# Mock Issue Title\\n\\nThis is a mock issue description sub value",
+  "links": [
+    {
+      "link": "http://example.com",
+      "linkTitle": "Link 1"
+    }
+  ],
+  "affectedResources": [
+    {
+      "uid": "1_1",
+      "data": {
+        "violatingNodeAttribute": "test"
+      }
+    }
+  ]
+}
+`;
+
+exports[`IssueFormatter > formats a detailed issue toStringDetailed 1`] = `
 ID: 5
 Message: issue> Mock Issue Title
 
-This is a mock issue description
+This is a mock issue description sub value
 Learn more:
-[Learn more](http://example.com/learnmore)
-[Learn more 2](http://example.com/another-learnmore)
+[Link 1](http://example.com)
+### Affected resources
+uid=1_1 data={"violatingNodeAttribute":"test"}
+`;
+
+exports[`IssueFormatter > formats a simplified issue toJSON 1`] = `
+{
+  "type": "issue",
+  "title": "Issue Title",
+  "count": 5,
+  "id": 1
+}
+`;
+
+exports[`IssueFormatter > formats a simplified issue toString 1`] = `
+msgid=1 [issue] Issue Title (count: 5)
+`;
+
+exports[`IssueFormatter > formats an issue message toJSON 1`] = `
+{
+  "type": "issue",
+  "title": "Mock Issue Title",
+  "id": 5
+}
+`;
+
+exports[`IssueFormatter > formats an issue message toString 1`] = `
+msgid=5 [issue] Mock Issue Title (count: undefined)
 `;