Testing web apps

Deno is a JavaScript runtime that operates outside of the browser, as such, you cannot directly manipulate the Document Object Model in Deno as you would in a browser. However you can use a library like deno-dom, JSDom or LinkeDOM to work with the DOM. This tutorial will guide you through how to effectively test your web applications using Deno.

Testing UI components and DOM manipulation Jump to heading

Let's say you have a website that shows a uers's profile, you can set up a test function to verify that the DOM element creation works correctly. This code sets up a basic card element then tests whether the created DOM structure matches what was expected.

import { assertEquals } from "jsr:@std/assert";
import { DOMParser, Element } from "jsr:@b-fuze/deno-dom";

// Component or function that manipulates the DOM
function createUserCard(user: { name: string; email: string }): Element {
  const doc = new DOMParser().parseFromString("<div></div>", "text/html")!;
  const card = doc.createElement("div");
  card.className = "user-card";

  const name = doc.createElement("h2");
  name.textContent = user.name;
  card.appendChild(name);

  const email = doc.createElement("p");
  email.textContent = user.email;
  email.className = "email";
  card.appendChild(email);

  return card;
}

Deno.test("DOM manipulation test", () => {
  // Create a test user
  const testUser = { name: "Test User", email: "test@example.com" };

  // Call the function
  const card = createUserCard(testUser);

  // Assert the DOM structure is correct
  assertEquals(card.className, "user-card");
  assertEquals(card.children.length, 2);
  assertEquals(card.querySelector("h2")?.textContent, "Test User");
  assertEquals(card.querySelector(".email")?.textContent, "test@example.com");
});

Testing Event Handling Jump to heading

Web applications often handle user interactions through events. Here's how to test event handlers. This code sets up a button that tracks its active/inactive state and updates its appearance when clicked. The accompanying test verifies the toggle functionality by creating a button, checking its initial state, simulating clicks, and asserting that the button correctly updates its state after each interaction:

import { DOMParser } from "jsr:@b-fuze/deno-dom";
import { assertEquals } from "jsr:@std/assert";

// Component with event handling
function createToggleButton(text: string) {
  const doc = new DOMParser().parseFromString("<div></div>", "text/html")!;
  const button = doc.createElement("button");

  button.textContent = text;
  button.dataset.active = "false";

  button.addEventListener("click", () => {
    const isActive = button.dataset.active === "true";
    button.dataset.active = isActive ? "false" : "true";
    button.classList.toggle("active", !isActive);
  });

  return button;
}

Deno.test("event handling test", () => {
  // Create button
  const button = createToggleButton("Toggle Me");

  // Initial state
  assertEquals(button.dataset.active, "false");
  assertEquals(button.classList.contains("active"), false);

  // Simulate click event
  button.dispatchEvent(new Event("click"));

  // Test after first click
  assertEquals(button.dataset.active, "true");
  assertEquals(button.classList.contains("active"), true);

  // Simulate another click
  button.dispatchEvent(new Event("click"));

  // Test after second click
  assertEquals(button.dataset.active, "false");
  assertEquals(button.classList.contains("active"), false);
});

Testing Fetch Requests Jump to heading

Testing components that make network requests requires mocking the fetch API.

In the below example we will mock the fetch API to test a function that retrieves user data from an external API. The test creates a spy function that returns predefined responses based on the requested URL, allowing you to test both successful requests and error handling without making actual network calls:

import { assertSpyCalls, spy } from "jsr:@std/testing/mock";
import { assertEquals } from "jsr:@std/assert";

// Component that fetches data
async function fetchUserData(
  userId: string,
): Promise<{ name: string; email: string }> {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error(`Failed to fetch user: ${response.status}`);
  }
  return await response.json();
}

Deno.test("fetch request test", async () => {
  // Mock fetch response
  const originalFetch = globalThis.fetch;

  const mockFetch = spy(async (input: RequestInfo | URL): Promise<Response> => {
    const url = input.toString();
    if (url === "https://api.example.com/users/123") {
      return new Response(
        JSON.stringify({ name: "John Doe", email: "john@example.com" }),
        { status: 200, headers: { "Content-Type": "application/json" } },
      );
    }
    return new Response("Not found", { status: 404 });
  });

  // Replace global fetch with mock
  globalThis.fetch = mockFetch;

  try {
    // Call the function with a valid ID
    const userData = await fetchUserData("123");

    // Assert the results
    assertEquals(userData, { name: "John Doe", email: "john@example.com" });
    assertSpyCalls(mockFetch, 1);

    // Test error handling (optional)
    try {
      await fetchUserData("invalid");
      throw new Error("Should have thrown an error for invalid ID");
    } catch (error) {
      assertEquals((error as Error).message, "Failed to fetch user: 404");
    }

    assertSpyCalls(mockFetch, 2);
  } finally {
    // Restore the original fetch
    globalThis.fetch = originalFetch;
  }
});

Using Testing Steps to set up and teardown Jump to heading

For complex tests, you can use steps to organize test logic into discrete sections, making tests more readable and maintainable. Steps also enable better isolation between different parts of your test. Using step naming you can implement a setup and teardown of the test conditions.

import { DOMParser } from "jsr:@b-fuze/deno-dom";
import { assertEquals, assertExists } from "jsr:@std/assert";

Deno.test("complex web component test", async (t) => {
  const doc = new DOMParser().parseFromString(
    "<!DOCTYPE html><html></html>",
    "text/html",
  );
  const body = doc.createElement("body");
  const container = doc.createElement("div");
  body.appendChild(container);

  await t.step("initial rendering", () => {
    container.innerHTML = `<div id="app"></div>`;
    const app = container.querySelector("#app");
    assertExists(app);
    assertEquals(app.children.length, 0);
  });

  await t.step("adding content", () => {
    const app = container.querySelector("#app");
    assertExists(app);

    const header = doc.createElement("header");
    header.textContent = "My App";
    app.appendChild(header);

    assertEquals(app.children.length, 1);
    assertEquals(app.firstElementChild?.tagName.toLowerCase(), "header");
  });

  await t.step("responding to user input", () => {
    const app = container.querySelector("#app");
    assertExists(app);

    const button = doc.createElement("button");
    button.textContent = "Click me";
    button.id = "test-button";
    app.appendChild(button);

    let clickCount = 0;
    button.addEventListener("click", () => clickCount++);

    button.dispatchEvent(new Event("click"));
    button.dispatchEvent(new Event("click"));

    assertEquals(clickCount, 2);
  });

  await t.step("removing content", () => {
    const app = container.querySelector("#app");
    assertExists(app);

    const header = app.querySelector("header");
    assertExists(header);

    header.remove();
    assertEquals(app.children.length, 1); // Only the button should remain
  });
});

Best Practices for Web Testing in Deno Jump to heading

Maintain isolation - Each test should be self-contained and not depend on other tests.
Use names to show intent - descriptive names for tests make it clear what is being tested and give more readable output in the console
Clean up after your tests - remove any DOM elements created during tests to prevent test pollution.
Mock external services (such as APIs) to make tests faster and more reliable.
Organize tests into logical steps using t.step() for complex components.

Running Your Tests Jump to heading

Execute your tests with the Deno test command:

deno test

For web tests, you might need additional permissions:

deno test --allow-net --allow-read --allow-env

🦕 By following the patterns in this tutorial, you can write comprehensive tests for your web applications that verify both functionality and user experience.

Remember that effective testing leads to more robust applications and helps catch issues before they reach your users.

Testing web apps

Testing UI components and DOM manipulation Jump to heading#

Testing Event Handling Jump to heading#

Testing Fetch Requests Jump to heading#

Using Testing Steps to set up and teardown Jump to heading#

Best Practices for Web Testing in Deno Jump to heading#

Running Your Tests Jump to heading#