English

Română

English

Română

Appearance

VanillaTS ​

VanillaTS runs using JSDOM.

Entry file ​

  • Script entry: The entry file for this template is index.ts.
  • Browser entry: The browser entry file is index.html.
  • The index.html you must include the script tag, e.g. <script type="module" src="./index.ts"></script>.
  • Add CSS via <link rel="stylesheet" href="./style.css"> if needed.

Version ​

Running on Node.js v20.0.0

Supported languages ​

Typescript

Testing framework ​

Jest

Special reminders and implementation details ​

Remember to always keep your scripts modular and make use of TypeScript's type annotations, interfaces, and other features for type safety. Utilize the Document Object Model (DOM) for manipulating and interacting with web page elements, ensuring that you use type guards when necessary.

ts
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!");
  });
});

Included libraries ​

Write-tests challenges ​

This template supports write-tests challenges. The reference solution is already written and you write the tests: they must pass on the reference solution and catch every hidden buggy variant. Test runs your tests against the reference solution only, while Verify tests and Submit also run them against the hidden buggy variants. Read Solving a write-tests challenge for the full flow.

  • Test runner: Jest (ts-jest) + jsdom
  • Same DOM setup as VanillaJS: reset the document from globalThis.htmlContent in beforeEach and mount into #app.
  • The TypeScript lib does not include DOM.Iterable, so spreading a NodeList ([...document.querySelectorAll('li')]) does not compile. Use Array.from(...) instead.
  • Import the Jest globals from @jest/globals and name test files *.spec.ts.

A complete example is in Write-tests examples by template.

How to debug ​

Debugging TypeScript code is similar to debugging JavaScript, and you can use console.log() statements in TypeScript just as you would in JavaScript.

Steps to Debug Using Console Logs ​

  1. Identify the Problem Area: Locate the section of your TypeScript code where you suspect the problem might be.

  2. Insert console.log() Statements: Add console.log() statements before and after the suspected problematic code to print out variable values and flow control.

  3. Check the Results Output of your tests.

  4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.

  5. Analyze the Output: Look at the values printed in the console to understand what's going wrong in your code. Adjust your code based on the findings and repeat as necessary.

Here’s an example of how to use console.log() for debugging in TypeScript:

typescript
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(5, 10);
console.log("Result of calculateSum:", result); // Log the result