🧪 Tester

Översikt

Tester i Midas utgörs främst av komponenttester med hjälp av Vitest Component Testing. Vi gör också automatiska tillgänglighetstester i Storybook. Våra snapshottester körs i Chromatic.

Skriva tester

Vi strävar efter en hög testtäckning, vi tror att en vältestad kodbas ökar förvaltningsbarheten och ger utvecklaren trygghet att förbättra befintlig kod.

Bidrag till kodbasen ska kompletteras med åtminstone ett test.

🧩 Komponenttester

Midas använder Storybook för att presentera komponenter, med hjälp av portable stories kan vi använda en renderad story som utgångspunkt för våra tester. Testerna körs sedan via en riktig browser. Läs gärna mer om komponenttestning hos Vitest

Kör komponenttester

Lokal installation:

nx test components

Docker:

docker compose exec cli npx nx test components

Kör tester för en specifik komponent

nx test components -- toast/Toast.spec

Docker:

docker compose exec cli npx nx test components -- toast/Toast.spec

Kör tester med synlig webbläsare (headed)

Användbart vid felsökning. Kräver WSLg eller en X-server om du kör WSL2.

nx test components --browser.headless=false

Headed mode kan kombineras med ett specifikt test:

nx test components -- toast/Toast.spec --browser.headless=false

🧪 Enhetstester

För att testa JavaScriptmoduler i nodemiljö används vitest.

Lägg till konfiguration för enhetstester

Alla paket och appar i Midas har inte enhetstester konfigurerade. @nx/vitest kommer automatiskt att skapa kommandot nx test <package> om paketet har en konfigurationsfil för vitest (vitest.config.*)

vitest.config.ts

import { defineProject } from 'vitest/config'

export default defineProject({
  test: {
    name: 'unit',
  },
})

♿ Tillgänglighetstester

Med @storybook/addon-a11y utförs tillgänglighetstester med axe på varje komponent, dessa testas i våra workflows med kommandot:

Lokal installation:

nx a11y storybook

Docker:

docker compose exec cli npx nx a11y storybook

Automatiserade tillgänglighetstester fångar upp en stor del av brister gentemot WCAG-standarden men kan självklart kompletteras.

För att kontrollera tillgängligheten i dark-mode eller forced-colors:

Lokal installation:

nx run storybook:a11y-dark-mode      # Dark mode
nx run storybook:a11y-forced-colors  # Forced colors

Docker:

docker compose exec cli npx nx run storybook:a11y-dark-mode      # Dark mode
docker compose exec cli npx nx run storybook:a11y-forced-colors  # Forced colors

👀 Snapshottester

Vi använder Chromatic för att köra snapshottester som jämför visuella ändringar i komponenter. Chromatic utgår från vår Storybook och tar snapshots på samtliga stories.

Trigga snapshottester

Snapshottester körs automatiskt vid push till följande brancher:

• main
• brancher som startar med feature
• brancher som startar med feat
• brancher som startar med fix
• brancher som startar med bugfix

Hoppa över stories

För att reducera antalet snapshots bör vi bara ta en snap per tillstånd i en komponent, vänligen använd följande kod om du vill att chromatic ska hoppa över din story:

export const PrimaryWithAnotherLabel: Story = {
  args: {
    label: 'Just another label',
  },
  parameters: {
    chromatic: {
      disableSnapshot: true,
    },
  },
  // ...
}