Added functionality to output list of rules from axeResults object

lpelypenko · Oct 29, 2020 · be99e77 · be99e77
1 parent 08c35e5
commit be99e77
Show file tree

Hide file tree

Showing 6 changed files with 618 additions and 20 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -2,16 +2,9 @@ import mustache from 'mustache';
 import { AxeResults, Result } from 'axe-core';
 import { loadTemplate } from './util/loadTemplate';
 import { prepareReportData } from './util/prepareReportData';
+import { prepareAxeRules } from './util/prepareAxeRules';
 import { saveHtmlReport } from './util/saveHtmlReport';
 
-export interface ResultsMinimal {
-    violations: Result[];
-    url?: string;
-    passes?: Result[];
-    incomplete?: Result[];
-    inapplicable?: Result[];
-}
-
 export interface Options {
     reportFileName?: string;
     outputDir?: string;
@@ -20,7 +13,7 @@ export interface Options {
 }
 
 export interface CreateReport {
-    results: AxeResults | ResultsMinimal; // user can decide to pass only 'violations' or full AxeResults object
+    results: Partial<AxeResults>;
     options?: Options;
 }
 
@@ -31,12 +24,11 @@ export interface PreparedResults {
     inapplicable?: Result[];
 }
 
-export const missingRequiredParamsError =
-    "'violations' is required for HTML accessibility report. Example: createHtmlReport({ results : { violations: Result[] } })";
-
 export function createHtmlReport({ results, options }: CreateReport): void {
     if (!results.violations) {
-        throw new Error(missingRequiredParamsError);
+        throw new Error(
+            "'violations' is required for HTML accessibility report. Example: createHtmlReport({ results : { violations: Result[] } })"
+        );
     }
     try {
         const template = loadTemplate();
@@ -47,21 +39,23 @@ export function createHtmlReport({ results, options }: CreateReport): void {
             inapplicable: results.inapplicable,
         });
         const htmlContent = mustache.render(template, {
-            url: results.url || undefined,
+            url: results.url,
             violationsSummary: preparedReportData.violationsSummary,
             violations: preparedReportData.violationsSummaryTable,
             violationDetails: preparedReportData.violationsDetails,
             checksPassed: preparedReportData.checksPassed,
             checksIncomplete: preparedReportData.checksIncomplete,
             checksInapplicable: preparedReportData.checksInapplicable,
-            hasPassed: results.passes !== undefined,
-            hasIncomplete: results.incomplete !== undefined,
-            hasInapplicable: results.inapplicable !== undefined,
+            hasPassed: Boolean(results.passes),
+            hasIncomplete: Boolean(results.incomplete),
+            hasInapplicable: Boolean(results.inapplicable),
             incompleteTotal: preparedReportData.checksIncomplete
                 ? preparedReportData.checksIncomplete.length
                 : 0,
             projectKey: options?.projectKey,
             customSummary: options?.customSummary,
+            hasAxeRawResults: Boolean(results?.timestamp),
+            rules: prepareAxeRules(results?.toolOptions?.rules || {}),
         });
         saveHtmlReport({
             htmlContent,

diff --git a/src/util/prepareAxeRules.ts b/src/util/prepareAxeRules.ts
@@ -0,0 +1,12 @@
+import { RuleObject } from 'axe-core';
+
+export interface ReformattedRulesObject {
+    index: number;
+    rule: string;
+    enabled: boolean;
+}
+export function prepareAxeRules(rules: RuleObject): ReformattedRulesObject[] {
+    return Object.keys(rules).map((id, index) => {
+        return { index: ++ index, rule: id, enabled: rules[id].enabled };
+    });
+}
diff --git a/src/util/prepareReportData.ts b/src/util/prepareReportData.ts
@@ -12,7 +12,7 @@ function simplifyAxeResultForSummary(results: Result[]): Summary[] {
         help,
         wcag: getWcagReference(tags),
         impact: impact || 'n/a',
-        nodes: nodes.length,
+        nodes: nodes.length
     }));
 }
 /**

diff --git a/src/util/template/pageTemplate.html b/src/util/template/pageTemplate.html
@@ -325,6 +325,55 @@ <h5 class="mb-0">
                 </div>
             </div>
             {{/hasInapplicable}}
+            {{#hasAxeRawResults}}
+            <div id="rulesSection">
+                <div class="card">
+                    <div class="card-header" id="ruleSection">
+                        <h5 class="mb-0">
+                            <button
+                                    class="btn btn-link"
+                                    data-toggle="collapse"
+                                    data-target="#rules"
+                                    aria-expanded="false"
+                                    aria-controls="inapplicable"
+                            >
+                                axe was running with {{rules.length}} rules.
+                                Expand details on click
+                            </button>
+                        </h5>
+                    </div>
+                    <div
+                            id="rules"
+                            class="collapse"
+                            aria-labelledby="ruleSection"
+                            data-parent="#rules"
+                    >
+                        <div class="card-body">
+                            {{#rules.length}}
+                            <table class="table table-bordered">
+                                <thead>
+                                <tr>
+                                    <th width="5%">#</th>
+                                    <th width="50%">Rule ID</th>
+                                    <th width="45%">Enabled</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {{#rules}}
+                                <tr>
+                                    <th scope="row">{{index}}</th>
+                                    <td>{{rule}}</td>
+                                    <td>{{enabled}}</td>
+                                </tr>
+                                </tbody>
+                                {{/rules}}
+                            </table>
+                            {{/rules.length}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {{/hasAxeRawResults}}
         </div>
     </body>
 </html>