🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

axe-html-reporter

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

axe-html-reporter - npm Package Compare versions

Comparing version

to
2.0.0

dist/util/prepareAxeRules.d.ts

15

dist/index.d.ts

@@ -1,8 +0,3 @@

import { Result } from 'axe-core';
export interface CreateReport {
violations: Result[];
url: string;
passes?: Result[];
incomplete?: Result[];
inapplicable?: Result[];
import { AxeResults, Result } from 'axe-core';
export interface Options {
reportFileName?: string;

@@ -13,2 +8,6 @@ outputDir?: string;

}
export interface CreateReport {
results: Partial<AxeResults>;
options?: Options;
}
export interface PreparedResults {

@@ -20,2 +19,2 @@ violations: Result[];

}
export declare function createHtmlReport({ violations, url, passes, incomplete, inapplicable, reportFileName, outputDir, projectKey, customSummary, }: CreateReport): void;
export declare function createHtmlReport({ results, options }: CreateReport): void;

@@ -10,26 +10,41 @@ "use strict";

const prepareReportData_1 = require("./util/prepareReportData");
const prepareAxeRules_1 = require("./util/prepareAxeRules");
const saveHtmlReport_1 = require("./util/saveHtmlReport");
function createHtmlReport({ violations, url, passes, incomplete, inapplicable, reportFileName, outputDir, projectKey, customSummary, }) {
if (!violations || !url) {
throw new Error("violations and url parameters are required for HTML accessibility report. Example: createHtmlReport({violations: Result[], url: 'www.example.com'})");
function createHtmlReport({ results, options }) {
var _a;
if (!results.violations) {
throw new Error("'violations' is required for HTML accessibility report. Example: createHtmlReport({ results : { violations: Result[] } })");
}
try {
const template = loadTemplate_1.loadTemplate();
const reportData = prepareReportData_1.prepareReportData({ violations, passes, incomplete, inapplicable });
const preparedReportData = prepareReportData_1.prepareReportData({
violations: results.violations,
passes: results.passes,
incomplete: results.incomplete,
inapplicable: results.inapplicable,
});
const htmlContent = mustache_1.default.render(template, {
url,
violationsSummary: reportData.violationsSummary,
violations: reportData.violationsSummaryTable,
violationDetails: reportData.violationsDetails,
checksPassed: reportData.checksPassed,
checksIncomplete: reportData.checksIncomplete,
checksInapplicable: reportData.checksInapplicable,
hasPassed: passes !== undefined,
hasIncomplete: incomplete !== undefined,
hasInapplicable: inapplicable !== undefined,
incompleteTotal: reportData.checksIncomplete ? reportData.checksIncomplete.length : 0,
projectKey,
customSummary,
url: results.url,
violationsSummary: preparedReportData.violationsSummary,
violations: preparedReportData.violationsSummaryTable,
violationDetails: preparedReportData.violationsDetails,
checksPassed: preparedReportData.checksPassed,
checksIncomplete: preparedReportData.checksIncomplete,
checksInapplicable: preparedReportData.checksInapplicable,
hasPassed: Boolean(results.passes),
hasIncomplete: Boolean(results.incomplete),
hasInapplicable: Boolean(results.inapplicable),
incompleteTotal: preparedReportData.checksIncomplete
? preparedReportData.checksIncomplete.length
: 0,
projectKey: options === null || options === void 0 ? void 0 : options.projectKey,
customSummary: options === null || options === void 0 ? void 0 : options.customSummary,
hasAxeRawResults: Boolean(results === null || results === void 0 ? void 0 : results.timestamp),
rules: prepareAxeRules_1.prepareAxeRules(((_a = results === null || results === void 0 ? void 0 : results.toolOptions) === null || _a === void 0 ? void 0 : _a.rules) || {}),
});
saveHtmlReport_1.saveHtmlReport({ htmlContent, reportFileName, outputDir });
saveHtmlReport_1.saveHtmlReport({
htmlContent,
reportFileName: options === null || options === void 0 ? void 0 : options.reportFileName,
outputDir: options === null || options === void 0 ? void 0 : options.outputDir,
});
}

@@ -41,2 +56,2 @@ catch (e) {

exports.createHtmlReport = createHtmlReport;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsd0RBQWdDO0FBRWhDLHNEQUFtRDtBQUNuRCxnRUFBNkQ7QUFDN0QsMERBQXVEO0FBcUJ2RCxTQUFnQixnQkFBZ0IsQ0FBQyxFQUM3QixVQUFVLEVBQ1YsR0FBRyxFQUNILE1BQU0sRUFDTixVQUFVLEVBQ1YsWUFBWSxFQUNaLGNBQWMsRUFDZCxTQUFTLEVBQ1QsVUFBVSxFQUNWLGFBQWEsR0FDRjtJQUNYLElBQUksQ0FBQyxVQUFVLElBQUksQ0FBQyxHQUFHLEVBQUU7UUFDckIsTUFBTSxJQUFJLEtBQUssQ0FDWCxxSkFBcUosQ0FDeEosQ0FBQztLQUNMO0lBQ0QsSUFBSTtRQUNBLE1BQU0sUUFBUSxHQUFHLDJCQUFZLEVBQUUsQ0FBQztRQUNoQyxNQUFNLFVBQVUsR0FBRyxxQ0FBaUIsQ0FBQyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxDQUFDLENBQUM7UUFDdkYsTUFBTSxXQUFXLEdBQUcsa0JBQVEsQ0FBQyxNQUFNLENBQUMsUUFBUSxFQUFFO1lBQzFDLEdBQUc7WUFDSCxpQkFBaUIsRUFBRSxVQUFVLENBQUMsaUJBQWlCO1lBQy9DLFVBQVUsRUFBRSxVQUFVLENBQUMsc0JBQXNCO1lBQzdDLGdCQUFnQixFQUFFLFVBQVUsQ0FBQyxpQkFBaUI7WUFDOUMsWUFBWSxFQUFFLFVBQVUsQ0FBQyxZQUFZO1lBQ3JDLGdCQUFnQixFQUFFLFVBQVUsQ0FBQyxnQkFBZ0I7WUFDN0Msa0JBQWtCLEVBQUUsVUFBVSxDQUFDLGtCQUFrQjtZQUNqRCxTQUFTLEVBQUUsTUFBTSxLQUFLLFNBQVM7WUFDL0IsYUFBYSxFQUFFLFVBQVUsS0FBSyxTQUFTO1lBQ3ZDLGVBQWUsRUFBRSxZQUFZLEtBQUssU0FBUztZQUMzQyxlQUFlLEVBQUUsVUFBVSxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ3JGLFVBQVU7WUFDVixhQUFhO1NBQ2hCLENBQUMsQ0FBQztRQUNILCtCQUFjLENBQUMsRUFBRSxXQUFXLEVBQUUsY0FBYyxFQUFFLFNBQVMsRUFBRSxDQUFDLENBQUM7S0FDOUQ7SUFBQyxPQUFPLENBQUMsRUFBRTtRQUNSLE9BQU8sQ0FBQyxJQUFJLENBQUMsZ0RBQWdELENBQUMsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDO0tBQzdFO0FBQ0wsQ0FBQztBQXRDRCw0Q0FzQ0MifQ==
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsd0RBQWdDO0FBRWhDLHNEQUFtRDtBQUNuRCxnRUFBNkQ7QUFDN0QsNERBQXlEO0FBQ3pELDBEQUF1RDtBQXFCdkQsU0FBZ0IsZ0JBQWdCLENBQUMsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFnQjs7SUFDL0QsSUFBSSxDQUFDLE9BQU8sQ0FBQyxVQUFVLEVBQUU7UUFDckIsTUFBTSxJQUFJLEtBQUssQ0FDWCwySEFBMkgsQ0FDOUgsQ0FBQztLQUNMO0lBQ0QsSUFBSTtRQUNBLE1BQU0sUUFBUSxHQUFHLDJCQUFZLEVBQUUsQ0FBQztRQUNoQyxNQUFNLGtCQUFrQixHQUFHLHFDQUFpQixDQUFDO1lBQ3pDLFVBQVUsRUFBRSxPQUFPLENBQUMsVUFBVTtZQUM5QixNQUFNLEVBQUUsT0FBTyxDQUFDLE1BQU07WUFDdEIsVUFBVSxFQUFFLE9BQU8sQ0FBQyxVQUFVO1lBQzlCLFlBQVksRUFBRSxPQUFPLENBQUMsWUFBWTtTQUNyQyxDQUFDLENBQUM7UUFDSCxNQUFNLFdBQVcsR0FBRyxrQkFBUSxDQUFDLE1BQU0sQ0FBQyxRQUFRLEVBQUU7WUFDMUMsR0FBRyxFQUFFLE9BQU8sQ0FBQyxHQUFHO1lBQ2hCLGlCQUFpQixFQUFFLGtCQUFrQixDQUFDLGlCQUFpQjtZQUN2RCxVQUFVLEVBQUUsa0JBQWtCLENBQUMsc0JBQXNCO1lBQ3JELGdCQUFnQixFQUFFLGtCQUFrQixDQUFDLGlCQUFpQjtZQUN0RCxZQUFZLEVBQUUsa0JBQWtCLENBQUMsWUFBWTtZQUM3QyxnQkFBZ0IsRUFBRSxrQkFBa0IsQ0FBQyxnQkFBZ0I7WUFDckQsa0JBQWtCLEVBQUUsa0JBQWtCLENBQUMsa0JBQWtCO1lBQ3pELFNBQVMsRUFBRSxPQUFPLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQztZQUNsQyxhQUFhLEVBQUUsT0FBTyxDQUFDLE9BQU8sQ0FBQyxVQUFVLENBQUM7WUFDMUMsZUFBZSxFQUFFLE9BQU8sQ0FBQyxPQUFPLENBQUMsWUFBWSxDQUFDO1lBQzlDLGVBQWUsRUFBRSxrQkFBa0IsQ0FBQyxnQkFBZ0I7Z0JBQ2hELENBQUMsQ0FBQyxrQkFBa0IsQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNO2dCQUM1QyxDQUFDLENBQUMsQ0FBQztZQUNQLFVBQVUsRUFBRSxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUUsVUFBVTtZQUMvQixhQUFhLEVBQUUsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFFLGFBQWE7WUFDckMsZ0JBQWdCLEVBQUUsT0FBTyxDQUFDLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRSxTQUFTLENBQUM7WUFDN0MsS0FBSyxFQUFFLGlDQUFlLENBQUMsT0FBQSxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUUsV0FBVywwQ0FBRSxLQUFLLEtBQUksRUFBRSxDQUFDO1NBQzVELENBQUMsQ0FBQztRQUNILCtCQUFjLENBQUM7WUFDWCxXQUFXO1lBQ1gsY0FBYyxFQUFFLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRSxjQUFjO1lBQ3ZDLFNBQVMsRUFBRSxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUUsU0FBUztTQUNoQyxDQUFDLENBQUM7S0FDTjtJQUFDLE9BQU8sQ0FBQyxFQUFFO1FBQ1IsT0FBTyxDQUFDLElBQUksQ0FBQyxnREFBZ0QsQ0FBQyxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUM7S0FDN0U7QUFDTCxDQUFDO0FBekNELDRDQXlDQyJ9

@@ -13,3 +13,3 @@ "use strict";

impact: impact || 'n/a',
nodes: nodes.length,
nodes: nodes.length
}));

@@ -16,0 +16,0 @@ }

@@ -0,1 +1,2 @@

export declare const defaultReportFileName = "accessibilityReport.html";
interface SaveReportOptions {

@@ -2,0 +3,0 @@ htmlContent: string;

@@ -6,4 +6,5 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.saveHtmlReport = void 0;
exports.saveHtmlReport = exports.defaultReportFileName = void 0;
const fs_1 = __importDefault(require("fs"));
exports.defaultReportFileName = 'accessibilityReport.html';
/**

@@ -22,3 +23,3 @@ * Saves the file with specified file name or with default file name index.thml

}
const reportFilePath = `${reportDirectory}/${reportFileName || 'accessibilityReport.html'}`;
const reportFilePath = `${reportDirectory}/${reportFileName || exports.defaultReportFileName}`;
fs_1.default.writeFileSync(reportFilePath, htmlContent);

@@ -32,2 +33,2 @@ console.info(`HTML report was saved into the following directory ${reportFilePath}`);

exports.saveHtmlReport = saveHtmlReport;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2F2ZUh0bWxSZXBvcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdXRpbC9zYXZlSHRtbFJlcG9ydC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSw0Q0FBb0I7QUFPcEI7Ozs7R0FJRztBQUNILFNBQWdCLGNBQWMsQ0FBQyxFQUMzQixXQUFXLEVBQ1gsY0FBYyxFQUNkLFNBQVMsR0FDTztJQUNoQixJQUFJO1FBQ0EsTUFBTSxlQUFlLEdBQUcsR0FBRyxPQUFPLENBQUMsR0FBRyxFQUFFLElBQUksU0FBUyxJQUFJLFdBQVcsRUFBRSxDQUFDO1FBQ3ZFLElBQUksQ0FBQyxZQUFFLENBQUMsVUFBVSxDQUFDLGVBQWUsQ0FBQyxFQUFFO1lBQ2pDLFlBQUUsQ0FBQyxTQUFTLENBQUMsZUFBZSxFQUFFO2dCQUMxQixTQUFTLEVBQUUsSUFBSTthQUNsQixDQUFDLENBQUM7U0FDTjtRQUNELE1BQU0sY0FBYyxHQUFHLEdBQUcsZUFBZSxJQUFJLGNBQWMsSUFBSSwwQkFBMEIsRUFBRSxDQUFDO1FBQzVGLFlBQUUsQ0FBQyxhQUFhLENBQUMsY0FBYyxFQUFFLFdBQVcsQ0FBQyxDQUFDO1FBQzlDLE9BQU8sQ0FBQyxJQUFJLENBQUMsc0RBQXNELGNBQWMsRUFBRSxDQUFDLENBQUM7S0FDeEY7SUFBQyxPQUFPLEdBQUcsRUFBRTtRQUNWLE9BQU8sQ0FBQyxLQUFLLENBQUMsb0RBQW9ELEdBQUcsRUFBRSxDQUFDLENBQUM7S0FDNUU7QUFDTCxDQUFDO0FBbEJELHdDQWtCQyJ9
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2F2ZUh0bWxSZXBvcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdXRpbC9zYXZlSHRtbFJlcG9ydC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSw0Q0FBb0I7QUFFUCxRQUFBLHFCQUFxQixHQUFHLDBCQUEwQixDQUFDO0FBT2hFOzs7O0dBSUc7QUFDSCxTQUFnQixjQUFjLENBQUMsRUFDM0IsV0FBVyxFQUNYLGNBQWMsRUFDZCxTQUFTLEdBQ087SUFDaEIsSUFBSTtRQUNBLE1BQU0sZUFBZSxHQUFHLEdBQUcsT0FBTyxDQUFDLEdBQUcsRUFBRSxJQUFJLFNBQVMsSUFBSSxXQUFXLEVBQUUsQ0FBQztRQUN2RSxJQUFJLENBQUMsWUFBRSxDQUFDLFVBQVUsQ0FBQyxlQUFlLENBQUMsRUFBRTtZQUNqQyxZQUFFLENBQUMsU0FBUyxDQUFDLGVBQWUsRUFBRTtnQkFDMUIsU0FBUyxFQUFFLElBQUk7YUFDbEIsQ0FBQyxDQUFDO1NBQ047UUFDRCxNQUFNLGNBQWMsR0FBRyxHQUFHLGVBQWUsSUFBSSxjQUFjLElBQUksNkJBQXFCLEVBQUUsQ0FBQztRQUN2RixZQUFFLENBQUMsYUFBYSxDQUFDLGNBQWMsRUFBRSxXQUFXLENBQUMsQ0FBQztRQUM5QyxPQUFPLENBQUMsSUFBSSxDQUFDLHNEQUFzRCxjQUFjLEVBQUUsQ0FBQyxDQUFDO0tBQ3hGO0lBQUMsT0FBTyxHQUFHLEVBQUU7UUFDVixPQUFPLENBQUMsS0FBSyxDQUFDLG9EQUFvRCxHQUFHLEVBQUUsQ0FBQyxDQUFDO0tBQzVFO0FBQ0wsQ0FBQztBQWxCRCx3Q0FrQkMifQ==
{
"name": "axe-html-reporter",
"version": "1.2.1",
"version": "2.0.0",
"description": "The module that allows you to create HTML Report from raw accessibility aXe result object",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

# 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`.
See [sample report output](https://lpelypenko.github.io/axe-html-reporter/)
`customSummary` allows having html parameters.
Please check [sample report output.](https://lpelypenko.github.io/axe-html-reporter/)
## Install

@@ -19,5 +21,4 @@

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

@@ -31,11 +32,11 @@ npm i -D axe-html-reporter testcafe axe-core @testcafe-community/axe

{
"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.
See full TestCafe test example is bellow:
```javascript
import { runAxe } from '@testcafe-community/axe';

@@ -48,15 +49,20 @@ import { createHtmlReport } from 'axe-html-reporter';

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',
},
});
});
```

@@ -83,32 +89,22 @@

```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',
},
});

@@ -123,11 +119,9 @@ // creates html report with all optional parameters, saving the report into 'docs' directory with report file name 'index.html'

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',
},
});

@@ -144,4 +138,4 @@ })();

// creates html report with the name `accessibilityReport.html` file
axeHtmlReporter({ violations: results.violations });
axeHtmlReporter({ results: { violations: 'Result[]' } });
})();
```
import mustache from 'mustache';
import { Result } from 'axe-core';
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 CreateReport {
violations: Result[];
url: string;
passes?: Result[];
incomplete?: Result[];
inapplicable?: Result[];
export interface Options {
reportFileName?: string;

@@ -19,2 +15,7 @@ outputDir?: string;

export interface CreateReport {
results: Partial<AxeResults>;
options?: Options;
}
export interface PreparedResults {

@@ -27,16 +28,6 @@ violations: Result[];

export function createHtmlReport({
violations,
url,
passes,
incomplete,
inapplicable,
reportFileName,
outputDir,
projectKey,
customSummary,
}: CreateReport): void {
if (!violations || !url) {
export function createHtmlReport({ results, options }: CreateReport): void {
if (!results.violations) {
throw new Error(
"violations and url parameters are required for HTML accessibility report. Example: createHtmlReport({violations: Result[], url: 'www.example.com'})"
"'violations' is required for HTML accessibility report. Example: createHtmlReport({ results : { violations: Result[] } })"
);

@@ -46,19 +37,32 @@ }

const template = loadTemplate();
const reportData = prepareReportData({ violations, passes, incomplete, inapplicable });
const preparedReportData = prepareReportData({
violations: results.violations,
passes: results.passes,
incomplete: results.incomplete,
inapplicable: results.inapplicable,
});
const htmlContent = mustache.render(template, {
url,
violationsSummary: reportData.violationsSummary,
violations: reportData.violationsSummaryTable,
violationDetails: reportData.violationsDetails,
checksPassed: reportData.checksPassed,
checksIncomplete: reportData.checksIncomplete,
checksInapplicable: reportData.checksInapplicable,
hasPassed: passes !== undefined,
hasIncomplete: incomplete !== undefined,
hasInapplicable: inapplicable !== undefined,
incompleteTotal: reportData.checksIncomplete ? reportData.checksIncomplete.length : 0,
projectKey,
customSummary,
url: results.url,
violationsSummary: preparedReportData.violationsSummary,
violations: preparedReportData.violationsSummaryTable,
violationDetails: preparedReportData.violationsDetails,
checksPassed: preparedReportData.checksPassed,
checksIncomplete: preparedReportData.checksIncomplete,
checksInapplicable: preparedReportData.checksInapplicable,
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, reportFileName, outputDir });
saveHtmlReport({
htmlContent,
reportFileName: options?.reportFileName,
outputDir: options?.outputDir,
});
} catch (e) {

@@ -65,0 +69,0 @@ console.warn(`HTML report was not created due to the error ${e.message}`);

@@ -15,3 +15,3 @@ import { AxeReport } from './AxeReport';

impact: impact || 'n/a',
nodes: nodes.length,
nodes: nodes.length
}));

@@ -18,0 +18,0 @@ }

import fs from 'fs';
export const defaultReportFileName = 'accessibilityReport.html';
interface SaveReportOptions {

@@ -25,3 +27,3 @@ htmlContent: string;

}
const reportFilePath = `${reportDirectory}/${reportFileName || 'accessibilityReport.html'}`;
const reportFilePath = `${reportDirectory}/${reportFileName || defaultReportFileName}`;
fs.writeFileSync(reportFilePath, htmlContent);

@@ -28,0 +30,0 @@ console.info(`HTML report was saved into the following directory ${reportFilePath}`);

import { createHtmlReport } from '../src';
import { defaultReportFileName } from '../src/util/saveHtmlReport';
import fs from 'fs';

@@ -8,130 +9,149 @@ import path from 'path';

const axeRawInapplicable = require('./rawInapplicable.json');
const rawAxeResults = require('./rawAxeResults.json');
function getPathToCreatedReport(customFileName?: string, customOutputDir?: string) {
return path.resolve(
process.cwd(),
customOutputDir ? customOutputDir : 'artifacts',
customFileName ? customFileName : defaultReportFileName
);
}
describe('createHtmlReport() test', () => {
it('Verify throwing an error if required parameters are not passed', async () => {
expect(() => {
//@ts-ignore
createHtmlReport({ passes: [] });
createHtmlReport({
// @ts-ignore
results: {
passes: [],
},
});
}).toThrow(
"violations and url parameters are required for HTML accessibility report. Example: createHtmlReport({violations: Result[], url: 'www.example.com'})"
"'violations' is required for HTML accessibility report. Example: createHtmlReport({ results : { violations: Result[] } })"
);
});
it('Verify report is created only with violations because passes and incomplete are not passed', async () => {
createHtmlReport({
violations: axeRawViolations,
url: 'https://dequeuniversity.com/demo/mars/',
results: {
violations: axeRawViolations,
url: 'https://dequeuniversity.com/demo/mars/',
},
});
const pathToTheReport = path.resolve(
process.cwd(),
'artifacts',
'accessibilityReport.html'
);
const htmlFileContent = fs.readFileSync(pathToTheReport, {
encoding: 'utf8',
expect(fs.readFileSync(getPathToCreatedReport(), { encoding: 'utf8' })).toMatchSnapshot();
});
it('URL is not passed', async () => {
const reportFileName = 'urlIsNotPassed.html';
createHtmlReport({
results: {
violations: axeRawViolations,
},
options: { reportFileName },
});
// do not clean up to verify results manually
// validate
expect(htmlFileContent).toMatchSnapshot();
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' })
).toMatchSnapshot();
});
it('Verify report is created with violations and passes', async () => {
const reportFileName = 'tcPassesAndViolations.html';
createHtmlReport({
violations: axeRawViolations,
passes: axeRawPassed,
reportFileName: 'tcPassesAndViolations.html',
url: 'https://dequeuniversity.com/demo/mars/',
results: {
violations: axeRawViolations,
passes: axeRawPassed,
url: 'https://dequeuniversity.com/demo/mars/',
},
options: { reportFileName },
});
const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcPassesAndViolations.html');
const htmlFileContent = fs.readFileSync(pathToTheReport, {
encoding: 'utf8',
});
// do not clean up to verify results manually
// validate
expect(htmlFileContent).toMatchSnapshot();
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' })
).toMatchSnapshot();
});
it('Verify report is created with violations, passes and incomplete with optional reportFileName and outputDir params', async () => {
const reportFileName = 'tcPassesViolationsIncomplete.html';
const outputDir = 'temp';
createHtmlReport({
violations: axeRawViolations,
passes: axeRawPassed,
incomplete: axeRawIncomplete,
reportFileName: 'tcPassesViolationsIncomplete.html',
outputDir: 'temp',
url: 'https://dequeuniversity.com/demo/mars/',
results: {
violations: axeRawViolations,
passes: axeRawPassed,
incomplete: axeRawIncomplete,
url: 'https://dequeuniversity.com/demo/mars/',
},
options: {
reportFileName,
outputDir,
},
});
const pathToTheReport = path.resolve(process.cwd(), 'temp', 'tcPassesViolationsIncomplete.html');
const htmlFileContent = fs.readFileSync(pathToTheReport, {
encoding: 'utf8',
});
// do not clean up to verify results manually
// validate
expect(htmlFileContent).toMatchSnapshot();
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName, outputDir), {
encoding: 'utf8',
})
).toMatchSnapshot();
});
it('Verify report is created with violations, passes and incomplete with optional reportFileName, url and project key params', async () => {
const reportFileName = 'tcWithTheKey.html';
createHtmlReport({
violations: axeRawViolations,
passes: axeRawPassed,
incomplete: axeRawIncomplete,
reportFileName: 'tcWithTheKey.html',
projectKey: 'DEQUE',
url: 'https://dequeuniversity.com/demo/mars/',
results: {
violations: axeRawViolations,
passes: axeRawPassed,
incomplete: axeRawIncomplete,
url: 'https://dequeuniversity.com/demo/mars/',
},
options: {
reportFileName,
projectKey: 'DEQUE',
},
});
const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcWithTheKey.html');
const htmlFileContent = fs.readFileSync(pathToTheReport, {
encoding: 'utf8',
});
// do not clean up to verify results manually
// validate
expect(htmlFileContent).toMatchSnapshot();
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' })
).toMatchSnapshot();
});
it('Verify report with no violations, passes and incomplete with optional reportFileName, url and project key params', async () => {
const reportFileName = 'tcAllPassed.html';
createHtmlReport({
violations: [],
passes: axeRawPassed,
incomplete: axeRawIncomplete,
reportFileName: 'tcAllPassed.html',
projectKey: 'DEQUE',
url: 'https://dequeuniversity.com/demo/mars/',
results: {
violations: [],
passes: axeRawPassed,
incomplete: axeRawIncomplete,
url: 'https://dequeuniversity.com/demo/mars/',
},
options: { reportFileName, projectKey: 'DEQUE' },
});
const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcAllPassed.html');
const htmlFileContent = fs.readFileSync(pathToTheReport, {
encoding: 'utf8',
});
// do not clean up to verify results manually
// validate
expect(htmlFileContent).toMatchSnapshot();
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' })
).toMatchSnapshot();
});
it('Verify report with no violations, passes and incomplete with optional reportFileName, url and project key params', async () => {
const reportFileName = 'tcInapplicablePresent.html';
createHtmlReport({
violations: axeRawViolations,
passes: axeRawPassed,
incomplete: axeRawIncomplete,
inapplicable: axeRawInapplicable,
reportFileName: 'tcInapplicablePresent.html',
url: 'https://dequeuniversity.com/demo/mars/',
results: {
violations: axeRawViolations,
passes: axeRawPassed,
incomplete: axeRawIncomplete,
inapplicable: axeRawInapplicable,
url: 'https://dequeuniversity.com/demo/mars/',
},
options: { reportFileName },
});
const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcAllPassed.html');
const htmlFileContent = fs.readFileSync(pathToTheReport, {
encoding: 'utf8',
});
// do not clean up to verify results manually
// validate
expect(htmlFileContent).toMatchSnapshot();
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' })
).toMatchSnapshot();
});
it('Verify report with no violations, no passes, no incomplete, no inapplicable', async () => {
const reportFileName = 'tcOnlyPasses.html';
createHtmlReport({
violations: [],
passes: [],
incomplete: [],
inapplicable: [],
reportFileName: 'tcOnlyPasses.html',
url: 'https://dequeuniversity.com/demo/mars/',
results: {
violations: [],
passes: [],
incomplete: [],
inapplicable: [],
url: 'https://dequeuniversity.com/demo/mars/',
},
options: { reportFileName },
});
const pathToTheReport = path.resolve(process.cwd(), 'artifacts', 'tcOnlyPasses.html');
const htmlFileContent = fs.readFileSync(pathToTheReport, {
encoding: 'utf8',
});
// do not clean up to verify results manually
// validate
expect(htmlFileContent).toMatchSnapshot();
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' })
).toMatchSnapshot();
});
it('Verify report is created with violations and custom summary', async () => {
const reportFileName = 'tcIncludingCustomSummary.html';
const customSummary = `Test Case: Full page analysis

@@ -144,22 +164,13 @@ <br>Steps:</br>

createHtmlReport({
violations: axeRawViolations,
url: 'https://dequeuniversity.com/demo/mars/',
customSummary,
reportFileName: 'tcIncludingCustomSummary.html'
results: {
violations: axeRawViolations,
url: 'https://dequeuniversity.com/demo/mars/',
},
options: { reportFileName, customSummary },
});
const pathToTheReport = path.resolve(
process.cwd(),
'artifacts',
'tcIncludingCustomSummary.html'
);
const htmlFileContent = fs.readFileSync(pathToTheReport, {
encoding: 'utf8',
});
// do not clean up to verify results manually
// validate
expect(htmlFileContent).toMatchSnapshot();
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName), { encoding: 'utf8' })
).toMatchSnapshot();
});
it('All optional parameters present', async () => {
const customSummary = `Test Case: Full page analysis
const customSummary = `Test Case: Full page analysis
<br>Steps:</br>

@@ -170,25 +181,33 @@ <ol style="margin: 0">

</ol>`;
it('All optional parameters present', async () => {
const reportFileName = 'tsAllOptionalParametersPresent.html';
createHtmlReport({
violations: axeRawViolations,
passes: axeRawPassed,
incomplete: [],
inapplicable: axeRawInapplicable,
projectKey: 'DEQUE',
url: 'https://dequeuniversity.com/demo/mars/',
customSummary,
outputDir: 'docs',
reportFileName: 'index.html'
results: {
violations: axeRawViolations,
passes: axeRawPassed,
incomplete: [],
inapplicable: axeRawInapplicable,
url: 'https://dequeuniversity.com/demo/mars/',
},
options: { projectKey: 'DEQUE', customSummary, reportFileName },
});
const pathToTheReport = path.resolve(
process.cwd(),
'artifacts',
'tcIncludingCustomSummary.html'
);
const htmlFileContent = fs.readFileSync(pathToTheReport, {
encoding: 'utf8',
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName), {
encoding: 'utf8',
})
).toMatchSnapshot();
});
it('AxeResults passed', async () => {
const reportFileName = 'index.html';
const outputDir = 'docs';
createHtmlReport({
results: rawAxeResults,
options: { projectKey: 'DEQUE', customSummary, outputDir, reportFileName },
});
// do not clean up to verify results manually
// validate
expect(htmlFileContent).toMatchSnapshot();
expect(
fs.readFileSync(getPathToCreatedReport(reportFileName, outputDir), {
encoding: 'utf8',
})
).toMatchSnapshot();
});
});

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet