Escribir pruebas para Axe DevTools para Web para JavaScript en el navegador

Escribir pruebas con Axe DevTools

Requisitos previos

Para importar e inicializar Axe DevTools para Web, primero debe estar instalado. Si aún no lo has hecho, lee la guía sobre cómo instalarlo desde tu repositorio de artefactos, o desde el Agora de Deque.

Importación e Inicialización

El paquete del navegador está diseñado para ejecutarse dentro de un conjunto de pruebas empaquetado, por lo que se importa con sintaxis de módulos ES tanto en JavaScript como en TypeScript. @axe-devtools/browser incluye sus propias declaraciones de tipo, por lo que no hay un paquete @types/ separado que instalar.

JavaScript

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

TypeScript

La declaración de importación es la misma. Añade el tipo AxeResults de axe-core cuando quieras anotar los resultados que devuelve un análisis:

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

Inicialización

Una vez que has importado el paquete del navegador, inicialízalo con el conjunto de reglas contra el que deseas hacer la prueba. La declaración es la misma en ambos lenguajes:

AxeDevTools.init('wcag2');

El argumento del conjunto de reglas es obligatorio, y TypeScript lo verifica contra los ids de conjunto de reglas soportados: wcag2, wcag21, wcag22, wcag2aaa, wcag21aaa, wcag22aaa, 508, en301549, ttv5, y rgaav4.

Esta guía muestra a los usuarios cómo integrar esta librería de Axe DevTools con la biblioteca de pruebas de React

Con la herramienta importada e inicializada en tu archivo de pruebas, añadir pruebas de accesibilidad es tan simple como esto. El fragmento siguiente es JavaScript y se compila sin cambios en un archivo .tsx de TypeScript; la sección Archivo de ejemplo proporciona la prueba completa en ambos lenguajes.

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 prueba renderiza un componente dentro de la utilidad de contenedor de la biblioteca de pruebas de react, y luego Axe DevTools lo escanea en busca de violaciones de accesibilidad. Este ejemplo espera cero violaciones de accesibilidad de cualquier tipo, pero esto se puede modificar según las necesidades de su organización. Para ver más sobre cómo usar los resultados de los escaneos, lea la guía sobre el objeto de resultados que se devuelve después de un escaneo.

Archivo de Muestra

Este archivo de muestra utiliza Axe DevTools con la biblioteca de pruebas de React y debería ayudar a contextualizar cómo se usa la herramienta. La misma prueba se muestra en JavaScript y en TypeScript. La API de Axe DevTools es idéntica en ambos; la versión TypeScript se coloca en un archivo .tsx y anota el contenedor y los resultados del análisis.

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 pasos

Ahora que has completado con éxito un análisis de accesibilidad, estás listo para avanzar a temas de escaneo más avanzados como generación de informes y uso del objeto de resultados.

Resolución de problemas

Si tienes problemas para obtener resultados de escaneo, contacta directamente a tu representante de Deque, comunícate con nosotros a través de nuestra mesa de ayuda, o envíanos un correo electrónico. Estaremos encantados de ayudarte.