chore: test case & coverage setup for todo app with vitest

examples/apps/todo/web/react-vite-tailwind/package.json

@@ -7,7 +7,8 @@
     "dev": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest --coverage"
   },
   "dependencies": {
     "axios": "^1.6.5",
@@ -18,18 +19,25 @@
     "react-icons": "^5.0.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.2.1",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^23.2.0",
+    "msw": "^2.1.2",
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
-    "vite": "^5.0.12"
+    "vite": "^5.0.12",
+    "vitest": "^1.2.1"
   }
 }

examples/apps/todo/web/react-vite-tailwind/src/App.test.tsx

@@ -0,0 +1,16 @@
+import App from "./App";
+import { render, screen, userEvent } from "./utils/test-utils";
+
+describe("App component", () => {
+  it("should render header component", () => {
+    render(<App />);
+    const headerTitle = screen.getByText("All todos");
+    expect(headerTitle).toBeInTheDocument();
+  });
+
+  it("should open dialog on click of Create new", async () => {
+    render(<App />);
+    userEvent.click(screen.getByTestId("create-new-btn"));
+    expect(await screen.findAllByText(/Create A New Task/i)).toBeTruthy();
+  });
+});

examples/apps/todo/web/react-vite-tailwind/src/components/Header.tsx

@@ -5,7 +5,7 @@ const Header = ({ openTodoModal }: { openTodoModal: () => void }) => {
   return (
     <div className="sticky top-0 z-10 mx-auto flex w-full max-w-full items-center justify-between border-b-[1px] border-b-slate-300 bg-black/75 backdrop-blur-sm p-4 text-white lg:px-10">
       <h1 className="text-xl font-extrabold md:text-3xl">All todos</h1>
-      <Button onClick={openTodoModal} className="border-[1px] border-white">
+      <Button data-testid="create-new-btn" onClick={openTodoModal} className="border-[1px] border-white">
         <FaCirclePlus />
         Create new
       </Button>

examples/apps/todo/web/react-vite-tailwind/src/test/mocks/handlers.ts

@@ -0,0 +1,41 @@
+import { HttpResponse, http } from "msw";
+
+// Mock Data
+export const todos = [
+  {
+    _id: "65ad0a17fde2eb089b1fdcc3",
+    title: "Vitae veritatis quod.",
+    description:
+      "Blanditiis dicta rerum delectus harum esse. Quasi voluptates tempore accusamus quae architecto dolor nisi velit molestias. Incidunt praesentium nam inventore blanditiis nam. Magni quae harum. Doloremque adipisci ducimus. Tempore suscipit fuga provident possimus cum velit dolorem autem. Rem odio cumque nesciunt. Tempora dicta sint modi soluta voluptates consectetur eos tempora enim. Nesciunt veniam iusto aliquid maiores at repellat dolor est. Distinctio ullam occaecati consequuntur incidunt assumenda.",
+    isComplete: false,
+    __v: 0,
+    createdAt: "2024-01-21T12:12:07.392Z",
+    updatedAt: "2024-01-21T12:12:07.392Z",
+  },
+  {
+    _id: "65ad0a17fde2eb089b1fdcc4",
+    title: "Culpa praesentium blanditiis.",
+    description:
+      "Occaecati eius voluptatem corporis quasi incidunt. Dolores dolorum eum molestias culpa tempore. Asperiores eos nostrum doloremque blanditiis sed doloribus ipsam totam perferendis. Laborum accusamus incidunt enim quisquam ea quis modi beatae. Similique in voluptate neque aliquam deleniti laborum. Ex cum ab doloribus quasi quas. Possimus consequatur quae. Inventore quibusdam saepe officiis repellendus blanditiis odio. Possimus fugiat quidem perferendis tempore at soluta unde voluptate. Dicta non ipsam dolores quo. Numquam alias soluta placeat minima occaecati pariatur. Vitae quidem consequuntur pariatur voluptatibus laboriosam in fuga ut. Corrupti dolores perspiciatis animi alias odio. Eos nulla consequatur eaque consectetur fuga beatae at.",
+    isComplete: true,
+    __v: 0,
+    createdAt: "2024-01-21T12:12:07.392Z",
+    updatedAt: "2024-01-21T12:12:07.392Z",
+  },
+  {
+    _id: "65ad0a17fde2eb089b1fdcc5",
+    title: "Quos quisquam totam.",
+    description:
+      "Corporis officia eius. Assumenda accusamus corrupti tenetur quam. Alias cupiditate perferendis molestias possimus. Consequuntur odit architecto repellendus aliquid doloremque dicta. Provident illo culpa provident explicabo. Totam numquam dolor reiciendis. Ipsum asperiores iste saepe. Hic minus blanditiis animi exercitationem voluptatibus quaerat. A architecto similique in officiis aspernatur deserunt quibusdam quae eum. Eum explicabo eius ipsum fugiat voluptatem. Est fuga distinctio. Repellendus deserunt nam fugit sit exercitationem assumenda sunt. Dolores architecto at. Harum deleniti quod iste. Quo facere ea quam consequatur.",
+    isComplete: false,
+    __v: 0,
+    createdAt: "2024-01-21T12:12:07.392Z",
+    updatedAt: "2024-01-21T12:12:07.392Z",
+  },
+];
+
+export const handlers = [
+  http.get(`${import.meta.env.VITE_SERVER_URL}/todos`, () => {
+    return HttpResponse.json(todos, { status: 200 });
+  }),
+];

examples/apps/todo/web/react-vite-tailwind/src/test/mocks/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)

examples/apps/todo/web/react-vite-tailwind/src/test/setup.ts

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom';
+import {server} from './mocks/server';
+
+beforeAll(() => server.listen({onUnhandledRequest: 'error'}));
+afterAll(() => server.close());
+afterEach(() => server.resetHandlers());

examples/apps/todo/web/react-vite-tailwind/src/utils/test-utils.tsx

@@ -0,0 +1,19 @@
+import { cleanup, render } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+  cleanup()
+})
+
+function customRender(ui: React.ReactElement, options = {}) {
+  return render(ui, {
+    // wrap provider(s) here if needed
+    wrapper: ({ children }) => children,
+    ...options,
+  })
+}
+
+export * from '@testing-library/react'
+export { default as userEvent } from '@testing-library/user-event'
+// override render export
+export { customRender as render }

examples/apps/todo/web/react-vite-tailwind/tsconfig.json

@@ -18,8 +18,11 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    /* Testing */
+    "types": ["vitest/globals"]
   },
-  "include": ["src"],
+  "include": ["src", ".src/test/setup.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

examples/apps/todo/web/react-vite-tailwind/vite.config.ts

@@ -1,3 +1,6 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 
@@ -8,4 +11,9 @@ export default defineConfig({
     host: "localhost",
     port: 3000,
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+  },
 });