@fragments-sdk/cli 0.2.2

package/src/service/__tests__/metrics-store.test.ts

@@ -0,0 +1,409 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { mkdir, rm, readdir, readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  MetricsStore,
+  createMetricsStore,
+  type ComplianceSnapshot,
+} from "../metrics-store.js";
+
+describe("metrics-store", () => {
+  let testDir: string;
+  let store: MetricsStore;
+
+  beforeEach(async () => {
+    // Create a unique temp directory for each test
+    testDir = join(tmpdir(), `metrics-test-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    await mkdir(testDir, { recursive: true });
+    store = createMetricsStore(testDir);
+  });
+
+  afterEach(async () => {
+    // Clean up temp directory
+    try {
+      await rm(testDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe("saveSnapshot", () => {
+    it("saves a compliance snapshot to disk", async () => {
+      const snapshot: ComplianceSnapshot = {
+        timestamp: new Date().toISOString(),
+        component: "Button",
+        compliance: 85.5,
+        violations: 3,
+      };
+
+      const filepath = await store.saveSnapshot(snapshot);
+
+      expect(filepath).toContain("Button.json");
+
+      // Verify file exists by reading it
+      const content = await readFile(filepath, "utf-8");
+      const snapshots = JSON.parse(content);
+      expect(snapshots.length).toBe(1);
+      expect(snapshots[0].component).toBe("Button");
+    });
+
+    it("appends snapshots to existing file for same day/component", async () => {
+      const timestamp = new Date().toISOString();
+
+      const snapshot1: ComplianceSnapshot = {
+        timestamp,
+        component: "Button",
+        compliance: 80,
+        violations: 5,
+      };
+
+      const snapshot2: ComplianceSnapshot = {
+        timestamp,
+        component: "Button",
+        compliance: 85,
+        violations: 3,
+      };
+
+      const filepath1 = await store.saveSnapshot(snapshot1);
+      const filepath2 = await store.saveSnapshot(snapshot2);
+
+      // Both should write to same file
+      expect(filepath1).toBe(filepath2);
+
+      // File should contain both snapshots
+      const content = await readFile(filepath2, "utf-8");
+      const snapshots = JSON.parse(content);
+      expect(snapshots).toHaveLength(2);
+    });
+
+    it("includes violation details when provided", async () => {
+      const snapshot: ComplianceSnapshot = {
+        timestamp: new Date().toISOString(),
+        component: "Card",
+        compliance: 75,
+        violations: 2,
+        violationDetails: [
+          { property: "backgroundColor", issue: "Hardcoded value", severity: "error" },
+          { property: "padding", issue: "Non-token value", severity: "warning" },
+        ],
+      };
+
+      const filepath = await store.saveSnapshot(snapshot);
+      const content = await readFile(filepath, "utf-8");
+      const snapshots = JSON.parse(content);
+
+      expect(snapshots[0].violationDetails).toHaveLength(2);
+    });
+
+    it("includes git metadata when provided", async () => {
+      const snapshot: ComplianceSnapshot = {
+        timestamp: new Date().toISOString(),
+        component: "Button",
+        compliance: 90,
+        violations: 1,
+        commitHash: "abc123",
+        branch: "feature/new-button",
+      };
+
+      const filepath = await store.saveSnapshot(snapshot);
+      const content = await readFile(filepath, "utf-8");
+      const snapshots = JSON.parse(content);
+
+      expect(snapshots[0].commitHash).toBe("abc123");
+      expect(snapshots[0].branch).toBe("feature/new-button");
+    });
+  });
+
+  describe("getHistory", () => {
+    it("returns empty array when no metrics exist", async () => {
+      const history = await store.getHistory("Button");
+      expect(history).toHaveLength(0);
+    });
+
+    it("returns snapshots for a specific component", async () => {
+      const now = new Date();
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 85,
+        violations: 2,
+      });
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Card",
+        compliance: 90,
+        violations: 1,
+      });
+
+      const history = await store.getHistory("Button");
+
+      expect(history).toHaveLength(1);
+      expect(history[0].component).toBe("Button");
+    });
+
+    it("filters by date range", async () => {
+      const now = new Date();
+      const thirtyDaysAgo = new Date(now);
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 35);
+
+      // Save a recent snapshot
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 85,
+        violations: 2,
+      });
+
+      // Default is 30 days, so 35 days ago would be filtered out
+      const history = await store.getHistory("Button", { days: 30 });
+
+      expect(history).toHaveLength(1);
+    });
+
+    it("returns all components when component is 'all'", async () => {
+      const now = new Date();
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 85,
+        violations: 2,
+      });
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Card",
+        compliance: 90,
+        violations: 1,
+      });
+
+      const history = await store.getHistory("all");
+
+      expect(history).toHaveLength(2);
+    });
+
+    it("sorts snapshots by timestamp", async () => {
+      const now = new Date();
+      const earlier = new Date(now);
+      earlier.setHours(earlier.getHours() - 1);
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 90,
+        violations: 1,
+      });
+
+      await store.saveSnapshot({
+        timestamp: earlier.toISOString(),
+        component: "Button",
+        compliance: 80,
+        violations: 3,
+      });
+
+      const history = await store.getHistory("Button");
+
+      expect(history).toHaveLength(2);
+      expect(history[0].compliance).toBe(80); // Earlier first
+      expect(history[1].compliance).toBe(90); // Later second
+    });
+  });
+
+  describe("getSystemHistory", () => {
+    it("returns all component snapshots", async () => {
+      const now = new Date();
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 85,
+        violations: 2,
+      });
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Card",
+        compliance: 90,
+        violations: 1,
+      });
+
+      const history = await store.getSystemHistory();
+
+      expect(history).toHaveLength(2);
+    });
+  });
+
+  describe("getTrend", () => {
+    it("returns trend data grouped by day", async () => {
+      const now = new Date();
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 85,
+        violations: 2,
+      });
+
+      const trend = await store.getTrend("Button", { groupBy: "day" });
+
+      expect(trend.component).toBe("Button");
+      expect(trend.period).toBe("day");
+      expect(trend.dataPoints.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it("calculates improving trend", async () => {
+      const now = new Date();
+      const yesterday = new Date(now);
+      yesterday.setDate(yesterday.getDate() - 1);
+
+      // Earlier: lower compliance
+      await store.saveSnapshot({
+        timestamp: yesterday.toISOString(),
+        component: "Button",
+        compliance: 70,
+        violations: 5,
+      });
+
+      // Now: higher compliance
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 95,
+        violations: 1,
+      });
+
+      const trend = await store.getTrend("Button");
+
+      // With significant improvement, trend should be improving
+      expect(trend.trend).toBe("improving");
+    });
+
+    it("calculates declining trend", async () => {
+      const now = new Date();
+      const yesterday = new Date(now);
+      yesterday.setDate(yesterday.getDate() - 1);
+
+      // Earlier: higher compliance
+      await store.saveSnapshot({
+        timestamp: yesterday.toISOString(),
+        component: "Button",
+        compliance: 95,
+        violations: 1,
+      });
+
+      // Now: lower compliance
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 70,
+        violations: 5,
+      });
+
+      const trend = await store.getTrend("Button");
+
+      expect(trend.trend).toBe("declining");
+    });
+
+    it("calculates stable trend for small changes", async () => {
+      const now = new Date();
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 85,
+        violations: 2,
+      });
+
+      const trend = await store.getTrend("Button");
+
+      // With only one data point, should be stable
+      expect(trend.trend).toBe("stable");
+    });
+
+    it("calculates average compliance", async () => {
+      const now = new Date();
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 80,
+        violations: 3,
+      });
+
+      await store.saveSnapshot({
+        timestamp: now.toISOString(),
+        component: "Button",
+        compliance: 90,
+        violations: 1,
+      });
+
+      const trend = await store.getTrend("Button");
+
+      expect(trend.averageCompliance).toBe(85);
+    });
+  });
+
+  describe("generateSparkline", () => {
+    it("generates ASCII sparkline from data points", () => {
+      const dataPoints = [
+        { compliance: 60 },
+        { compliance: 70 },
+        { compliance: 80 },
+        { compliance: 90 },
+        { compliance: 100 },
+      ];
+
+      const sparkline = store.generateSparkline(dataPoints);
+
+      expect(sparkline.length).toBe(5);
+      expect(sparkline).toMatch(/[▁▂▃▄▅▆▇█ ]+/);
+    });
+
+    it("handles empty data points", () => {
+      const sparkline = store.generateSparkline([]);
+      expect(sparkline).toBe("─");
+    });
+
+    it("handles single data point", () => {
+      const sparkline = store.generateSparkline([{ compliance: 80 }]);
+      expect(sparkline.length).toBe(1);
+    });
+
+    it("handles flat data (all same values)", () => {
+      const dataPoints = [
+        { compliance: 80 },
+        { compliance: 80 },
+        { compliance: 80 },
+      ];
+
+      const sparkline = store.generateSparkline(dataPoints);
+
+      // All same value, should be middle character
+      expect(sparkline.length).toBe(3);
+    });
+  });
+
+  describe("cleanup", () => {
+    it("deletes files older than retention period", async () => {
+      // This test is tricky because we can't easily create old files
+      // Just verify the method runs without error
+      const deleted = await store.cleanup(90);
+      expect(typeof deleted).toBe("number");
+    });
+
+    it("returns count of deleted files", async () => {
+      const deleted = await store.cleanup(90);
+      expect(deleted).toBe(0); // No files to delete in fresh test dir
+    });
+  });
+
+  describe("createMetricsStore", () => {
+    it("creates a MetricsStore instance", () => {
+      const store = createMetricsStore("/some/path");
+      expect(store).toBeInstanceOf(MetricsStore);
+    });
+  });
+});

package/src/service/__tests__/patch-generator.test.ts

@@ -0,0 +1,186 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  generateTokenPatches,
+  generateCSSInJSPatches,
+  type Patch,
+} from "../patch-generator.js";
+import {
+  TokenRegistryManager,
+  createTokenRegistry,
+} from "../token-registry.js";
+import type { TokenConfig } from "../../core/index.js";
+
+describe("patch-generator", () => {
+  let testDir: string;
+  let registry: TokenRegistryManager;
+
+  beforeEach(async () => {
+    testDir = join(tmpdir(), `patch-gen-test-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    await mkdir(testDir, { recursive: true });
+    registry = createTokenRegistry();
+
+    // Create token files for testing
+    const cssTokens = `
+:root {
+  --color-primary: #ff0000;
+  --color-secondary: #0000ff;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+}
+    `;
+    await writeFile(join(testDir, "tokens.css"), cssTokens);
+
+    const config: TokenConfig = {
+      include: ["tokens.css"],
+    };
+
+    await registry.initialize(config, testDir);
+  });
+
+  afterEach(async () => {
+    registry.clear();
+    try {
+      await rm(testDir, { recursive: true, force: true });
+    } catch {
+      // Ignore cleanup errors
+    }
+  });
+
+  describe("generateTokenPatches", () => {
+    it("generates patches for hardcoded color values", () => {
+      const styleDiffs = [
+        { property: "backgroundColor", figma: "#ff0000", rendered: "#ff0000", match: true },
+        { property: "color", figma: "#0000ff", rendered: "#0000ff", match: true },
+      ];
+
+      const result = generateTokenPatches("Button", styleDiffs, registry, {
+        sourceFile: "src/Button.tsx",
+      });
+
+      expect(result.summary).toBeDefined();
+      expect(result.fixableCount).toBeGreaterThanOrEqual(0);
+    });
+
+    it("returns empty patches when all values already use tokens", () => {
+      const styleDiffs = [
+        { property: "backgroundColor", figma: "var(--color-primary)", rendered: "var(--color-primary)", match: true },
+      ];
+
+      const result = generateTokenPatches("Button", styleDiffs, registry);
+
+      // All values are already tokens
+      expect(result.summary).toContain("compliance");
+    });
+
+    it("identifies unfixable values without matching tokens", () => {
+      const styleDiffs = [
+        { property: "backgroundColor", figma: "#abc123", rendered: "#abc123", match: true },
+      ];
+
+      const result = generateTokenPatches("Button", styleDiffs, registry);
+
+      expect(result.unfixableCount).toBeGreaterThanOrEqual(0);
+    });
+
+    it("includes summary with fix counts", () => {
+      const styleDiffs = [
+        { property: "padding", figma: "16px", rendered: "16px", match: true },
+      ];
+
+      const result = generateTokenPatches("Card", styleDiffs, registry);
+
+      expect(result.summary).toBeDefined();
+      expect(typeof result.fixableCount).toBe("number");
+      expect(typeof result.unfixableCount).toBe("number");
+    });
+  });
+
+  describe("generateCSSInJSPatches", () => {
+    it("generates patches for inline style values", () => {
+      const source = `
+function Button() {
+  return <button style={{ backgroundColor: "#ff0000", padding: "16px" }}>Click</button>;
+}
+      `;
+
+      const fixes = [
+        { property: "backgroundColor", currentValue: "#ff0000", tokenName: "color-primary" },
+        { property: "padding", currentValue: "16px", tokenName: "spacing-md" },
+      ];
+
+      const patches = generateCSSInJSPatches(source, fixes, { fileName: "Button.tsx" });
+
+      expect(patches.length).toBeGreaterThanOrEqual(0);
+    });
+
+    it("generates patches for styled-components template literals", () => {
+      const source = `
+const Button = styled.button\`
+  background-color: #ff0000;
+  padding: 16px;
+\`;
+      `;
+
+      const fixes = [
+        { property: "background-color", currentValue: "#ff0000", tokenName: "color-primary" },
+        { property: "padding", currentValue: "16px", tokenName: "spacing-md" },
+      ];
+
+      const patches = generateCSSInJSPatches(source, fixes, { fileName: "Button.tsx" });
+
+      expect(patches.length).toBeGreaterThanOrEqual(0);
+    });
+
+    it("returns empty patches for values not found in source", () => {
+      const source = `
+function Button() {
+  return <button className="btn">Click</button>;
+}
+      `;
+
+      const fixes = [
+        { property: "backgroundColor", currentValue: "#123456", tokenName: "color-unknown" },
+      ];
+
+      const patches = generateCSSInJSPatches(source, fixes, { fileName: "Button.tsx" });
+
+      expect(patches).toHaveLength(0);
+    });
+
+    it("handles camelCase property names", () => {
+      const source = `
+function Button() {
+  return <button style={{ backgroundColor: "red" }}>Click</button>;
+}
+      `;
+
+      const fixes = [
+        { property: "backgroundColor", currentValue: "red", tokenName: "color-error" },
+      ];
+
+      const patches = generateCSSInJSPatches(source, fixes, { fileName: "Button.tsx" });
+
+      expect(patches.length).toBeGreaterThanOrEqual(0);
+    });
+
+    it("handles kebab-case property names in CSS", () => {
+      const source = `
+.button {
+  background-color: #ff0000;
+}
+      `;
+
+      const fixes = [
+        { property: "background-color", currentValue: "#ff0000", tokenName: "color-primary" },
+      ];
+
+      const patches = generateCSSInJSPatches(source, fixes, { fileName: "styles.css" });
+
+      expect(patches.length).toBeGreaterThanOrEqual(0);
+    });
+  });
+});