Add tests (#1)

* feat: Add vitest

* feat: Add tests for main functions

* refactor: Move test files to test folder

* Add throw error checking

Author: arkarlov

package-lock.json

@@ -33,15 +33,16 @@
   },
   "scripts": {
     "build": "tsup",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "vitest --config vitest.config.ts"
   },
   "dependencies": {
     "@emotion/unitless": "^0.10.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.5",
     "tsup": "^8.3.0",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.2",
+    "vitest": "^2.1.1"
   },
   "engines": {
     "node": ">=14.0.0"

package.json

@@ -0,0 +1,80 @@
+import { describe, it, expect } from "vitest";
+
+import { stringifyCSSProperties } from "../stringifyCSSProperties";
+
+describe("stringifyCSSProperties", () => {
+  it("returns string", () => {
+    expect(stringifyCSSProperties({ color: "teal" })).toBeTypeOf("string");
+  });
+
+  it("returns empty string for empty object input", () => {
+    expect(stringifyCSSProperties({})).toBe("");
+  });
+
+  it("throws error for string input", () => {
+    //@ts-ignore
+    expect(() => stringifyCSSProperties("")).toThrowError(
+      "Invalid input: 'cssProperties' must be an object."
+    );
+  });
+
+  it("throws error for 'null' input", () => {
+    //@ts-ignore
+    expect(() => stringifyCSSProperties(null)).toThrowError(
+      "Invalid input: 'cssProperties' must be an object."
+    );
+  });
+
+  it("throws error for wrong CSS-value", () => {
+    expect(() =>
+      //@ts-ignore
+      stringifyCSSProperties({ color: { color: "teal" } })
+    ).toThrowError(
+      "Invalid input: value of 'cssProperties' must be string or number."
+    );
+  });
+
+  it("doesn't change string CSS-value", () => {
+    const expected = "color:teal; margin:20rem; padding:5px 10px;";
+    const actual = stringifyCSSProperties({
+      color: "teal",
+      margin: "20rem",
+      padding: "5px 10px",
+    });
+
+    expect(actual).toBe(expected);
+  });
+
+  it("converts CSS-prop name from camel to kebab case", () => {
+    const expected =
+      "margin-bottom:20px; background-color:teal; border-radius:30rem; font-family:sans-serif;";
+    const actual = stringifyCSSProperties({
+      marginBottom: "20px",
+      backgroundColor: "teal",
+      borderRadius: "30rem",
+      fontFamily: "sans-serif",
+    });
+
+    expect(actual).toBe(expected);
+  });
+
+  it("adds 'px' to numeric CSS-value", () => {
+    const expected = "margin:20px; padding:5px;";
+    const actual = stringifyCSSProperties({ margin: 20, padding: 5 });
+
+    expect(actual).toBe(expected);
+  });
+
+  it("doesn't add 'px' to unitless CSS-prop and '0' CSS-value", () => {
+    const expected = "z-index:20; flex:1; opacity:0.5; margin:0; padding:0;";
+    const actual = stringifyCSSProperties({
+      zIndex: 20,
+      flex: 1,
+      opacity: 0.5,
+      margin: 0,
+      padding: 0,
+    });
+
+    expect(actual).toBe(expected);
+  });
+});

src/__tests__/stringifyCSSProperties.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+
+import { stringifyStyleMap } from "../stringifyStyleMap";
+
+describe("stringifyStyleMap", () => {
+  const cssProperties = { color: "teal" };
+
+  it("returns string", () => {
+    expect(stringifyStyleMap({ ".class": cssProperties })).toBeTypeOf("string");
+  });
+
+  it("returns empty string for empty object input", () => {
+    expect(stringifyStyleMap({})).toBe("");
+  });
+
+  it("throws error for string input", () => {
+    //@ts-ignore
+    expect(() => stringifyStyleMap("")).toThrowError(
+      "Invalid input: 'styleMap' must be an object."
+    );
+  });
+
+  it("throws error for 'null' input", () => {
+    //@ts-ignore
+    expect(() => stringifyStyleMap(null)).toThrowError(
+      "Invalid input: 'styleMap' must be an object."
+    );
+  });
+
+  it("doesn't change CSS-selector string", () => {
+    const expected =
+      "header{color:teal;} .className{color:teal;} body ul > li{color:teal;}";
+    const actual = stringifyStyleMap({
+      header: cssProperties,
+      ".className": cssProperties,
+      "body ul > li": cssProperties,
+    });
+
+    expect(actual).toBe(expected);
+  });
+
+  // TODO: add reducing feature to stringifyStyleMap
+  it("doesn't reduce styles for empty cssProperties", () => {
+    const expected = "header{color:teal;} main{} footer{color:teal;}";
+    const actual = stringifyStyleMap({
+      header: cssProperties,
+      main: {},
+      footer: cssProperties,
+    });
+
+    expect(actual).toBe(expected);
+  });
+});

src/__tests__/stringifyStyleMap.test.ts

@@ -7,7 +7,7 @@ export function applyCssUnits(
 ) {
   if (typeof value !== "string" && typeof value !== "number") {
     throw new Error(
-      "Invalid input: value of 'cssProperties' must be an string or number."
+      "Invalid input: value of 'cssProperties' must be string or number."
     );
   }
 

src/utils/applyCssUnits.ts

@@ -108,5 +108,5 @@
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
   },
   "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "src/**/*.test.ts"]
 }

tsconfig.json

@@ -0,0 +1,15 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    include: ["**/*.{test,spec}.?(c|m)[jt]s?(x)"],
+    exclude: [
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/cypress/**",
+      "**/.{idea,git,cache,output,temp}/**",
+      "**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*",
+    ],
+  },
+});