Karma

Pruebas con Karma y Axe DevTools

Esta integración con Karma funciona independientemente del marco de UI seleccionado. Esta integración funcionará probando React, Angular, Vue, etc.

Requisitos previos

Para probar tu contenido usando Karma y Axe DevTools, primero necesitas tener los siguientes paquetes instalados en tu proyecto:

• @axe-devtools/karma-json-reporter
• @axe-devtools/browser
• @axe-devtools/cli

Configuración de Karma

Primero necesitamos configurar nuestro archivo karma.config (o karma.conf) para incluir el @axe-devtools/karma-json-reporter como un complemento.

plugins: [
  require('@axe-devtools/karma-json-reporter')
]

Luego, añade axeDevTools a la propiedad reporters. También puedes añadir la propiedad axeDevToolsReporter con el directorio de destino (dir). Por defecto, los informes se crearán en el directorio axeDevToolsReports en el nivel raíz de tu proyecto.

reporters: ['axeDevTools'],
axeDevToolsReporter: {
  dir: 'axe-results'
},

Una vez configurado, el @axe-devtools/karma-json-reporter añadirá un objeto reportero global a tus pruebas llamado axeDevToolsReporter.

Configuración del caso de prueba

Para ejecutar axe dentro de tus especificaciones de prueba para cada componente o página, añade la siguiente importación:

import * as AxeDevTools from "@axe-devtools/browser";

Luego, dentro de tus funciones de configuración de pruebas (por ejemplo, before() o beforeEach()) añade la siguiente función init() para darle un conjunto de reglas particular. Por defecto se utiliza el conjunto de reglas wcag2.1.

before(() => {
  AxeDevTools.init("wcag2.1");
});

Ahora necesitamos crear una prueba como la que se muestra a continuación, donde escanearemos el componente o la página en busca de problemas de accesibilidad. Sin embargo, para llamar correctamente a AxeDevTools.run(), cualquier componente no nativo deberá ser compilado en un elemento nativo para escanear adecuadamente el componente.

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  expect(results.violations).toHaveLength(0);
});

Generación de informes con Karma y Axe DevTools

Configurar informes en la prueba

Cada vez que se llame a AxeDevTools.run(), añade una llamada a axeDevToolsReporter.logTestResult() y pásale los resultados de la ejecución de axe. La función logTestResult puede opcionalmente tomar un id como primer parámetro que se utilizará como el nombre de la prueba.

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  axeDevToolsReporter.logTestResult(results);
  expect(results.violations).toHaveLength(0);
});

Ahora, cuando se ejecuten las pruebas, el @axe-devtools/karma-json-reporter creará un archivo JSON para cada análisis registrado de Axe DevTools (llamado axeDevToolsResults).

Ejecutando el CLI de Axe DevTools

Una vez que las pruebas se han completado y se han generado los informes, podemos generar un informe de Axe DevTools usando el @axe-devtools/cli.

"test": "karma start && axe reporter ./axe-results --format=html",

Solución de problemas

Si tienes problemas para obtener los resultados del escaneo, contacta directamente a tu representante de Deque, contáctanos a través de nuestro servicio de soporte, o envíenos un correo electrónico. Estaremos encantados de ayudar.

Para más información sobre Axe DevTools en general, consulta la página de resumen de Axe DevTools

Ver también

• Cargando Resultados de Accesibilidad JSON a Axe Reports describe cómo cargar tus resultados en Axe Reports.
• Obteniendo una Clave API de Axe Reports explica cómo obtener una clave API para comenzar a usar Axe Reports.
• Crear y Filtrar Informes muestra cómo puedes crear informes de accesibilidad en CSV, XML o HTML a partir de tus resultados de accesibilidad JSON. También puedes filtrar tu salida por severidad utilizando esta herramienta.
• Cómo se Almacenan los Resultados JSON en el Disco describe las convenciones de nomenclatura de archivos para resultados de accesibilidad JSON.
• Usando la CLI para Enviar Resultados de Accesibilidad al Centro de Desarrolladores de Axe muestra cómo puedes subir tus archivos de resultados .json a Centro de Desarrolladores de Axe.