Advanced

Putting frontend tests in the release

A frontend test that runs only when someone remembers it protects nothing. The gate is the same place as every other release check: it boots the app, runs the suite, and exits non-zero on a failure. The boot is part of the gate, not an assumption.

What you will see

exit=0 green. The port is free afterwards, which is what makes the gate re-runnable.

About 1 min of reading

Try It

Write the gate with clean-up

1

Boot and wait

printf '#!/bin/sh\nSESSION_SECRET=$(node -e "console.log(require(\"crypto\").randomBytes(48).toString(\"hex\"))") PORT=3000 node server.js > /tmp/fe-srv.log 2>&1 &\nsrv=$!\nuntil [ "$(curl -s -o /dev/null -w "%%{http_code}" http://localhost:3000/)" = 200 ]; do sleep 1; done\n' | tee fe-gate.sh

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

What it prints
The server is up and answering 200 before any assertion runs.
2

Run the suite

printf 'node FULLTEST/fe.test.js\ncode=$?\n' | tee -a fe-gate.sh

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

What it prints
The suite runs and its code is captured before anything overwrites it.
3

Clean up always

printf 'kill $srv 2>/dev/null\nexit $code\n' | tee -a fe-gate.sh && chmod +x fe-gate.sh

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

What it prints
The server is stopped whether the suite passed or failed.
4

Run the gate

./fe-gate.sh; echo "exit=$?"

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

What it prints
exit=0 green. The port is free afterwards, which is what makes the gate re-runnable.
Do not leave the kill only in the success branch. A failing run leaves a server holding the port and the next gate cannot boot.

Data Flow

Gate to a release verdict
1 Boot the server
↓
2 Wait for the first 200
↓
3 Run the suite
↓
4 Stop the server
↓
5 Exit with the suite code
Why this works
The order of a gate

Boot, wait for readiness, warm, assert, clean up. Five steps, and each one is visible in the output.

Where the gate is too slow

Split by speed, not by importance. Fast document tests run on every release; browser tests run on the ones that touch the frontend.

Examples

Boot inside the gate

The gate starts the server, waits for the first good response, runs the suite, then stops the server. A gate that assumes a running server fails on a machine that has none.

Warm the page before asserting

Request the page once before the assertions so a cold start does not look like a slow page. The warm-up is not an assertion.

Stop the server on failure

Clean up in both branches. A gate that leaves a server running holds a port and blocks the next run.

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.

← Taming a flaky frontend test
Previous Lesson
Taming a flaky frontend test
Next Lesson
Auditing the frontend suite for what it does not cover
Auditing the frontend suite for what it does not cover →