VanillaJS

VanillaJS runs using JSDOM.

Entry file

• Script entry: The entry file for this template is index.js.
• 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.js"></script>.
• Add CSS via <link rel="stylesheet" href="./style.css"> if needed.

Version

Running on Node.js v20.0.0

Supported languages

Javascript

Testing framework

Jest

Special reminders and implementation details

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

• @babel/preset-env
• babel-jest
• jest-environment-jsdom

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 + jsdom
• There is no Testing Library in this template: query the DOM with document.querySelector and trigger events with .click().
• The test setup exposes your index.html as globalThis.htmlContent. Reset the document in beforeEach (document.documentElement.innerHTML = globalThis.htmlContent) so every test starts clean, then mount into #app.
• Name test files *.spec.js.

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

How to debug

Debugging JavaScript code is a crucial skill for any developer. One of the simplest yet effective ways to debug is by using console.log() statements.

Steps to Debug Using Console Logs

1. Identify the Problem Area Locate the section of your 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:

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