Tests schrijven voor Axe DevTools for Web voor Browser JavaScript

Tests schrijven met Axe DevTools

Vereisten

Om pagina's te testen met Axe DevTools, moet het eerst geïmporteerd en geïnitialiseerd worden in je project. Als je deze stap nog niet hebt voltooid, bekijk deze gids om te zien hoe je dit doet.

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.