ui-thing 0.2.6 → 0.2.7

package/tests/utils/addPrettierConfig.test.ts

@@ -1,10 +1,12 @@
-import * as execa from "execa";
 import fse from "fs-extra";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import type { PathLike } from "fs";
 
 import * as testingFn from "../../src/utils/addPrettierConfig";
 
+vi.mock("execa", () => ({
+  $: vi.fn(),
+}));
+
 const currentDir = process.cwd();
 
 describe("utils/addPrettierConfig", () => {
@@ -14,7 +16,7 @@ describe("utils/addPrettierConfig", () => {
   });
 
   it("should ask the user if they want to overwrite the existing prettier config file if one exists", async () => {
-    vi.spyOn(fse, "existsSync").mockImplementation((path: PathLike) => true);
+    vi.spyOn(fse, "existsSync").mockImplementation(() => true);
     vi.mock("prompts", async () => {
       const prompts = await vi.importActual<typeof import("prompts")>("prompts");
       return {
@@ -44,28 +46,19 @@ describe("utils/addPrettierConfig", () => {
   });
 
   it("should format files with prettier if format is true", async () => {
+    const { $ } = await import("execa");
+    const mockExeca$ = vi.mocked($);
+
     vi.spyOn(testingFn, "addPrettierConfig");
     vi.spyOn(fse, "existsSync").mockImplementation(() => false);
     vi.spyOn(fse, "writeFile").mockResolvedValue();
-    vi.mock("execa", async () => {
-      const execa = await vi.importActual<typeof import("execa")>("execa");
-      return {
-        ...execa,
-        $: async () => {
-          return true;
-        },
-        default: async () => {
-          return true;
-        },
-      };
-    });
-    vi.spyOn(execa, "$");
+    mockExeca$.mockResolvedValue(true as any);
 
     const result = await testingFn.addPrettierConfig(currentDir, true);
     expect(result).toBe(true);
     expect(fse.existsSync).toHaveBeenCalledTimes(1);
     expect(fse.writeFile).toHaveBeenCalledTimes(1);
-    expect(execa.$).toHaveBeenCalledTimes(1);
+    expect(mockExeca$).toHaveBeenCalledTimes(1);
     expect(testingFn.addPrettierConfig).toHaveBeenCalledTimes(1);
   });
 });

package/tests/utils/compareUIConfig.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { UIConfig } from "../../src/types";
 import * as testingFn from "../../src/utils/compareUIConfig";
@@ -8,13 +8,13 @@ const goodConfig: UIConfig = {
   nuxtVersion: 3,
   theme: "string",
   tailwindCSSLocation: "string",
-  tailwindConfigLocation: "string",
   componentsLocation: "string",
   composablesLocation: "string",
   utilsLocation: "string",
   force: true,
   useDefaultFilename: true,
   packageManager: "string",
+  pluginsLocation: "string",
 };
 
 const badConfig = {
@@ -33,7 +33,7 @@ describe("utils/compareUIConfig", () => {
 
   it("should return false if properties are missing", async () => {
     // create spies
-    vi.spyOn(configModule, "getUIConfig").mockResolvedValue(badConfig as UIConfig);
+    vi.spyOn(configModule, "getUIConfig").mockResolvedValue(badConfig as unknown as UIConfig);
     vi.spyOn(testingFn, "compareUIConfig");
 
     // call the function we are testing

package/tests/utils/constants.test.ts

@@ -0,0 +1,136 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  CSS_THEME_OPTIONS,
+  DEFAULT_CONFIG,
+  DEFAULT_CONFIG_NUXT4,
+  INIT_DEPS,
+  INIT_DEV_DEPS,
+  INIT_DEV_DEPS_PRETTIER,
+  INIT_MODULES,
+  PACKAGE_MANAGER_CHOICES,
+  UI_CONFIG_FILENAME,
+} from "../../src/utils/constants";
+
+describe("utils/constants", () => {
+  describe("UI_CONFIG_FILENAME", () => {
+    it("should be a string with correct filename", () => {
+      expect(UI_CONFIG_FILENAME).toBe("ui-thing.config.ts");
+      expect(typeof UI_CONFIG_FILENAME).toBe("string");
+    });
+  });
+
+  describe("DEFAULT_CONFIG", () => {
+    it("should have required properties for Nuxt 3", () => {
+      expect(DEFAULT_CONFIG).toHaveProperty("theme");
+      expect(DEFAULT_CONFIG).toHaveProperty("tailwindCSSLocation");
+      expect(DEFAULT_CONFIG).toHaveProperty("componentsLocation");
+      expect(DEFAULT_CONFIG).toHaveProperty("composablesLocation");
+      expect(DEFAULT_CONFIG).toHaveProperty("utilsLocation");
+      expect(DEFAULT_CONFIG).toHaveProperty("force");
+      expect(DEFAULT_CONFIG).toHaveProperty("useDefaultFilename");
+      expect(DEFAULT_CONFIG).toHaveProperty("packageManager");
+    });
+
+    it("should have correct Nuxt 3 paths", () => {
+      expect(DEFAULT_CONFIG.tailwindCSSLocation).toBe("assets/css/tailwind.css");
+      expect(DEFAULT_CONFIG.componentsLocation).toBe("components/Ui");
+      expect(DEFAULT_CONFIG.composablesLocation).toBe("composables");
+    });
+  });
+
+  describe("DEFAULT_CONFIG_NUXT4", () => {
+    it("should have required properties for Nuxt 4", () => {
+      expect(DEFAULT_CONFIG_NUXT4).toHaveProperty("theme");
+      expect(DEFAULT_CONFIG_NUXT4).toHaveProperty("tailwindCSSLocation");
+      expect(DEFAULT_CONFIG_NUXT4).toHaveProperty("componentsLocation");
+    });
+
+    it("should have correct Nuxt 4 paths with app/ prefix", () => {
+      expect(DEFAULT_CONFIG_NUXT4.tailwindCSSLocation).toBe("app/assets/css/tailwind.css");
+      expect(DEFAULT_CONFIG_NUXT4.componentsLocation).toBe("app/components/Ui");
+      expect(DEFAULT_CONFIG_NUXT4.composablesLocation).toBe("app/composables");
+    });
+  });
+
+  describe("INIT_DEPS", () => {
+    it("should be an array of required dependencies", () => {
+      expect(Array.isArray(INIT_DEPS)).toBe(true);
+      expect(INIT_DEPS.length).toBeGreaterThan(0);
+    });
+
+    it("should include essential packages", () => {
+      expect(INIT_DEPS).toContain("tailwindcss");
+      expect(INIT_DEPS).toContain("reka-ui");
+      expect(INIT_DEPS).toContain("@nuxt/icon");
+    });
+  });
+
+  describe("INIT_DEV_DEPS", () => {
+    it("should be an array of dev dependencies", () => {
+      expect(Array.isArray(INIT_DEV_DEPS)).toBe(true);
+    });
+
+    it("should include typescript", () => {
+      expect(INIT_DEV_DEPS).toContain("typescript");
+    });
+  });
+
+  describe("INIT_DEV_DEPS_PRETTIER", () => {
+    it("should include prettier-related packages", () => {
+      expect(INIT_DEV_DEPS_PRETTIER).toContain("prettier");
+      expect(INIT_DEV_DEPS_PRETTIER).toContain("prettier-plugin-tailwindcss");
+    });
+  });
+
+  describe("INIT_MODULES", () => {
+    it("should be an array of Nuxt modules", () => {
+      expect(Array.isArray(INIT_MODULES)).toBe(true);
+    });
+
+    it("should include essential Nuxt modules", () => {
+      expect(INIT_MODULES).toContain("@nuxtjs/color-mode");
+      expect(INIT_MODULES).toContain("@nuxt/icon");
+    });
+  });
+
+  describe("PACKAGE_MANAGER_CHOICES", () => {
+    it("should include all major package managers", () => {
+      const values = PACKAGE_MANAGER_CHOICES.map((c) => c.value);
+      expect(values).toContain("npm");
+      expect(values).toContain("yarn");
+      expect(values).toContain("pnpm");
+      expect(values).toContain("bun");
+    });
+
+    it("should have title and value for each choice", () => {
+      PACKAGE_MANAGER_CHOICES.forEach((choice) => {
+        expect(choice).toHaveProperty("title");
+        expect(choice).toHaveProperty("value");
+      });
+    });
+  });
+
+  describe("CSS_THEME_OPTIONS", () => {
+    it("should include various theme options", () => {
+      const values = CSS_THEME_OPTIONS.map((c) => c.value);
+      expect(values).toContain("zinc");
+      expect(values).toContain("slate");
+      expect(values).toContain("blue");
+      expect(values).toContain("green");
+    });
+
+    it("should have at least 10 theme options", () => {
+      expect(CSS_THEME_OPTIONS.length).toBeGreaterThanOrEqual(10);
+    });
+
+    it("should have title and value for each theme", () => {
+      CSS_THEME_OPTIONS.forEach((theme) => {
+        expect(theme).toHaveProperty("title");
+        expect(theme).toHaveProperty("value");
+        expect(typeof theme.title).toBe("string");
+        expect(typeof theme.value).toBe("string");
+      });
+    });
+  });
+});

package/tests/utils/detectNuxtVersion.test.ts

@@ -0,0 +1,97 @@
+import fs from "node:fs";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { detectNuxtVersion } from "../../src/utils/detectNuxtVersion";
+
+describe("utils/detectNuxtVersion", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should detect Nuxt 4 from dependencies", () => {
+    const mockPackageJson = JSON.stringify({
+      dependencies: {
+        nuxt: "^4.0.0",
+      },
+    });
+    vi.spyOn(fs, "readFileSync").mockReturnValue(mockPackageJson);
+
+    const version = detectNuxtVersion();
+
+    expect(version).toBe(4);
+    expect(fs.readFileSync).toHaveBeenCalledWith("package.json", "utf-8");
+  });
+
+  it("should detect Nuxt 4 from devDependencies", () => {
+    const mockPackageJson = JSON.stringify({
+      devDependencies: {
+        nuxt: "~4.1.0",
+      },
+    });
+    vi.spyOn(fs, "readFileSync").mockReturnValue(mockPackageJson);
+
+    expect(detectNuxtVersion()).toBe(4);
+  });
+
+  it("should detect Nuxt 3 from dependencies", () => {
+    const mockPackageJson = JSON.stringify({
+      dependencies: {
+        nuxt: "^3.12.0",
+      },
+    });
+    vi.spyOn(fs, "readFileSync").mockReturnValue(mockPackageJson);
+
+    expect(detectNuxtVersion()).toBe(3);
+  });
+
+  it("should detect Nuxt 3 from devDependencies", () => {
+    const mockPackageJson = JSON.stringify({
+      devDependencies: {
+        nuxt: "3.10.0",
+      },
+    });
+    vi.spyOn(fs, "readFileSync").mockReturnValue(mockPackageJson);
+
+    expect(detectNuxtVersion()).toBe(3);
+  });
+
+  it("should handle various version formats for Nuxt 4", () => {
+    const versions = ["^4.0.0", "~4.1.0", ">=4.0.0", "4.x", "4.0.0"];
+    versions.forEach((version) => {
+      const mockPackageJson = JSON.stringify({
+        dependencies: { nuxt: version },
+      });
+      vi.spyOn(fs, "readFileSync").mockReturnValue(mockPackageJson);
+      expect(detectNuxtVersion()).toBe(4);
+    });
+  });
+
+  it("should return 4 as default when package.json is missing", () => {
+    vi.spyOn(fs, "readFileSync").mockImplementation(() => {
+      throw new Error("File not found");
+    });
+
+    expect(detectNuxtVersion()).toBe(4);
+  });
+
+  it("should return 4 as default when nuxt is not in dependencies", () => {
+    const mockPackageJson = JSON.stringify({
+      dependencies: {
+        vue: "^3.0.0",
+      },
+    });
+    vi.spyOn(fs, "readFileSync").mockReturnValue(mockPackageJson);
+
+    expect(detectNuxtVersion()).toBe(4);
+  });
+
+  it("should return 4 when package.json has invalid JSON", () => {
+    vi.spyOn(fs, "readFileSync").mockReturnValue("invalid json");
+
+    expect(detectNuxtVersion()).toBe(4);
+  });
+});

package/tests/utils/fetchBlockCategories.test.ts

@@ -0,0 +1,59 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { fetchBlockCategories } from "../../src/utils/fetchBlockCategories";
+
+describe("utils/fetchBlockCategories", () => {
+  let mockAxios: MockAdapter;
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    mockAxios.restore();
+    vi.restoreAllMocks();
+  });
+
+  it("should fetch block categories from default API endpoint", async () => {
+    const mockCategories = ["landing", "dashboard", "auth", "marketing"];
+
+    mockAxios.onGet("https://uithing.com/api/blocks/categories").reply(200, mockCategories);
+
+    const result = await fetchBlockCategories();
+
+    expect(result).toEqual(mockCategories);
+    expect(result).toHaveLength(4);
+  });
+
+  it("should fetch categories from custom API endpoint via env var", async () => {
+    const customUrl = "https://custom-api.com/blocks/categories";
+    process.env.BLOCK_CATEGORIES_API = customUrl;
+
+    const mockCategories = ["category1", "category2"];
+
+    mockAxios.onGet(customUrl).reply(200, mockCategories);
+
+    const result = await fetchBlockCategories();
+
+    expect(result).toEqual(mockCategories);
+    delete process.env.BLOCK_CATEGORIES_API;
+  });
+
+  it("should handle API errors", async () => {
+    mockAxios.onGet("https://uithing.com/api/blocks/categories").reply(404);
+
+    await expect(fetchBlockCategories()).rejects.toThrow();
+  });
+
+  it("should return empty array when no categories exist", async () => {
+    mockAxios.onGet("https://uithing.com/api/blocks/categories").reply(200, []);
+
+    const result = await fetchBlockCategories();
+
+    expect(result).toEqual([]);
+    expect(result).toHaveLength(0);
+  });
+});

package/tests/utils/fetchBlocks.test.ts

@@ -0,0 +1,59 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { BlockComponent } from "../../src/types";
+import { fetchBlocks } from "../../src/utils/fetchBlocks";
+
+describe("utils/fetchBlocks", () => {
+  let mockAxios: MockAdapter;
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    mockAxios.restore();
+    vi.restoreAllMocks();
+  });
+
+  it("should fetch blocks from default API endpoint", async () => {
+    const mockBlocks: BlockComponent[] = [
+      {
+        name: "Hero",
+        fileName: "Hero.vue",
+        file: "<template></template>",
+        category: "landing",
+        path: "/landing",
+      },
+    ];
+
+    mockAxios.onGet("https://uithing.com/api/blocks").reply(200, mockBlocks);
+
+    const result = await fetchBlocks();
+
+    expect(result).toEqual(mockBlocks);
+    expect(result).toHaveLength(1);
+  });
+
+  it("should fetch blocks from custom API endpoint via env var", async () => {
+    const customUrl = "https://custom-api.com/blocks";
+    process.env.BLOCKS_API = customUrl;
+
+    const mockBlocks: BlockComponent[] = [];
+
+    mockAxios.onGet(customUrl).reply(200, mockBlocks);
+
+    const result = await fetchBlocks();
+
+    expect(result).toEqual(mockBlocks);
+    delete process.env.BLOCKS_API;
+  });
+
+  it("should handle API errors", async () => {
+    mockAxios.onGet("https://uithing.com/api/blocks").reply(500);
+
+    await expect(fetchBlocks()).rejects.toThrow();
+  });
+});

package/tests/utils/fetchComponents.test.ts

@@ -0,0 +1,92 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { Component } from "../../src/types";
+import { fetchComponents } from "../../src/utils/fetchComponents";
+
+describe("utils/fetchComponents", () => {
+  let mockAxios: MockAdapter;
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    mockAxios.restore();
+    vi.restoreAllMocks();
+  });
+
+  it("should fetch components from default API endpoint", async () => {
+    const mockComponents: Component[] = [
+      {
+        name: "Button",
+        value: "button",
+        files: [],
+        utils: [],
+        composables: [],
+        plugins: [],
+      },
+      {
+        name: "Input",
+        value: "input",
+        files: [],
+        utils: [],
+        composables: [],
+        plugins: [],
+      },
+    ];
+
+    mockAxios.onGet().reply(200, mockComponents);
+
+    const result = await fetchComponents();
+
+    expect(result).toEqual(mockComponents);
+    expect(result).toHaveLength(2);
+  });
+
+  it("should fetch components from custom API endpoint via env var", async () => {
+    const customUrl = "https://custom-api.com/components";
+    process.env.COMPONENTS_API = customUrl;
+
+    const mockComponents: Component[] = [
+      {
+        name: "Card",
+        value: "card",
+        files: [],
+        utils: [],
+        composables: [],
+        plugins: [],
+      },
+    ];
+
+    mockAxios.onGet(customUrl).reply(200, mockComponents);
+
+    const result = await fetchComponents();
+
+    expect(result).toEqual(mockComponents);
+    delete process.env.COMPONENTS_API;
+  });
+
+  it("should handle API errors gracefully", async () => {
+    mockAxios.onGet("https://uithing.com/api/components").reply(500);
+
+    await expect(fetchComponents()).rejects.toThrow();
+  });
+
+  it("should handle network errors", async () => {
+    mockAxios.onGet("https://uithing.com/api/components").networkError();
+
+    await expect(fetchComponents()).rejects.toThrow();
+  });
+
+  it("should return empty array when API returns no data", async () => {
+    mockAxios.onGet("https://uithing.com/api/components").reply(200, []);
+
+    const result = await fetchComponents();
+
+    expect(result).toEqual([]);
+    expect(result).toHaveLength(0);
+  });
+});

package/tests/utils/fetchProseComponents.test.ts

@@ -0,0 +1,62 @@
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ProseComponent } from "../../src/types";
+import { fetchProseComponents } from "../../src/utils/fetchProseComponents";
+
+describe("utils/fetchProseComponents", () => {
+  let mockAxios: MockAdapter;
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    mockAxios.restore();
+    vi.restoreAllMocks();
+  });
+
+  it("should fetch prose components from default API endpoint", async () => {
+    const mockProseComponents: ProseComponent[] = [
+      {
+        name: "Heading",
+        value: "heading",
+        fileName: "ProseH1.vue",
+        filePath: "/prose/ProseH1.vue",
+        file: { fileName: "ProseH1.vue", dirPath: "/prose", fileContent: "<template></template>" },
+        utils: [],
+        composables: [],
+        plugins: [],
+      },
+    ];
+
+    mockAxios.onGet("https://uithing.com/api/prose").reply(200, mockProseComponents);
+
+    const result = await fetchProseComponents();
+
+    expect(result).toEqual(mockProseComponents);
+    expect(result).toHaveLength(1);
+  });
+
+  it("should fetch prose components from custom API endpoint via env var", async () => {
+    const customUrl = "https://custom-api.com/prose";
+    process.env.PROSE_COMPONENTS_API = customUrl;
+
+    const mockProseComponents: ProseComponent[] = [];
+
+    mockAxios.onGet(customUrl).reply(200, mockProseComponents);
+
+    const result = await fetchProseComponents();
+
+    expect(result).toEqual(mockProseComponents);
+    delete process.env.PROSE_COMPONENTS_API;
+  });
+
+  it("should handle API errors", async () => {
+    mockAxios.onGet("https://uithing.com/api/prose").reply(500);
+
+    await expect(fetchProseComponents()).rejects.toThrow();
+  });
+});