test (frontend): case config, add test cases (#1231)

* feat: Test cases configuration changes for vitest

* feat(Test): Button test cases added with docstring

* feat(Testcases): added a small test cases to check if test is working

src/frontend/package.json

@@ -7,7 +7,10 @@
     "build:start": "cd dist && PORT=8080 npx serve",
     "start": "env-cmd -f .env.dev vite dev",
     "start:live": "vite dev",
-    "test": "vitest tests/",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
     "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx src"
   },
   "license": "GPL-3.0-only",

src/frontend/src/components/__test__/Button.test.jsx

@@ -0,0 +1,69 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Button from '../common/Button';
+import { useState } from 'react';
+
+describe('Button', () => {
+  test('renders', () => {
+    render(<Button btnText="NEXT" />);
+    expect(screen.getByText('NEXT')).toBeDefined();
+  });
+  /**
+   * Test suite for the Button component
+   */
+  describe('Button', () => {
+    /**
+     * Test to verify that the Button component renders with the correct text
+     */
+    test('renders', () => {
+      render(<Button btnText="NEXT" />);
+      expect(screen.getByText('NEXT')).toBeDefined();
+    });
+
+    /**
+     * Test to verify that the count increases when the button is clicked
+     */
+    test('should increase count by 1', () => {
+      // Arrange
+      const ButtonWithCount = () => {
+        const [count, setCount] = useState(0);
+        return (
+          <>
+            <div data-testid="count">{count}</div>
+
+            <Button btnText="Click" onClick={() => setCount(count + 1)} />
+          </>
+        );
+      };
+
+      // Act
+      render(<ButtonWithCount />);
+
+      const count = screen.getByTestId('count');
+      const button = screen.getByText('Click');
+
+      fireEvent.click(button);
+
+      // Assert
+      expect(count.textContent).toBe('1');
+    });
+
+    /**
+     * Test to verify that the Button component renders a count element if provided
+     */
+    it('should render a count element if provided', () => {
+      render(<Button btnText="Test Button" count={5} />);
+      expect(screen.getByText('5')).toBeInTheDocument();
+    });
+
+    /**
+     * Test to verify the styling of the Button component based on the btnType prop
+     */
+    it("should render a button with a red border and text if btnType prop is 'other'", () => {
+      render(<Button btnText="Test Button" btnType="other" />);
+      expect(screen.getByTestId('test-button')).toHaveClass(
+        'fmtm-py-1 fmtm-px-4 fmtm-text-red-600 fmtm-rounded-lg fmtm-border-[1px] fmtm-border-red-600 hover:fmtm-text-red-700 hover:fmtm-border-red-700',
+      );
+    });
+  });
+});

src/frontend/src/components/common/Button.tsx

@@ -46,6 +46,7 @@ const Button = ({
 }: IButton) => (
   <div className="fmtm-w-fit">
     <button
+      data-testid="test-button"
       type={type === 'submit' ? 'submit' : 'button'}
       onClick={onClick}
       className={`fmtm-text-lg fmtm-group fmtm-flex fmtm-items-center fmtm-gap-2 ${btnStyle(

src/frontend/src/sum.js

@@ -0,0 +1,3 @@
+export function sum(a, b) {
+  return a + b;
+}

src/frontend/tests/App.test.jsx

@@ -0,0 +1,8 @@
+import { sum } from '../src/sum';
+import { describe, expect, test } from 'vitest';
+
+describe('Test', () => {
+  test('adds 1 + 2 to equal 3', () => {
+    expect(sum(1, 2)).toBe(3);
+  });
+});

src/frontend/tsconfig.json

@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
-    "checkJs": false,
+    "checkJs": true,
     "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,

src/frontend/vite.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
     },
   },
   test: {
+    globals: true,
     environment: 'jsdom',
     setupFiles: './setupTests.ts',
   },