popeye-cli 1.5.0 → 1.6.0

package/tests/generators/shared-packages.test.ts

@@ -0,0 +1,83 @@
+/**
+ * Tests for shared-packages module
+ * Verifies color scale generation and brand color passthrough
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  generateColorScale,
+  generateDesignTokensPackage,
+} from '../../src/generators/shared-packages.js';
+
+describe('generateColorScale', () => {
+  it('generates 10-stop color scale from valid hex', () => {
+    const scale = generateColorScale('#2563EB');
+
+    expect(Object.keys(scale)).toEqual(['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']);
+    // Lightest stop should be light, darkest should be dark
+    expect(scale['50']).toMatch(/^#[0-9a-f]{6}$/);
+    expect(scale['900']).toMatch(/^#[0-9a-f]{6}$/);
+    // The stops should vary (not all the same)
+    const uniqueColors = new Set(Object.values(scale));
+    expect(uniqueColors.size).toBeGreaterThan(5);
+  });
+
+  it('falls back to default sky-blue on invalid hex', () => {
+    const scale = generateColorScale('not-a-color');
+
+    // Should return the default sky-blue palette
+    expect(scale['500']).toBe('#0ea5e9');
+    expect(scale['600']).toBe('#0284c7');
+  });
+
+  it('handles hex with # prefix correctly', () => {
+    const withHash = generateColorScale('#FF0000');
+    const withoutHash = generateColorScale('#FF0000');
+
+    expect(withHash).toEqual(withoutHash);
+  });
+});
+
+describe('generateDesignTokensPackage', () => {
+  it('uses brand color when provided', () => {
+    const result = generateDesignTokensPackage('test-project', {
+      primaryColor: '#2563EB',
+    });
+
+    // Find the colors.ts file
+    const colorsFile = result.files.find((f) => f.path === 'src/colors.ts');
+    expect(colorsFile).toBeDefined();
+    // Should NOT contain the default sky-blue
+    expect(colorsFile!.content).not.toContain('#0ea5e9');
+  });
+
+  it('uses default sky-blue when no brand color provided', () => {
+    const result = generateDesignTokensPackage('test-project');
+
+    const colorsFile = result.files.find((f) => f.path === 'src/colors.ts');
+    expect(colorsFile).toBeDefined();
+    // Should contain default sky-blue values
+    expect(colorsFile!.content).toContain('#0ea5e9');
+  });
+
+  it('generates correct package structure', () => {
+    const result = generateDesignTokensPackage('my-project');
+
+    const paths = result.files.map((f) => f.path);
+    expect(paths).toContain('package.json');
+    expect(paths).toContain('tsconfig.json');
+    expect(paths).toContain('src/index.ts');
+    expect(paths).toContain('src/colors.ts');
+    expect(paths).toContain('src/typography.ts');
+    expect(paths).toContain('src/tailwind-preset.ts');
+  });
+
+  it('package.json contains correct name with scope', () => {
+    const result = generateDesignTokensPackage('gateco');
+
+    const pkgFile = result.files.find((f) => f.path === 'package.json');
+    expect(pkgFile).toBeDefined();
+    const pkg = JSON.parse(pkgFile!.content);
+    expect(pkg.name).toBe('@gateco/design-tokens');
+  });
+});

package/tests/generators/website-components.test.ts

@@ -67,7 +67,7 @@ describe('generateWebsiteHeader', () => {
   it('renders text fallback when no logo', () => {
     const header = generateWebsiteHeader('deploy-ai', contextNoLogo, mockStrategy);
     expect(header).toContain('DeployAI');
-    expect(header).toContain('font-bold text-primary-600');
+    expect(header).toContain('font-bold text-foreground');
   });
 
   it('includes navigation links from strategy', () => {

package/tests/generators/website-config.test.ts

@@ -0,0 +1,84 @@
+/**
+ * Tests for website-config tailwind generation with brand colors
+ * Extended to verify full color token set, animations, and CSS vars
+ */
+
+import { describe, it, expect } from 'vitest';
+import { generateWebsiteTailwindConfig } from '../../src/generators/templates/website-config.js';
+
+describe('generateWebsiteTailwindConfig', () => {
+  it('generates config with brand primary color', () => {
+    const config = generateWebsiteTailwindConfig({
+      primaryColor: '#2563EB',
+    });
+
+    // Should contain generated color scale, NOT default sky-blue
+    expect(config).not.toContain('#0ea5e9');
+    expect(config).not.toContain('#0284c7');
+    // Should be valid TypeScript with Config type
+    expect(config).toContain("import type { Config } from 'tailwindcss'");
+    expect(config).toContain('primary:');
+  });
+
+  it('includes workspace design-tokens preset import', () => {
+    const config = generateWebsiteTailwindConfig({
+      workspaceMode: true,
+      projectName: 'gateco',
+    });
+
+    expect(config).toContain("import designPreset from '@gateco/design-tokens/tailwind'");
+    expect(config).toContain('presets: [designPreset]');
+  });
+
+  it('uses default sky-blue when no options provided', () => {
+    const config = generateWebsiteTailwindConfig();
+
+    // Should contain default sky-blue palette
+    expect(config).toContain('#0ea5e9');
+    expect(config).toContain('#0284c7');
+    // Should NOT have preset import
+    expect(config).not.toContain('designPreset');
+  });
+
+  it('includes full shadcn-compatible color token set', () => {
+    const config = generateWebsiteTailwindConfig();
+
+    // Background/foreground
+    expect(config).toContain("background: 'hsl(var(--background))'");
+    expect(config).toContain("foreground: 'hsl(var(--foreground))'");
+
+    // Muted with sub-tokens
+    expect(config).toContain("muted:");
+    expect(config).toContain("hsl(var(--muted))");
+    expect(config).toContain("hsl(var(--muted-foreground))");
+
+    // Accent
+    expect(config).toContain("accent:");
+    expect(config).toContain("hsl(var(--accent))");
+
+    // Card
+    expect(config).toContain("card:");
+    expect(config).toContain("hsl(var(--card))");
+
+    // Border and ring
+    expect(config).toContain("border: 'hsl(var(--border))'");
+    expect(config).toContain("ring: 'hsl(var(--ring))'");
+  });
+
+  it('includes animation utilities', () => {
+    const config = generateWebsiteTailwindConfig();
+
+    expect(config).toContain('keyframes:');
+    expect(config).toContain('fadeIn:');
+    expect(config).toContain('slideUp:');
+    expect(config).toContain('animation:');
+  });
+
+  it('includes borderColor and borderRadius extensions', () => {
+    const config = generateWebsiteTailwindConfig();
+
+    expect(config).toContain('borderColor:');
+    expect(config).toContain('borderRadius:');
+    expect(config).toContain('var(--radius)');
+  });
+});

package/tests/generators/website-content-scanner.test.ts

@@ -0,0 +1,181 @@
+/**
+ * Tests for post-generation website content scanner
+ * Verifies detection of placeholder fingerprints in generated files
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { scanGeneratedContent } from '../../src/generators/website-content-scanner.js';
+
+let tmpDir: string;
+
+beforeEach(async () => {
+  tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), 'scanner-test-'));
+  await fs.mkdir(path.join(tmpDir, 'src', 'app'), { recursive: true });
+  await fs.mkdir(path.join(tmpDir, 'src', 'components'), { recursive: true });
+});
+
+afterEach(async () => {
+  await fs.rm(tmpDir, { recursive: true, force: true });
+});
+
+describe('scanGeneratedContent', () => {
+  it('produces no issues for clean files', async () => {
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'app', 'page.tsx'),
+      `export default function Home() {
+  return <main><h1>Welcome to Gateco</h1></main>;
+}
+`,
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.issues).toHaveLength(0);
+    expect(result.filesScanned).toBe(1);
+    expect(result.score).toBe(100);
+  });
+
+  it('flags TODO block comments as errors', async () => {
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'app', 'page.tsx'),
+      `export default function Home() {
+  return <main>/* TODO: Replace with real content */</main>;
+}
+`,
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.issues.length).toBeGreaterThan(0);
+    const todoIssue = result.issues.find((i) => /TODO/i.test(i.message));
+    expect(todoIssue).toBeDefined();
+    expect(todoIssue!.severity).toBe('error');
+  });
+
+  it('flags TODO line comments as errors', async () => {
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'components', 'Header.tsx'),
+      `// TODO: add real navigation
+export function Header() { return <header />; }
+`,
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.issues.some((i) => /TODO/i.test(i.message))).toBe(true);
+  });
+
+  it('detects default pricing pattern in file content', async () => {
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'app', 'page.tsx'),
+      `const tiers = [
+  { name: 'Starter', price: '$0/mo', features: ['1 user'] },
+  { name: 'Pro', price: '$29/mo', features: ['10 users'] },
+  { name: 'Enterprise', price: 'Custom', features: ['Unlimited'] },
+];
+export default function Page() { return <div />; }
+`,
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.issues.some((i) => /pricing/i.test(i.message))).toBe(true);
+    expect(result.issues.some((i) => /\$29/i.test(i.message))).toBe(true);
+  });
+
+  it('detects default tagline text', async () => {
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'components', 'Footer.tsx'),
+      `export function Footer() { return <p>Build something amazing</p>; }
+`,
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.issues.some((i) => /tagline/i.test(i.message))).toBe(true);
+  });
+
+  it('detects generic description text', async () => {
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'app', 'page.tsx'),
+      `export default function Page() { return <p>Your modern web application</p>; }
+`,
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.issues.some((i) => /generic description/i.test(i.message))).toBe(true);
+  });
+
+  it('detects default How It Works steps', async () => {
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'app', 'page.tsx'),
+      `const steps = [
+  { title: 'Sign Up', desc: 'Create account' },
+  { title: 'Configure', desc: 'Set preferences' },
+  { title: 'Deploy', desc: 'Go live' },
+];
+export default function Page() { return <div />; }
+`,
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.issues.some((i) => /How It Works/i.test(i.message))).toBe(true);
+  });
+
+  it('returns score of 100 when no issues found', async () => {
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'app', 'page.tsx'),
+      `export default function Page() { return <h1>Gateco</h1>; }
+`,
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.score).toBe(100);
+  });
+
+  it('decreases score with multiple issues', async () => {
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'app', 'page.tsx'),
+      `// TODO: fix this
+export default function Page() {
+  return <div>
+    <p>Build something amazing</p>
+    <p>Your modern web application costs $29/mo</p>
+  </div>;
+}
+`,
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.score).toBeLessThan(80);
+    expect(result.issues.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it('handles empty src directory gracefully', async () => {
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.issues).toHaveLength(0);
+    expect(result.filesScanned).toBe(0);
+    expect(result.score).toBe(100);
+  });
+
+  it('skips node_modules directory', async () => {
+    await fs.mkdir(path.join(tmpDir, 'src', 'node_modules'), { recursive: true });
+    await fs.writeFile(
+      path.join(tmpDir, 'src', 'node_modules', 'bad.tsx'),
+      '// TODO: should be ignored',
+    );
+
+    const result = await scanGeneratedContent(tmpDir);
+
+    expect(result.filesScanned).toBe(0);
+    expect(result.issues).toHaveLength(0);
+  });
+});

package/tests/generators/website-context.test.ts

@@ -12,6 +12,8 @@ import {
   readProjectDocs,
   findBrandAssets,
   buildWebsiteContext,
+  validateWebsiteContextOrThrow,
+  type WebsiteContentContext,
 } from '../../src/generators/website-context.js';
 
 describe('discoverProjectDocs', () => {
@@ -219,4 +221,111 @@ describe('buildWebsiteContext', () => {
     // Primary color is accent-primary (#2563EB), NOT bg-primary (#0F172A)
     expect(context.brand?.primaryColor).toBe('#2563EB');
   });
+
+  it('discovers docs from parent directory via workspace root', async () => {
+    // Simulate: tmpDir has docs, tmpDir/project/.popeye/ is the project dir
+    const projectDir = path.join(tmpDir, 'project');
+    await fs.mkdir(path.join(projectDir, '.popeye'), { recursive: true });
+    await fs.writeFile(
+      path.join(tmpDir, 'product-spec.md'),
+      '# MyProduct — A great product\n## Features\n- Feature 1'
+    );
+
+    const context = await buildWebsiteContext(projectDir, 'project');
+
+    // Should find docs from parent directory
+    expect(context.rawDocs).toContain('product-spec.md');
+    expect(context.productName).toBe('MyProduct');
+  });
+
+  it('finds brand assets from parent directory', async () => {
+    const projectDir = path.join(tmpDir, 'project');
+    await fs.mkdir(projectDir, { recursive: true });
+    await fs.writeFile(path.join(tmpDir, 'company-logo.png'), 'fake-png');
+
+    const result = await findBrandAssets(projectDir);
+
+    // findBrandAssets now scans parent dirs via workspace root
+    // The logo should be found in tmpDir
+    expect(result.logoPath).toBeDefined();
+    expect(result.logoPath).toContain('company-logo.png');
+  });
+
+  it('enforces per-file cap to prevent single large doc from consuming budget', async () => {
+    await fs.writeFile(path.join(tmpDir, 'huge-spec.md'), 'x'.repeat(20000));
+    await fs.writeFile(path.join(tmpDir, 'color-scheme.md'), '# Colors\nPrimary: #FF0000');
+
+    const docs = await discoverProjectDocs(tmpDir);
+    const content = await readProjectDocs(docs);
+
+    // Color-scheme should be present (it's prioritized and small)
+    expect(content).toContain('color-scheme.md');
+    // The huge spec should be capped at 8000 chars
+    const specSection = content.split('--- huge-spec.md ---')[1];
+    if (specSection) {
+      // Per-file cap is 8000 + "..." suffix
+      expect(specSection.length).toBeLessThan(8100);
+    }
+  });
+});
+
+describe('validateWebsiteContextOrThrow', () => {
+  const baseContext: WebsiteContentContext = {
+    productName: 'Gateco',
+    features: [{ title: 'Auth', description: 'Access control' }],
+    rawDocs: 'x'.repeat(200),
+    strategy: {
+      icp: { primaryPersona: 'devs', painPoints: [], goals: [], objections: [] },
+      positioning: { category: 'Security', differentiators: [], valueProposition: 'Secure AI', proofPoints: [] },
+      messaging: { headline: 'h', subheadline: 's', elevatorPitch: 'e', longDescription: 'l' },
+      seoStrategy: { primaryKeywords: [], secondaryKeywords: [], longTailKeywords: [], titleTemplates: {}, metaDescriptions: {} },
+      siteArchitecture: { pages: [], navigation: [], footerSections: [] },
+      conversionStrategy: { primaryCta: { text: 'Go', href: '/' }, secondaryCta: { text: 'More', href: '/' }, trustSignals: [], socialProof: [], leadCapture: 'none' },
+      competitiveContext: { category: 'sec', competitors: [], differentiators: [] },
+    },
+  };
+
+  it('passes with valid context', () => {
+    const result = validateWebsiteContextOrThrow(baseContext, 'gateco');
+    expect(result.passed).toBe(true);
+    expect(result.issues).toEqual([]);
+  });
+
+  it('fails when strategy is missing', () => {
+    const ctx: WebsiteContentContext = { ...baseContext, strategy: undefined };
+    expect(() => validateWebsiteContextOrThrow(ctx, 'gateco')).toThrow('strategy missing');
+  });
+
+  it('fails when features are empty', () => {
+    const ctx: WebsiteContentContext = { ...baseContext, features: [] };
+    expect(() => validateWebsiteContextOrThrow(ctx, 'gateco')).toThrow('features');
+  });
+
+  it('fails when product name looks like a directory', () => {
+    const ctx: WebsiteContentContext = { ...baseContext, productName: 'my-cool-project' };
+    expect(() => validateWebsiteContextOrThrow(ctx, 'x')).toThrow('directory name');
+  });
+
+  it('fails when no docs found', () => {
+    const ctx: WebsiteContentContext = { ...baseContext, rawDocs: '' };
+    expect(() => validateWebsiteContextOrThrow(ctx, 'gateco')).toThrow('documentation');
+  });
+
+  it('fails when brand/color docs exist but no color extracted', () => {
+    const ctx: WebsiteContentContext = {
+      ...baseContext,
+      rawDocs: 'x'.repeat(200) + 'color brand guide',
+      brand: undefined,
+    };
+    expect(() => validateWebsiteContextOrThrow(ctx, 'gateco')).toThrow('primary color');
+  });
+
+  it('fails when logo found but output path not resolved', () => {
+    const ctx: WebsiteContentContext = {
+      ...baseContext,
+      brand: { logoPath: '/some/logo.png' },
+      brandAssets: undefined,
+    };
+    expect(() => validateWebsiteContextOrThrow(ctx, 'gateco')).toThrow('output path not resolved');
+  });
 });

package/tests/generators/website-debug.test.ts

@@ -0,0 +1,77 @@
+/**
+ * Tests for website-debug module
+ * Verifies trace includes sections + validation info
+ */
+
+import { describe, it, expect } from 'vitest';
+import { formatDebugTrace, type WebsiteDebugTrace } from '../../src/generators/website-debug.js';
+
+function makeTrace(overrides?: Partial<WebsiteDebugTrace>): WebsiteDebugTrace {
+  return {
+    workspaceRoot: '/tmp/project',
+    docsFound: [{ path: '/tmp/project/spec.md', size: 1000 }],
+    brandAssets: { logoPath: '/tmp/logo.png', logoOutputPath: 'public/brand/logo.png' },
+    productName: { value: 'Gateco', source: 'docs' },
+    primaryColor: { value: '#2563EB', source: 'brand-docs' },
+    strategyStatus: 'success',
+    templateValues: { headline: 'Secure AI', features: 3, pricingTiers: 3 },
+    sectionsRendered: [
+      { name: 'Hero', dataSource: 'strategy', itemCount: 1 },
+      { name: 'PainPoints', dataSource: 'strategy', itemCount: 3 },
+      { name: 'Features', dataSource: 'docs', itemCount: 3 },
+      { name: 'FAQ', dataSource: 'skipped', itemCount: 0 },
+    ],
+    validationPassed: true,
+    validationIssues: [],
+    ...overrides,
+  };
+}
+
+describe('formatDebugTrace', () => {
+  it('formats basic trace fields', () => {
+    const output = formatDebugTrace(makeTrace());
+    expect(output).toContain('WEBSITE GENERATION DEBUG TRACE');
+    expect(output).toContain('Gateco');
+    expect(output).toContain('#2563EB');
+    expect(output).toContain('success');
+  });
+
+  it('includes sections rendered with data sources', () => {
+    const output = formatDebugTrace(makeTrace());
+    expect(output).toContain('Sections Rendered (4)');
+    expect(output).toContain('Hero: strategy (1 items)');
+    expect(output).toContain('PainPoints: strategy (3 items)');
+    expect(output).toContain('Features: docs (3 items)');
+    expect(output).toContain('FAQ: skipped (0 items)');
+  });
+
+  it('shows validation passed', () => {
+    const output = formatDebugTrace(makeTrace());
+    expect(output).toContain('Validation: PASSED');
+  });
+
+  it('shows validation failed with issues', () => {
+    const output = formatDebugTrace(makeTrace({
+      validationPassed: false,
+      validationIssues: ['Strategy missing', 'No features found'],
+    }));
+    expect(output).toContain('Validation: FAILED');
+    expect(output).toContain('Strategy missing');
+    expect(output).toContain('No features found');
+  });
+
+  it('handles empty sections list', () => {
+    const output = formatDebugTrace(makeTrace({ sectionsRendered: [] }));
+    expect(output).toContain('Sections Rendered (0)');
+    expect(output).toContain('(none)');
+  });
+
+  it('shows strategy error when present', () => {
+    const output = formatDebugTrace(makeTrace({
+      strategyStatus: 'failed',
+      strategyError: 'Rate limit exceeded',
+    }));
+    expect(output).toContain('Strategy: failed');
+    expect(output).toContain('Error: Rate limit exceeded');
+  });
+});