feat(react): added integration tests

Author: Vondry

package-lock.json

@@ -28,18 +28,21 @@
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.50.1",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/user-event": "^14.5.2",
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "@vitest/coverage-v8": "^2.0.2",
     "@vitest/ui": "^2.0.2",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
+    "cross-fetch": "^4.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^9.0.11",
     "jsdom": "^24.1.0",
+    "msw": "^2.3.1",
     "postcss": "^8.4.39",
     "prettier": "3.3.2",
     "tailwindcss": "^3.4.4",

package.json

@@ -0,0 +1,95 @@
+import { describe, expect, beforeAll, afterAll, test } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { todoServer } from 'shared-code/tests/server';
+import { GET_TODOS } from 'shared-code/tests/todos.fixtures';
+import { App } from './App';
+import { Providers } from './Providers';
+
+describe(App.name, () => {
+    beforeAll(() => {
+        todoServer.listen();
+    });
+
+    afterAll(() => {
+        todoServer.close();
+    });
+
+    test('all fetched todos are visible for the user', async () => {
+        render(
+            <Providers>
+                <App />
+            </Providers>
+        );
+
+        // Iterate over all todos, that the API returns
+        for (const todo of GET_TODOS) {
+            // find each item by it's description
+            const item = await screen.findByText(todo.description);
+
+            // check that item is in the document and it is visible for the user
+            expect(item).toBeVisible();
+        }
+    });
+
+    test('todo can be created', async () => {
+        render(
+            <Providers>
+                <App />
+            </Providers>
+        );
+        const newTodoDescription = 'I need to walk out my 🐕!';
+
+        await userEvent.type(
+            screen.getByLabelText('Enter your TODO description'),
+            newTodoDescription
+        );
+        await userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+
+        // Find the rendered item by specified test-id in the component
+        expect(await screen.findByText(newTodoDescription)).toBeInTheDocument();
+    });
+
+    test("todo can be completed by clicking on it's description", async () => {
+        render(
+            <Providers>
+                <App />
+            </Providers>
+        );
+
+        // Find todo item that is not yet completed
+        const uncompletedTodo = GET_TODOS.find((todo) => !todo.completed)!;
+
+        // Find the rendered item by specified test-id in the component
+        const component = await screen.findByTestId(`todo-${uncompletedTodo.id}`);
+
+        // Check that item is in fact uncompleted
+        expect(await within(component).findByTitle('Press to complete')).toBeInTheDocument();
+
+        // Click on the description, that should trigger completion request
+        await userEvent.click(await within(component).findByText(uncompletedTodo.description));
+
+        // Check that item is now completed
+        expect(await within(component).findByTitle('Press to uncomplete')).toBeInTheDocument();
+    });
+
+    test('todo can be deleted', async () => {
+        render(
+            <Providers>
+                <App />
+            </Providers>
+        );
+
+        // User chooses eg. first todo item that is going to be deleted
+        const firstTodo = GET_TODOS[0];
+
+        // Find the rendered item by specified test-id in the component
+        const component = await screen.findByTestId(`todo-${firstTodo.id}`);
+
+        // Click on the delete button, that should trigger deletion request
+        await userEvent.click(await within(component).findByText('Remove todo'));
+
+        // Check that item is no longer in the DOM (can not be found)
+        await expect(screen.findByText(firstTodo.description)).rejects.toThrow();
+    });
+});

packages/react/src/App.test.tsx

@@ -1,12 +1,12 @@
+import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { App } from './App';
 
 const queryClient = new QueryClient();
 
-export const Providers = () => (
+export const Providers = ({ children }: React.PropsWithChildren) => (
     <QueryClientProvider client={queryClient}>
-        <App />
+        {children}
         <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
 );

packages/react/src/Providers.tsx

@@ -10,7 +10,10 @@ type Props = {
 };
 
 export const TodoItem = ({ todo, onTodoCompleted, onTodoDelete }: Props) => (
-    <div className="flex gap-2 items-center justify-between border border-gray-400 dark:border-gray-500 rounded-lg px-2.5 py-2">
+    <div
+        data-testid={`todo-${todo.id}`}
+        className="flex gap-2 items-center justify-between border border-gray-400 dark:border-gray-500 rounded-lg px-2.5 py-2"
+    >
         <button
             className="flex gap-2 items-center cursor-pointer group px-2 py-2"
             onClick={() => onTodoCompleted(todo)}

packages/react/src/components/TodoItem.tsx

@@ -2,9 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Providers } from './Providers';
 import './index.css';
+import { App } from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <Providers />
+        <Providers>
+            <App />
+        </Providers>
     </React.StrictMode>
 );

packages/react/src/main.tsx

@@ -16,6 +16,13 @@ export const useCompleteTodoMutation = () => {
                 },
                 { completed: !todo.completed }
             ),
-        onSuccess: () => queryClient.refetchQueries({ queryKey: [QUERY_KEYS.GET_TODOS] })
+        onSuccess: (updatedTodo) => {
+            // Update query cache with the updated item returned from BE
+            return queryClient.setQueryData<Todo[]>([QUERY_KEYS.GET_TODOS], (cachedTodos) =>
+                cachedTodos?.map((cachedTodo) =>
+                    cachedTodo.id === updatedTodo.id ? updatedTodo : cachedTodo
+                )
+            );
+        }
     });
 };

packages/react/src/queries/useCompleteTodoMutation.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { customFetch } from 'shared-code/utils/fetch';
-import type { TodoDescription } from 'shared-code/models/Todo';
+import type { Todo, TodoDescription } from 'shared-code/models/Todo';
 import type { CreateTodoResponse } from 'shared-code/models/Api';
 import { QUERY_KEYS } from './queryKeys';
 
@@ -16,6 +16,11 @@ export const useCreateTodoMutation = () => {
                 },
                 { description: todoDescription }
             ),
-        onSuccess: () => queryClient.refetchQueries({ queryKey: [QUERY_KEYS.GET_TODOS] })
+        onSuccess: (createdTodo) => {
+            // Add created item to query cache if creation was successful
+            return queryClient.setQueryData<Todo[]>([QUERY_KEYS.GET_TODOS], (cachedTodos) =>
+                (cachedTodos ?? []).concat(createdTodo)
+            );
+        }
     });
 };

packages/react/src/queries/useCreateTodoMutation.ts

@@ -13,6 +13,13 @@ export const useDeleteTodoMutation = () => {
                 endpoint: `todos/${todo.id}`,
                 method: 'DELETE'
             }),
-        onSuccess: () => queryClient.refetchQueries({ queryKey: [QUERY_KEYS.GET_TODOS] })
+        onSuccess: (wasDeleted, deletedTodo) => {
+            if (wasDeleted) {
+                // Remove deleted item from query cache if deletion was successfully
+                return queryClient.setQueryData<Todo[]>([QUERY_KEYS.GET_TODOS], (cachedTodos) =>
+                    cachedTodos?.filter((cachedTodo) => cachedTodo.id !== deletedTodo.id)
+                );
+            }
+        }
     });
 };

packages/react/src/queries/useDeleteTodoMutation.ts

@@ -21,7 +21,10 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    // Add types support for @testing-library/jest-dom asserts like .toBeInTheDocument()
+    "types": ["@testing-library/jest-dom/vitest"]
   },
   "include": [
     "src"

packages/react/tsconfig.app.json

@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite';
+import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
@@ -7,6 +7,7 @@ export default defineConfig({
     // @ts-ignore
     test: {
         globals: true,
-        environment: 'jsdom'
+        environment: 'jsdom',
+        setupFiles: ['../shared-code/tests/setupTests.ts']
     }
 });

packages/react/vite.config.ts

@@ -0,0 +1,52 @@
+import {http, HttpResponse} from "msw";
+import {setupServer} from "msw/node";
+import {GET_TODOS} from "./todos.fixtures";
+import {GetTodosResponse, PatchTodoResponse, CreateTodoResponse, DeleteTodoResponse} from '../models/Api';
+
+// Simulates getting TODO from DB
+const findTodoById = (id: string) => GET_TODOS.find((todo) => todo.id === Number(id))!;
+
+export const todoServer = setupServer();
+
+const API = 'http://localhost:3000/todos';
+
+const handlers = [
+    // Getting TODOs
+    http.get<never, never, GetTodosResponse>(API, () => HttpResponse.json(GET_TODOS)),
+
+
+    // For creating TODO item
+    http.post<never, { description: string }, CreateTodoResponse>(API, async ({
+                                                                                  request,
+                                                                              }) => {
+        const {description} = await request.json();
+
+        return HttpResponse.json({
+            id: 100,
+            description,
+            completed: false,
+            created_at: new Date(),
+            updated_at: new Date()
+        })
+    }),
+
+    // For completing TODOs
+    http.patch<{ id: string }, { completed: boolean }, PatchTodoResponse>(`${API}/:id`, async ({
+                                                                                                   request,
+                                                                                                   params
+                                                                                               }) => {
+        const data = await request.json();
+        const {id} = params;
+        const todo = findTodoById(id);
+        return HttpResponse.json({...todo, ...data})
+    }),
+
+
+    // For completing TODOs
+    http.delete<{ id: string }, never, DeleteTodoResponse>(`${API}/:id`, () => {
+        // No logic for deletion is needed
+        return HttpResponse.json(true)
+    }),
+] as const;
+
+todoServer.use(...handlers);

packages/shared-code/tests/server.ts

@@ -0,0 +1,5 @@
+// Fixes `Reference error: Response` while using msw
+import 'cross-fetch/polyfill';
+
+// Adds support for DOM functions like expect().toBeInTheDocument()
+import '@testing-library/jest-dom/vitest';

packages/shared-code/tests/setupTests.ts

@@ -0,0 +1,25 @@
+import {GetTodosResponse} from "../models/Api";
+
+export const GET_TODOS: GetTodosResponse = [
+    {
+        id: 1,
+        description: "Finish the project report 📈",
+        completed: true,
+        created_at: new Date("2023-07-01T09:00:00Z"),
+        updated_at: new Date("2023-07-10T10:00:00Z")
+    },
+    {
+        id: 2,
+        description: "Book ✈️ tickets",
+        completed: false,
+        created_at: new Date("2023-06-15T08:30:00Z"),
+        updated_at: new Date("2023-06-16T11:45:00Z")
+    },
+    {
+        id: 3,
+        description: "Buy groceries 🥦🥕🥬🍅",
+        completed: false,
+        created_at: new Date("2023-07-10T14:00:00Z"),
+        updated_at: new Date("2023-07-10T14:30:00Z")
+    }
+] as const