Karma

Tests de Karma avec Axe DevTools

Cette intégration avec Karma fonctionne indépendamment du framework UI sélectionné. Cette intégration fonctionnera pour tester React, Angular, Vue, etc.

Prérequis

Pour tester votre contenu avec Karma et 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 propriété reporters. Vous pouvez également ajouter la propriété axeDevToolsReporter avec le répertoire de destination (dir). Par défaut, les rapports seront créés dans le répertoire axeDevToolsReports à la racine de votre projet.

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

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

Configuration des cas de test

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

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

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

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

Nous devons maintenant créer un test comme celui montré ci-dessous, où nous scannerons le composant ou le composant de page pour détecter les problèmes d'accessibilité. Cependant, pour appeler correctement AxeDevTools.run(), tout composant non natif devra être compilé en un élément natif pour scanner 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);
});

Rapports avec Karma et Axe DevTools

Configurer les rapports dans le test

Chaque fois que AxeDevTools.run() est appelé, ajoutez un appel à axeDevToolsReporter.logTestResult() et passez-lui les résultats de l'exécution axe. La fonction logTestResult peut, optionnellement, 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);
});

Désormais, 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 du CLI d'Axe DevTools

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

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

Dépannage

Si vous avez des problèmes pour obtenir les résultats de l'analyse, contactez directement votre représentant Deque, atteignez-nous via notre support technique, ou envoyez-nous un email. Nous serons heureux de vous aider.

Pour plus d'informations sur Axe DevTools en général, consultez la page d'aperçu Axe DevTools

Voir aussi

• Télécharger les résultats d'accessibilité JSON vers Axe Reports décrit comment télécharger vos résultats vers Axe Reports.
• Obtenir une clé API pour Axe Reports explique comment obtenir une clé API pour commencer à utiliser Axe Reports.
• Création et filtrage des rapports montre comment vous pouvez créer des rapports d'accessibilité en 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.
• Utiliser la CLI pour envoyer des résultats d'accessibilité à Axe Developer Hub montre comment vous pouvez télécharger vos fichiers de résultats .json vers Axe Developer Hub.