Scrivere Test per Axe DevTools per Web per JavaScript nei Browser

Scrivere test con Axe DevTools

Prerequisiti

Per importare e inizializzare Axe DevTools for Web, bisogna prima installarlo. Se non lo hai ancora fatto, leggi la guida su come installarlo dal tuo repository di artifact, o dall'Agora di Deque.

Importazione e Inizializzazione

Il pacchetto per browser è pensato per funzionare all'interno di una suite di test raggruppata, quindi viene importato con la sintassi del modulo ES sia in JavaScript che in TypeScript. @axe-devtools/browser fornisce le proprie dichiarazioni di tipo, quindi non c'è un pacchetto separato @types/ da installare.

JavaScript

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

TypeScript

L'istruzione di importazione è la stessa. Aggiungi il tipo AxeResults da axe-core quando vuoi annotare i risultati restituiti da una scansione:

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

Inizializzazione

Una volta importato il pacchetto per browser, inizializzalo con il set di regole con cui vuoi testare. L'istruzione è la stessa in entrambe le lingue:

AxeDevTools.init('wcag2');

L'argomento del set di regole è obbligatorio, e TypeScript lo controlla rispetto agli ID del set di regole supportati: wcag2, wcag21, wcag22, wcag2aaa, wcag21aaa, wcag22aaa, 508, en301549, ttv5, e rgaav4.

Questa guida mostra agli utenti come integrare questa libreria Axe DevTools con la libreria di test React

Con lo strumento importato e inizializzato nel tuo file di test, aggiungere test per l'accessibilità è semplice come segue. Il frammento di codice qui sotto è in JavaScript e viene compilato senza modifiche in un file .tsx TypeScript; la sezione File di esempio mostra il test completo in entrambe le lingue.

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

Questo caso di test esegue il rendering di un componente all'interno dell'utility di contenitore di React Testing Library, e poi Axe DevTools lo scansiona per rilevare violazioni dell'accessibilità. Questo esempio prevede zero violazioni di accessibilità di qualsiasi tipo, ma può essere modificato in base alle esigenze della tua organizzazione. Per saperne di più su come utilizzare i risultati delle scansioni, leggi la guida tutta su l'oggetto dei risultati che viene restituita dopo una scansione.

File di esempio

Questo file di esempio utilizza Axe DevTools con la libreria di test di React e dovrebbe aiutare a contestualizzare come viene utilizzato lo strumento. Lo stesso test è mostrato in JavaScript e in TypeScript. L'API di Axe DevTools è identica in entrambi; la versione TypeScript va in un file .tsx e annota il contenitore e i risultati della scansione.

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

Passaggi successivi

Ora che hai completato con successo una scansione dell'accessibilità, sei pronto per passare a temi di scansione più avanzati come generare rapporti e usare l'oggetto dei risultati.

Risoluzione dei problemi

Se hai problemi a ottenere i risultati delle scansioni, contatta direttamente il tuo rappresentante Deque, raggiungici tramite il nostro supporto tecnico, o mandaci un'email. Saremo felici di aiutarti.