Added support of customSummary, updated tests and docs

lpelypenko · Oct 22, 2020 · 64688fb · 64688fb
1 parent b5a7712
commit 64688fb
Show file tree

Hide file tree

Showing 7 changed files with 2,560 additions and 115 deletions.
diff --git a/README.md b/README.md
@@ -108,6 +108,24 @@ import { axeHtmlReporter } from 'axe-html-reporter';
         url: results.url,
         fileName: 'exampleReport.html',
     });
+    // creates html report with all optional parameters, saving the report into 'docs' directory with report file name 'index.html'
+    const customSummary = `Test Case: Full page analysis
+    <br>Steps:</br>
+    <ol style="margin: 0">
+    <li>Open https://dequeuniversity.com/demo/mars/</li>
+    <li>Analyze full page with all rules enabled</li>
+    </ol>`;
+    createHtmlReport({
+        violations: axeRawViolations,
+        passes: axeRawPassed,
+        incomplete: [],
+        inapplicable: axeRawInapplicable,
+        projectKey: 'DEQUE',
+        url: 'https://dequeuniversity.com/demo/mars/',
+        customSummary,
+        outputDir: 'docs',
+        reportFileName: 'index.html'
+    });
 })();
 ```
 

diff --git a/docs/index.html b/docs/index.html
@@ -56,15 +56,23 @@
     <body>
         <div style="padding: 2rem">
             <h3>
-                AXE Accessibility Results
+                AXE Accessibility Results for DEQUE project
             </h3>
-            <blockquote class="blockquote">
-                <p class="mb-0">axe-core found 85 violations</p>
-                <footer class="blockquote-footer">
-                    Page URL:
+            <h5>
+                <small class="text-muted"
+                    >Page URL:
                     <a href="https:&#x2F;&#x2F;dequeuniversity.com&#x2F;demo&#x2F;mars&#x2F;" target="_blank" class="card-link">https:&#x2F;&#x2F;dequeuniversity.com&#x2F;demo&#x2F;mars&#x2F;</a>
-                </footer>
-            </blockquote>
+                    <br />
+                    Test Case: Full page analysis
+        <br>Steps:</br>
+        <ol style="margin: 0">
+        <li>Open https://dequeuniversity.com/demo/mars/</li>
+        <li>Analyze full page with all rules enabled</li>
+        </ol> 
+                </small>
+            </h5>
+
+            <h5>axe-core found <span class="badge badge-warning">85</span> violations</h5>
             <table class="table table-striped table-bordered">
                 <thead>
                     <tr>
@@ -1533,7 +1541,7 @@ <h5 class="mb-0">
                                 aria-expanded="false"
                                 aria-controls="incomplete"
                             >
-                                axe returned 4 incomplete checks. Expand
+                                axe returned 0 incomplete checks. Expand
                                 details on click
                             </button>
                         </h5>
@@ -1558,50 +1566,6 @@ <h5 class="mb-0">
                                 >
                                 to learn more.
                             </p>
-                            <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 with incomplete check</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <th scope="row">1</th>
-                                        <td>Elements must have sufficient color contrast</td>
-                                        <td>color-contrast</td>
-                                        <td>WCAG 2.0 Level AA</td>
-                                        <td>132</td>
-                                    </tr>
-                                </tbody>
-                                    <tr>
-                                        <th scope="row">2</th>
-                                        <td>Hidden content on the page cannot be analyzed</td>
-                                        <td>hidden-content</td>
-                                        <td>Best practice</td>
-                                        <td>60</td>
-                                    </tr>
-                                </tbody>
-                                    <tr>
-                                        <th scope="row">3</th>
-                                        <td>Links must be distinguished from surrounding text in a way that does not rely on color</td>
-                                        <td>link-in-text-block</td>
-                                        <td>WCAG 2.0 Level A</td>
-                                        <td>22</td>
-                                    </tr>
-                                </tbody>
-                                    <tr>
-                                        <th scope="row">4</th>
-                                        <td>&lt;video&gt; elements must have captions</td>
-                                        <td>video-caption</td>
-                                        <td>WCAG 2.0 Level A</td>
-                                        <td>1</td>
-                                    </tr>
-                                </tbody>
-                            </table>
                         </div>
                     </div>
                 </div>

diff --git a/src/index.ts b/src/index.ts
@@ -13,6 +13,7 @@ export interface CreateReport {
     reportFileName?: string;
     outputDir?: string;
     projectKey?: string;
+    customSummary?: string;
 }
 
 export interface PreparedResults {
@@ -31,6 +32,7 @@ export function createHtmlReport({
     reportFileName,
     outputDir,
     projectKey,
+    customSummary,
 }: CreateReport): void {
     if (!violations || !url) {
         throw new Error(
@@ -53,6 +55,7 @@ export function createHtmlReport({
             hasInapplicable: inapplicable !== undefined,
             incompleteTotal: reportData.checksIncomplete ? reportData.checksIncomplete.length : 0,
             projectKey,
+            customSummary,
         });
         saveHtmlReport({ htmlContent, reportFileName, outputDir });
     } catch (e) {

diff --git a/src/util/prepareReportData.ts b/src/util/prepareReportData.ts
@@ -34,18 +34,17 @@ export function prepareReportData({
         acc += nodes.length;
         return acc;
     }, 0);
-    const violationsSummary = `axe-core found ${violationsTotal} violation${
-        violationsTotal === 1 ? '' : 's'
-    }`;
     if (violations.length === 0) {
         return {
-            violationsSummary:
-                'No violations were found by axe-core with enabled rules and axe check options',
+            violationsSummary: 'axe-core found <span class="badge badge-success">0</span> violations',
             checksPassed: passedChecks,
             checksIncomplete: incompleteChecks,
-            checksInapplicable: inapplicableChecks
+            checksInapplicable: inapplicableChecks,
         };
     }
+    const violationsSummary = `axe-core found <span class="badge badge-warning">${violationsTotal}</span> violation${
+        violationsTotal === 1 ? '' : 's'
+    }`;
     // Prepare data to show summary
     const violationsSummaryTable = simplifyAxeResultForSummary(violations);
     // Prepare data to show detailed list of violations

diff --git a/src/util/template/pageTemplate.html b/src/util/template/pageTemplate.html
@@ -58,15 +58,19 @@
             <h3>
                 AXE Accessibility Results{{#projectKey}} for {{projectKey}} project{{/projectKey}}
             </h3>
-            <blockquote class="blockquote">
-                <p class="mb-0">{{violationsSummary}}</p>
-                <footer class="blockquote-footer">
-                    Page URL:
+            <h5>
+                <small class="text-muted"
+                    >Page URL:
                     <a href="{{url}}" target="_blank" class="card-link">{{url}}</a>
-                </footer>
-            </blockquote>
+                    {{#customSummary}}
+                    <br />
+                    {{{customSummary}}} {{/customSummary}}
+                </small>
+            </h5>
+
+            <h5>{{{violationsSummary}}}</h5>
+            {{#violationDetails.length}}
             <table class="table table-striped table-bordered">
-                {{#violationDetails.length}}
                 <thead>
                     <tr>
                         <th width="5%">#</th>