Basic

A fetch test: request, status, body

The smallest honest frontend test is three assertions on one request: the status, one thing in the body, and one thing absent from the body. Three is enough to catch the common breakages, and each one names a different kind of breakage.

What you will see

PASS. Each failure prints its own reason so the output names the breakage.

About 1 min of reading

Try It

Write the three assertions for one page

Assert the status

code=$(curl -s -o /tmp/p.html -w '%{http_code}' http://localhost:3000/tutorials/lessons); echo "status=$code"

Before you run it, say out loud what it will print. Then open the answer.

What it prints

status=200. Write the check so a 400-range code fails here and not later.

Assert a present hook

grep -c 'class="tutorial-card' /tmp/p.html

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Above zero. The class name is a stable hook that copy edits do not touch.

Assert an absent leak

grep -cE 'undefined|NaN|<%' /tmp/p.html

Before you run it, say out loud what it will print. Then open the answer.

What it prints

Zero. A match is a real bug reaching the served page.

Run all three in order

printf '#!/bin/sh\nc=$(curl -s -o /tmp/p.html -w "%%{http_code}" URL)\n[ "$c" = 200 ] || { echo "FAIL status"; exit 1; }\ngrep -q "tutorial-card" /tmp/p.html || { echo "FAIL missing"; exit 1; }\ngrep -qE "undefined|NaN" /tmp/p.html && { echo "FAIL leak"; exit 1; }\necho PASS\n' | tee t2.sh && chmod +x t2.sh && ./t2.sh

Before you run it, say out loud what it will print. Then open the answer.

What it prints

PASS. Each failure prints its own reason so the output names the breakage.

Do not chain the assertions with && so that a later one runs after an earlier failure. Return on the first failure so the reason is the last line.

Data Flow

Request to a verdict

1 Send the request

↓

2 Assert the status code

↓

3 Assert the hook is present

↓

4 Assert the wrong thing is absent

Why this works

Order of the three

Status, then present, then absent. Stopping at the first failure names the breakage in one line of output.

Where the assertion is too strong

Asserting an exact byte count or an attribute order fails on formatting changes. Assert on the presence of a hook, not on the shape of the file.

Examples

Status first

A 400-range response can still contain the right words. Asserting the status first means a broken route fails as a broken route, not as a passing body check.

One present, one absent

The present assertion catches removal. The absent assertion catches duplication or a leak, like a template tag or a private field reaching the page.

Assert on a stable hook

Assert on a class name or an id, not on a sentence. Sentences change with copy edits, and a test that fails on a copy edit is a test nobody trusts.

Words this lesson uses

Each one is defined here on this site. Open the entry for the full definition and the other words it points at.

← Why a frontend needs a different test than a server

Previous Lesson

Why a frontend needs a different test than a server

Next Lesson

Selecting from the served document

Selecting from the served document →