adding test suites for UI

frontend/package.json

@@ -12,6 +12,7 @@
         "react-icons": "^5.3.0",
         "react-redux": "^9.1.2",
         "react-scripts": "5.0.1",
+        "redux-mock-store": "^1.5.4",
         "web-vitals": "^2.1.4"
     },
     "scripts": {

frontend/src/__tests__/coolTaskServiceTest.js

@@ -0,0 +1,49 @@
+import { createCoolTask, getCoolTasks } from '../features/cooltasks/services/coolTaskService'
+
+describe('coolTaskService', () => {
+    beforeEach(() => {
+        global.fetch = jest.fn()
+    })
+
+    afterEach(() => {
+        jest.resetAllMocks()
+    })
+
+    test('get tasks should fetch tasks successfully', async () => {
+        const mockTask = [{ id: 1, title: 'Task 1', description: 'Description' }]
+
+        global.fetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => mockTask
+        })
+
+        const tasks = await getCoolTasks()
+        expect(tasks).toEqual(mockTask)
+        expect(global.fetch).toHaveBeenCalledWith('/api/tasks')
+    })
+
+    test('get tasks should throw error when fetch fails', async () => {
+        global.fetch.mockResolvedValueOnce({ ok: false })
+        await expect(getCoolTasks()).rejects.toThrow('Failed to fetch tasks')
+    })
+    test('create task should post task successfully', async () => {
+        const mockTask = [{ id: 1, title: 'Task 1', description: 'Description' }]
+
+        global.fetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => mockTask
+        })
+
+        const createdTask = await createCoolTask(mockTask)
+        expect(createdTask).toEqual(mockTask)
+        expect(global.fetch).toHaveBeenCalledWith('/api/tasks', expect.any(Object))
+    })
+
+    test('create task should throw error when task creation fails', async () => {
+        global.fetch.mockResolvedValueOnce({ ok: false })
+
+        await expect(createCoolTask({ title: 'Task 1', description: 'Description' })).rejects.toThrow(
+            'Failed to create task'
+        )
+    })
+})

frontend/src/__tests__/coolTaskSliceTest.js

@@ -0,0 +1,55 @@
+import { configureStore } from '@reduxjs/toolkit'
+import coolTaskReducer, { fetchCoolTasks } from '../features/cooltasks/slices/coolTaskSlice'
+import * as coolTaskService from '../features/cooltasks/services/coolTaskService'
+
+jest.mock('../features/cooltasks/services/coolTaskService')
+
+describe('coolTaskSlice', () => {
+    let store
+
+    beforeEach(() => {
+        store = configureStore({
+            reducer: {
+                tasks: coolTaskReducer
+            }
+        })
+    })
+
+    test('should return the initial state', () => {
+        const initialState = {
+            coolTasks: [],
+            status: 'idle',
+            error: null
+        }
+
+        expect(store.getState().tasks).toEqual(initialState)
+    })
+
+    test('should handle fetch task pending', async () => {
+        const fetchPromise = store.dispatch(fetchCoolTasks())
+
+        expect(store.getState().tasks.status).toBe('loading')
+        await fetchPromise
+    })
+
+    test('should handle fetchTasks fulfilled', async () => {
+        const mockTasks = [{ id: 1, title: 'my test task', description: 'my test task description' }]
+        coolTaskService.getCoolTasks.mockResolvedValueOnce(mockTasks)
+
+        const fetchPromise = store.dispatch(fetchCoolTasks())
+        await fetchPromise
+
+        expect(store.getState().tasks.status).toBe('succeeded')
+        expect(store.getState().tasks.coolTasks).toEqual(mockTasks)
+    })
+
+    test('should handle fetchTasks rejected', async () => {
+        coolTaskService.getCoolTasks.mockRejectedValueOnce(new Error('API Error'))
+
+        const fetchPromise = store.dispatch(fetchCoolTasks())
+        await fetchPromise
+
+        expect(store.getState().tasks.status).toBe('failed')
+        expect(store.getState().tasks.error).toBe('API Error')
+    })
+})