Appearance

VanillaTS ​

VanillaTS runs using JSDOM.

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 ​

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