Svelte

Ar trebui să creezi o componentă principală Svelte numită App.svelte ca punct de intrare al aplicației tale Svelte. Codul tău Svelte ar trebui să fie analizat (linted) folosind ESLint cu configurația recomandată pentru Svelte.

Fișierul de intrare

Fișierul de intrare pentru acest șablon trebuie să fie index.js.

Versiune

Rulează pe Node.js v20.0.0

Limbi suportate

TypeScript sau JavaScript

Framework de testare

Jest

Recomandări speciale și detalii de implementare

import { render, fireEvent } from '@testing-library/svelte';
import Button from './Button.svelte';

test('button click updates count', async () => {
  const { getByText } = render(Button);
  const button = getByText('Click me');
  await fireEvent.click(button);
  expect(getByText('Clicked 1 times')).toBeInTheDocument();
});

Nu uita să îți păstrezi întotdeauna componentele modulare și să folosești reactivitatea, store-urile și funcțiile de ciclu de viață din Svelte pentru gestionarea eficientă a datelor și manipularea DOM-ului. Utilizează sintaxa concisă a Svelte pentru a crea interfețe de utilizator interactive cu un minimum de boilerplate.

Biblioteci incluse

• svelte
• @babel/preset-env
• @sveltejs/vite-plugin-svelte
• @testing-library/jest-dom
• @testing-library/svelte
• @testing-library/user-event
• babel-jest
• babel-plugin-transform-vite-meta-env
• jest
• jest-environment-jsdom
• jest-transform-stub
• svelte-jester
• vite

Provocări write-tests

Acest șablon acceptă provocări write-tests. Soluția de referință este deja scrisă, iar tu scrii testele: acestea trebuie să treacă pe soluția de referință și să prindă fiecare variantă cu bug-uri ascunsă. Test îți rulează testele doar pe soluția de referință, iar Verify tests (Verifică testele) și Submit (Trimite) le rulează și pe variantele cu bug-uri ascunse. Citește Rezolvarea unei provocări write-tests pentru întregul flux.

• Runner de teste: Jest + @testing-library/svelte
• Matcherii @testing-library/jest-dom (toBeInTheDocument, toBeDisabled) sunt deja înregistrați.
• Folosește await la fiecare apel fireEvent: Svelte actualizează DOM-ul asincron, iar o aserțiune imediat după un click fără await citește starea veche.
• Denumește fișierele de test *.spec.js și apelează cleanup() în afterEach.

Un exemplu complet găsești în Exemple de write-tests după șablon.

Cum să depanezi

Depanarea codului Svelte este similară cu depanarea JavaScript și poți folosi instrucțiunile console.log() în Svelte exact așa cum ai face-o în JavaScript.

Pași pentru depanare folosind log-uri în consolă

1. Identifică zona cu probleme: Localizează secțiunea din codul tău Svelte unde suspectezi că ar putea fi problema.

2. Introdu instrucțiuni console.log(): Adaugă instrucțiuni console.log() înainte și după codul suspectat ca fiind problematic pentru a afișa valorile variabilelor și controlul fluxului.

3. Verifică output-ul rezultatelor testelor tale

4. Folosește pictograma Debug din zona Preview: Fă clic pe pictograma Debug din zona Preview pentru a verifica output-ul consolei sau verifică consola browserului tău.

5. Analizează output-ul: Uită-te la valorile afișate în consolă pentru a înțelege ce nu funcționează în codul tău. Ajustează codul pe baza constatărilor și repetă dacă este necesar.

Iată un exemplu despre cum să folosești console.log() pentru depanare în Svelte:

<script lang="ts">
  let a = 5;
  let b = 10;

  function calculateSum(a: number, b: number): number {
      console.log("calculateSum called with arguments:", a, b); // Log function call
      let sum: number = a + b;
      console.log("Sum after addition:", sum); // Log sum calculation
      return sum;
  }

  let result: number = calculateSum(a, b);
  console.log("Result of calculateSum:", result); // Log the result
</script>

<p>Result: {result}</p>