|
| 1 | +const assert = require('node:assert/strict') |
| 2 | + |
| 3 | +const colors = { |
| 4 | + maroon: '#800000', |
| 5 | + cyan: '#00ffff', |
| 6 | + aqua: '#00ffff', |
| 7 | + white: '#ffffff', |
| 8 | + goldenrod: '#daa520', |
| 9 | + rebeccapurple: '#663399', |
| 10 | +} |
| 11 | +function normalize(value) { |
| 12 | + const lower = value.trim().toLowerCase() |
| 13 | + if (colors[lower]) return colors[lower] |
| 14 | + if (/^#[\da-f]{3}$/.test(lower)) |
| 15 | + return '#' + [...lower.slice(1)].map((digit) => digit + digit).join('') |
| 16 | + const rgb = lower.match( |
| 17 | + /^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:\s*[,/]\s*1)?\s*\)$/, |
| 18 | + ) |
| 19 | + return rgb |
| 20 | + ? '#' + |
| 21 | + rgb |
| 22 | + .slice(1) |
| 23 | + .map((part) => Number(part).toString(16).padStart(2, '0')) |
| 24 | + .join('') |
| 25 | + : lower |
| 26 | +} |
| 27 | +function rules(css, parse) { |
| 28 | + const result = new Map() |
| 29 | + parse(css).walkRules((rule) => { |
| 30 | + for (const selector of rule.selectors) { |
| 31 | + const declarations = result.get(selector) || new Map() |
| 32 | + rule.walkDecls((decl) => |
| 33 | + declarations.set(decl.prop, normalize(decl.value)), |
| 34 | + ) |
| 35 | + result.set(selector, declarations) |
| 36 | + } |
| 37 | + }) |
| 38 | + return result |
| 39 | +} |
| 40 | +function declarationProof(parsed, selectors, expected) { |
| 41 | + const declarations = new Map( |
| 42 | + selectors.flatMap((selector) => [...(parsed.get(selector) || [])]), |
| 43 | + ) |
| 44 | + for (const [property, value] of Object.entries(expected)) |
| 45 | + assert.equal( |
| 46 | + declarations.get(property), |
| 47 | + normalize(value), |
| 48 | + `${selectors.join(' ')} missing/wrong ${property}; actual ${JSON.stringify([...declarations])}`, |
| 49 | + ) |
| 50 | + return [...declarations].sort(([a], [b]) => a.localeCompare(b)) |
| 51 | +} |
| 52 | +function elementProof(html, parsed, proof) { |
| 53 | + const tag = [...html.matchAll(/<[a-z][^>]*>/gi)] |
| 54 | + .map(([value]) => value) |
| 55 | + .find((value) => value.includes(`id="${proof.id}"`)) |
| 56 | + assert.ok(tag, `missing SSR element ${proof.id}`) |
| 57 | + const classes = tag.match(/\bclass="([^"]+)"/)?.[1].split(/\s+/) |
| 58 | + assert.ok(classes?.length, `missing actual classes for ${proof.id}`) |
| 59 | + for (const name of classes) { |
| 60 | + assert.match(name, /^[\w-]+$/) |
| 61 | + assert.ok( |
| 62 | + parsed.get(`.${name}`)?.size, |
| 63 | + `${proof.id}: actual class .${name} has no linked declarations`, |
| 64 | + ) |
| 65 | + } |
| 66 | + return { |
| 67 | + id: proof.id, |
| 68 | + classes: [...classes].sort(), |
| 69 | + declarations: declarationProof( |
| 70 | + parsed, |
| 71 | + classes.map((name) => `.${name}`), |
| 72 | + proof.expected, |
| 73 | + ), |
| 74 | + } |
| 75 | +} |
| 76 | +async function documentProof(base, parse, page) { |
| 77 | + const response = await fetch(new URL(page.path, base), { |
| 78 | + signal: AbortSignal.timeout(10000), |
| 79 | + }) |
| 80 | + assert.equal(response.status, 200, `${page.path} HTML status`) |
| 81 | + assert.match(response.headers.get('content-type') || '', /text\/html/) |
| 82 | + const html = await response.text() |
| 83 | + const links = [...html.matchAll(/<link\b[^>]*>/g)] |
| 84 | + .map(([tag]) => tag) |
| 85 | + .filter((tag) => /\brel="stylesheet"/.test(tag)) |
| 86 | + .map((tag) => tag.match(/\bhref="([^"]+)"/)?.[1].replaceAll('&', '&')) |
| 87 | + assert.ok(links.length > 0, `${page.path} must link CSS`) |
| 88 | + const sheets = [] |
| 89 | + for (const link of [...new Set(links)]) { |
| 90 | + assert.ok(link, 'stylesheet link must have href') |
| 91 | + const response = await fetch(new URL(link, base), { |
| 92 | + signal: AbortSignal.timeout(10000), |
| 93 | + }) |
| 94 | + assert.equal(response.status, 200, `${page.path}: stylesheet ${link}`) |
| 95 | + assert.match(response.headers.get('content-type') || '', /text\/css/) |
| 96 | + const css = await response.text() |
| 97 | + assert.ok(css.trim().length > 0, `${link} empty CSS`) |
| 98 | + sheets.push({ url: link, css }) |
| 99 | + } |
| 100 | + const parsed = rules(sheets.map(({ css }) => css).join('\n'), parse) |
| 101 | + const elements = [ |
| 102 | + ...page.elements, |
| 103 | + { id: 'layout-proof', expected: { color: 'white' } }, |
| 104 | + ].map((proof) => elementProof(html, parsed, proof)) |
| 105 | + const body = declarationProof(parsed, ['body'], { |
| 106 | + background: '#040', |
| 107 | + color: '#248', |
| 108 | + }) |
| 109 | + const theme = [...parsed.values()].some( |
| 110 | + (declarations) => declarations.get('--proof') === '#123456', |
| 111 | + ) |
| 112 | + assert.ok(theme, `${page.path} linked theme --proof missing`) |
| 113 | + return { path: page.path, elements, body, theme, sheets } |
| 114 | +} |
| 115 | +module.exports = async function deliveryHttp(base, parse) { |
| 116 | + const pages = [ |
| 117 | + { |
| 118 | + path: '/', |
| 119 | + elements: [ |
| 120 | + { |
| 121 | + id: 'server-proof', |
| 122 | + expected: { background: 'maroon', padding: '13px' }, |
| 123 | + }, |
| 124 | + { id: 'client-proof', expected: { color: 'cyan' } }, |
| 125 | + { |
| 126 | + id: 'external-proof', |
| 127 | + expected: { color: 'rebeccapurple', 'margin-left': '17px' }, |
| 128 | + }, |
| 129 | + ], |
| 130 | + }, |
| 131 | + { |
| 132 | + path: '/client', |
| 133 | + elements: [{ id: 'client-proof', expected: { color: 'cyan' } }], |
| 134 | + }, |
| 135 | + { |
| 136 | + path: '/edge-page', |
| 137 | + elements: [ |
| 138 | + { |
| 139 | + id: 'edge-page-proof', |
| 140 | + expected: { color: 'goldenrod', padding: '19px' }, |
| 141 | + }, |
| 142 | + ], |
| 143 | + }, |
| 144 | + ] |
| 145 | + const documents = [] |
| 146 | + for (const page of pages) |
| 147 | + documents.push(await documentProof(base, parse, page)) |
| 148 | + console.info('W65-HTTP ' + JSON.stringify(documents)) |
| 149 | + // Compare semantic stylesheet contents/class bindings, never Next build-id URLs/manifests. |
| 150 | + return documents.map(({ sheets, ...document }) => ({ |
| 151 | + ...document, |
| 152 | + css: sheets.map(({ css }) => css).sort(), |
| 153 | + })) |
| 154 | +} |
| 155 | +module.exports.rules = rules |
| 156 | +module.exports.declarationProof = declarationProof |
0 commit comments