Karma

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Not for use with personal data

Tests Karma avec axe DevTools

Cette intégration avec Karma fonctionne indépendamment du framework d'interface utilisateur sélectionné. Cette intégration permet de tester React, Angular, Vue, etc.

Prérequis

Afin de tester votre contenu à l'aide de Karma et d'axe DevTools, vous devez d'abord installer les packages suivants dans votre projet :

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

Configuration de Karma

Nous devrons d’abord configurer notre fichier karma.config (ou karma.conf) pour inclure @axe-devtools/karma-json-reporter en tant que plugin.

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

Ajoutez ensuite axeDevTools à la reporters propriété. Vous pouvez également [verb missing] et la propriété axeDevToolsReporter avec le répertoire de destinationdir. Par défaut, les rapports seront créés dans le répertoire axeDevToolsReports au niveau racine de votre projet.

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

Une fois configuré, le @axe-devtools/karma-json-reporter ajoutera un objet reporter global à vos tests appelé axeDevToolsReporter.

Configuration du cas de test

Pour exécuter axe dans vos spécifications de test pour chaque composant ou composant de page, ajoutez l'import suivant :

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

Ensuite, dans vos fonctions de configuration de tests (par exemple, before() ou beforeEach()), ajoutez la fonction suivante init() pour lui donner un ensemble de règles particulier. Par défaut, le wcag2.1 jeu de règles est utilisé.

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

Nous devons maintenant créer un test comme celui présenté ci-dessous, où nous analyserons le composant ou le composant de page à la recherche de problèmes d'accessibilité. Cependant, pour appeler correctement AxeDevTools.run(), tous les composants non natifs devront être compilés dans un élément natif afin d'analyser correctement le composant.

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 avec Karma et axe DevTools

Mise en place des rapports dans le test

Chaque fois que AxeDevTools.run() est invoqué, ajoutez un appel à axeDevToolsReporter.logTestResult() et transmettez-lui les résultats de l'exécution de axe. La fonction logTestResult peut éventuellement prendre un id comme premier paramètre qui sera utilisé comme nom du 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);
});

Maintenant, lorsque les tests sont exécutés, le @axe-devtools/karma-json-reporter créera un fichier JSON pour chaque analyse axe DevTools enregistrée (appelée axeDevToolsResults).

Exécution de l'axe DevTools CLI

Une fois les tests terminés et les rapports générés, nous pouvons générer un rapport axe DevTools en utilisant @axe-devtools/cli.

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

Dépannage

Si vous rencontrez des difficultés pour obtenir les résultats de l'analyse, contactez directement votre représentant Deque, contactez-nous via notre service d'assistance ou envoyez-nous un e-mail. Nous serons heureux de vous aider.

Pour plus d'informations sur axe DevTools en général, consultez la page de présentation d'axe DevTools.(overview-home)

Voir aussi

Téléchargement des résultats d'accessibilité JSON dans les rapports axe décrit comment télécharger vos résultats dans les rapports axe.
Obtention d'une clé API Axe Reports explique comment obtenir une clé API pour commencer à utiliser Axe Reports.
Création et filtrage de rapports montre comment vous pouvez créer des rapports d'accessibilité au format CSV, XML ou HTML à partir de vos résultats d'accessibilité JSON. Vous pouvez également filtrer votre sortie par gravité à l'aide de cet outil.
Comment les résultats JSON sont stockés sur le disque décrit les conventions de nommage des fichiers pour les résultats d'accessibilité JSON.