Initial commit

.gitignore

@@ -0,0 +1,110 @@
+# Created by https://www.gitignore.io/api/osx,node,linux
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+### OSX ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+
+# End of https://www.gitignore.io/api/osx,node,linux
+
+dist/
+build/
+.idea

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    printWidth: 100,
+    singleQuote: true,
+    tabWidth: 4,
+    arrowParens: 'always',
+    trailingComma: 'es5',
+};

README.md

@@ -0,0 +1,58 @@
+# axe-result-pretty-print
+
+The module allows to make readable output for aXe core accessibility results from raw aXe result object.
+Prints violations summary in a table, violations details and small summary of passed rules.
+
+Allows skipping violations summary table print.
+
+See [sample console output](sampleOutput.png)
+
+## Install
+
+```
+npm i axe-result-pretty-print
+```
+
+## Usage
+
+### 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):
+
+```shell script
+npm i -D axe-result-pretty-print testcafe axe-core @testcafe-community/axe
+```
+
+For TestCafe example add the following clientScript in your `.testcaferc.json` config:
+
+```json
+{
+    "clientScripts": [{ "module": "axe-core/axe.min.js" }]
+}
+```
+
+Full TestCafe test example is bellow:
+
+```javascript
+import { runAxe } from '@testcafe-community/axe';
+import { prettyPrintAxeReport } from 'axe-result-pretty-print';
+import { t } from 'testcafe';
+
+fixture('TestCafe test with Axe').page('http://example.com');
+
+test('Automated accessibility testing', async (t) => {
+    const axeContext = { exclude: [['select']] };
+    // example with providing specific axe rules
+    const axeOptions = {
+        rules: { 'color-contrast': { enabled: true }, 'duplicate-id': { enabled: true } },
+    };
+    const { error, results } = await runAxe(axeContext, axeOptions);
+    await t.expect(error).eql(null, `axe check failed with an error: ${error.message}`);
+    // prints full report with failed violations and passed rules summary
+    prettyPrintAxeReport({
+        violations: results.violations,
+        passes: results.passes,
+        url: 'www.example.com',
+    });
+});
+```

jest.config.js

@@ -0,0 +1,23 @@
+const config = {
+    cacheDirectory: '<rootDir>/build/.jestcache',
+    collectCoverage: true,
+    coverageDirectory: '<rootDir>/build/.jestcoverage',
+    coverageReporters: ['lcov', 'text', 'html', 'text-summary', 'json-summary'],
+    rootDir: process.cwd(),
+    testPathIgnorePatterns: ['/.build/', '/node_modules/', 'eslintrc.js'],
+    transform: {
+        '^.+\\.jsx?$': 'babel-jest',
+        '^.+\\.tsx?$': 'ts-jest'
+    },
+    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(j|t)sx?$',
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    globals: {
+        'ts-jest': {
+            tsConfig:  'tsconfig.json'
+        }
+    },
+    testEnvironment: 'node',
+    collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
+};
+
+module.exports = config;

package.json

@@ -0,0 +1,56 @@
+{
+    "name": "axe-result-pretty-print",
+    "version": "1.0.0",
+    "description": "The module allows to make readable output for aXe core accessibility results from raw aXe result object.",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/lpelypenko/axe-result-pretty-print"
+    },
+    "engines": {
+        "node": ">=8.9.0"
+    },
+    "keywords": [
+        "axe",
+        "report",
+        "test",
+        "accessibility"
+    ],
+    "author": "Liliia Pelypenko ([email protected])",
+    "license": "MIT",
+    "files": [
+        "dist",
+        "src",
+        "test",
+        "types"
+    ],
+    "bugs": {
+        "url": "https://github.com/lpelypenko/axe-result-pretty-print/issues"
+    },
+    "homepage": "https://github.com/lpelypenko/axe-result-pretty-print",
+    "scripts": {
+        "clean": "rm -rf dist build",
+        "prebuild": "npm run clean",
+        "build": "tsc --project tsconfig.build.json",
+        "test": "jest test",
+        "test:watch": "jest test --watch"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "axe-core": ">=3"
+    },
+    "devDependencies": {
+        "@types/jest": "^25.2.3",
+        "@types/node": "^14.11.8",
+        "jest": "^26.5.3",
+        "prettier": "^2.1.2",
+        "ts-jest": "^26.4.1",
+        "typescript": "^4.0.3"
+    },
+    "dependencies": {
+        "chalk": "^4.1.0"
+    }
+}

src/SpecReportTypes.ts

@@ -0,0 +1,23 @@
+import { Result } from 'axe-core';
+
+interface Summary {
+    description: string;
+    id: string;
+    wcag: string;
+    impact: string;
+    nodes: number;
+}
+
+export interface SpecPreparedData {
+    violationsTotal: string;
+    violationsSummaryTable: Summary[] | [];
+    violationsDetailsFormatted: string;
+    checksPassedSummary?: string;
+}
+
+export interface SpecReportInput {
+    violations: Result[];
+    passes?: Result[];
+    url?: string;
+    skipResultTable?: boolean;
+}

src/index.ts

@@ -0,0 +1,33 @@
+import { prepareReportData } from './prepareReportData';
+import { SpecReportInput } from './SpecReportTypes';
+
+/**
+ * pretty print outputs only violations and passes
+ * @param report
+ */
+export function prettyPrintAxeReport(report: SpecReportInput): void {
+    try {
+        const preparedData = prepareReportData({
+            violations: report.violations,
+            passes: report.passes,
+            url: report.url,
+        });
+        // Print summary of violations as a table
+        if (preparedData.violationsSummaryTable.length !== 0) {
+            console.info(preparedData.violationsTotal);
+            if (!report.skipResultTable) {
+                console.table(preparedData.violationsSummaryTable);
+            }
+            console.info(preparedData.violationsDetailsFormatted);
+        }
+        if (preparedData.checksPassedSummary !== '') {
+            console.info(preparedData.checksPassedSummary);
+        }
+    } catch (e) {
+        // throw the error only if user made a mistake in passing wrong variable
+        if (e instanceof TypeError) {
+            throw e;
+        }
+        console.log(`printAxeReport() failed with an error${e}`);
+    }
+}