Karma

Test di Karma con Axe DevTools

Questa integrazione con Karma funziona indipendentemente dal framework UI selezionato. Questa integrazione funzionerà testando React, Angular, Vue, ecc..

Prerequisiti

Per testare il tuo contenuto usando Karma e Axe DevTools, è necessario prima installare i seguenti pacchetti nel tuo progetto:

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

Configurazione di Karma

Per prima cosa dovremo configurare il nostro file karma.config (o karma.conf) per includere @axe-devtools/karma-json-reporter come plugin.

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

Quindi aggiungi axeDevTools alla proprietà reporters. Puoi anche aggiungere la proprietà axeDevToolsReporter con la directory di destinazione (dir). Per impostazione predefinita, i report verranno creati nella directory axeDevToolsReports a livello di radice del tuo progetto.

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

Una volta configurato, @axe-devtools/karma-json-reporter aggiungerà un oggetto reporter globale ai tuoi test chiamato axeDevToolsReporter.

Impostazione del caso di test

Per eseguire axe all'interno delle tue specifiche di test per ciascun componente o pagina, aggiungi il seguente import:

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

Poi, all'interno delle funzioni di setup dei tuoi test (ad esempio before() o beforeEach()) aggiungi la seguente funzione init() per assegnargli un particolare insieme di regole. Per impostazione predefinita, viene utilizzato l'insieme di regole wcag2.1.

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

Ora dobbiamo creare un test come quello mostrato di seguito, dove scansioneremo il componente o il componente della pagina per problemi di accessibilità. Tuttavia, per chiamare correttamente AxeDevTools.run(), qualsiasi componente non nativo dovrà essere compilato in un elemento nativo per scansionare correttamente il 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);
});

Reporting con Karma e Axe DevTools

Impostazione del reporting nel test

Ogni volta che si chiama AxeDevTools.run(), aggiungi una chiamata a axeDevToolsReporter.logTestResult() e passagli i risultati dell'esecuzione di axe. La funzione logTestResult può opzionalmente prendere un id come primo parametro, che verrà utilizzato come nome del test.

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

Ora, quando i test vengono eseguiti, @axe-devtools/karma-json-reporter creerà un file JSON per ciascuna scansione di Axe DevTools registrata (chiamata axeDevToolsResults).

Eseguire la CLI di Axe DevTools

Una volta completati i test e generati i report, possiamo generare un report di Axe DevTools utilizzando @axe-devtools/cli.

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

Risoluzione dei problemi

Se hai difficoltà a ottenere i risultati delle scansioni, contatta direttamente il tuo rappresentante Deque, contattaci tramite il nostro supporto tecnico, o inviaci un'email. Siamo felici di aiutarti.

Per ulteriori informazioni su Axe DevTools in generale, consulta la pagina di panoramica di Axe DevTools

Vedi anche

• Caricamento dei risultati di accessibilità JSON su Axe Reports descrive come caricare i tuoi risultati su Axe Reports.
• Ottenere una chiave API per Axe Reports spiega come ottenere una chiave API per iniziare a utilizzare Axe Reports.
• Creazione e filtraggio dei report mostra come puoi creare report di accessibilità in formato CSV, XML o HTML dai tuoi risultati di accessibilità JSON. Puoi anche filtrare il tuo output per gravità utilizzando questo strumento.
• Come vengono memorizzati i risultati JSON sul disco descrive le convenzioni di denominazione dei file per i risultati di accessibilità JSON.
• Utilizzo della CLI per inviare i risultati di accessibilità a Axe Developer Hub mostra come puoi caricare i tuoi file di risultati .json su Axe Developer Hub.