jasmine-axe - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

index.d.ts

@@ -12,2 +12,3 @@ import { ImpactValue, RunOptions, Spec } from "axe-core";
 export declare const toHaveNoViolations: jasmine.CustomMatcherFactories;
+export declare const toHaveLessThanXViolations: jasmine.CustomMatcherFactories;
 export declare const axe: (html: Element, additionalOptions?: {}) => Promise<unknown>;
@@ -18,2 +19,3 @@ declare global {
             toHaveNoViolations(): void;
+            toHaveLessThanXViolations(allowedViolations: number): void;
         }
@@ -20,0 +22,0 @@ }

index.js

@@ -36,3 +36,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.axe = exports.toHaveNoViolations = exports.configureAxe = void 0;
+exports.axe = exports.toHaveLessThanXViolations = exports.toHaveNoViolations = exports.configureAxe = void 0;
 var axeCore = __importStar(require("axe-core"));
@@ -109,3 +109,3 @@ var lodash_merge_1 = __importDefault(require("lodash.merge"));
  */
-var reporter = function (violations) {
+var reporter = function (violations, allowedViolations) {
     if (violations.length === 0) {
@@ -116,3 +116,4 @@ return "";
     var horizontalLine = "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500";
-    return violations
+    var violationsSummary = violations.length + " violations found. \n\n Expect to have " + (allowedViolations ? 'less than ' + allowedViolations : 'no') + " violations.";
+    return violationsSummary + lineBreak + horizontalLine + lineBreak + violations
         .map(function (violation) {
@@ -122,3 +123,3 @@ var errorBody = violation.nodes
             var selector = node.target.join(", ");
-            var expectedText = "Expected the HTML found at $('" + selector + "') to have no violations:" +
+            var expectedText = "Violation found at $('" + selector + "')" +
                 lineBreak;
@@ -158,5 +159,20 @@ return (expectedText +
 }); };
+var toHaveLessThanXViolationsMatcher = function () { return ({
+    compare: function (results, allowedViolations) {
+        if (typeof results.violations === "undefined") {
+            throw new Error("No violations found in aXe results object");
+        }
+        var violations = results.violations;
+        return {
+            message: reporter(violations, allowedViolations),
+            pass: violations.length <= allowedViolations,
+        };
+    },
+}); };
 exports.toHaveNoViolations = {
-    toHaveNoViolations: toHaveNoViolationsMatcher,
+    toHaveNoViolations: function () { return toHaveNoViolationsMatcher(); },
 };
+exports.toHaveLessThanXViolations = {
+    toHaveLessThanXViolations: function () { return toHaveLessThanXViolationsMatcher(); },
+};
 exports.axe = exports.configureAxe();

index.ts

@@ -88,3 +88,3 @@ import * as axeCore from "axe-core";
  */
-const reporter = (violations: Result[]): string => {
+const reporter = (violations: Result[], allowedViolations?:number): string => {
   if (violations.length === 0) {
@@ -97,3 +97,5 @@ return "";
 
-  return violations
+  const violationsSummary = `${violations.length} violations found. \n\n Expect to have ${allowedViolations ? 'less than '+ allowedViolations : 'no'} violations.`
+
+  return violationsSummary + lineBreak + horizontalLine + lineBreak + violations
     .map((violation) => {
@@ -104,3 +106,3 @@ const errorBody = violation.nodes
           const expectedText =
-            `Expected the HTML found at $('${selector}') to have no violations:` +
+            `Violation found at $('${selector}')` +
             lineBreak;
@@ -141,3 +143,3 @@ return (
       message: reporter(violations),
-      pass: violations.length === 0,
+      pass:  violations.length === 0,
     };
@@ -147,5 +149,22 @@ },
 
+const toHaveLessThanXViolationsMatcher = (): jasmine.CustomMatcher => ({
+  compare: (results: AxeResults, allowedViolations:number): jasmine.CustomMatcherResult => {
+    if (typeof results.violations === "undefined") {
+      throw new Error("No violations found in aXe results object");
+    }
+    const { violations } = results;
+
+    return {
+      message: reporter(violations, allowedViolations),
+      pass: violations.length <= allowedViolations,
+    };
+  },
+});
+
 export const toHaveNoViolations: jasmine.CustomMatcherFactories = {
-  toHaveNoViolations: toHaveNoViolationsMatcher,
+  toHaveNoViolations: () => toHaveNoViolationsMatcher(),
 };
+export const toHaveLessThanXViolations: jasmine.CustomMatcherFactories = {
+  toHaveLessThanXViolations: () => toHaveLessThanXViolationsMatcher(),
+};
 
@@ -158,2 +177,3 @@ export const axe = configureAxe();
       toHaveNoViolations(): void;
+      toHaveLessThanXViolations(allowedViolations:number): void;
     }
@@ -160,0 +180,0 @@ }

package.json

 {
   "name": "jasmine-axe",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "angular-cli": {},

README.md

 # jasmine-axe
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
@@ -36,2 +39,26 @@ [![npm version](https://img.shields.io/npm/v/jasmine-axe.svg)](https://www.npmjs.com/package/jasmine-axe)
 
+If you want to add an accessibility check on an existing project, you will probably find many accessibility issues, and you may not have time to fix them right away.
+Instead of skipping the test until you have time to fix the issues, you can use another matcher `toHaveLessThanXViolations`. You will be able to prevent new accessibility issues to appear.
+This matcher should be use as a temporary fix, the objective is of course to have no violations at all.
+```javascript
+import { TestBed } from "@angular/core/testing";
+import { axe, toHaveLessThanXViolations } from "jasmine-axe";
+import TestComponent from "./TestComponent.component";
+
+describe("TestComponent", () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent],
+    });
+    TestBed.compileComponents();
+    jasmine.addMatchers(toHaveLessThanXViolations);
+  });
+
+  it("should have less than 2 accessibility issues", async () => {
+    const fixture = TestBed.createComponent(TestComponent);
+    expect(await axe(fixture.nativeElement)).toHaveLessThanXViolations(2);
+  });
+});
+```
+
 ### Axe configuration
@@ -98,1 +125,22 @@
 ```
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/MathildeDuboille"><img src="https://avatars.githubusercontent.com/u/35567446?v=4?s=100" width="100px;" alt=""/><br /><sub><b>MathildeDuboille</b></sub></a><br /><a href="#a11y-MathildeDuboille" title="Accessibility">️️️️♿️</a> <a href="https://github.com/theodo/jasmine-axe/commits?author=MathildeDuboille" title="Code">💻</a></td>
+    <td align="center"><a href="http://alberic.trancart.net/"><img src="https://avatars.githubusercontent.com/u/6317823?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Albéric Trancart</b></sub></a><br /><a href="#a11y-AlbericTrancart" title="Accessibility">️️️️♿️</a> <a href="https://github.com/theodo/jasmine-axe/commits?author=AlbericTrancart" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

No alert changes

Improved metrics

Total package byte prevSize

20614

increased by35.43%

Number of package files

7

increased by16.67%

Lines of code

368

increased by10.51%

Number of lines in readme file

144

increased by48.45%

No dependency changes