Quality and shipping all 3 written

app/_lib/validate.js

1
2
3
4
5
6
7
8// Validation by hand: a pure function, so it can be tested without Next.js (lesson 28).
export function validateSignup({ name, email, password }) {
  const errors = {};
  if (name.trim().length === 0) errors.name = 'Enter your name.';
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errors.email = 'Enter an email address like you@example.com.';
  if (password.length < 8) errors.password = 'Use at least 8 characters.';
  return errors;
}

unit-tests.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41import { test } from 'node:test';
import assert from 'node:assert/strict';
import { validateSignup } from '../app/app/_lib/validate.js';
import { hashPassword, readSession, signSession, verifyPassword } from '../app/app/_lib/session-core.js';

test('validateSignup: an empty form has an error for every field', () => {
  assert.deepEqual(Object.keys(validateSignup({ name: '', email: '', password: '' })).sort(), ['email', 'name', 'password']);
});

test('validateSignup: a good form has no errors', () => {
  assert.deepEqual(validateSignup({ name: 'Ada', email: 'ada@example.com', password: 'long enough' }), {});
});

test('validateSignup: a short password is told the rule', () => {
  assert.equal(validateSignup({ name: 'Ada', email: 'ada@example.com', password: 'short' }).password, 'Use at least 8 characters.');
});

test('hashPassword: the same password hashes differently each time', () => {
  assert.notEqual(hashPassword('correct horse'), hashPassword('correct horse'));
});

test('verifyPassword: accepts the right password and rejects a wrong one', () => {
  const stored = hashPassword('correct horse');
  assert.equal(verifyPassword('correct horse', stored), true);
  assert.equal(verifyPassword('wrong horse', stored), false);
});

test('readSession: a token signed with the secret reads back', () => {
  const token = signSession({ sub: 3, exp: 2_000 }, 'secret');
  assert.equal(readSession(token, 'secret', 1_000).sub, 3);
});

test('readSession: a token with a changed payload is refused', () => {
  const [, signature] = signSession({ sub: 3, exp: 2_000 }, 'secret').split('.');
  const edited = Buffer.from(JSON.stringify({ sub: 1, exp: 2_000 })).toString('base64url');
  assert.equal(readSession(edited + '.' + signature, 'secret', 1_000), null);
});

test('readSession: an expired token is refused', () => {
  assert.equal(readSession(signSession({ sub: 3, exp: 2_000 }, 'secret'), 'secret', 3_000), null);
});

http-tests.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39import { test } from 'node:test';
import assert from 'node:assert/strict';

const base = process.env.BASE_URL;
const get = (path) => fetch(base + path, { redirect: 'manual' });

test('GET /api/hello answers 200 with the JSON the handler returns', async () => {
  const res = await get('/api/hello');
  assert.equal(res.status, 200);
  assert.match(res.headers.get('content-type'), /^application\/json/);
  assert.deepEqual(await res.json(), { hello: 'world' });
});

test('GET /about is an HTML page that names its own file', async () => {
  const res = await get('/about');
  assert.equal(res.status, 200);
  assert.match(res.headers.get('content-type'), /^text\/html/);
  assert.match(await res.text(), /app\/about\/page\.js/);
});

test('an address with no page answers 404', async () => {
  assert.equal((await get('/no-such-page')).status, 404);
});

test('GET /api/me without a session is a 401 with a message, not a redirect', async () => {
  const res = await get('/api/me');
  assert.equal(res.status, 401);
  assert.deepEqual(await res.json(), { error: 'not signed in' });
});

test('GET /account without a cookie redirects to /login', async () => {
  const res = await get('/account');
  assert.equal(res.status, 307);
  assert.equal(new URL(res.headers.get('location'), base).pathname, '/login');
});

test('GET /robots.txt points at the sitemap', async () => {
  assert.match(await (await get('/robots.txt')).text(), /Sitemap: /);
});

guide-tests.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13import { test } from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync } from 'node:fs';

const guide = readFileSync(process.env.APP_DIR + '/node_modules/next/dist/docs/01-app/02-guides/testing/index.md', 'utf8');

test('the vendored testing guide says async server components are not fully supported by unit-test tools', () => {
  assert.ok(guide.includes('some tools do not fully support them'));
});

test('and that it recommends end-to-end tests for them', () => {
  assert.ok(guide.includes('we recommend using **End-to-End Testing** over **Unit Testing**'));
});

table.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32import { existsSync, readFileSync } from 'node:fs';
import { dirname, join } from 'node:path';

const root = process.env.APP_DIR;
const log = readFileSync(join(dirname(root), 'build.out'), 'utf8');
const rows = [...log.matchAll(/^[┌├└│](?:\s[├└│])*\s+([○●ƒ◐])\s+(\S+)(.*)$/gm)].map((m) => ({ symbol: m[1], path: m[2], rest: m[3].trim() }));
const manifest = JSON.parse(readFileSync(root + '/.next/prerender-manifest.json', 'utf8'));
const prerendered = new Set(Object.keys(manifest.routes));
const pathsWith = (symbol) => rows.filter((row) => row.symbol === symbol).map((row) => row.path);
const [fixed, generated, dynamic] = [pathsWith('○'), pathsWith('●'), pathsWith('ƒ')];
const listed = new Set(rows.map((row) => row.path));
const at = (text) => log.indexOf(text);
const isr = rows.find((row) => row.path === '/cache/isr');
const bin = readFileSync(root + '/node_modules/next/dist/bin/next', 'utf8');
const files = (route) => ['html', 'rsc', 'meta'].map((ext) => existsSync(root + '/.next/server/app' + route + '.' + ext));

console.log('table rows:', rows.length, ' ○', fixed.length, ' ●', generated.length, ' ƒ', dynamic.length);
console.log('prerendered routes in the manifest:', prerendered.size);
console.log('/cache/isr row:', isr.rest.split(/\s+/).join(' '));

check('the phases come in this order', [at('Compiled successfully'), at('Collecting page data'), at('Generating static pages'), at('Finalizing page optimization'), at('Route (app)')].every((n, i, all) => n > -1 && (i === 0 || n > all[i - 1])), true);
check('every ○ row is a path the build prerendered', fixed.every((path) => prerendered.has(path)), true);
check('and so is every ● row', generated.every((path) => prerendered.has(path)), true);
check('no ƒ row is', dynamic.some((path) => prerendered.has(path)), false);
check('this project has no ◐ row', pathsWith('◐').length, 0);
check('the manifest holds one path the table does not list, the global error page', [...prerendered].filter((path) => !listed.has(path)), ['/_global-error']);
check('the one row with a lifetime shows it, and the manifest has the same numbers', [isr.rest.split(/\s+/), manifest.routes['/cache/isr'].initialRevalidateSeconds, manifest.routes['/cache/isr'].initialExpireSeconds], [['2s', '1y'], 2, 31536000]);
check('there is no size column in this version', /First Load JS/.test(log), false);
check('the proxy is listed after the routes, and the build wrote its manifest', [/^ƒ Proxy \(Middleware\)$/m.test(log), existsSync(root + '/.next/server/middleware-manifest.json')], [true, true]);
check('a prerendered route has an HTML file, a payload file and a metadata file', files('/about'), [true, true, true]);
check('a dynamic route has no HTML file', existsSync(root + '/.next/server/app/account.html'), false);
check('next build documents the flags for more detail', ['--debug', '--debug-prerender', '--profile', '--experimental-analyze', '--webpack', '--turbopack'].map((flag) => bin.includes(flag + "'")), [true, true, true, true, true, true]);

needs.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20import { existsSync, readFileSync } from 'node:fs';

const root = process.env.APP_DIR;
const required = JSON.parse(readFileSync(root + '/.next/required-server-files.json', 'utf8'));
const guide = readFileSync(root + '/node_modules/next/dist/docs/01-app/01-getting-started/17-deploying.md', 'utf8');
const output = readFileSync(root + '/node_modules/next/dist/docs/01-app/03-api-reference/05-config/01-next-config-js/output.md', 'utf8');

console.log('keys:', Object.keys(required).join(', '));
console.log('files it names:', required.files.length, ' all under .next/:', required.files.every((file) => file.startsWith('.next/')));
console.log('records the directory the build ran in:', required.appDir === root);
console.log('output setting:', required.config.output, ' distDir:', required.config.distDir);
console.log('a .next/standalone folder:', existsSync(root + '/.next/standalone'));

check('the build wrote a file of what the server needs, with these keys', Object.keys(required), ['version', 'config', 'appDir', 'relativeAppDir', 'files', 'ignore']);
check('every file it names is inside .next, and the build id is one of them', [required.files.every((file) => file.startsWith('.next/')), required.files.includes('.next/BUILD_ID')], [true, true]);
check('it records the absolute path of the directory the build ran in', required.appDir === root, true);
check('this build used the default output and the default folder', [required.config.output, required.config.distDir], [undefined, '.next']);
check('so it made no standalone folder', existsSync(root + '/.next/standalone'), false);
check('the vendored guide names a Node.js server and Docker, says the first supports every feature, and lists verified adapters', [guide.includes('[Node.js server]'), guide.includes('[Docker container]'), guide.includes('Node.js deployments support all Next.js features'), guide.includes('Verified Adapters')], [true, true, true, true]);
check('the vendored output guide describes a standalone folder whose static files are left to a CDN', ['.next/standalone', 'server.js', 'ideally be handled by a CDN'].map((phrase) => output.includes(phrase)), [true, true, true]);

headers.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21import { readdirSync, readFileSync } from 'node:fs';

const base = process.env.BASE_URL;
const root = process.env.APP_DIR;
const chunk = readdirSync(root + '/.next/static/chunks').find((name) => name.endsWith('.js'));
const cacheControl = async (path) => (await fetch(base + path)).headers.get('cache-control');
const guide = readFileSync(root + '/node_modules/next/dist/docs/01-app/02-guides/cdn-caching.md', 'utf8');

const seen = {
  'a hashed script': await cacheControl('/_next/static/chunks/' + chunk),
  'a static page': await cacheControl('/about'),
  'a dynamic page': await cacheControl('/clock/dynamic'),
  'a file in public/': await cacheControl('/hello.txt'),
};
for (const [what, value] of Object.entries(seen)) console.log(what.padEnd(18), value);

check('a file with a hash in its name is cacheable for a year and immutable', seen['a hashed script'], 'public, max-age=31536000, immutable');
check('a prerendered page is cacheable by shared caches for a year', seen['a static page'], 's-maxage=31536000');
check('a page rendered per request must not be stored', seen['a dynamic page'], 'private, no-cache, no-store, max-age=0, must-revalidate');
check('a file in public/ may be kept but is checked again', seen['a file in public/'], 'public, max-age=0');
check('the vendored CDN guide says the headers follow the rendering strategy', guide.includes('based on the rendering strategy of each route'), true);

export.mjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16import { existsSync, readFileSync } from 'node:fs';

const root = process.env.APP_DIR;
const guide = readFileSync(root + '/node_modules/next/dist/docs/01-app/02-guides/static-exports.md', 'utf8');
const section = guide.slice(guide.indexOf('## Unsupported Features'));
const listed = section.split('\n').slice(0, 24).filter((line) => line.startsWith('- ')).map((line) => /\[([^\]]+)\]/.exec(line)[1]);
const config = readFileSync(root + '/next.config.mjs', 'utf8');
const cookieHandler = readFileSync(root + '/app/api/cookie/route.js', 'utf8');
const action = readFileSync(root + '/app/account/actions.js', 'utf8');

console.log('the guide lists as unsupported:');
for (const feature of listed) console.log('  -', feature);
console.log('this project has: proxy.js', existsSync(root + '/proxy.js'), '| redirects()', config.includes('redirects'), '| headers()', config.includes('headers'), '| a handler reading cookies', cookieHandler.includes('cookies'), "| a 'use server' file", action.includes('use server'));

check('the guide lists cookies, rewrites, redirects, headers, the proxy and Server Actions as unsupported', ['Cookies', 'Rewrites', 'Redirects', 'Headers', 'Proxy', 'Server Actions'].map((feature) => listed.includes(feature)), [true, true, true, true, true, true]);
check('this project uses several of them: a proxy, redirects, headers, cookies and actions', [existsSync(root + '/proxy.js'), config.includes('redirects'), config.includes('headers'), cookieHandler.includes('cookies'), action.includes('use server')], [true, true, true, true, true]);