test: add Vitest + React Testing Library, initial tests for resolveImageUrl, extractErrorMessages, PasswordStrength

Author: codebyrashel

apps/web/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "vitest run"
   },
   "dependencies": {
     "next": "16.2.10",
@@ -14,10 +15,16 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.5",
+    "jsdom": "^30.0.1",
     "tailwindcss": "^4",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vitest": "^4.1.10"
   }
 }

apps/web/src/components/password-strength.test.tsx

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { PasswordStrength } from './password-strength';
+
+describe('PasswordStrength', () => {
+  it('renders nothing when password is empty', () => {
+    const { container } = render(<PasswordStrength password="" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('shows "Too short" for a password under 8 characters', () => {
+    render(<PasswordStrength password="abc123" />);
+    expect(screen.getByText('Too short')).toBeInTheDocument();
+  });
+
+  it('shows a stronger label for a long, mixed-character password', () => {
+    render(<PasswordStrength password="Str0ng!Password99" />);
+    expect(screen.getByText('Strong')).toBeInTheDocument();
+  });
+});

apps/web/src/lib/error-message.test.ts

@@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import { extractErrorMessages } from './error-message';
+
+describe('extractErrorMessages', () => {
+  it('returns a single message wrapped in an array', () => {
+    expect(extractErrorMessages({ message: 'Invalid credentials' })).toEqual([
+      'Invalid credentials',
+    ]);
+  });
+
+  it('returns an array of messages as-is', () => {
+    const body = { message: ['Username taken', 'Password too short'] };
+    expect(extractErrorMessages(body)).toEqual([
+      'Username taken',
+      'Password too short',
+    ]);
+  });
+
+  it('falls back to a generic message for unexpected shapes', () => {
+    expect(extractErrorMessages(null)).toEqual(['Something went wrong']);
+    expect(extractErrorMessages({})).toEqual(['Something went wrong']);
+    expect(extractErrorMessages('a plain string')).toEqual([
+      'Something went wrong',
+    ]);
+  });
+});

apps/web/src/lib/resolve-image-url.test.ts

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { resolveImageUrl } from './resolve-image-url';
+
+describe('resolveImageUrl', () => {
+  it('returns null when given null', () => {
+    expect(resolveImageUrl(null)).toBeNull();
+  });
+
+  it('passes through an absolute https URL unchanged', () => {
+    const url = 'https://s3.us-west-004.backblazeb2.com/bucket/key?sig=abc';
+    expect(resolveImageUrl(url)).toBe(url);
+  });
+
+  it('passes through an absolute http URL unchanged', () => {
+    const url = 'http://localhost:9000/bucket/key';
+    expect(resolveImageUrl(url)).toBe(url);
+  });
+
+  it('prefixes a relative path with the API base URL', () => {
+    process.env.NEXT_PUBLIC_API_URL = 'http://localhost:3000';
+    expect(resolveImageUrl('/local-storage/users/1/file.jpg')).toBe(
+      'http://localhost:3000/local-storage/users/1/file.jpg',
+    );
+  });
+});

apps/web/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});

apps/web/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package.json

@@ -5,6 +5,6 @@
   "scripts": {
     "lint": "pnpm --filter api run lint && pnpm --filter web run lint",
     "build": "pnpm --filter api run build && pnpm --filter web run build",
-    "test": "pnpm --filter api run test"
+    "test": "pnpm --filter api run test && pnpm --filter web run test"
   }
 }