Escrever Testes para Axe DevTools para Web para JavaScript de Navegador

Escrevendo testes com Axe DevTools

Pré-requisitos

Para testar páginas com Axe DevTools, você primeiro precisa importá-lo e inicializá-lo em seu projeto. Se ainda não completou esta etapa, consulte este guia para saber como fazê-lo.

Este guia mostra aos usuários como integrar esta biblioteca Axe DevTools com a react testing library

Com a ferramenta importada e inicializada no seu arquivo de teste, adicionar testes de acessibilidade é tão simples quanto isto. O trecho abaixo é em JavaScript, e ele compila sem alterações em um arquivo .tsx de TypeScript; a seção Arquivo Exemplo apresenta o teste completo em ambas as linguagens.

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

Este caso de teste renderiza um componente dentro do utilitário de contêiner da react testing library, e então o Axe DevTools o escaneia em busca de violações de acessibilidade. Este exemplo espera zero violações de acessibilidade de qualquer tipo, mas isso pode ser modificado para as necessidades da sua organização. Para ver mais sobre como usar os resultados das varreduras, leia o guia todo sobre o objeto de resultados que é retornado após uma varredura.

Arquivo de Exemplo

Este arquivo de exemplo usando Axe DevTools com a biblioteca de teste React deve ajudar a contextualizar como a ferramenta é usada. O mesmo teste é mostrado em JavaScript e TypeScript. A API do Axe DevTools é idêntica em ambas; a versão TypeScript vai em um arquivo .tsx e anota o contêiner e os resultados da verificação.

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

Próximos Passos

Agora que você completou com sucesso uma varredura de acessibilidade, está pronto para avançar para tópicos de varredura mais avançados, como gerando relatórios e usando o objeto de resultados.

Resolução de Problemas

Se você tiver problemas para obter resultados de varredura, entre em contato com seu representante Deque diretamente, ou nos alcance através do nosso suporte técnico, ou envie-nos um e-mail. Ficaremos felizes em ajudar.