@certrev/cert-block 0.1.2 → 0.2.0

package/src/__tests__/render-cert-block.test.ts

@@ -0,0 +1,259 @@
+/**
+ * renderCertBlock — the LOCKED 3-mode CertREV cert design (banner / sidebar /
+ * floating) as an SSR-safe HTML string.
+ *
+ * Coverage:
+ *   1. SNAPSHOTS — each mode for a representative envelope + a themed (non-navy)
+ *      variant, so any drift from the owner-approved locked design is caught.
+ *   2. LOCKED disclosures — the compensation cue, the byte-exact FTC scope line,
+ *      and the GROUPED dated credential verification appear on every CLAIM face
+ *      (banner + sidebar). Floating is a modal pointer, not a claim face.
+ *   3. THEMING — the resolved tokens reach the root as the guide's CSS vars; an
+ *      invalid token fails safe to navy; the fixed logo chrome is present.
+ *   4. ESCAPING — a value carrying `< & "` is escaped (this is storefront HTML).
+ */
+
+import { describe, expect, it } from 'vitest'
+import {
+	CERT_SCOPE_LINE,
+	type CertBlockFacts,
+	type CertBlockMode,
+	COMPENSATED_EXPERT_CUE,
+	CREDENTIAL_VERIFIED_ATTRIBUTION,
+	RENDER_BLOCK_FONT_STACKS,
+	type ResolvedBlockTheme,
+	renderCertBlock,
+} from '../index.js'
+
+/** A representative, well-formed cert (mirrors the locked-reference sample facts). */
+const FACTS: CertBlockFacts = {
+	authorName: 'The Editorial Team',
+	authorTitle: 'Editorial',
+	reviewerName: 'Jane Doe',
+	credential: 'MD',
+	credentialVerifiedAt: '2026-04-14T00:00:00.000Z',
+	certifiedAt: '2026-04-14T00:00:00.000Z',
+	memo: 'Patients ask me almost every week whether the SPF in their foundation is enough on its own. Treat makeup with SPF as a helpful last layer, not the base of your routine.',
+	bio: 'Board-certified dermatologist in San Francisco specializing in photoprotection, skin-cancer prevention, and evidence-based skincare, with fifteen years of clinical practice.',
+	profileUrl: 'https://certrev.com/expert/sample',
+	certificateUrl: 'https://certrev.com/verify/sample',
+}
+
+/** A themed brand (non-navy accent + dark ink + custom corners/surface/font). */
+const THEMED: ResolvedBlockTheme = {
+	accentColor: '#E8603C',
+	surface: '#faf8f4',
+	cornerRadius: '22px',
+	fontSlot: 'grotesk',
+	accentFg: '#141414',
+}
+
+const MODES: CertBlockMode[] = ['banner', 'sidebar', 'floating']
+const CLAIM_FACES: CertBlockMode[] = ['banner', 'sidebar']
+
+/** Tag-strip a fragment of HTML to its visible text (collapse whitespace). */
+function visibleText(html: string): string {
+	return html
+		.replace(/<[^>]+>/g, ' ')
+		.replace(/\s+/g, ' ')
+		.trim()
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// LOCKED disclosures are undroppable — omitted OR empty/whitespace defaults
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('renderCertBlock — LOCKED disclosure strings are undroppable', () => {
+	for (const mode of CLAIM_FACES) {
+		it(`${mode}: an empty/whitespace override of the locked strings falls back to the byte-exact constants`, () => {
+			const html = renderCertBlock({
+				mode,
+				facts: { ...FACTS, compensationCue: '', scopeLine: '', credentialLine: '   ' },
+			})
+			expect(html).toContain(COMPENSATED_EXPERT_CUE)
+			expect(html).toContain(CERT_SCOPE_LINE)
+			expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		})
+	}
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Snapshots — the locked-design byte target
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('renderCertBlock — locked-design snapshots', () => {
+	for (const mode of MODES) {
+		it(`${mode} (navy default) matches the locked snapshot`, () => {
+			expect(renderCertBlock({ mode, facts: FACTS })).toMatchSnapshot()
+		})
+		it(`${mode} (themed, non-navy accent) matches the locked snapshot`, () => {
+			expect(renderCertBlock({ mode, theme: THEMED, facts: FACTS })).toMatchSnapshot()
+		})
+	}
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// LOCKED disclosures — on every claim face
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('the three LOCKED disclosures render on every CLAIM face', () => {
+	for (const mode of CLAIM_FACES) {
+		it(`${mode}: compensation cue + byte-exact FTC scope line + dated credential verification`, () => {
+			const html = renderCertBlock({ mode, facts: FACTS })
+			// (1) compensation cue
+			expect(visibleText(html)).toContain(COMPENSATED_EXPERT_CUE)
+			// (2) FTC scope line — byte-exact, including the load-bearing curly apostrophe U+2019
+			expect(html).toContain(CERT_SCOPE_LINE)
+			expect(CERT_SCOPE_LINE).toContain('’')
+			// (3) dated credential verification
+			expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+			expect(html).toContain('on Apr 14, 2026')
+		})
+
+		it(`${mode}: the credential + its dated verification stay GROUPED, in order`, () => {
+			const html = renderCertBlock({ mode, facts: FACTS })
+			const iName = html.indexOf('Jane Doe, MD')
+			const iAttribution = html.indexOf(CREDENTIAL_VERIFIED_ATTRIBUTION)
+			const iDate = html.indexOf('on Apr 14, 2026')
+			expect(iName).toBeGreaterThanOrEqual(0)
+			expect(iAttribution).toBeGreaterThan(iName)
+			expect(iDate).toBeGreaterThan(iAttribution)
+		})
+
+		it(`${mode}: the disclosures survive even when the caller omits the locked strings`, () => {
+			// Omit compensationCue / scopeLine / credentialLine — they default to the
+			// byte-verbatim mirrored constants (the compliance baseline is never dropped).
+			const html = renderCertBlock({ mode, facts: FACTS })
+			expect(html).toContain(CERT_SCOPE_LINE)
+			expect(visibleText(html)).toContain(COMPENSATED_EXPERT_CUE)
+			expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		})
+	}
+
+	it('the caller-supplied locked strings are rendered verbatim when provided', () => {
+		const html = renderCertBlock({
+			mode: 'banner',
+			facts: {
+				...FACTS,
+				compensationCue: COMPENSATED_EXPERT_CUE,
+				scopeLine: CERT_SCOPE_LINE,
+				credentialLine: CREDENTIAL_VERIFIED_ATTRIBUTION,
+			},
+		})
+		expect(html).toContain(CERT_SCOPE_LINE)
+		expect(html).toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+	})
+
+	it('the floating pill is a modal pointer — it makes no claim (no disclosures)', () => {
+		const html = renderCertBlock({ mode: 'floating', facts: FACTS })
+		expect(html).toContain('Expert reviewed:')
+		expect(html).not.toContain(CERT_SCOPE_LINE)
+		expect(html).not.toContain(CREDENTIAL_VERIFIED_ATTRIBUTION)
+		expect(visibleText(html)).not.toContain(COMPENSATED_EXPERT_CUE)
+		// but it still links to the two modal surfaces
+		expect(html).toContain('data-certrev-modal-open="expert"')
+		expect(html).toContain('data-certrev-modal-open ')
+	})
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Theming — CSS vars, fail-safe, fixed chrome
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('theming', () => {
+	it('un-themed: the root carries the navy default vars + the strings-version stamp', () => {
+		const html = renderCertBlock({ mode: 'banner', facts: FACTS })
+		expect(html).toContain('--ba:#0a1b3f')
+		expect(html).toContain('--ba-fg:#ffffff')
+		expect(html).toContain('--br:14px')
+		expect(html).toContain(`--bf:${RENDER_BLOCK_FONT_STACKS.sans}`)
+		expect(html).toContain('--surface:#ffffff')
+		expect(html).toContain('data-certrev-strings-version="2026-07"')
+	})
+
+	it('themed: the resolved tokens reach the root as CSS vars', () => {
+		const html = renderCertBlock({ mode: 'sidebar', theme: THEMED, facts: FACTS })
+		expect(html).toContain('--ba:#E8603C')
+		expect(html).toContain('--ba-fg:#141414')
+		expect(html).toContain('--br:22px')
+		expect(html).toContain(`--bf:${RENDER_BLOCK_FONT_STACKS.grotesk}`)
+		expect(html).toContain('--surface:#faf8f4')
+	})
+
+	it('an invalid token fails SAFE to the navy default (never emitted into CSS)', () => {
+		const html = renderCertBlock({
+			mode: 'banner',
+			// injection attempts + malformed values across every token
+			theme: {
+				accentColor: 'red;}</style>',
+				surface: '#ffffffaa',
+				cornerRadius: 'calc(1px)',
+				fontSlot: 'comic-sans' as ResolvedBlockTheme['fontSlot'],
+				accentFg: 'blue' as ResolvedBlockTheme['accentFg'],
+			},
+			facts: FACTS,
+		})
+		expect(html).not.toContain('red;}')
+		expect(html).not.toContain('#ffffffaa')
+		// the injected radius is dropped (the card's own `calc(var(--br,14px) * 0.7)` is a fixed literal)
+		expect(html).not.toContain('calc(1px)')
+		expect(html).not.toContain('comic-sans')
+		expect(html).toContain('--ba:#0a1b3f')
+		expect(html).toContain('--ba-fg:#ffffff')
+		expect(html).toContain('--br:14px')
+		expect(html).toContain(`--bf:${RENDER_BLOCK_FONT_STACKS.sans}`)
+	})
+
+	it('the fixed CertREV logo chrome renders on the banner + sidebar headers and the memo credit', () => {
+		const banner = renderCertBlock({ mode: 'banner', facts: FACTS })
+		const sidebar = renderCertBlock({ mode: 'sidebar', facts: FACTS })
+		// header marks track the accent ink (currentColor) + the memo credit mark (fixed navy) + the wordmark face
+		expect(banner).toContain('aria-label="CertREV"')
+		expect(banner).toContain('<path fill="currentColor"')
+		expect(banner).toContain('<path fill="#0a1b3f"')
+		expect(banner).toContain('font-family:var(--font-wordmark)')
+		expect(sidebar).toContain('aria-label="CertREV"')
+		expect(sidebar).toContain('<path fill="currentColor"')
+	})
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Escaping — storefront HTML built by hand
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('escaping (this is storefront HTML)', () => {
+	const HOSTILE = 'Ev<script>il & "quoted" \'x\''
+	const hostileFacts: CertBlockFacts = {
+		...FACTS,
+		authorName: HOSTILE,
+		authorTitle: HOSTILE,
+		reviewerName: HOSTILE,
+		credential: HOSTILE,
+		memo: HOSTILE,
+		bio: HOSTILE,
+		profileUrl: 'javascript:alert(1)',
+		certificateUrl: 'javascript:alert(2)',
+	}
+
+	for (const mode of CLAIM_FACES) {
+		it(`${mode}: every interpolated fact value is escaped; no raw injection survives`, () => {
+			const html = renderCertBlock({ mode, facts: hostileFacts })
+			// the injected markup never lands as live HTML
+			expect(html).not.toContain('<script>il')
+			expect(html).toContain('&lt;script&gt;')
+			expect(html).toContain('&amp;')
+			expect(html).toContain('&quot;')
+			expect(html).toContain('&#39;')
+		})
+	}
+
+	for (const mode of MODES) {
+		it(`${mode}: an unsafe URL scheme is dropped from every href`, () => {
+			const html = renderCertBlock({ mode, facts: hostileFacts })
+			expect(html).not.toContain('javascript:')
+			// the modal hook + a safe fallback href remain
+			expect(html).toContain('data-certrev-modal-open')
+			expect(html).toContain('href="#"')
+		})
+	}
+})

package/src/__tests__/render-def.test.tsx

@@ -0,0 +1,286 @@
+/**
+ * WS6 — design-guide render-def support (themeable tokens + subtractive visibility)
+ * + the two always-on compliance strings.
+ *
+ * Two planes, both exercised through the SSR paths (React `renderToStaticMarkup` +
+ * the framework-agnostic `renderBadgeHtml` string renderer — the crawlable output):
+ *   1. the PURE resolution helpers (validators, `resolveRenderTheme`, visibility,
+ *      the fixed font stacks, the byte-verbatim strings);
+ *   2. the RENDERED faces — a themed def emits the four `--certrev-*` vars + the
+ *      def-version stamp + subtractive visibility; NO def is theme-byte-identical
+ *      to the un-themed default; an invalid token is DROPPED (fail-safe); and the
+ *      compensation cue + FTC scope line + strings-version stamp land on EVERY
+ *      claim face (the compliance baseline, with or without a def).
+ */
+
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { CertBadge } from '../components/CertBadge.js'
+import { CertReview } from '../components/CertReview.js'
+import {
+	CERT_SCOPE_LINE,
+	CERT_STRINGS_VERSION,
+	type CertRenderDef,
+	COMPENSATED_EXPERT_CUE,
+	type FontSlot,
+	FONT_STACKS,
+	isCornerRadius,
+	isFieldHidden,
+	isFontSlot,
+	isOpaqueHexColor,
+	resolveRenderTheme,
+	themeCssVarDeclarations,
+} from '../components/render-def.js'
+import { makeMockPayload } from '../contract/fixtures.js'
+import { renderBadgeHtml } from '../webcomponent/render-badge-html.js'
+
+const payload = makeMockPayload()
+
+/** A fully-themed, valid render-def (every token overridden, both fields hidden). */
+const THEMED: CertRenderDef = {
+	tokens: { accentColor: '#123456', surface: '#eeeeee', cornerRadius: '8px', fontSlot: 'serif' },
+	hidden: ['reviewerPhoto', 'memo'],
+	version: 4,
+}
+
+/** Tag-strip a fragment of HTML to its visible text (collapse whitespace). */
+function visibleText(html: string): string {
+	return html
+		.replace(/<[^>]+>/g, ' ')
+		.replace(/\s+/g, ' ')
+		.trim()
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Pure helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('token validators (mirror portal src/lib/design-guide/tokens.ts)', () => {
+	it('isOpaqueHexColor accepts 3/6-digit hex, rejects alpha / functions / keywords', () => {
+		for (const ok of ['#fff', '#FFFFFF', '#0a1b3f', '#123']) expect(isOpaqueHexColor(ok)).toBe(true)
+		for (const bad of ['#ffff', '#ffffffaa', '#12', '#1234567', 'transparent', 'rgb(0,0,0)', 'red', '', ' #fff'])
+			expect(isOpaqueHexColor(bad)).toBe(false)
+	})
+
+	it('isCornerRadius accepts a bare 0 or a single unit length, rejects unitless / calc / spaces', () => {
+		for (const ok of ['0', '12px', '0.5rem', '.5em', '100%', '4px']) expect(isCornerRadius(ok)).toBe(true)
+		for (const bad of ['12', '12 px', 'calc(1px)', '1px 2px', '', 'px', '-4px']) expect(isCornerRadius(bad)).toBe(false)
+	})
+
+	it('isFontSlot admits only the three enum members', () => {
+		for (const ok of ['sans', 'serif', 'system']) expect(isFontSlot(ok)).toBe(true)
+		for (const bad of ['mono', 'Arial', '', 'SANS']) expect(isFontSlot(bad)).toBe(false)
+	})
+})
+
+describe('FONT_STACKS — byte-identical to the Shopify Liquid engine literals', () => {
+	it('matches the exact stacks (the parity anchor across the twins)', () => {
+		expect(FONT_STACKS.sans).toBe("'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif")
+		expect(FONT_STACKS.serif).toBe("'Playfair Display', Georgia, 'Times New Roman', serif")
+		expect(FONT_STACKS.system).toBe("system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif")
+	})
+})
+
+describe('resolveRenderTheme — validates + drops (fail-safe)', () => {
+	it('returns {} for an absent def', () => {
+		expect(resolveRenderTheme(undefined)).toEqual({})
+	})
+
+	it('resolves every valid token + the fontSlot → fixed stack + the version', () => {
+		expect(resolveRenderTheme(THEMED)).toEqual({
+			accent: '#123456',
+			surface: '#eeeeee',
+			cornerRadius: '8px',
+			fontStack: FONT_STACKS.serif,
+			version: 4,
+		})
+	})
+
+	it('DROPS every invalid token (alpha surface, function accent, calc radius, unknown slot)', () => {
+		const resolved = resolveRenderTheme({
+			tokens: {
+				accentColor: 'rgb(0,0,0)',
+				surface: '#ffffffaa',
+				cornerRadius: 'calc(1px)',
+				fontSlot: 'mono' as FontSlot,
+			},
+			version: 2,
+		})
+		expect(resolved).toEqual({
+			accent: undefined,
+			surface: undefined,
+			cornerRadius: undefined,
+			fontStack: undefined,
+			version: 2,
+		})
+	})
+
+	it('drops a non-finite version', () => {
+		expect(resolveRenderTheme({ version: Number.NaN }).version).toBeUndefined()
+	})
+})
+
+describe('subtractive visibility + var declarations', () => {
+	it('isFieldHidden is true only for a listed field', () => {
+		expect(isFieldHidden({ hidden: ['memo'] }, 'memo')).toBe(true)
+		expect(isFieldHidden({ hidden: ['memo'] }, 'reviewerPhoto')).toBe(false)
+		expect(isFieldHidden(undefined, 'memo')).toBe(false)
+	})
+
+	it('themeCssVarDeclarations is empty for an un-themed face and ordered surface→radius→font', () => {
+		expect(themeCssVarDeclarations({})).toEqual([])
+		expect(themeCssVarDeclarations(resolveRenderTheme(THEMED))).toEqual([
+			['--certrev-surface', '#eeeeee'],
+			['--certrev-radius', '8px'],
+			['--certrev-font', FONT_STACKS.serif],
+		])
+	})
+})
+
+describe('the two always-on compliance strings are byte-verbatim', () => {
+	it('cue + strings-version', () => {
+		expect(COMPENSATED_EXPERT_CUE).toBe('Compensated expert')
+		expect(CERT_STRINGS_VERSION).toBe('2026-07')
+	})
+
+	it('the scope line carries the load-bearing curly apostrophe U+2019', () => {
+		expect(CERT_SCOPE_LINE).toBe(
+			'Independent editorial review of this article’s text and sources. Not a product endorsement, nor medical advice.',
+		)
+		expect(CERT_SCOPE_LINE).toContain('’')
+		expect(CERT_SCOPE_LINE).not.toContain("'") // straight apostrophe would be a contract divergence
+	})
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Rendered — React <CertBadge>
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('<CertBadge> themed', () => {
+	it('emits the four --certrev-* vars, the def-version stamp, and hides subtracted fields', () => {
+		const html = renderToStaticMarkup(<CertBadge payload={payload} renderDef={THEMED} />)
+		expect(html).toContain('--certrev-accent:#123456')
+		expect(html).toContain('--certrev-surface:#eeeeee')
+		expect(html).toContain('--certrev-radius:8px')
+		// React entity-encodes the font stack's single quotes; the family content is intact.
+		expect(html).toContain('--certrev-font:')
+		expect(html).toContain('Playfair Display')
+		expect(html).toContain('data-certrev-def-version="4"')
+		// subtractive visibility: reviewerPhoto + memo hidden
+		expect(html).not.toContain('__photo')
+		expect(html).not.toContain('retinol claims')
+	})
+
+	it('an unthemed badge emits NO theme vars + NO def-version stamp (theme byte-neutral)', () => {
+		const html = renderToStaticMarkup(<CertBadge payload={payload} />)
+		expect(html).not.toContain('--certrev-surface')
+		expect(html).not.toContain('--certrev-radius')
+		expect(html).not.toContain('--certrev-font')
+		expect(html).not.toContain('data-certrev-def-version')
+	})
+})
+
+describe('compliance baseline — cue + scope + strings-version on EVERY claim face', () => {
+	it('full + unthemed: cue, verbatim scope line, and the strings-version stamp all present', () => {
+		const html = renderToStaticMarkup(<CertBadge payload={payload} />)
+		expect(html).toContain('data-certrev-strings-version="2026-07"')
+		expect(html).toContain(CERT_SCOPE_LINE)
+		expect(html).toContain('data-ftc-line')
+		expect(visibleText(html)).toContain(COMPENSATED_EXPERT_CUE)
+	})
+
+	it('compact ALSO carries the cue + scope (a compact claim badge is still a claim face)', () => {
+		const html = renderToStaticMarkup(<CertBadge payload={payload} badgeStyle="compact" />)
+		expect(html).toContain('certrev-badge--compact')
+		expect(html).toContain(CERT_SCOPE_LINE)
+		expect(visibleText(html)).toContain(COMPENSATED_EXPERT_CUE)
+	})
+
+	it('the cue links "expert" to the reviewer profile; falls back to plain text when unsafe', () => {
+		const linked = renderToStaticMarkup(<CertBadge payload={payload} />)
+		expect(linked).toContain('>expert</a>')
+		const p = makeMockPayload({
+			content: { ...payload.content, expert: { ...payload.content.expert, profileUrl: 'javascript:alert(1)' } },
+		})
+		const unlinked = renderToStaticMarkup(<CertBadge payload={p} />)
+		expect(unlinked).not.toContain('javascript:')
+		expect(visibleText(unlinked)).toContain(COMPENSATED_EXPERT_CUE)
+	})
+})
+
+describe('<CertReview> forwards the render-def to the badge', () => {
+	it('a themed def reaches the badge; the JSON-LD stays presentation-blind', () => {
+		const html = renderToStaticMarkup(<CertReview verdict={{ decision: 'render', payload }} renderDef={THEMED} />)
+		expect(html).toContain('--certrev-surface:#eeeeee')
+		expect(html).toContain('data-certrev-def-version="4"')
+		// the projector never sees the def — the graph is byte-unchanged
+		expect(html).toContain('application/ld+json')
+	})
+})
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Rendered — the framework-agnostic string path (renderBadgeHtml)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('renderBadgeHtml themed (the crawlable string path)', () => {
+	it('emits each --certrev-* var exactly once; the font stack is the RAW fixed literal (byte-exact)', () => {
+		const html = renderBadgeHtml(payload, { renderDef: THEMED })
+		expect(html).toContain('--certrev-accent:#123456')
+		expect(html).toContain('--certrev-surface:#eeeeee')
+		expect(html).toContain('--certrev-radius:8px')
+		expect(html).toContain(`--certrev-font:${FONT_STACKS.serif}`) // byte-exact, single quotes raw
+		for (const v of ['--certrev-accent:', '--certrev-surface:', '--certrev-radius:', '--certrev-font:'])
+			expect((html.match(new RegExp(v.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) ?? []).length).toBe(1)
+		expect(html).toContain('data-certrev-def-version="4"')
+		expect(html).toContain('data-certrev-strings-version="2026-07"')
+		expect(html).not.toContain('__photo') // reviewerPhoto hidden
+		expect(html).not.toContain('__memo') // memo hidden
+	})
+
+	it('the compliance baseline is present: verbatim scope line + the cue', () => {
+		const html = renderBadgeHtml(payload, { renderDef: THEMED })
+		expect(html).toContain(CERT_SCOPE_LINE)
+		expect(html).toContain('data-ftc-line')
+		expect(visibleText(html)).toContain(COMPENSATED_EXPERT_CUE)
+	})
+
+	it('DROPS every invalid token (fail-safe to preset default); no injection reaches the style', () => {
+		const html = renderBadgeHtml(payload, {
+			renderDef: {
+				tokens: {
+					accentColor: 'rgb(0,0,0)',
+					surface: '#ffffffaa',
+					cornerRadius: 'calc(1px)',
+					fontSlot: 'mono' as FontSlot,
+				},
+			},
+		})
+		expect(html).not.toContain('rgb(0,0,0)')
+		expect(html).not.toContain('#ffffffaa')
+		expect(html).not.toContain('calc(')
+		expect(html).not.toContain('--certrev-surface')
+		expect(html).not.toContain('--certrev-radius')
+		expect(html).not.toContain('--certrev-font')
+		// the invalid accent fell back to the signed display accent (never the rgb)
+		expect(html).toContain('--certrev-accent:#7c3aed')
+	})
+
+	it('un-themed: theme output is BYTE-IDENTICAL to the pre-WS6 single-accent form', () => {
+		const html = renderBadgeHtml(payload)
+		expect(html).toContain('style="--certrev-accent:#7c3aed;border-inline-start-color:#7c3aed"')
+		expect(html).not.toContain('--certrev-surface')
+		expect(html).not.toContain('data-certrev-def-version')
+		// baseline compliance strings still land on the un-themed face
+		expect(html).toContain('data-certrev-strings-version="2026-07"')
+		expect(html).toContain(CERT_SCOPE_LINE)
+	})
+
+	it('renders the cue as plain text when the profile URL is unsafe/absent', () => {
+		const p = makeMockPayload({
+			content: { ...payload.content, expert: { ...payload.content.expert, profileUrl: 'javascript:alert(1)' } },
+		})
+		const html = renderBadgeHtml(p)
+		expect(html).not.toContain('javascript:')
+		expect(html).toContain('Compensated expert')
+	})
+})

package/src/__tests__/webcomponent.test.tsx

@@ -71,6 +71,16 @@ describe('renderBadgeHtml (the shared, framework-agnostic markup)', () => {
 		expect(html).not.toContain('__memo')
 		expect(html).not.toContain('__dates')
 	})
+
+	it('carries the always-on compliance baseline (cue + verbatim scope line + strings-version) on every face', () => {
+		const html = renderBadgeHtml(payload)
+		expect(html).toContain('data-certrev-strings-version="2026-07"')
+		expect(html).toContain(
+			'Independent editorial review of this article’s text and sources. Not a product endorsement, nor medical advice.',
+		)
+		expect(html).toContain('data-ftc-line')
+		expect(html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ')).toContain('Compensated expert')
+	})
 })
 
 describe('<certrev-badge> custom element', () => {