Tous les exemples peuvent être retrouvés dans ce repo ici

De quoi parle-t-on ?

Ici, avec “qualité”, je sous-entends, bon fonctionnement et maintenabilité du livrable.

• Forcer un certain format dans son CSS.
• Refactor du CSS en étant sûr et certain de ne pas avoir changé l’interface d’une autre page ou d’un état différent de la même page.
• S’assurer qu’un usecase soit toujours fonctionnel après trois années de développement.
• Tester l’accessibilité de ses interfaces.

Stylelint

Avec Stylelint on a la possibilité de forcer la manière d’écrire son CSS. Par exemple interdire les px ou alors forcer la notations rgb pour les couleurs.

Résultat du linting du css du repo d’exemple.

> npx stylelint "**/*.css"


src/style.css
   6:10  ✖  Expected "rgba" to be "rgb"                               color-function-alias-notation
   6:10  ✖  Expected modern color-function notation                   color-function-notation
   6:30  ✖  Expected "0.87" to be "87%"                               alpha-value-notation
   9:3   ✖  Unexpected empty line before declaration                  declaration-empty-line-before
  10:19  ✖  Expected "optimizeLegibility" to be "optimizelegibility"  value-keyword-case
  20:1   ✖  Expected empty line before rule                           rule-empty-line-before
  50:1   ✖  Expected empty line before rule                           rule-empty-line-before
  53:1   ✖  Expected empty line before rule                           rule-empty-line-before
  76:1   ✖  Expected empty line before rule                           rule-empty-line-before
  79:1   ✖  Expected empty line before rule                           rule-empty-line-before
  87:23  ✖  Expected "#ffffff" to be "#fff"                           color-hex-length
  89:3   ✖  Expected empty line before rule                           rule-empty-line-before
  92:3   ✖  Expected empty line before rule        

Playwright

Playwright permet d’écrire des tests dits “end to end”, grâce à cela, nous pouvons donc tester un usecase en simulant des actions utilisateurs sur notre site.

Example d’un test qui simule un click et vérifie le contenu de la page.

  test('should be 1', async ({page}) => {
    await page.goto('/');
    await page.getByRole('button', {name: 'ADD'}).click();
    await expect(page.locator('#counter')).toContainText('count is 1');
  });

On peut également créer des tests d’interface très simples en utilisant des snapshots. Au premier lancement du test, Playwright va sauvegarder un PNG pour chaque projects définie dans la config, puis va utiliser ces snapshots pour les prochains lancements de ce test.

Ce test permet de s’assurer que l’interface reste inchangée.

  test('style test', async ({page}) => {
    await page.goto('/');
    await expect(page).toHaveScreenshot({maxDiffPixels: 0});
  });

On peut également utiliser la librairy axe pour écrire des tests d’accessibilité.

  test('should not have any automatically detectable accessibility issues', async ({ page }) => {
    await page.goto('/');
    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
    expect(accessibilityScanResults.violations).toEqual([]);
  });