Testing a Page

A page test renders the page's template on the server and checks the HTML. It runs in the build like every other test, inside the transaction that rolls back, so rows it inserts are gone when it ends.

Render the template

A template is a class. Construct it with the attributes the route would pass, and toHtml() returns the page as the server sends it:

app/pages/home/test.ts
import { test, assert } from "@elements/app";
import html from "./template";

test("home", () => {
  test("shows the title", () => {
    let page = new html().toHtml();

    assert(page.includes("Welcome"), "no title");
  });
});

Check for text, a class or an attribute with includes, and order with indexOf. Do not compare the whole string: the HTML carries the markers the browser attaches to, which are not yours to pin down.

A page over the database

Insert the rows the test needs with sql, then build the attributes the way the route does. A LiveTable is declared at the top of the file, assigned to a name: the compiler takes the table from that name, so one constructed inline has no table and throws.

app/pages/home/test.ts
import { test, assert, sql, LiveTable } from "@elements/app";
import { Todo } from "./models";
import html from "./template";

const todos = new LiveTable<Todo>();

test("home", () => {
  test("lists what is in the table", () => {
    sql(`insert into todos (title) values ('Water the plants')`);

    let page = new html({
      todos: todos.view(),
      view: { filter: "all" },
    }).toHtml();

    assert(page.includes("Water the plants"), "row not rendered");
  });
});

What a page test covers

It covers what the server renders: which rows show, in what order, the empty states, and what each attribute switches on. It does not run the browser, so handlers, clicks and live updates are not in it. Keep the logic a handler runs in plain functions (a models.ts beside the template, as the todo recipe does) and test those by calling them. Check the rest in the browser.

Related

• elements man recipes/todo-app: a page test for a live list.
• elements man html: templates and their attributes.