Aloittelija🧪 Testaus

Snapshot-testin kirjoittaminen

Kirjoita snapshot-testejä UI-komponenteille.

Prompti

Kirjoita snapshot-testit seuraavalle komponentille.

Komponentti:
[KOODI]

Testaa:
- Eri props-kombinaatioilla
- Eri tilat (loading, error, success)
- Reunatapaukset

Käytä:
- Jest + React Testing Library
- Inline snapshots tarvittaessa
- Selkeät testi-nimet

Selitä milloin snapshot-testit ovat hyödyllisiä.

Suomenkieliset vinkit

Testikuvaukset suomeksi auttavat koko tiimiä ymmärtämään testien tarkoituksen
Suomenkieliset promptit toimivat hyvin Claude- ja GPT-4-malleissa
Voit pyytää AI:ta selittämään koodia suomeksi oppimista varten

Muuttujat

Korvaa nämä hakasulkeissa olevat muuttujat omilla tiedoillasi:

[KOODI]

Esimerkki

Täytetty prompti

Kirjoita snapshot-testit seuraavalle komponentille.

Komponentti:
function Alert({ type, message, onClose }) {
  const colors = {
    success: 'bg-green-100 text-green-800',
    error: 'bg-red-100 text-red-800',
    warning: 'bg-yellow-100 text-yellow-800',
  };

  return (
    <div className={`p-4 rounded ${colors[type]}`} role="alert">
      <span>{message}</span>
      {onClose && <button onClick={onClose}>×</button>}
    </div>
  );
}

Testaa eri typeilla ja onClose:n kanssa/ilman.