// Session 42 — ArchetypeBadge + ArchetypeBlend (frontend). Logic runs via the // CommonJS lib; the .tsx is asserted as text (Phase-D–H pattern). const fs = require('fs'); const path = require('path'); const WEB = path.join(__dirname, '..', '..', 'web', 'src'); const read = (rel) => fs.readFileSync(path.join(WEB, rel), 'utf8'); const arch = require('../../web/src/lib/archetypes'); const svc = require('../../src/services/archetypeService'); describe('archetypes lib — badge styling', () => { it('full variant fills with the archetype color + white text', () => { const s = arch.badgeStyle('BOMBER', 'full', 'md'); expect(s.bg).toBe('#FF6B4A'); expect(s.textColor).toBe('#FFFFFF'); expect(s.borderColor).toBe('#FF6B4A'); }); it('ghost variant is transparent with a colored border', () => { const s = arch.badgeStyle('CONDUCTOR', 'ghost', 'sm'); expect(s.bg).toBe('transparent'); expect(s.textColor).toBe('#4A9EFF'); expect(s.borderColor).toBe('#4A9EFFCC'); }); it('tint variant (default) uses a low-alpha tinted background', () => { const s = arch.badgeStyle('ALPHA'); expect(s.bg).toBe('#A78BFA1F'); expect(s.borderColor).toBe('#A78BFA52'); }); it('archetypeColor matches and is case-insensitive', () => { expect(arch.archetypeColor('ace')).toBe('#A78BFA'); expect(arch.archetypeColor('Two-Way Anchor')).toBe('#A78BFA'); }); it('glyphSvg returns a 16x16 svg wrapper', () => { const svg = arch.glyphSvg('star'); expect(svg).toContain('viewBox="0 0 16 16"'); expect(svg).toContain(' { expect(arch.archetypeColor('NOT REAL')).toBe('#9499A8'); }); }); describe('archetypes lib — colors agree with the backend service', () => { it('every backend archetype color equals the frontend map color', () => { for (const [name, a] of Object.entries(svc.ARCHETYPES)) { expect(arch.archetypeColor(name)).toBe(a.color); } }); }); describe('ArchetypeBadge.tsx', () => { const src = read('components/vyndr/ArchetypeBadge.tsx'); it('renders the glyph via dangerouslySetInnerHTML and uses mono', () => { expect(src).toContain('dangerouslySetInnerHTML'); expect(src).toContain('badgeStyle'); expect(src).toContain('className="mono"'); }); it('supports full / ghost / tint variants', () => { expect(src).toContain("'full' | 'ghost' | 'tint'"); }); }); describe('ArchetypeBlend.tsx', () => { const src = read('components/vyndr/ArchetypeBlend.tsx'); it('colors segments via archetypeColor and renders a PRIMARY legend', () => { expect(src).toContain('archetypeColor'); expect(src).toContain('PRIMARY'); expect(src).toContain('ArchetypeBadge'); }); });