Update README.md

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

Hide file tree

Showing 5 changed files with 1,177 additions and 1,371 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,10 @@
 # axe-html-reporter
 
-Creates an HTML report from axe results object with list of violations, passes and incomplete results.
+Creates an HTML report from axe-core library AxeResults object listing violations, passes, incomplete and incompatible results.
 
-Allows specifying `url`, `projectKey` and `outputDir`.
+Allows specifying report creation options: `reportFileName`, `outputDir`, `projectKey` and `customSummary`.
+
+`customSummary` allows having html parameters.
 
 Please check [sample report output.](https://lpelypenko.github.io/axe-html-reporter/)
 
@@ -16,8 +18,7 @@ npm i axe-html-reporter
 
 ### Example usage in TestCafe
 
-
-To run TestCafe tests with axe-core, install testcafe, axe-core and [@testcafe-community/axe](https://www.npmjs.com/package/@testcafe-community/axe): 
+To run TestCafe tests with axe-core, install testcafe, axe-core and [@testcafe-community/axe](https://www.npmjs.com/package/@testcafe-community/axe):
 
 ```shell script
 npm i -D axe-html-reporter testcafe axe-core @testcafe-community/axe
@@ -27,35 +28,40 @@ For TestCafe example add the following clientScript in your `.testcaferc.json` c
 
 ```json
 {
-  "clientScripts":[{"module":"axe-core/axe.min.js"}]
+    "clientScripts": [{ "module": "axe-core/axe.min.js" }]
 }
 ```
-In the example bellow `fileName` is not passed. In this case html report with default name `accessibilityReport.html` will be created in `artifacts` directory.
 
-See full TestCafe test example is bellow: 
+In the example bellow `fileName` is not passed. If `fileName` is not passed, HTML report will be created with default name `accessibilityReport.html` in `artifacts` directory.
 
-```javascript
+See full TestCafe test example is bellow:
 
+```javascript
 import { runAxe } from '@testcafe-community/axe';
 import { createHtmlReport } from 'axe-html-reporter';
 
 fixture('TestCafe tests with Axe').page('http://example.com');
 
 test('Automated accessibility testing', async (t) => {
     const axeContext = { exclude: [['select']] };
-    const axeOptions = { rules: rulesMap() };
+    const axeOptions = {
+        rules: {
+            'object-alt': { enabled: true },
+            'role-img-alt': { enabled: true },
+            'input-image-alt': { enabled: true },
+            'image-alt': { enabled: true },
+        },
+    };
     const { error, results } = await runAxe(axeContext, axeOptions);
-    await t.expect(error).eql(null, `axe check failed with an error: ${error.message}`);
+    await t.expect(error).notOk(`axe check failed with an error: ${error.message}`);
     // creates html report with the default file name `accessibilityReport.html`
     createHtmlReport({
-        violations: results.violations,
-        passes: results.passes,
-        incomplete: results.incomplete,
-        url: results.url,
-        projectKey: 'EXAMPLE',
+        results,
+        options: {
+            projectKey: 'EXAMPLE',
+        },
     });
 });
-
 ```
 
 Run TestCafe test:
@@ -77,36 +83,26 @@ HTML report was saved into the following directory /Users/axe-demos/artifacts/ac
 ### Example usage in any JS framework
 
 ```javascript
-
 import { axeHtmlReporter } from 'axe-html-reporter';
 
 (() => {
-    const results = { violations: [], passes: [], incomplete: [], inapplicable: [], url: 'http://example.com' }; 
     // creates html report with the default name `accessibilityReport.html` file
-    axeHtmlReporter({
-        violations: results.violations,
-        passes: results.passes,
-        incomplete: results.incomplete,
-        inapplicable: results.inapplicable,
-        url: results.url
-    });
+    axeHtmlReporter({ results: 'AxeResults' }); // full AxeResults object
+    // creates html report with the default name `accessibilityReport.html` file and all supported AxeResults values
+    axeHtmlReporter({ results: { violations: 'Result[]' } }); // passing only violations from axe.run output
     // creates html report with the default name `accessibilityReport.html` file and adds url and projectKey
     axeHtmlReporter({
-        violations: results.violations,
-        passes: results.passes,
-        incomplete: results.incomplete,
-        projectKey: 'JIRA_PROJECT_KEY',
-        url: results.url,
+        results: 'AxeResults',
+        options: { projectKey: 'JIRA_PROJECT_KEY' },
     });
-    // creates html report with the name `exampleReport.html` in 'axe-reports' directory and adds url and projectKey to the header
+    // creates html report with the name `exampleReport.html` in 'axe-reports' directory and adds projectKey to the header
     axeHtmlReporter({
-        violations: results.violations,
-        passes: results.passes,
-        incomplete: results.incomplete,
-        projectKey: 'JIRA_PROJECT_KEY',
-        outputDir: 'axe-reports',
-        url: results.url,
-        fileName: 'exampleReport.html',
+        results: 'AxeResults',
+        options: {
+            projectKey: 'JIRA_PROJECT_KEY',
+            outputDir: 'axe-reports',
+            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
@@ -116,15 +112,13 @@ import { axeHtmlReporter } from 'axe-html-reporter';
     <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'
+        results: 'AxeResults',
+        options: {
+            projectKey: 'DEQUE',
+            customSummary,
+            outputDir: 'docs',
+            reportFileName: 'index.html',
+        },
     });
 })();
 ```
@@ -136,6 +130,6 @@ const { axeHtmlReporter } = require('axe-html-reporter');
 
 (() => {
     // creates html report with the name `accessibilityReport.html` file
-    axeHtmlReporter({ violations: results.violations });
+    axeHtmlReporter({ results: { violations: 'Result[]' } });
 })();
 ```