test: implement unit tests for urlLoads utility

Signed-off-by: Ashis Kumar Naik <ashishami2002@gmail.com>

package.json

@@ -8,7 +8,9 @@
     "build": "vite build",
     "build:dev": "vite build --mode development",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
@@ -73,16 +75,19 @@
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitest/ui": "^3.2.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "globals": "^15.9.0",
+    "jsdom": "^26.1.0",
     "lovable-tagger": "^1.1.7",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.11",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.1"
+    "vite": "^5.4.1",
+    "vitest": "^3.2.4"
   }
 }

src/lib/utils/urlLoads.test.ts

@@ -0,0 +1,125 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { urlLoads } from './urlLoads'
+
+// Mock fetch globally
+const mockFetch = vi.fn()
+global.fetch = mockFetch
+
+describe('urlLoads', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.clearAllTimers()
+  })
+
+  it('returns false on 404', async () => {
+    // Mock fetch to return a 404 response
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 404,
+    })
+
+    const result = await urlLoads('https://example.com/nonexistent.jpg')
+
+    expect(result).toBe(false)
+    expect(mockFetch).toHaveBeenCalledWith('https://example.com/nonexistent.jpg', {
+      method: 'HEAD',
+      signal: expect.any(AbortSignal),
+      cache: 'no-cache'
+    })
+  })
+
+  it('returns true on successful response (200)', async () => {
+    // Mock fetch to return a successful response
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+    })
+
+    const result = await urlLoads('https://example.com/image.jpg')
+
+    expect(result).toBe(true)
+    expect(mockFetch).toHaveBeenCalledWith('https://example.com/image.jpg', {
+      method: 'HEAD',
+      signal: expect.any(AbortSignal),
+      cache: 'no-cache'
+    })
+  })
+
+  it('returns false on network error', async () => {
+    // Mock fetch to throw a network error
+    mockFetch.mockRejectedValueOnce(new Error('Network error'))
+
+    const result = await urlLoads('https://example.com/image.jpg')
+
+    expect(result).toBe(false)
+  })
+
+  it('returns false on abort signal', async () => {
+    // Mock fetch to reject with AbortError (simulating timeout)
+    const abortError = new Error('The operation was aborted')
+    abortError.name = 'AbortError'
+    mockFetch.mockRejectedValueOnce(abortError)
+
+    const result = await urlLoads('https://example.com/image.jpg', 1000)
+
+    expect(result).toBe(false)
+  })
+
+  it('returns true for other successful status codes (e.g., 201, 301)', async () => {
+    // Test 201 Created
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 201,
+    })
+
+    const result201 = await urlLoads('https://example.com/created.jpg')
+    expect(result201).toBe(true)
+
+    // Test 301 Moved Permanently
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 301,
+    })
+
+    const result301 = await urlLoads('https://example.com/moved.jpg')
+    expect(result301).toBe(true)
+  })
+
+  it('returns false for other error status codes (e.g., 403, 500)', async () => {
+    // Test 403 Forbidden
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 403,
+    })
+
+    const result403 = await urlLoads('https://example.com/forbidden.jpg')
+    expect(result403).toBe(false)
+
+    // Test 500 Internal Server Error
+    mockFetch.mockResolvedValueOnce({
+      ok: false,
+      status: 500,
+    })
+
+    const result500 = await urlLoads('https://example.com/error.jpg')
+    expect(result500).toBe(false)
+  })
+
+  it('calls fetch with correct parameters', async () => {
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+    })
+
+    await urlLoads('https://example.com/test.jpg', 3000)
+
+    expect(mockFetch).toHaveBeenCalledWith('https://example.com/test.jpg', {
+      method: 'HEAD',
+      signal: expect.any(AbortSignal),
+      cache: 'no-cache'
+    })
+  })
+})

vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config'
+import { resolve } from 'path'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+  },
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+})