Extracts issue body generation in prepration for adding screenshots (#134)

Extracts the logic to generate an issue body in preparation for adding
screenshots. Adding screenshots will update the issue body generation,
so I am pulling that out separately so it's easier to review the diff on
the future PR.

Also adds a new `tests` directory to the `file` directory with some
basic unit tests for the new generated issue body function.

Issues were created as expected when manually testing internally.

Author: lindseywild

.github/actions/file/src/generateIssueBody.ts

@@ -0,0 +1,31 @@
+import type { Finding } from "./types.d.js";
+
+export function generateIssueBody(finding: Finding, repoWithOwner: string): string {
+  const solutionLong = finding.solutionLong
+      ?.split("\n")
+      .map((line: string) =>
+        !line.trim().startsWith("Fix any") &&
+        !line.trim().startsWith("Fix all") &&
+        line.trim() !== ""
+          ? `- ${line}`
+          : line
+      )
+      .join("\n");
+    const acceptanceCriteria = `## Acceptance Criteria
+  - [ ] The specific axe violation reported in this issue is no longer reproducible.
+  - [ ] The fix MUST meet WCAG 2.1 guidelines OR the accessibility standards specified by the repository or organization.
+  - [ ] A test SHOULD be added to ensure this specific axe violation does not regress.
+  - [ ] This PR MUST NOT introduce any new accessibility issues or regressions.
+  `;
+    const body = `## What
+  An accessibility scan flagged the element \`${finding.html}\` on ${finding.url} because ${finding.problemShort}. Learn more about why this was flagged by visiting ${finding.problemUrl}.
+
+  To fix this, ${finding.solutionShort}.
+  ${solutionLong ? `\nSpecifically:\n\n${solutionLong}` : ''}
+
+  ${acceptanceCriteria}
+  `;
+
+  return body;
+}
+

.github/actions/file/src/openIssue.ts

@@ -1,5 +1,6 @@
 import type { Octokit } from '@octokit/core';
 import type { Finding } from './types.d.js';
+import { generateIssueBody } from "./generateIssueBody.js";
 import * as url from 'node:url'
 const URL = url.URL;
 
@@ -23,32 +24,10 @@ export async function openIssue(octokit: Octokit, repoWithOwner: string, finding
   const labels = [`${finding.scannerType} rule: ${finding.ruleId}`, `${finding.scannerType}-scanning-issue`];
   const title = truncateWithEllipsis(
     `Accessibility issue: ${finding.problemShort[0].toUpperCase() + finding.problemShort.slice(1)} on ${new URL(finding.url).pathname}`,
-    GITHUB_ISSUE_TITLE_MAX_LENGTH
+    GITHUB_ISSUE_TITLE_MAX_LENGTH,
   );
-  const solutionLong = finding.solutionLong
-    ?.split("\n")
-    .map((line) =>
-      !line.trim().startsWith("Fix any") &&
-      !line.trim().startsWith("Fix all") &&
-      line.trim() !== ""
-        ? `- ${line}`
-        : line
-    )
-    .join("\n");
-  const acceptanceCriteria = `## Acceptance Criteria
-- [ ] The specific axe violation reported in this issue is no longer reproducible.
-- [ ] The fix MUST meet WCAG 2.1 guidelines OR the accessibility standards specified by the repository or organization.
-- [ ] A test SHOULD be added to ensure this specific axe violation does not regress.
-- [ ] This PR MUST NOT introduce any new accessibility issues or regressions.
-`;
-  const body = `## What
-An accessibility scan flagged the element \`${finding.html}\` on ${finding.url} because ${finding.problemShort}. Learn more about why this was flagged by visiting ${finding.problemUrl}.
 
-To fix this, ${finding.solutionShort}.
-${solutionLong ? `\nSpecifically:\n\n${solutionLong}` : ''}
-
-${acceptanceCriteria}
-`;
+  const body = generateIssueBody(finding, repoWithOwner);
 
   return octokit.request(`POST /repos/${owner}/${repo}/issues`, {
     owner,

.github/actions/file/tests/generateIssueBody.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from "vitest";
+import { generateIssueBody } from "../src/generateIssueBody.ts";
+
+const baseFinding = {
+  scannerType: "axe",
+  ruleId: "color-contrast",
+  url: "https://example.com/page",
+  html: "<span>Low contrast</span>",
+  problemShort: "elements must meet minimum color contrast ratio thresholds",
+  problemUrl: "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=playwright",
+  solutionShort: "ensure the contrast between foreground and background colors meets WCAG thresholds",
+};
+
+describe("generateIssueBody", () => {
+  it("includes acceptance criteria and omits the Specifically section when solutionLong is missing", () => {
+    const body = generateIssueBody(baseFinding, "github/accessibility-scanner");
+
+    expect(body).toContain("## What");
+    expect(body).toContain("## Acceptance Criteria");
+    expect(body).toContain("The specific axe violation reported in this issue is no longer reproducible.");
+    expect(body).not.toContain("Specifically:");
+  });
+
+  it("formats solutionLong lines into bullets while preserving Fix any/Fix all lines", () => {
+    const body = generateIssueBody(
+      {
+        ...baseFinding,
+        solutionLong: [
+          "Use a darker foreground color.",
+          "Fix any of the following:",
+          "Increase font weight.",
+          "Fix all of the following:",
+          "Add a non-color visual indicator.",
+          "",
+        ].join("\n"),
+      },
+      "github/accessibility-scanner",
+    );
+
+    expect(body).toContain("Specifically:");
+    expect(body).toContain("- Use a darker foreground color.");
+    expect(body).toContain("Fix any of the following:");
+    expect(body).toContain("- Increase font weight.");
+    expect(body).toContain("Fix all of the following:");
+    expect(body).toContain("- Add a non-color visual indicator.");
+
+    expect(body).not.toContain("- Fix any of the following:");
+    expect(body).not.toContain("- Fix all of the following:");
+  });
+});

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0-development",
   "description": "Finds potential accessibility gaps, files GitHub issues to track them, and attempts to fix them with Copilot",
   "scripts": {
-    "test": "vitest run tests/*.test.ts"
+    "test": "vitest run tests/*.test.ts .github/actions/**/tests/*.test.ts"
   },
   "repository": {
     "type": "git",