@fragments-sdk/cli 0.11.1 → 0.13.0

package/src/commands/__tests__/drift-sync.test.ts

@@ -0,0 +1,252 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { mkdtemp, writeFile, mkdir, rm, readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { diffProps, validateDrift, type DriftItem } from '../../validators.js';
+import type { PropMeta } from '../../core/component-extractor.js';
+import type { FragmentsConfig } from '@fragments-sdk/core';
+
+// ---------------------------------------------------------------------------
+// Helper: build a PropMeta for tests
+// ---------------------------------------------------------------------------
+
+function makeProp(overrides: Partial<PropMeta> & { name: string }): PropMeta {
+  return {
+    type: overrides.type ?? 'string',
+    typeKind: overrides.typeKind ?? 'string',
+    required: overrides.required ?? false,
+    source: overrides.source ?? 'local',
+    name: overrides.name,
+    ...(overrides.values && { values: overrides.values }),
+    ...(overrides.default !== undefined && { default: overrides.default }),
+    ...(overrides.description && { description: overrides.description }),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Unit tests: diffProps
+// ---------------------------------------------------------------------------
+
+describe('diffProps', () => {
+  it('detects added props (in source but not in fragment)', () => {
+    const fragmentProps = {
+      children: { type: 'node', required: true },
+    };
+    const sourceProps: Record<string, PropMeta> = {
+      children: makeProp({ name: 'children', typeKind: 'node', required: true }),
+      variant: makeProp({ name: 'variant', typeKind: 'enum', values: ['primary', 'secondary'] }),
+    };
+
+    const drifts = diffProps(fragmentProps, sourceProps);
+    const added = drifts.filter(d => d.kind === 'added');
+    expect(added.length).toBe(1);
+    expect(added[0].prop).toBe('variant');
+  });
+
+  it('detects removed props (in fragment but not in source)', () => {
+    const fragmentProps = {
+      children: { type: 'node', required: true },
+      loading: { type: 'boolean', description: 'Show loading' },
+    };
+    const sourceProps: Record<string, PropMeta> = {
+      children: makeProp({ name: 'children', typeKind: 'node', required: true }),
+    };
+
+    const drifts = diffProps(fragmentProps, sourceProps);
+    const removed = drifts.filter(d => d.kind === 'removed');
+    expect(removed.length).toBe(1);
+    expect(removed[0].prop).toBe('loading');
+  });
+
+  it('detects type changes', () => {
+    const fragmentProps = {
+      value: { type: 'string', required: false },
+    };
+    const sourceProps: Record<string, PropMeta> = {
+      value: makeProp({ name: 'value', typeKind: 'number' }),
+    };
+
+    const drifts = diffProps(fragmentProps, sourceProps);
+    const typeChanged = drifts.filter(d => d.kind === 'type_changed');
+    expect(typeChanged.length).toBe(1);
+    expect(typeChanged[0].source).toBe('number');
+    expect(typeChanged[0].fragment).toBe('string');
+  });
+
+  it('detects required status changes', () => {
+    const fragmentProps = {
+      name: { type: 'string', required: false },
+    };
+    const sourceProps: Record<string, PropMeta> = {
+      name: makeProp({ name: 'name', typeKind: 'string', required: true }),
+    };
+
+    const drifts = diffProps(fragmentProps, sourceProps);
+    const reqChanged = drifts.filter(d => d.kind === 'required_changed');
+    expect(reqChanged.length).toBe(1);
+    expect(reqChanged[0].source).toBe('true');
+    expect(reqChanged[0].fragment).toBe('false');
+  });
+
+  it('detects enum value changes', () => {
+    const fragmentProps = {
+      variant: { type: 'enum', values: ['primary', 'secondary'] as const },
+    };
+    const sourceProps: Record<string, PropMeta> = {
+      variant: makeProp({
+        name: 'variant',
+        typeKind: 'enum',
+        values: ['primary', 'secondary', 'ghost'],
+      }),
+    };
+
+    const drifts = diffProps(fragmentProps, sourceProps);
+    const valChanged = drifts.filter(d => d.kind === 'values_changed');
+    expect(valChanged.length).toBe(1);
+    expect(valChanged[0].source).toContain('ghost');
+  });
+
+  it('detects default value changes', () => {
+    const fragmentProps = {
+      size: { type: 'enum', default: 'md' },
+    };
+    const sourceProps: Record<string, PropMeta> = {
+      size: makeProp({ name: 'size', typeKind: 'enum', default: 'lg' }),
+    };
+
+    const drifts = diffProps(fragmentProps, sourceProps);
+    const defChanged = drifts.filter(d => d.kind === 'default_changed');
+    expect(defChanged.length).toBe(1);
+    expect(defChanged[0].source).toBe('lg');
+    expect(defChanged[0].fragment).toBe('md');
+  });
+
+  it('filters out inherited source props', () => {
+    const fragmentProps = {};
+    const sourceProps: Record<string, PropMeta> = {
+      className: makeProp({ name: 'className', typeKind: 'string', source: 'inherited' }),
+      style: makeProp({ name: 'style', typeKind: 'object', source: 'inherited' }),
+    };
+
+    const drifts = diffProps(fragmentProps, sourceProps);
+    expect(drifts.length).toBe(0);
+  });
+
+  it('returns empty array when in sync', () => {
+    const fragmentProps = {
+      children: { type: 'node', required: true },
+      variant: { type: 'enum', values: ['a', 'b'] as const },
+    };
+    const sourceProps: Record<string, PropMeta> = {
+      children: makeProp({ name: 'children', typeKind: 'node', required: true }),
+      variant: makeProp({ name: 'variant', typeKind: 'enum', values: ['a', 'b'] }),
+    };
+
+    const drifts = diffProps(fragmentProps, sourceProps);
+    expect(drifts.length).toBe(0);
+  });
+
+  it('detects multiple drift types simultaneously', () => {
+    const fragmentProps = {
+      children: { type: 'node', required: true },
+      loading: { type: 'boolean' },
+      variant: { type: 'enum', values: ['a'] as const },
+    };
+    const sourceProps: Record<string, PropMeta> = {
+      children: makeProp({ name: 'children', typeKind: 'node', required: true }),
+      size: makeProp({ name: 'size', typeKind: 'enum', values: ['sm', 'md'] }),
+      variant: makeProp({ name: 'variant', typeKind: 'enum', values: ['a', 'b'] }),
+    };
+
+    const drifts = diffProps(fragmentProps, sourceProps);
+    expect(drifts.length).toBe(3);
+
+    const kinds = drifts.map(d => d.kind);
+    expect(kinds).toContain('added');      // size
+    expect(kinds).toContain('removed');     // loading
+    expect(kinds).toContain('values_changed'); // variant
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Integration: validateDrift with real files
+// ---------------------------------------------------------------------------
+
+describe('validateDrift integration', () => {
+  let tmpDir: string;
+
+  beforeAll(async () => {
+    tmpDir = await mkdtemp(join(tmpdir(), 'drift-int-'));
+
+    const compDir = join(tmpDir, 'components', 'Tag');
+    await mkdir(compDir, { recursive: true });
+
+    // Simple component — no JSX to avoid esbuild issues
+    await writeFile(
+      join(compDir, 'index.tsx'),
+      `export interface TagProps {
+  /** Tag label text */
+  label: string;
+  /** Color variant */
+  color?: 'blue' | 'green' | 'red';
+}
+
+export function Tag({ label, color = 'blue' }: TagProps) {
+  return label;
+}
+`,
+      'utf-8'
+    );
+
+    // Fragment with missing 'color' prop and stale 'icon' prop
+    await writeFile(
+      join(compDir, 'Tag.fragment.tsx'),
+      `import { defineFragment } from '@fragments-sdk/core';
+import { Tag } from './index';
+
+export default defineFragment({
+  component: Tag,
+  meta: { name: 'Tag', description: 'A tag component', category: 'Display', status: 'stable' },
+  usage: { when: ['Label items'], whenNot: ['Navigation'] },
+  props: {
+    label: { type: 'string', description: 'Tag label text', required: true },
+    icon: { type: 'node', description: 'Leading icon' },
+  },
+  variants: [],
+});
+`,
+      'utf-8'
+    );
+  });
+
+  afterAll(async () => {
+    await rm(tmpDir, { recursive: true, force: true });
+  });
+
+  it('detects drift in real fragment files', async () => {
+    const config: FragmentsConfig = {
+      include: ['components/**/*.fragment.tsx'],
+      exclude: [],
+      components: ['components/**/index.tsx'],
+      outFile: 'fragments.json',
+      dataDir: '.fragments',
+    } as FragmentsConfig;
+
+    const result = await validateDrift(config, tmpDir);
+
+    // Should find drift: 'color' added (in source, not in fragment), 'icon' removed (in fragment, not in source)
+    expect(result.reports.length).toBe(1);
+    expect(result.reports[0].component).toBe('Tag');
+
+    const driftKinds = result.reports[0].drifts.map(d => d.kind);
+    expect(driftKinds).toContain('added');
+    expect(driftKinds).toContain('removed');
+
+    // 'icon' removal should be an error (breaks existing code)
+    expect(result.valid).toBe(false);
+    expect(result.errors.some(e => e.message.includes('icon'))).toBe(true);
+
+    // 'color' addition should be a warning (new undocumented prop)
+    expect(result.warnings.some(w => w.message.includes('color'))).toBe(true);
+  });
+});