Added inapplicable result support, tests and template logic update

src/index.ts

@@ -9,16 +9,25 @@ export interface CreateReport {
     url: string;
     passes?: Result[];
     incomplete?: Result[];
+    inapplicable?: Result[];
     reportFileName?: string;
     outputDir?: string;
     projectKey?: string;
 }
 
+export interface PreparedResults {
+    violations: Result[];
+    passes?: Result[];
+    incomplete?: Result[];
+    inapplicable?: Result[];
+}
+
 export function createHtmlReport({
     violations,
     url,
     passes,
     incomplete,
+    inapplicable,
     reportFileName,
     outputDir,
     projectKey,
@@ -30,20 +39,18 @@ export function createHtmlReport({
     }
     try {
         const template = loadTemplate();
-        const reportData = prepareReportData({ violations, passes, incomplete, url });
+        const reportData = prepareReportData({ violations, passes, incomplete, inapplicable });
         const htmlContent = mustache.render(template, {
             url,
-            totalWrapped: `Axe core library found ${reportData.violationsTotal} violation${
-                reportData.violationsTotal === 1 ? '' : 's'
-            }`,
-            isViolationPresent: reportData.violationsTotal !== 0,
+            violationsSummary: reportData.violationsSummary,
             violations: reportData.violationsSummaryTable,
             violationDetails: reportData.violationsDetails,
-            isPassedPresent: !!passes,
             checksPassed: reportData.checksPassed,
-            passedTotal: reportData.checksPassed ? reportData.checksPassed.length : 0,
-            isIncompletePresent: !!incomplete,
             checksIncomplete: reportData.checksIncomplete,
+            checksInapplicable: reportData.checksInapplicable,
+            hasPassed: passes !== undefined,
+            hasIncomplete: incomplete !== undefined,
+            hasInapplicable: inapplicable !== undefined,
             incompleteTotal: reportData.checksIncomplete ? reportData.checksIncomplete.length : 0,
             projectKey,
         });

src/util/AxeReport.ts

@@ -24,9 +24,10 @@ interface Details {
 }
 
 export interface AxeReport {
-    violationsTotal: number;
+    violationsSummary: string;
     violationsSummaryTable?: Summary[];
     violationsDetails?: Details[];
     checksPassed?: Summary[];
     checksIncomplete?: Summary[];
+    checksInapplicable?: Summary[];
 }

src/util/prepareReportData.ts

@@ -1,6 +1,6 @@
 import { AxeReport } from './AxeReport';
 import { getWcagReference } from './getWcagReference';
-import { CreateReport } from '../index';
+import { PreparedResults } from '../index';
 import { Result } from 'axe-core';
 import { Summary } from './AxeReport';
 
@@ -20,29 +20,34 @@ function simplifyAxeResultForSummary(results: Result[]): Summary[] {
  * - total accessibility violations (counting nodes)
  * - summary of violations that could be printed as table
  * - detailed list of violations that could be printed as formatted text
- * @param violations
- * @param passes
- * @param incomplete
  */
-export function prepareReportData({ violations, passes, incomplete }: CreateReport): AxeReport {
+export function prepareReportData({
+    violations,
+    passes,
+    incomplete,
+    inapplicable,
+}: PreparedResults): AxeReport {
     const passedChecks = passes ? simplifyAxeResultForSummary(passes) : undefined;
     const incompleteChecks = incomplete ? simplifyAxeResultForSummary(incomplete) : undefined;
-
+    const inapplicableChecks = inapplicable ? simplifyAxeResultForSummary(inapplicable) : undefined;
+    const violationsTotal = violations.reduce((acc, { nodes }) => {
+        acc += nodes.length;
+        return acc;
+    }, 0);
+    const violationsSummary = `axe-core found ${violationsTotal} violation${
+        violationsTotal === 1 ? '' : 's'
+    }`;
     if (violations.length === 0) {
         return {
-            violationsTotal: 0,
+            violationsSummary:
+                'No violations were found by axe-core with enabled rules and axe check options',
             checksPassed: passedChecks,
             checksIncomplete: incompleteChecks,
+            checksInapplicable: inapplicableChecks
         };
     }
-    const violationsTotal = violations.reduce((acc, { nodes }) => {
-        acc += nodes.length;
-        return acc;
-    }, 0);
-
     // Prepare data to show summary
     const violationsSummaryTable = simplifyAxeResultForSummary(violations);
-
     // Prepare data to show detailed list of violations
     const violationsDetails = violations.map(
         ({ nodes, impact, description, help, id, tags, helpUrl }, issueIndex) => {
@@ -63,10 +68,11 @@ export function prepareReportData({ violations, passes, incomplete }: CreateRepo
     );
 
     return {
-        violationsTotal,
+        violationsSummary,
         violationsSummaryTable,
         violationsDetails,
         checksPassed: passedChecks,
         checksIncomplete: incompleteChecks,
+        checksInapplicable: inapplicableChecks,
     };
 }

src/util/template/pageTemplate.html

@@ -59,13 +59,14 @@ <h3>
                 AXE Accessibility Results{{#projectKey}} for {{projectKey}} project{{/projectKey}}
             </h3>
             <blockquote class="blockquote">
-                <p class="mb-0">
-                    {{totalWrapped}} on
-                    <a href="{{url}}" target="_blank" class="card-link">{{url}}</a> page
-                </p>
+                <p class="mb-0">{{violationsSummary}}</p>
+                <footer class="blockquote-footer">
+                    Page URL:
+                    <a href="{{url}}" target="_blank" class="card-link">{{url}}</a>
+                </footer>
             </blockquote>
             <table class="table table-striped table-bordered">
-                {{#isViolationPresent}}
+                {{#violationDetails.length}}
                 <thead>
                     <tr>
                         <th width="5%">#</th>
@@ -76,7 +77,7 @@ <h3>
                         <th width="5%">Count</th>
                     </tr>
                 </thead>
-                {{/isViolationPresent}}
+                {{/violationDetails.length}}
                 <tbody>
                     {{#violations}}
                     <tr>
@@ -90,10 +91,9 @@ <h3>
                     {{/violations}}
                 </tbody>
             </table>
-
-            {{#isViolationPresent}}
+            {{#violationDetails.length}}
             <h3>Failed</h3>
-            {{/isViolationPresent}} {{#violationDetails}}
+            {{/violationDetails.length}} {{#violationDetails}}
             <div class="card violationCard">
                 <div class="card-body">
                     <div class="violationCardLine">
@@ -139,7 +139,7 @@ <h6 class="card-subtitle mb-2 text-muted violationCardTitleItem">
                     </div>
                 </div>
             </div>
-            {{/violationDetails}} {{#isPassedPresent}}
+            {{/violationDetails}} {{#hasPassed}}
             <div id="accordionPasses">
                 <div class="card">
                     <div class="card-header" id="headingOne">
@@ -151,8 +151,9 @@ <h5 class="mb-0">
                                 aria-expanded="false"
                                 aria-controls="passes"
                             >
-                                Page elements passed {{passedTotal}} axe rules. Expand details on
-                                click
+                                axe returned {{checksPassed.length}} passed axe
+                                checks{{#checksPassed.length}}. Expand details on
+                                click{{/checksPassed.length}}
                             </button>
                         </h5>
                     </div>
@@ -163,6 +164,7 @@ <h5 class="mb-0">
                         data-parent="#accordionPasses"
                     >
                         <div class="card-body">
+                            {{#checksPassed.length}}
                             <table class="table table-bordered">
                                 <thead>
                                     <tr>
@@ -185,11 +187,12 @@ <h5 class="mb-0">
                                 </tbody>
                                 {{/checksPassed}}
                             </table>
+                            {{/checksPassed.length}}
                         </div>
                     </div>
                 </div>
             </div>
-            {{/isPassedPresent}} {{#isIncompletePresent}}
+            {{/hasPassed}} {{#hasIncomplete}}
             <div id="accordionIncomplete">
                 <div class="card">
                     <div class="card-header" id="headingTwo">
@@ -201,7 +204,7 @@ <h5 class="mb-0">
                                 aria-expanded="false"
                                 aria-controls="incomplete"
                             >
-                                There were {{incompleteTotal}} incomplete checks of axe rules. See
+                                axe returned {{checksIncomplete.length}} incomplete checks. Expand
                                 details on click
                             </button>
                         </h5>
@@ -213,21 +216,28 @@ <h5 class="mb-0">
                         data-parent="#accordionIncomplete"
                     >
                         <div class="card-body">
-                            <p>What 'incomplete' axe result means?</p>
+                            <p><em>What 'incomplete' axe checks means?</em></p>
                             <p>
-                                Explanation from axe core documentation: Incomplete results were
-                                aborted and require further testing. This can happen either because
-                                of technical restrictions to what the rule can test, or because a
-                                javascript error occurred.
+                                Incomplete results were aborted and require further testing. This
+                                can happen either because of technical restrictions to what the rule
+                                can test, or because a javascript error occurred.
                             </p>
+                            <p>
+                                <a
+                                    href="https://www.deque.com/axe/core-documentation/api-documentation/#results-object"
+                                    >Visit axe API Documentation</a
+                                >
+                                to learn more.
+                            </p>
+                            {{#checksIncomplete.length}}
                             <table class="table table-bordered">
                                 <thead>
                                     <tr>
                                         <th width="5%">#</th>
                                         <th width="50%">Description</th>
                                         <th width="20%">Axe rule ID</th>
                                         <th width="15%">WCAG</th>
-                                        <th width="10%">Nodes passed check</th>
+                                        <th width="10%">Nodes with incomplete check</th>
                                     </tr>
                                 </thead>
                                 <tbody>
@@ -242,12 +252,74 @@ <h5 class="mb-0">
                                 </tbody>
                                 {{/checksIncomplete}}
                             </table>
+                            {{/checksIncomplete.length}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {{/hasIncomplete}} {{#hasInapplicable}}
+            <div id="accordionInapplicable">
+                <div class="card">
+                    <div class="card-header" id="headingThree">
+                        <h5 class="mb-0">
+                            <button
+                                class="btn btn-link"
+                                data-toggle="collapse"
+                                data-target="#inapplicable"
+                                aria-expanded="false"
+                                aria-controls="inapplicable"
+                            >
+                                axe returned {{checksInapplicable.length}} inapplicable checks.
+                                Expand details on click
+                            </button>
+                        </h5>
+                    </div>
+                    <div
+                        id="inapplicable"
+                        class="collapse"
+                        aria-labelledby="headingThree"
+                        data-parent="#accordionInapplicable"
+                    >
+                        <div class="card-body">
+                            <p><em>What 'inapplicable' axe checks means?</em></p>
+                            <p>
+                                The inapplicable array lists all the rules for which no matching
+                                elements were found on the page.
+                            </p>
+                            <p>
+                                <a
+                                    href="https://www.deque.com/axe/core-documentation/api-documentation/#results-object"
+                                    >Visit axe API Documentation</a
+                                >
+                                to learn more.
+                            </p>
+                            {{#checksInapplicable.length}}
+                            <table class="table table-bordered">
+                                <thead>
+                                    <tr>
+                                        <th width="5%">#</th>
+                                        <th width="50%">Description</th>
+                                        <th width="20%">Axe rule ID</th>
+                                        <th width="15%">WCAG</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {{#checksInapplicable}}
+                                    <tr>
+                                        <th scope="row">{{index}}</th>
+                                        <td>{{help}}</td>
+                                        <td>{{id}}</td>
+                                        <td>{{wcag}}</td>
+                                    </tr>
+                                </tbody>
+                                {{/checksInapplicable}}
+                            </table>
+                            {{/checksInapplicable.length}}
                         </div>
                     </div>
                 </div>
             </div>
-
-            {{/isIncompletePresent}}
+            {{/hasInapplicable}}
         </div>
     </body>
 </html>