A
ok
')).toContain('ok'); + expect(toText('ok
')).toContain('ok'); + expect(toText('ok
')).toContain('ok'); + expect(toText('ok
')).toContain('ok'); + expect(toText('ok
')).not.toContain('secret'); + // unclosed forms should not hang + expect(toText('`; -+ const after = /Size
'); -+ expect(html).toContain('2.0 KB of 102.0 KB'); -+ expect(html).toContain('class="chip s-ok">ok'); -+ expect(html).toContain('class="fill r-ok" style="--w:2.0%"'); -+ const half = inspect(result([part('p', 'x'.repeat(51_200))])); -+ expect(half).toContain('class="fill r-ok" style="--w:49.0%"'); -+ expect(html).toContain('class="mark" style="--at:78.4%"'); -+ expect(html).toContain('big '); -+ expect(html).toContain('small '); -+ expect(html).not.toContain('class="warns"'); -+ }); -+ -+ it('warns near the limit and when over, and fills the meter', () => { -+ const near = inspect(result([part('p', 'x'.repeat(90_000))])); -+ expect(near).toContain('class="chip s-empty">near'); -+ expect(near).toContain('class="fill r-near"'); -+ expect(near).toContain('class="warns"'); -+ expect(near).toContain('close to the'); -+ -+ const over = inspect(result([part('top', 'x'.repeat(110_000)), part('footer', 'Unsubscribe')])); -+ expect(over).toContain('class="chip s-error">over'); -+ expect(over).toContain('class="fill r-over" style="--w:100.0%"'); -+ expect(over).toContain('Hidden by the clip: footer.'); -+ expect(over).toContain('unsubscribe link is after the clip point'); -+ }); -+ -+ it('lists at most five parts', () => { -+ const parts = Array.from({ length: 7 }, (_, i) => part(`p${i}`, 'x'.repeat(i + 1))); -+ const html = inspect(result(parts)); -+ const sizes = html.match(/- [\s\S]*?<\/ul>/)?.[0] ?? '';
-+ expect(sizes.match(/
- /g)).toHaveLength(5);
-+ });
-+
-+ it('is left out when there is no document', () => {
-+ const html = inspect(result([], ''));
-+ expect(html).not.toContain('
Size
'); -+ expect(html).not.toContain('Plain-text version'); -+ }); -+}); -+ -+describe('inspect: plain text section', () => { -+ it('shows the plain-text version, escaped, with a line count', () => { -+ const html = inspect(result([part('a', 'Hi
1 < 2
')])); -+ expect(html).toContain('Plain-text version'); -+ expect(html).toContain(''); -+ expect(html).toContain('
'); -+ }); -+ -+ it('uses the singular for one line', () => { -+ expect(inspect(result([part('a', 'HI\n\n1 < 2\nOnly
')]))).toContain('1 line · click'); -+ }); -+ -+ it('says so when the document has no text', () => { -+ const html = inspect(result([part('a', '')])); -+ expect(html).toContain('0 lines · click'); -+ expect(html).toContain('The document has no text.'); -+ }); -+}); -+ -+describe('inspect: preview and navigation', () => { -+ it('offers Light and Dark next to the width choices, each with its own pinned frame', () => { -+ const html = inspect(result([part('a', 'A
')])); -+ expect(html).toContain('id="sc-light" checked'); -+ expect(html).toContain('for="sc-dark">Dark'); -+ expect(html).toContain('name="sc"'); -+ expect(html).toContain('title="Rendered document" class="doc-light"'); -+ expect(html).toContain('title="Rendered document, dark" class="doc-dark"'); -+ expect(html).toContain('<head><style>:root{color-scheme:light}</style>'); -+ expect(html).toContain('<head><style>:root{color-scheme:dark}</style>'); -+ expect(html).toContain('prefers-color-scheme styles follow your system setting'); -+ }); -+ -+ it('links each part card to its neighbours, and omits links that go nowhere', () => { -+ const three = inspect(result([part('a', 'A'), part('b', 'B'), part('c', 'C')])); -+ const cards = three.split('next'); -+ expect(cards[0]).not.toContain('previous'); -+ expect(cards[1]).toContain('↑ previousnext'); -+ expect(cards[2]).toContain('↑ previous'); -+ expect(cards[2]).not.toContain('next ↓'); -+ expect(inspect(result([part('only', 'x')]))).not.toContain('class="pn"'); -+ }); -+}); -+ -+describe('traceJson', () => { -+ it('describes parts by status, size, timing and error, without markup by default', () => { -+ const json = traceJson( -+ result([ -+ part('ok', '€
'), -+ part('bad', '', 'error', { error: { name: 'TypeError', message: 'nope' } }), -+ ]), -+ ); -+ expect(json).toMatchObject({ -+ templateId: 'demo', -+ ok: false, -+ size: { clipRisk: 'ok', warnings: [] }, -+ }); -+ expect(json.parts[0]).toEqual({ id: 'ok', status: 'ok', chars: 8, bytes: 10, ms: 1 }); -+ expect(json.parts[1]).toMatchObject({ id: 'bad', status: 'error', error: { message: 'nope' } }); -+ expect(json.html).toBeUndefined(); -+ expect(json.threw).toBeUndefined(); -+ expect(json.composeError).toBeUndefined(); -+ expect('html' in (json.parts[0] ?? {})).toBe(false); -+ }); -+ -+ it('includes the markup on request', () => { -+ const json = traceJson(result([part('a', 'A
')], ''), { -+ html: true, -+ }); -+ expect(json.html).toBe(' A
A
'); -+ }); -+ -+ it('records a compose error', () => { -+ const json = traceJson( -+ result([part('a', 'A')], '', { ok: false, composeError: { name: 'E', message: 'join' } }), -+ ); -+ expect(json.composeError).toEqual({ name: 'E', message: 'join' }); -+ }); -+ -+ it('names the part that threw', () => { -+ const error = new RenderError('part "b" failed', { -+ templateId: 'demo', -+ partId: 'b', -+ trace: [part('a', 'A'), part('b', '', 'error', { error: { name: 'E', message: 'x' } })], -+ }); -+ const json = traceJson(error); -+ expect(json.threw).toEqual({ partId: 'b', message: 'part "b" failed' }); -+ expect(json.ok).toBe(false); -+ }); -+ -+ it('reports the Gmail size check', () => { -+ const json = traceJson(result([part('a', 'x'.repeat(110_000))])); -+ expect(json.size.clipRisk).toBe('over'); -+ expect(json.size.warnings.length).toBeGreaterThan(0); -+ }); -+ -+ it('prints pretty JSON with a trailing newline that parses back', () => { -+ const text = traceJsonText(result([part('a', 'A')])); -+ expect(text.endsWith('}\n')).toBe(true); -+ expect(JSON.parse(text).templateId).toBe('demo'); -+ expect(JSON.parse(traceJsonText(result([part('a', 'A')]), { html: true })).html).toBe('A'); -+ }); -+}); -+ -+describe('inspect --json', () => { -+ it('parses --json in both flag styles and leaves it out otherwise', () => { -+ expect(parseArgs(['inspect', 'a.mjs', '--json', 't.json'])).toEqual({ -+ kind: 'inspect', -+ file: 'a.mjs', -+ out: 'inspect.html', -+ json: 't.json', -+ }); -+ expect(parseArgs(['inspect', 'a.mjs', '--json=t.json'])).toMatchObject({ json: 't.json' }); -+ expect('json' in parseArgs(['inspect', 'a.mjs'])).toBe(false); -+ expect(parseArgs(['inspect', 'a.mjs', '--json'])).toMatchObject({ kind: 'error' }); -+ expect(parseArgs(['dev', 'a.mjs', '--json', 'x'])).toMatchObject({ kind: 'error' }); -+ }); -+ -+ function run(outcome: Outcome, jsonOut?: string) { -+ const written: RecordT ', 'dark')).toBe( -+ 'T ', -+ ); -+ expect(withScheme('', 'light')).toBe( -+ '', -+ ); -+ }); -+ -+ it('keeps the doctype first when there is no head', () => { -+ expect(withScheme('x
', 'dark')).toBe( -+ 'x
', -+ ); -+ expect(withScheme(' \nx
', 'light')).toBe( -+ ' \nx
', -+ ); -+ }); -+ -+ it('starts a fragment with the style', () => { -+ expect(withScheme('x
', 'dark')).toBe('x
'); -+ expect(withScheme('', 'light')).toBe(''); -+ }); -+ -+ it('does not mistakefor ', () => { -+ expect(withScheme(' h ', 'dark')).toBe( -+ 'h ', -+ ); -+ }); -+}); -diff --git a/test/quality.test.ts b/test/quality.test.ts -new file mode 100644 -index 0000000..91dfe41 ---- /dev/null -+++ b/test/quality.test.ts -@@ -0,0 +1,288 @@ -+import { describe, expect, it } from 'vitest'; -+import { defineEmailTemplate, renderEmail } from '../src/index'; -+import type { PartTrace, RenderResult } from '../src/index'; -+import { CLIP_BYTES, NEAR_BYTES, byteLength, measureSize } from '../src/quality/size'; -+import { toText } from '../src/quality/text'; -+ -+function part(id: string, html: string): PartTrace { -+ return { id, status: 'ok', html, chars: html.length, ms: 0 }; -+} -+ -+function result(parts: PartTrace[], html?: string): RenderResult { -+ return { templateId: 'demo', ok: true, html: html ?? parts.map((p) => p.html).join(''), parts }; -+} -+ -+describe('byteLength', () => { -+ it('counts UTF-8 bytes for one, two, three and four byte characters', () => { -+ expect(byteLength('')).toBe(0); -+ expect(byteLength('a')).toBe(1); -+ expect(byteLength('é')).toBe(2); -+ expect(byteLength('€')).toBe(3); -+ expect(byteLength('😀')).toBe(4); -+ expect(byteLength('a€😀')).toBe(8); -+ }); -+ -+ it('puts every encoding boundary on the right side', () => { -+ expect(byteLength('\u007f')).toBe(1); -+ expect(byteLength('\u0080')).toBe(2); -+ expect(byteLength('Ж')).toBe(2); -+ expect(byteLength('\u07ff')).toBe(2); -+ expect(byteLength('\u0800')).toBe(3); -+ expect(byteLength('\uffff')).toBe(3); -+ expect(byteLength('\u{10000}')).toBe(4); -+ expect(byteLength('\u{10ffff}')).toBe(4); -+ }); -+ -+ it('is larger than .length for non-ASCII text', () => { -+ expect('€€€'.length).toBe(3); -+ expect(byteLength('€€€')).toBe(9); -+ }); -+}); -+ -+describe('measureSize', () => { -+ it('exposes the Gmail limits', () => { -+ expect(CLIP_BYTES).toBe(104_448); -+ expect(NEAR_BYTES).toBe(81_920); -+ }); -+ -+ it('reports a small document as ok with parts largest first and no warnings', () => { -+ const report = measureSize(result([part('a', 'xx'), part('b', 'xxxxx'), part('c', '')])); -+ expect(report).toMatchObject({ -+ bytes: 7, -+ limit: CLIP_BYTES, -+ nearLimit: NEAR_BYTES, -+ clipRisk: 'ok', -+ clippedParts: [], -+ unsubscribeClipped: false, -+ warnings: [], -+ }); -+ expect(report.perPart).toEqual([ -+ { id: 'b', bytes: 5 }, -+ { id: 'a', bytes: 2 }, -+ ]); -+ }); -+ -+ it('measures bytes, not characters', () => { -+ expect(measureSize(result([part('a', '€€€')])).bytes).toBe(9); -+ }); -+ -+ it('warns when near the limit and says how much room is left', () => { -+ const report = measureSize(result([part('a', 'x'.repeat(95))]), { limit: 100, nearLimit: 90 }); -+ expect(report.clipRisk).toBe('near'); -+ expect(report.warnings).toHaveLength(1); -+ expect(report.warnings[0]).toMatch(/close to the .* where Gmail clips it/); -+ }); -+ -+ it('is ok at exactly the near limit and near at exactly the clip limit', () => { -+ expect( -+ measureSize(result([part('a', 'x'.repeat(90))]), { limit: 100, nearLimit: 90 }).clipRisk, -+ ).toBe('ok'); -+ expect( -+ measureSize(result([part('a', 'x'.repeat(100))]), { limit: 100, nearLimit: 90 }).clipRisk, -+ ).toBe('near'); -+ expect( -+ measureSize(result([part('a', 'x'.repeat(101))]), { limit: 100, nearLimit: 90 }).clipRisk, -+ ).toBe('over'); -+ }); -+ -+ it('never lets the near limit sit above the limit', () => { -+ const report = measureSize(result([part('a', 'x')]), { limit: 10, nearLimit: 50 }); -+ expect(report.nearLimit).toBe(10); -+ }); -+ -+ it('names the parts that start after the clip point when over', () => { -+ const report = measureSize( -+ result([part('top', 'x'.repeat(100)), part('tail', 'tail!'), part('empty', '')]), -+ { limit: 100 }, -+ ); -+ expect(report.clipRisk).toBe('over'); -+ expect(report.clippedParts).toEqual(['tail']); -+ expect(report.warnings[0]).toMatch(/over the .* where Gmail clips it/); -+ expect(report.warnings[1]).toBe('Hidden by the clip: tail.'); -+ }); -+ -+ it('says nothing is hidden when every part starts before the clip point', () => { -+ const report = measureSize(result([part('only', 'x'.repeat(150))]), { limit: 100 }); -+ expect(report.clipRisk).toBe('over'); -+ expect(report.clippedParts).toEqual([]); -+ expect(report.warnings).toHaveLength(1); -+ }); -+ -+ it('ignores a part whose output is not in the final document', () => { -+ const report = measureSize( -+ result([part('ghost', 'zzz'), part('real', 'x'.repeat(150))], 'x'.repeat(150)), -+ { -+ limit: 100, -+ }, -+ ); -+ expect(report.clippedParts).toEqual([]); -+ }); -+ -+ it('warns when the unsubscribe link is after the clip point', () => { -+ const html = `${'x'.repeat(100)}Unsubscribe`; -+ const report = measureSize(result([part('footer', html)]), { limit: 100 }); -+ expect(report.unsubscribeClipped).toBe(true); -+ expect(report.warnings.at(-1)).toMatch(/unsubscribe link is after the clip point/); -+ }); -+ -+ it('does not warn when the unsubscribe link is before the clip point or missing', () => { -+ const early = measureSize(result([part('f', `unsubscribe${'x'.repeat(200)}`)]), { -+ limit: 100, -+ }); -+ expect(early.unsubscribeClipped).toBe(false); -+ expect(measureSize(result([part('f', 'no link here')])).unsubscribeClipped).toBe(false); -+ }); -+ -+ it('measures a real render', () => { -+ const letter = defineEmailTemplate({ -+ id: 'w', -+ parts: [{ id: 'big', render: () => ''.padEnd(120_000, 'x') }], -+ }); -+ const report = measureSize(renderEmail(letter, { unsubscribeUrl: 'https://example.com/u' })); -+ expect(report.clipRisk).toBe('over'); -+ expect(report.perPart[0]?.id).toBe('big'); -+ expect(report.clippedParts).toEqual(['footer']); -+ expect(report.unsubscribeClipped).toBe(true); -+ }); -+}); -+ -+describe('toText', () => { -+ it('returns an empty string for empty or markup-only input', () => { -+ expect(toText('')).toBe(''); -+ expect(toText('
')).toBe(''); -+ }); -+ -+ it('puts headings in uppercase and separates paragraphs with a blank line', () => { -+ expect(toText('Weekly digest
One
Two
')).toBe( -+ 'WEEKLY DIGEST\n\nOne\n\nTwo\n', -+ ); -+ }); -+ -+ it('turns lists into dashes and keeps items on consecutive lines', () => { -+ expect(toText('- One
- Two bold
After
')).toBe( -+ '- One\n- Two bold\n\nAfter\n', -+ ); -+ }); -+ -+ it('turns
into a line break', () => { -+ expect(toText('a
')).toBe('a\nb\nc\n'); -+ }); -+ -+ it('prints links as label (url), or once when the label is the url', () => { -+ expect(toText('Site')).toBe('Site (https://a.com/x)\n'); -+ expect(toText('https://a.com')).toBe('https://a.com\n'); -+ expect(toText("Single")).toBe( -+ 'Single (https://a.com/s)\n', -+ ); -+ expect(toText('Bare')).toBe('Bare (https://a.com/u)\n'); -+ }); -+ -+ it('prints just the url for an empty label and just the label for a useless href', () => { -+ expect(toText('')).toBe('https://a.com/e\n'); -+ expect(toText('Empty')).toBe('Empty\n'); -+ expect(toText('No href')).toBe('No href\n'); -+ expect(toText('Top')).toBe('Top\n'); -+ expect(toText('Js')).toBe('Js\n'); -+ }); -+ -+ it('decodes entities in link labels', () => { -+ expect(toText('Fish & chips')).toBe( -+ 'Fish & chips (https://a.com)\n', -+ ); -+ }); -+ -+ it('prints image alt text and drops images without it', () => { -+ expect(toText('
b
c
')).toBe('[Logo]\n'); -+ expect(toText('a
')).toBe('abc\n'); -+ }); -+ -+ it('decodes named, decimal and hex entities and leaves unknown or invalid ones alone', () => { -+ expect( -+ toText('b
c
& < > " ' © &MDASH; € € €
'), -+ ).toBe('& < > " \' © — € € €\n'); -+ expect(toText('x
')).toBe('x\n'); -+ expect(toText('&unknown; � �
')).toBe('&unknown; � �\n'); -+ }); -+ -+ it('keeps the preheader as the first line, decoded', () => { -+ const html = -+ 'Three — thingsBody
'; -+ expect(toText(html)).toBe('Three — things\n\nBody\n'); -+ }); -+ -+ it('works when the preheader is empty or absent', () => { -+ expect(toText('Body
')).toBe('Body\n'); -+ expect(toText('T Body
')).toBe('Body\n'); -+ }); -+ -+ it('drops head, style, script, comments and display:none blocks', () => { -+ const html = -+ 'T Shown
Gone'; -+ expect(toText(html)).toBe('Shown\n'); -+ }); -+ -+ it('wraps long paragraphs at the width and leaves short lines alone', () => { -+ const text = toText('one two three four five six
', { width: 12 }); -+ expect(text).toBe('one two\nthree four\nfive six\n'); -+ expect(toText('short
', { width: 12 })).toBe('short\n'); -+ }); -+ -+ it('indents the continuation lines of a wrapped list item', () => { -+ expect(toText('- one two three four five
https://example.com/a/very/long/path ok
', { width: 10 })).toBe( -+ 'https://example.com/a/very/long/path\nok\n', -+ ); -+ }); -+ -+ it('leaves lines unwrapped when the width is 0 and wraps at 78 by default', () => { -+ const long = Array.from({ length: 40 }, () => 'word').join(' '); -+ expect(toText(`${long}
`, { width: 0 })).toBe(`${long}\n`); -+ const wrapped = toText(`${long}
`); -+ expect(wrapped.split('\n').every((line) => line.length <= 78)).toBe(true); -+ expect(wrapped.split('\n').length).toBeGreaterThan(2); -+ }); -+ -+ it('collapses runs of blank lines and whitespace', () => { -+ expect(toText('a \t b
\n\n\n\nc
')).toBe('a b\n\nc\n'); -+ }); -+ -+ it('turns the email shell into readable text', () => { -+ const rendered = renderEmail( -+ { id: 'w', parts: [{ id: 'list', render: () => '- Shipped
- Fixed