Scrivere Test per Axe DevTools per Web per JavaScript nei Browser

Scrivere test con Axe DevTools

Prerequisiti

Per testare le pagine con Axe DevTools, è prima necessario importarlo e inizializzarlo nel tuo progetto. Se non hai ancora completato questo passaggio, consulta questa guida per sapere come farlo.

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

Prossimi passi

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.