bk

package.json

@@ -7,7 +7,7 @@
     "css": "tailwindcss --input ./src/styles/globals.css --output ./src/styles/output.css --watch",
     "build": "tailwindcss ./src/styles/globals.css --output ./src/styles/output.css && next build",
     "test:watch": "vitest watch",
-    "test": "vitest run",
+    "test": "vitest run --coverage",
     "start": "next start",
     "lint": "next lint"
   },

src/components/common/Card.test.tsx

@@ -0,0 +1,23 @@
+import { describe, expect, test } from 'vitest'
+import { render } from '@testing-library/react'
+import React from 'react'
+import { Card } from './Card'
+
+describe('Card', () => {
+  test('renders the card correctly', () => {
+    const { getByTestId } = render(
+      <Card title="Title" subtitle="Subtitle">
+        <div data-testid="children">Content</div>
+      </Card>,
+    )
+
+    expect(getByTestId('title')).toBeInTheDocument()
+    expect(getByTestId('title').textContent).toBe('Title')
+
+    expect(getByTestId('subtitle')).toBeInTheDocument()
+    expect(getByTestId('subtitle').textContent).toBe('Subtitle')
+
+    expect(getByTestId('children')).toBeInTheDocument()
+    expect(getByTestId('children').textContent).toBe('Content')
+  })
+})

src/components/common/Card.tsx

@@ -12,8 +12,10 @@ export function Card({ title, subtitle, children, ...props }: Props) {
   return (
     <CardTremor {...props}>
       <Title className="justify-between">
-        <span>{title}</span>
-        <span className="text-gray-500 text-sm">{subtitle}</span>
+        <span data-testid="title">{title}</span>
+        <span data-testid="subtitle" className="text-gray-500 text-sm">
+          {subtitle}
+        </span>
       </Title>
       {children}
     </CardTremor>

src/components/common/Logo.test.tsx

@@ -0,0 +1,15 @@
+import { describe, expect, test } from 'vitest'
+import { render } from '@testing-library/react'
+import React from 'react'
+import { Logo } from './Logo'
+import { config } from '@/config'
+
+describe('Logo', () => {
+  test('renders the logo correctly', () => {
+    const { getByText } = render(<Logo />)
+    const title = config.app.metadata.title.default
+
+    expect(getByText(title)).toBeInTheDocument()
+    expect(getByText(title).textContent).toBe(title)
+  })
+})

src/components/common/Modal.test.tsx

@@ -0,0 +1,59 @@
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import Modal from './Modal'
+import React from 'react'
+
+describe('Modal', () => {
+  describe('modal is open', () => {
+    const closeModalMock = vi.fn()
+
+    vi.mock('@/hooks/useModal', () => ({
+      useModal: () => ({
+        title: 'Title',
+        content: 'content...',
+        showModal: true,
+        closeBtnTitle: 'close',
+        closeModal: closeModalMock,
+      }),
+    }))
+
+    test('renders the modal correctly', () => {
+      render(<Modal />)
+
+      const buttom = screen.getByRole('button', { name: 'close' })
+      expect(buttom).toBeInTheDocument()
+
+      const title = screen.getByTestId('title')
+      expect(title).toBeInTheDocument()
+      expect(title.textContent).toBe('Title')
+
+      const content = screen.getByTestId('content')
+      expect(content).toBeInTheDocument()
+      expect(content.textContent).toBe('content...')
+    })
+
+    test('calls closeModal when the close button is clicked', () => {
+      render(<Modal />)
+
+      fireEvent.click(screen.getByRole('button'))
+
+      expect(closeModalMock).toHaveBeenCalled()
+    })
+  })
+
+  describe('modal is close', () => {
+    vi.mock('@/hooks/useModal', () => ({
+      useModal: () => ({
+        title: 'Title',
+        showModal: false,
+        closeBtnTitle: 'close',
+        closeModal: vi.fn(),
+      }),
+    }))
+
+    test('does not render the modal when showModal is false', () => {
+      const { container } = render(<Modal />)
+      expect(container.innerText).toBeUndefined()
+    })
+  })
+})

src/components/common/Modal.tsx

@@ -14,11 +14,19 @@ export default function Modal() {
             <div className="relative min-w-full p-12 my-6 mx-auto max-h-full lg:min-w-[50%] lg:max-w-[50%]">
               <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                 <div className="flex items-start justify-between p-4 border-b border-solid border-slate-200 rounded-t">
-                  <div className="text-gray-600 w-full text-xl font-semibold font-">
+                  <div
+                    data-testid="title"
+                    className="text-gray-600 w-full text-xl font-semibold font-"
+                  >
                     {title}
                   </div>
                 </div>
-                <div className="relative p-4 text-slate-600">{content}</div>
+                <div
+                  data-testid="content"
+                  className="relative p-4 text-slate-600"
+                >
+                  {content}
+                </div>
                 <div className="flex items-center justify-end p-4 border-t border-solid border-slate-200 rounded-b">
                   <Button onClick={closeModal}>{closeBtnTitle}</Button>
                 </div>

src/components/common/Term.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, test, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import { Term } from './Term'
+import React from 'react'
+
+const openModalMock = vi.fn()
+
+vi.mock('@/hooks/useModal', () => ({
+  useModal: () => ({
+    openModal: openModalMock,
+  }),
+}))
+
+describe('Term', () => {
+  test('calls openModal when the term is rendered', () => {
+    render(<Term />)
+    expect(openModalMock).toHaveBeenCalled()
+  })
+})

src/components/common/Title.test.tsx

@@ -0,0 +1,25 @@
+import { afterEach, describe, expect, test } from 'vitest'
+import { cleanup, render } from '@testing-library/react'
+import { Title } from './Title'
+import React from 'react'
+
+describe('Title', () => {
+  afterEach(cleanup)
+
+  test('renders the title correctly', () => {
+    const { getByTestId } = render(
+      <Title>
+        <div data-testid="children">Title Text</div>
+      </Title>,
+    )
+    expect(getByTestId('children')).toBeInTheDocument()
+    expect(getByTestId('children').textContent).toBe('Title Text')
+  })
+
+  test('applies additional class names correctly', () => {
+    const { getByText } = render(
+      <Title className="custom-class">Title Text</Title>,
+    )
+    expect(getByText('Title Text')).toHaveClass('custom-class')
+  })
+})

src/components/common/TooltipHelper.test.tsx

@@ -0,0 +1,33 @@
+import { afterEach, describe, expect, test, vi } from 'vitest'
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import { TooltipHelper } from './TooltipHelper'
+import React from 'react'
+
+const openModalMock = vi.fn()
+vi.mock('@/hooks/useModal', () => ({
+  useModal: () => ({
+    openModal: openModalMock,
+  }),
+}))
+
+describe('TooltipHelper', () => {
+  afterEach(cleanup)
+
+  test('renders the tooltip correctly', () => {
+    const { getByRole } = render(
+      <TooltipHelper title="Title" content="content..." />,
+    )
+
+    const buttom = getByRole('button')
+    expect(buttom).toBeInTheDocument()
+  })
+
+  test('opens the modal when the button is clicked', () => {
+    const { getByRole } = render(
+      <TooltipHelper title="Title" content="content..." />,
+    )
+
+    fireEvent.click(getByRole('button'))
+    expect(openModalMock).toHaveBeenCalled()
+  })
+})

src/components/common/TooltipHelper.tsx

@@ -8,7 +8,7 @@ type HelperTitleProps = {
   title: string
 }
 
-export function HelperTitle({ title }: HelperTitleProps) {
+function HelperTitle({ title }: HelperTitleProps) {
   return (
     <div className="flex justify-between">
       {title}
@@ -28,6 +28,7 @@ export function TooltipHelper({ title, content }: TooltipHelperProps) {
   return (
     <div>
       <button
+        data-testid="tooltip-button"
         onClick={() => openModal({ content, title: HelperTitle({ title }) })}
       >
         <QuestionMarkCircleIcon className="text-blue-500 w-5" />

tsconfig.json

@@ -21,8 +21,8 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "vitest.config.mjs"],
-  "exclude": ["node_modules", ".old"]
+  "exclude": ["node_modules"]
 }