From af4fcb9dc81a91fdfc7b55b0367a4c92ca7846ae Mon Sep 17 00:00:00 2001
From: "Deepak Pradhan (Varun)" <37866666+varun2948@users.noreply.github.com>
Date: Tue, 20 Feb 2024 17:32:00 +0545
Subject: [PATCH] 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                     |  5 +-
 .../src/components/__test__/Button.test.jsx   | 69 +++++++++++++++++++
 src/frontend/src/components/common/Button.tsx |  1 +
 src/frontend/src/sum.js                       |  3 +
 src/frontend/tests/App.test.jsx               |  8 +++
 src/frontend/tests/App.test.tsx               | 38 ----------
 src/frontend/tests/CreateProject.test.tsx     | 20 ------
 src/frontend/tsconfig.json                    |  2 +-
 src/frontend/vite.config.ts                   |  1 +
 9 files changed, 87 insertions(+), 60 deletions(-)
 create mode 100644 src/frontend/src/components/__test__/Button.test.jsx
 create mode 100644 src/frontend/src/sum.js
 create mode 100644 src/frontend/tests/App.test.jsx
 delete mode 100644 src/frontend/tests/App.test.tsx
 delete mode 100644 src/frontend/tests/CreateProject.test.tsx

diff --git a/src/frontend/package.json b/src/frontend/package.json
index ac9f85ee11..c192510b6d 100755
--- a/src/frontend/package.json
+++ b/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",
diff --git a/src/frontend/src/components/__test__/Button.test.jsx b/src/frontend/src/components/__test__/Button.test.jsx
new file mode 100644
index 0000000000..68fd096221
--- /dev/null
+++ b/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',
+      );
+    });
+  });
+});
diff --git a/src/frontend/src/components/common/Button.tsx b/src/frontend/src/components/common/Button.tsx
index 79b81319fa..90028649dd 100644
--- a/src/frontend/src/components/common/Button.tsx
+++ b/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(
diff --git a/src/frontend/src/sum.js b/src/frontend/src/sum.js
new file mode 100644
index 0000000000..506a413438
--- /dev/null
+++ b/src/frontend/src/sum.js
@@ -0,0 +1,3 @@
+export function sum(a, b) {
+  return a + b;
+}
diff --git a/src/frontend/tests/App.test.jsx b/src/frontend/tests/App.test.jsx
new file mode 100644
index 0000000000..ffff8d275c
--- /dev/null
+++ 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);
+  });
+});
diff --git a/src/frontend/tests/App.test.tsx b/src/frontend/tests/App.test.tsx
deleted file mode 100644
index c4a646e076..0000000000
--- a/src/frontend/tests/App.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import MainView from '@/views/MainView';
-import { store } from '@/store/Store';
-import { renderWithRouter } from '@/utilfunctions/testUtils';
-import { Provider } from 'react-redux';
-import { expect, test, it, describe } from 'vitest';
-
-describe('Frontend Application Running', () => {
-  it('renders App.jsx without errors', () => {
-    // Render the App component in a virtual DOM environment
-    const { container } = renderWithRouter(
-      <Provider store={store}>
-        <MainView />
-      </Provider>,
-    );
-
-    // Assert that the component renders without any errors
-    expect(container).toBeDefined();
-  });
-});
-describe('MyComponent', () => {
-  test('renders the app bar with correct elements', () => {
-    renderWithRouter(
-      <Provider store={store}>
-        <MainView />
-      </Provider>,
-    );
-
-    // Check if the "EXPLORE PROJECTS" tab is rendered
-    const exploreTabElement = screen.getByText('EXPLORE PROJECTS');
-    expect(exploreTabElement).toBeInTheDocument();
-
-    // Check if the "MANAGE ORGANIZATIONS" tab is rendered
-    const manageOrgTabElement = screen.getByText('MANAGE ORGANIZATIONS');
-    expect(manageOrgTabElement).toBeInTheDocument();
-  });
-});
diff --git a/src/frontend/tests/CreateProject.test.tsx b/src/frontend/tests/CreateProject.test.tsx
deleted file mode 100644
index 92928b3820..0000000000
--- a/src/frontend/tests/CreateProject.test.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import MainView from '@/views/MainView';
-import { Provider } from 'react-redux';
-import { store } from '@/store/Store';
-import { renderWithRouter } from '@/utilfunctions/testUtils';
-import { expect, it, describe } from 'vitest';
-
-describe('Frontend Application Running', () => {
-  it('renders App.jsx without errors', () => {
-    // Render the App component in a virtual DOM environment
-    const { container } = renderWithRouter(
-      <Provider store={store}>
-        <MainView />
-      </Provider>,
-    );
-
-    // Assert that the component renders without any errors
-    expect(container).toBeDefined();
-  });
-});
diff --git a/src/frontend/tsconfig.json b/src/frontend/tsconfig.json
index 66ee59f81c..712ca4b0d1 100644
--- a/src/frontend/tsconfig.json
+++ b/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,
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index 3513f2a70f..48e4c277ee 100644
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -20,6 +20,7 @@ export default defineConfig({
     },
   },
   test: {
+    globals: true,
     environment: 'jsdom',
     setupFiles: './setupTests.ts',
   },