Escrever Testes para Axe DevTools para Web para JavaScript de Navegador

Escrevendo testes com Axe DevTools

Pré-requisitos

Para importar e inicializar o Axe DevTools para Web, ele precisa ser instalado primeiro. Se você ainda não o fez, leia o guia sobre como instalá-lo do seu repositório de artefatos ou do Agora da Deque.

Importação e Inicialização

O pacote do navegador é feito para rodar dentro de uma suíte de testes agrupada, então é importado com a sintaxe de módulo ES tanto em JavaScript quanto em TypeScript. @axe-devtools/browser possui suas próprias declarações de tipo, portanto, não há um pacote @types/ separado para instalar.

JavaScript

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

TypeScript

A instrução de importação é a mesma. Adicione o tipo AxeResults de axe-core quando quiser anotar os resultados que um escaneamento retorna:

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

Inicializando

Depois de importar o pacote do navegador, inicialize-o com o conjunto de regras contra o qual você deseja testar. A instrução é a mesma em ambas as linguagens:

AxeDevTools.init('wcag2');

O argumento do conjunto de regras é obrigatório, e o TypeScript o verifica em relação aos ids de conjunto de regras suportados: wcag2, wcag21, wcag22, wcag2aaa, wcag21aaa, wcag22aaa, 508, en301549, ttv5 e rgaav4.

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 da utilidade 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 conforme as necessidades da sua organização. Para ver mais sobre como usar os resultados dos escaneamentos, leia o guia completo sobre o objeto de resultados que é retornado após um escaneamento.

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.