Română

English

Română

English

Aspect

VanillaJS ​

VanillaJS rulează folosind JSDOM.

Fișier de intrare ​

  • Intrare script: Fișierul de intrare pentru acest șablon este index.js.
  • Intrare browser: Fișierul de intrare pentru browser este index.html.
  • În index.html trebuie să incluzi eticheta script, de exemplu <script type="module" src="./index.js"></script>.
  • Adaugă CSS prin <link rel="stylesheet" href="./style.css"> dacă este necesar.

Versiune ​

Rulează pe Node.js v20.0.0

Limbi suportate ​

Javascript

Framework de testare ​

Jest

Recomandări speciale și detalii de implementare ​

js
import { createHeader } from './helloWorld';

describe('helloWorld.ts', () => {
  beforeEach(() => {
    document.documentElement.innerHTML = global.htmlContent;
  });

  test("Should create a h1 with text Hello World!", () => {
    createHeader();

    const header = document.querySelector('h1');

    expect(header.textContent.trim()).toEqual("Hello World!");
  });
});

Biblioteci incluse ​

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 + jsdom
  • Șablonul nu include Testing Library: interoghează DOM-ul cu document.querySelector și declanșează evenimente cu .click().
  • Configurarea testelor expune index.html ca globalThis.htmlContent. Resetează documentul în beforeEach (document.documentElement.innerHTML = globalThis.htmlContent) ca fiecare test să pornească de la zero, apoi montează în #app.
  • Denumește fișierele de test *.spec.js.

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

Cum să depanezi ​

Depanarea codului JavaScript este o abilitate crucială pentru orice dezvoltator. Una dintre cele mai simple, dar eficiente metode de depanare este utilizarea instrucțiunilor console.log().

Pași pentru depanare folosind loguri în consolă ​

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

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

  3. Verifică rezultatele testelor tale

  4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare din zona de Previzualizare (Preview) pentru a verifica rezultatul din consolă sau verifică consola browserului tău.

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

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

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

let result = calculateSum(5, 10);
console.log("Result of calculateSum:", result); // Log the result