Skip to content

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

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