@fragments-sdk/cli 0.11.1 → 0.12.1

package/src/core/component-extractor.test.ts

@@ -0,0 +1,282 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { resolve, join } from 'node:path';
+import { createComponentExtractor, type ComponentExtractor, type ComponentMeta } from './component-extractor.js';
+
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+
+const UI_COMPONENTS_DIR = resolve(__dirname, '../../../../libs/ui/src/components');
+const UI_TSCONFIG = resolve(__dirname, '../../../../libs/ui/tsconfig.json');
+
+let extractor: ComponentExtractor;
+
+afterEach(() => {
+  extractor?.dispose();
+});
+
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+
+function extractComponent(componentName: string, exportName?: string): ComponentMeta | null {
+  extractor = createComponentExtractor(UI_TSCONFIG);
+  const filePath = join(UI_COMPONENTS_DIR, componentName, 'index.tsx');
+  return extractor.extract(filePath, exportName);
+}
+
+// ---------------------------------------------------------------------------
+// Tests: Factory and lifecycle
+// ---------------------------------------------------------------------------
+
+describe('createComponentExtractor', () => {
+  it('creates an extractor with tsconfig', () => {
+    extractor = createComponentExtractor(UI_TSCONFIG);
+    expect(extractor).toBeDefined();
+    expect(extractor.extract).toBeInstanceOf(Function);
+    expect(extractor.extractAll).toBeInstanceOf(Function);
+    expect(extractor.invalidate).toBeInstanceOf(Function);
+    expect(extractor.dispose).toBeInstanceOf(Function);
+  });
+
+  it('creates an extractor without tsconfig (inferred options)', () => {
+    extractor = createComponentExtractor();
+    expect(extractor).toBeDefined();
+  });
+
+  it('returns null for non-existent files', () => {
+    extractor = createComponentExtractor(UI_TSCONFIG);
+    const result = extractor.extract('/nonexistent/path.tsx');
+    expect(result).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tests: Simple component (Card — function, Object.assign compound)
+// ---------------------------------------------------------------------------
+
+describe('Card component (compound)', () => {
+  it('extracts Card with compound composition', () => {
+    const meta = extractComponent('Card', 'Card');
+    expect(meta).not.toBeNull();
+    expect(meta!.name).toBe('Card');
+    expect(meta!.composition).not.toBeNull();
+    expect(meta!.composition!.pattern).toBe('compound');
+  });
+
+  it('extracts Card sub-component names', () => {
+    const meta = extractComponent('Card', 'Card');
+    expect(meta!.composition).not.toBeNull();
+
+    const partNames = meta!.composition!.parts.map(p => p.name);
+    expect(partNames).toContain('Header');
+    expect(partNames).toContain('Title');
+    expect(partNames).toContain('Description');
+    expect(partNames).toContain('Body');
+    expect(partNames).toContain('Footer');
+  });
+
+  it('extracts Card root props', () => {
+    const meta = extractComponent('Card', 'Card');
+    expect(meta!.props).toHaveProperty('variant');
+    expect(meta!.props).toHaveProperty('padding');
+    expect(meta!.props).toHaveProperty('children');
+
+    // variant is an enum
+    const variant = meta!.props.variant;
+    expect(variant.typeKind).toBe('enum');
+    expect(variant.values).toContain('default');
+    expect(variant.values).toContain('outlined');
+    expect(variant.values).toContain('elevated');
+  });
+
+  it('extracts Card.Header props separately', () => {
+    const meta = extractComponent('Card', 'Card');
+    const headerPart = meta!.composition!.parts.find(p => p.name === 'Header');
+    expect(headerPart).toBeDefined();
+    expect(headerPart!.props).toHaveProperty('children');
+  });
+
+  it('extracts default values for Card props', () => {
+    const meta = extractComponent('Card', 'Card');
+    // Card root has defaults: variant='default', padding='md', as='article'
+    expect(meta!.props.variant?.default).toBe('default');
+    expect(meta!.props.padding?.default).toBe('md');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tests: forwardRef component (Button)
+// ---------------------------------------------------------------------------
+
+describe('Button component (forwardRef)', () => {
+  it('extracts Button with forwardRef', () => {
+    const meta = extractComponent('Button', 'Button');
+    // Button may come through as compound if it uses Object.assign, or simple
+    expect(meta).not.toBeNull();
+    expect(meta!.name).toBe('Button');
+  });
+
+  it('extracts Button variant enum', () => {
+    const meta = extractComponent('Button', 'Button');
+    // Button has variant prop with enum values
+    // The ButtonProps is a union type (ButtonAsButtonProps | ButtonAsAnchorProps)
+    // so the extraction might pick up from either branch
+    expect(meta!.props).toHaveProperty('variant');
+    if (meta!.props.variant) {
+      expect(meta!.props.variant.typeKind).toBe('enum');
+      expect(meta!.props.variant.values).toContain('primary');
+      expect(meta!.props.variant.values).toContain('secondary');
+      expect(meta!.props.variant.values).toContain('ghost');
+    }
+  });
+
+  it('extracts Button size enum', () => {
+    const meta = extractComponent('Button', 'Button');
+    expect(meta!.props).toHaveProperty('size');
+    if (meta!.props.size) {
+      expect(meta!.props.size.typeKind).toBe('enum');
+      expect(meta!.props.size.values).toContain('sm');
+      expect(meta!.props.size.values).toContain('md');
+      expect(meta!.props.size.values).toContain('lg');
+    }
+  });
+
+  it('extracts boolean props', () => {
+    const meta = extractComponent('Button', 'Button');
+    if (meta!.props.icon) {
+      expect(meta!.props.icon.typeKind).toBe('boolean');
+    }
+    if (meta!.props.fullWidth) {
+      expect(meta!.props.fullWidth.typeKind).toBe('boolean');
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tests: extractAll
+// ---------------------------------------------------------------------------
+
+describe('extractAll', () => {
+  it('extracts all PascalCase exports from Card file', () => {
+    extractor = createComponentExtractor(UI_TSCONFIG);
+    const filePath = join(UI_COMPONENTS_DIR, 'Card', 'index.tsx');
+    const results = extractor.extractAll(filePath);
+    expect(results.length).toBeGreaterThan(0);
+
+    const names = results.map(r => r.name);
+    expect(names).toContain('Card');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tests: Incremental invalidation
+// ---------------------------------------------------------------------------
+
+describe('invalidation', () => {
+  it('invalidate does not throw', () => {
+    extractor = createComponentExtractor(UI_TSCONFIG);
+    const filePath = join(UI_COMPONENTS_DIR, 'Card', 'index.tsx');
+
+    // First extraction
+    const meta1 = extractor.extract(filePath, 'Card');
+    expect(meta1).not.toBeNull();
+
+    // Invalidate and re-extract
+    extractor.invalidate(filePath);
+    const meta2 = extractor.extract(filePath, 'Card');
+    expect(meta2).not.toBeNull();
+    expect(meta2!.name).toBe('Card');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tests: PropMeta types
+// ---------------------------------------------------------------------------
+
+describe('PropMeta type serialization', () => {
+  it('detects node type for children', () => {
+    const meta = extractComponent('Card', 'Card');
+    const children = meta!.props.children;
+    expect(children).toBeDefined();
+    expect(children.typeKind).toBe('node');
+    expect(children.required).toBe(true);
+  });
+
+  it('detects optional props as not required', () => {
+    const meta = extractComponent('Card', 'Card');
+    expect(meta!.props.variant.required).toBe(false);
+    expect(meta!.props.padding.required).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tests: Performance (extractor reuse)
+// ---------------------------------------------------------------------------
+
+describe('performance', () => {
+  it('reuses LanguageService across multiple extractions', () => {
+    extractor = createComponentExtractor(UI_TSCONFIG);
+
+    const start = performance.now();
+    const cardPath = join(UI_COMPONENTS_DIR, 'Card', 'index.tsx');
+    const card = extractor.extract(cardPath, 'Card');
+    const firstMs = performance.now() - start;
+
+    const secondStart = performance.now();
+    const buttonPath = join(UI_COMPONENTS_DIR, 'Button', 'index.tsx');
+    const button = extractor.extract(buttonPath, 'Button');
+    const secondMs = performance.now() - secondStart;
+
+    expect(card).not.toBeNull();
+    expect(button).not.toBeNull();
+
+    // Second extraction should be faster (warm LanguageService)
+    // We don't assert this strictly — just verify both succeed
+    console.log(`First extraction: ${firstMs.toFixed(0)}ms, Second: ${secondMs.toFixed(0)}ms`);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tests: JSDoc description extraction
+// ---------------------------------------------------------------------------
+
+describe('JSDoc extraction', () => {
+  it('extracts component description from CardProps interface', () => {
+    const meta = extractComponent('Card', 'Card');
+    // Card has JSDoc on CardProps interface: "Card container for grouping related content."
+    // The description might come from the props interface or the component
+    expect(meta!.description.length).toBeGreaterThan(0);
+  });
+
+  it('extracts prop descriptions from JSDoc', () => {
+    const meta = extractComponent('Card', 'Card');
+    // variant prop has JSDoc: 'Visual style variant...'
+    const variant = meta!.props.variant;
+    expect(variant.description).toBeDefined();
+    expect(variant.description!.length).toBeGreaterThan(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Tests: Source attribution
+// ---------------------------------------------------------------------------
+
+describe('source attribution', () => {
+  it('marks locally-declared props as local', () => {
+    const meta = extractComponent('Card', 'Card');
+    // variant, padding, as, children are locally declared in CardProps
+    expect(meta!.props.variant?.source).toBe('local');
+    expect(meta!.props.padding?.source).toBe('local');
+    expect(meta!.props.children?.source).toBe('local');
+  });
+
+  it('marks inherited props as inherited', () => {
+    const meta = extractComponent('Card', 'Card');
+    // CardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'>
+    // So className, style, etc. come from React.HTMLAttributes → inherited
+    if (meta!.props.className) {
+      expect(meta!.props.className.source).toBe('inherited');
+    }
+  });
+});