Tests schrijven voor Axe DevTools for Web voor Browser JavaScript

Tests schrijven met Axe DevTools

Vereisten

Om Axe DevTools voor Web te importeren en te initialiseren, moet het eerst geïnstalleerd worden. Als je dat nog niet hebt gedaan, lees dan de handleiding over hoe je het kunt installeren vanuit je artifact repository, of vanuit Deque's Agora.

Importeren en Initialiseren

Het browserpakket is bedoeld om binnen een gebundelde testsuite te draaien, dus het wordt geïmporteerd met ES module syntaxis in zowel JavaScript als TypeScript. @axe-devtools/browser bevat zijn eigen typedeclaraties, dus er is geen afzonderlijk @types/ pakket om te installeren.

JavaScript

import { AxeDevTools } from '@axe-devtools/browser';

TypeScript

De importverklaring is hetzelfde. Voeg het AxeResults type van axe-core toe wanneer je de resultaten van een scan wilt annoteren:

import { AxeDevTools } from '@axe-devtools/browser';
import type { AxeResults } from 'axe-core';

Initialiseren

Zodra je het browserpakket hebt geïmporteerd, initialiseer je het met de regels die je wilt testen. De verklaring is hetzelfde in beide talen:

AxeDevTools.init('wcag2');

Het regelsargument is verplicht en TypeScript controleert het tegen de ondersteunde regelset-id's: wcag2, wcag21, wcag22, wcag2aaa, wcag21aaa, wcag22aaa, 508, en301549, ttv5 en rgaav4.

Deze gids laat gebruikers zien hoe deze Axe DevTools-bibliotheek kan worden geïntegreerd met de react testing library

Met de tool geïmporteerd en geïnitialiseerd in je testbestand, is het toevoegen van tests voor toegankelijkheid net zo eenvoudig als dit. Het fragment hieronder is JavaScript en het wordt ongewijzigd gecompileerd in een TypeScript .tsx-bestand; de Voorbeeldbestand sectie geeft de volledige test in beide talen.

test('Component has no accessibility violations', () => {
 const {container} = render(<Badcomp></Badcomp>);
 AxeDevTools.run(container, (err, results) => {
    expect(results.violations.length).toBe(0);
    done();
 });
});

Deze testgeval rendert een component binnen de containerutility van de react testing library, en vervolgens scant Axe DevTools het op toegankelijkheidsschendingen. Dit voorbeeld verwacht nul toegankelijkheidsschendingen van welke aard dan ook, maar dit kan worden aangepast aan de behoeften van uw organisatie. Lees de gids over alles wat je kunt doen met het resultatenobject die na een scan wordt geretourneerd om meer te zien over hoe je de resultaten van de scans kunt gebruiken.

Voorbeeldbestand

Dit voorbeeldbestand met Axe DevTools en de React-testingbibliotheek helpt bij het context geven over hoe de tool wordt gebruikt. Dezelfde test wordt getoond in JavaScript en in TypeScript. De Axe DevTools API is identiek in beide; de TypeScript-versie gaat in een .tsx-bestand en annoteert de container en de scanresultaten.

JavaScript

import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import { AxeDevTools } from '@axe-devtools/browser';
import "babel-polyfill"

describe('Bad Component', () => {

  beforeEach(function(done) {
    AxeDevTools.init('wcag2', function() {
      done();
    });
  });

   test('Component has no accessibility violations, w/ attest reporter', (done) => {
     const {container} = render(<Badcomp></Badcomp>);
     AxeDevTools.run(container, (err, results) => {
        expect(results.violations.length).toBe(0);
        done();
     });
   });
});

TypeScript

import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import { AxeDevTools } from '@axe-devtools/browser';
import type { AxeResults } from 'axe-core';
import "babel-polyfill"

describe('Bad Component', () => {

  beforeEach((done: jest.DoneCallback) => {
    AxeDevTools.init('wcag2', () => {
      done();
    });
  });

   test('Component has no accessibility violations, w/ attest reporter', (done: jest.DoneCallback) => {
     const container: HTMLElement = render(<Badcomp></Badcomp>).container;
     AxeDevTools.run(container, (err, results: AxeResults) => {
        expect(results.violations.length).toBe(0);
        done();
     });
   });
});

Volgende Stappen

Nu je met succes een toegankelijkheidsscan hebt voltooid, ben je klaar om verder te gaan met meer geavanceerde scanthema's zoals rapporten genereren en het resultatenobject gebruiken.

Probleemoplossing

Als je problemen hebt met het verkrijgen van scanresultaten, neem dan direct contact op met je Deque-vertegenwoordiger, bereik ons via onze supportdesk, of stuur ons een e-mail. We helpen je graag verder.