Rédiger des tests pour Axe DevTools for Web pour JavaScript dans le navigateur

Écrire des tests avec Axe DevTools

Prérequis

Afin d'importer et d'initialiser Axe DevTools pour Web, il doit d'abord être installé. Si ce n'est pas encore fait, lisez le guide pour savoir comment l'installer depuis votre dépôt d'artéfacts, ou depuis l'Agora de Deque.

Importation et Initialisation

Le package pour le navigateur est conçu pour s'exécuter à l'intérieur d'une suite de tests packagée, il est donc importé avec une syntaxe de module ES en JavaScript comme en TypeScript. @axe-devtools/browser fournit ses propres déclarations de type, il n'y a donc pas de package @types/ séparé à installer.

JavaScript

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

TypeScript

L'instruction d'importation est la même. Ajoutez le type AxeResults depuis axe-core lorsque vous souhaitez annoter les résultats renvoyés par une analyse :

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

Initialisation

Une fois que vous avez importé le package pour le navigateur, initialisez-le avec l'ensemble de règles contre lequel vous souhaitez tester. L'instruction est la même dans les deux langages :

AxeDevTools.init('wcag2');

L'argument de l'ensemble de règles est requis, et TypeScript le vérifie par rapport aux identifiants des ensembles de règles pris en charge : wcag2, wcag21, wcag22, wcag2aaa, wcag21aaa, wcag22aaa, 508, en301549, ttv5, et rgaav4.

Ce guide montre aux utilisateurs comment intégrer cette bibliothèque Axe DevTools avec la bibliothèque de tests react

Avec l'outil importé et initialisé dans votre fichier de test, ajouter des tests pour l'accessibilité est aussi simple que cela. L'extrait ci-dessous est en JavaScript, et il se compile sans changement dans un fichier .tsx TypeScript ; la section Fichier d'exemple donne le test complet dans les deux langages.

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

Ce cas de test rend un composant à l'intérieur de l'outil de conteneur de la bibliothèque de tests React, puis Axe DevTools le scanne pour détecter les violations d'accessibilité. Cet exemple s'attend à zéro violation d'accessibilité de quelque nature que ce soit, mais cela peut être modifié selon les besoins de votre organisation. Pour en savoir plus sur l'utilisation des résultats des analyses, lisez le guide complet sur l'objet de résultats qui est retourné après une analyse.

Fichier Exemple

Ce fichier exemple utilisant Axe DevTools avec la bibliothèque de tests React devrait aider à contextualiser comment l'outil est utilisé. Le même test est montré en JavaScript et en TypeScript. L'API Axe DevTools est identique dans les deux ; la version TypeScript va dans un fichier .tsx et annote le conteneur ainsi que les résultats du scan.

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();
     });
   });
});

Étapes suivantes

Maintenant que vous avez terminé avec succès une analyse d'accessibilité, vous êtes prêt à passer à des sujets d'analyse plus avancés comme génération de rapports et utilisation de l'objet de résultats.

Dépannage

Si vous rencontrez des difficultés pour obtenir les résultats des analyses, contactez directement votre représentant Deque, contactez-nous via notre assistance technique, ou envoyez-nous un email. Nous serons heureux de vous aider.