🧪 Add tests for cn utility function

__tests__/utils.test.ts

@@ -0,0 +1,52 @@
+import { test, describe } from 'node:test';
+import assert from 'node:assert/strict';
+import { cn } from '../lib/utils';
+
+describe('cn utility function', () => {
+  test('combines basic classes correctly', () => {
+    assert.equal(cn('a', 'b', 'c'), 'a b c');
+  });
+
+  test('handles conditional classes', () => {
+    const condition = true;
+    const falseCondition = false;
+    assert.equal(cn('a', condition && 'b', falseCondition && 'c'), 'a b');
+  });
+
+  test('handles array inputs', () => {
+    assert.equal(cn(['a', 'b'], ['c', 'd']), 'a b c d');
+  });
+
+  test('handles object inputs', () => {
+    assert.equal(cn({ a: true, b: false, c: true }), 'a c');
+  });
+
+  test('handles mixed inputs (string, array, object)', () => {
+    assert.equal(
+      cn('a', ['b', 'c'], { d: true, e: false }, 'f'),
+      'a b c d f'
+    );
+  });
+
+  test('merges tailwind classes correctly (twMerge)', () => {
+    // p-4 and p-8 are conflicting padding classes, twMerge should keep the last one
+    assert.equal(cn('p-4', 'p-8'), 'p-8');
+
+    // text-red-500 and text-blue-500 are conflicting text color classes
+    assert.equal(cn('text-red-500', 'text-blue-500'), 'text-blue-500');
+
+    // bg-red-500 and hover:bg-blue-500 do not conflict directly but are related
+    assert.equal(
+      cn('bg-red-500 hover:bg-blue-500', 'bg-blue-500'),
+      'hover:bg-blue-500 bg-blue-500'
+    );
+  });
+
+  test('handles falsy values', () => {
+    assert.equal(cn('a', null, undefined, false, 0, '', 'b'), 'a b');
+  });
+
+  test('handles empty input', () => {
+    assert.equal(cn(), '');
+  });
+});

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "test": "tsx --test __tests__/**/*.test.ts"
   },
   "dependencies": {
     "@ai-sdk/google": "^3.0.53",
@@ -77,6 +78,7 @@
     "serwist": "^9.5.7",
     "shadcn": "^3.8.4",
     "tailwindcss": "^4",
+    "tsx": "^4.21.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "5.7.3"
   }

tsconfig.json

@@ -19,6 +19,7 @@
     "isolatedModules": true,
     "jsx": "react-jsx",
     "incremental": true,
+    "allowImportingTsExtensions": true,
     "plugins": [
       {
         "name": "next"