Merge pull request #36 from isBatak/feat/tests

Add tests

.changeset/sixty-carrots-press.md

@@ -0,0 +1,5 @@
+---
+"@ikona/cli": patch
+---
+
+Add tests

.gitignore

@@ -20,3 +20,5 @@ exec/
 # Miscellaneous
 .DS_Store
 Thumbs.db
+
+coverage/

CONTRIBUTING.md

@@ -69,7 +69,7 @@ If you are interested in the detailed specification you can visit https://www.co
 
 3. Make and commit your changes following the
    [commit convention](https://github.com/isBatak/ikona/blob/main/CONTRIBUTING.md#commit-convention). As you develop,
-   you can run `pnpm pkg <module> build` and `pnpm pkg <module> test` to make sure everything works as expected. Please
+   you can run `pnpm --filter=<module> build` and `pnpm --filter=<module> test` to make sure everything works as expected. Please
    note that you might have to run `pnpm boot` first in order to build all dependencies.
 
 4. Run `pnpm changeset` to create a detailed description of your changes. This will be used to generate a changelog when

jest.config.mjs

@@ -0,0 +1,11 @@
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
+/** @type {JestConfigWithTsJest} */
+export default {
+  preset: 'ts-jest/presets/default-esm',
+  testEnvironment: 'node',
+  testMatch: ['**/*.test.ts'],
+  prettierPath: require.resolve('prettier-2'),
+};

package.json

@@ -18,28 +18,37 @@
     "dev": "pnpm --parallel --filter=./packages/** dev",
     "build-fast": "pnpm -r --parallel --filter=./packages/** build-fast",
     "build": "pnpm -r --filter=./packages/** build",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "prettier": "prettier --check packages",
     "prettier-fix": "prettier --write packages",
     "typecheck": "tsc --noEmit",
     "changeset:version": "changeset version",
     "changeset:release": "changeset publish"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.9.0",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "eslint": "^8.57.0",
     "husky": "^8.0.3",
+    "jest": "^29.7.0",
     "lint-staged": "^15.1.0",
     "pkg": "^5.8.1",
     "prettier": "3.2.5",
+    "prettier-2": "npm:prettier@^2",
     "rimraf": "^5.0.5",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.4.5"
   },
   "dependencies": {
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1"
-  }
+  },
+  "type": "module"
 }

packages/cli/__tests__/fixtures/config.ts

@@ -0,0 +1,16 @@
+import { Config } from "../../src";
+
+export const configFixture: Config = {
+  outputDir: "output",
+  icons: {
+    inputDir: "icons",
+    spriteOutputDir: "output",
+    optimize: false, // TODO fix optimize
+    hash: true,
+  },
+  illustrations: {
+    inputDir: "illustrations",
+  },
+  force: false,
+  cwd: "",
+};

packages/cli/__tests__/fixtures/icons.tsx

@@ -0,0 +1,2 @@
+export const heartIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>';

packages/cli/__tests__/icons/context.test.ts

@@ -0,0 +1,30 @@
+import { createIconsContext } from "../../src/icons/context";
+
+describe("context", () => {
+  it("should generate valid context", () => {
+    const result = createIconsContext({
+      force: false,
+      outputDir: ".ikona",
+      verbose: true,
+      icons: {
+        inputDir: "src/assets/icons",
+        spriteOutputDir: "public/icons",
+        hash: true,
+        optimize: true,
+      },
+      cwd: "tmp/",
+    });
+
+    expect(result.inputDir).toBe("tmp/src/assets/icons");
+    expect(result.outputDir).toBe("tmp/.ikona");
+    expect(result.spriteOutputDir).toBe("tmp/public/icons");
+    expect(result.spriteFilepath).toBe("tmp/public/icons/sprite.svg");
+    expect(result.typesDir).toBe("tmp/.ikona/types");
+    expect(result.typeOutputFilepath).toBe("tmp/.ikona/types/icon-name.d.ts");
+    expect(result.iconsPath).toBe("tmp/.ikona/icons.ts");
+    expect(result.hashPath).toBe("tmp/.ikona/hash.ts");
+    expect(result.shouldOptimize).toBe(true);
+    expect(result.shouldHash).toBe(true);
+    expect(result.force).toBe(false);
+  });
+});

packages/cli/__tests__/icons/generate-icon-file.test.ts

@@ -0,0 +1,70 @@
+import { mockFs } from "../mock-fs";
+import { generateIconFiles } from "../../src/icons/generate-icon-files";
+import { createIconsContext } from "../../src/icons/context";
+import fs from "fs";
+import { addHashToSpritePath } from "../../src/utils/hash";
+import { heartIcon } from "../fixtures/icons";
+import { configFixture } from "../fixtures/config";
+
+describe("generateIconFiles", () => {
+  const context = createIconsContext(configFixture);
+
+  const files = ["icon1.svg", "icon2.svg"];
+
+  afterEach(() => {
+    mockFs.restore();
+  });
+
+  it("should generate icon files and write changes to the file system", async () => {
+    mockFs({
+      output: {
+        types: {},
+      },
+      "icons/icon1.svg": heartIcon,
+      "icons/icon2.svg": heartIcon,
+    });
+
+    const { hash } = await generateIconFiles({ files, context });
+
+    const spritePath = hash
+      ? addHashToSpritePath(context.spriteFilepath, hash)
+      : context.spriteFilepath;
+
+    const spriteContent = fs.readFileSync(spritePath, "utf-8");
+    expect(spriteContent).toMatchInlineSnapshot(`
+      "<?xml version="1.0" encoding="UTF-8"?>
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
+      <defs>
+      <symbol viewBox="0 0 24 24" id="icon1"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></symbol>
+      <symbol viewBox="0 0 24 24" id="icon2"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></symbol>
+      </defs>
+      </svg>
+      "
+    `);
+
+    const typesContent = fs.readFileSync(context.typeOutputFilepath, "utf-8");
+    expect(typesContent).toMatchInlineSnapshot(`
+      "export type IconName =
+        | 'icon1'
+        | 'icon2';
+      "
+    `);
+
+    const iconsContent = fs.readFileSync(context.iconsPath, "utf-8");
+    expect(iconsContent).toMatchInlineSnapshot(`
+      "import { IconName } from './types/icon-name';
+
+          export const icons = [
+            "icon1",
+            "icon2",
+          ] satisfies Array<IconName>;
+        "
+    `);
+
+    const hashContent = fs.readFileSync(context.hashPath, "utf-8");
+    expect(hashContent).toMatchInlineSnapshot(`
+      "export const hash = 'e110e913b4764cd18e8e4639dbc2a026';
+      "
+    `);
+  });
+});

packages/cli/__tests__/icons/get-icons-data.test.ts

@@ -0,0 +1,30 @@
+import { getIconsData } from "../../src/icons/get-icons-data";
+import { heartIcon } from "../fixtures/icons";
+import { mockFs } from "../mock-fs";
+
+describe("get-icons-data", () => {
+  afterEach(() => {
+    mockFs.restore();
+  });
+
+  it("should load icons data form the inputDir", async () => {
+    const fileName = "heart.svg";
+    const files = [fileName];
+    const inputDir = "path/to/inputDir";
+
+    mockFs({
+      [`${inputDir}/${fileName}`]: heartIcon,
+    });
+
+    const result = getIconsData(files, inputDir);
+
+    expect(result).toMatchInlineSnapshot(`
+      [
+        {
+          "content": "<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>",
+          "name": "heart",
+        },
+      ]
+    `);
+  });
+});

packages/cli/__tests__/icons/templates/hash.test.ts

@@ -0,0 +1,12 @@
+import { hashTemplate } from "../../../src/icons/templates/hash";
+
+describe("hash", () => {
+  it("should generate hash output", () => {
+    const result = hashTemplate("123456");
+
+    expect(result).toMatchInlineSnapshot(`
+        "export const hash = '123456';
+        "
+      `);
+  });
+});

packages/cli/__tests__/icons/templates/icons.test.ts

@@ -0,0 +1,20 @@
+import { iconsTemplate } from "../../../src/icons/templates/icons";
+
+describe("iconsTemplate", () => {
+  const iconNames = ["heart", "info", "edit"];
+
+  it("should generate icons output", () => {
+    const result = iconsTemplate(iconNames);
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { IconName } from './types/icon-name';
+
+          export const icons = [
+            heart,
+            info,
+            edit,
+          ] satisfies Array<IconName>;
+        "
+    `);
+  });
+});

packages/cli/__tests__/icons/templates/svg-sprite.test.ts

@@ -0,0 +1,29 @@
+import { svgSpriteTemplate } from "../../../src/icons/templates/svg-sprite";
+import { heartIcon } from "../../fixtures/icons";
+
+describe("svgSpriteTemplate", () => {
+  it("should generate sprite", () => {
+    const result = svgSpriteTemplate([
+      {
+        content: heartIcon,
+        name: "heart",
+      },
+    ]);
+
+    expect(result).toMatchInlineSnapshot(`
+      "<?xml version="1.0" encoding="UTF-8"?>
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
+      <defs>
+      <symbol viewBox="0 0 24 24" id="heart"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></symbol>
+      </defs>
+      </svg>
+      "
+    `);
+  });
+
+  it("should throw an error icons data is not SVG", () => {
+    expect(() =>
+      svgSpriteTemplate([{ content: "not svg", name: "heart" }])
+    ).toThrowErrorMatchingInlineSnapshot(`"No SVG element found"`);
+  });
+});

packages/cli/__tests__/icons/templates/type.test.ts

@@ -0,0 +1,17 @@
+import { typeTemplate } from "../../../src/icons/templates/type";
+
+describe("typeTemplate", () => {
+  const iconNames = ["heart", "info", "edit"];
+
+  it("should generate type output", () => {
+    const result = typeTemplate(iconNames);
+
+    expect(result).toMatchInlineSnapshot(`
+      "export type IconName =
+        | heart
+        | info
+        | edit;
+      "
+    `);
+  });
+});

packages/cli/__tests__/illustrations/templates/illustrations.test.ts

@@ -0,0 +1,20 @@
+import { illustrationsTemplate } from "../../../src/illustrations/templates/illustrations";
+
+describe("illustrationsTemplate", () => {
+  const illustrationNames = ["email", "book", "song"];
+
+  it("should generate illustrations template", () => {
+    const result = illustrationsTemplate(illustrationNames);
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { IllustrationPath } from './types/illustration-path';
+
+      export const illustrations = [
+          email,
+          book,
+          song,
+      ] satisfies Array<IllustrationPath>;
+      "
+    `);
+  });
+});

packages/cli/__tests__/illustrations/templates/paths.test.ts

@@ -0,0 +1,17 @@
+import { pathsTemplate } from "../../../src/illustrations/templates/paths";
+
+describe("pathsTemplate", () => {
+  const illustrationNames = ["email", "book", "song"];
+
+  it("should generate paths template", () => {
+    const result = pathsTemplate(illustrationNames);
+
+    expect(result).toMatchInlineSnapshot(`
+      "export type IllustrationPath =
+        | email
+        | book
+        | song;
+      "
+    `);
+  });
+});