# 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:

```ts 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.

```ts 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.