Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

jasmine-axe

Package Overview
Dependencies
Maintainers
2
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jasmine-axe

Custom Jasmine matcher for aXe for testing accessibility

  • 1.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

jasmine-axe

All Contributors

npm version

Custom Jasmine matcher for aXe for testing accessibility

Installation:

npm install --save-dev jasmine-axe

Usage:

import { TestBed } from "@angular/core/testing";
import { axe, toHaveNoViolations } from "jasmine-axe";
import TestComponent from "./TestComponent.component";

describe("TestComponent", () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [TestComponent],
    });
    TestBed.compileComponents();
    jasmine.addMatchers(toHaveNoViolations);
  });

  it("should pass accessibility test", async () => {
    const fixture = TestBed.createComponent(TestComponent);
    expect(await axe(fixture.nativeElement)).toHaveNoViolations();
  });
});

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.

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

The axe function allows options to be set with the same options as documented in axe-core:

import { axe, toHaveNoViolations } from "jasmine-axe";

describe("TestComponent", () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [],
    });
    TestBed.compileComponents();
    jasmine.addMatchers(toHaveNoViolations);
  });

  it("should demonstrate this matcher`s usage with a custom config", async () => {
    const render = () => `
        <div>
            <img src="#"/>
        </div>
    `;
    const html = render();

    const results = await axe(html, {
      rules: {
        // for demonstration only, don't disable rules that need fixing.
        "image-alt": { enabled: false },
      },
    });
    expect(results).toHaveNoViolations();
  });
});

Setting global configuration

If you find yourself repeating the same options multiple times, you can export a version of the axe function with defaults set.

Note: You can still pass additional options to this new instance; they will be merged with the defaults.

The configuration object passed to configureAxe also accepts a globalOptions property to configure the format of the data used by axe and to add custom checks and rules. The property value is the same as the parameter passed to axe.configure.

// Global helper file (axe-helper.js)
import { configureAxe } from "jasmine-axe";

const axe = configureAxe({
  rules: {
    // for demonstration only, don't disable rules that need fixing.
    "image-alt": { enabled: false },
  },
  globalOptions: {
    checks: [
      /* custom checks definitions */
    ],
  },
});

export default axe;

Contributors ✨

Thanks goes to these wonderful people (emoji key):


MathildeDuboille

️️️️♿️ 💻

Albéric Trancart

️️️️♿️ 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Keywords

FAQs

Package last updated on 28 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc