Merge pull request #424 from bounswe/feature/FE-jest-test

Add Jest Test for News and Dashboard

frontend/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

frontend/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+      '@babel/preset-env',
+      ['@babel/preset-react', {runtime: 'automatic'}],
+    ],
+  };

frontend/jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    transform: {
+      '^.+\\.[jt]sx?$': 'babel-jest', // Transform JS, JSX, TS, and TSX files
+    },
+    moduleNameMapper: {
+      '\\.(css|less|scss|sass)$': 'identity-obj-proxy', // Mock CSS imports
+      "\\.(png|jpg|jpeg|gif|webp|svg)$": "<rootDir>/__mocks__/fileMock.js",
+    },
+    testEnvironment: 'jsdom', // Simulates a browser-like environment
+  };

frontend/package.json

@@ -5,7 +5,6 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.7",
@@ -25,7 +24,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -48,6 +47,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/jest-dom": "^6.6.3",
+    "react-test-renderer": "^18.3.1",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "babel-jest": "^29.7.0"

frontend/src/test/Dashboard.test.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import Dashboard from "../components/Dashboard";
+import '@testing-library/jest-dom'
+
+jest.mock("react-toastify", () => ({
+  toast: { success: jest.fn() },
+}));
+
+describe("Dashboard Component", () => {
+  test("renders Sign In and Register buttons when not logged in", () => {
+    render(
+      <MemoryRouter>
+        <Dashboard />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText(/Sign In/i)).toBeInTheDocument();
+    expect(screen.getByText(/Register/i)).toBeInTheDocument();
+  });
+
+  test("renders user information and Sign Out button when logged in", () => {
+    localStorage.setItem("accessToken", "mockToken");
+    localStorage.setItem("userName", "TestUser");
+
+    render(
+      <MemoryRouter>
+        <Dashboard />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("TestUser")).toBeInTheDocument();
+    expect(screen.getByText(/Sign Out/i)).toBeInTheDocument();
+  });
+
+  test("renders dark mode toggle button", () => {
+    render(
+      <MemoryRouter>
+        <Dashboard />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByRole("button", { name: /sun|moon/i })).toBeInTheDocument();
+  });
+
+  test("renders navigation links", () => {
+    render(
+      <MemoryRouter>
+        <Dashboard />
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText(/Home/i)).toBeInTheDocument();
+    expect(screen.getByText(/Community/i)).toBeInTheDocument();
+    expect(screen.getByText(/Markets/i)).toBeInTheDocument();
+    expect(screen.getByText(/News/i)).toBeInTheDocument();
+    expect(screen.getByText(/Portfolio/i)).toBeInTheDocument();
+  });
+});

frontend/src/test/NewsPage.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import NewsPage from '../components/news/NewsPage';
+
+describe('NewsPage Component', () => {
+    beforeEach(() => {
+        render(<NewsPage />);
+    });
+
+    test('renders page header', () => {
+        expect(screen.getByText('Economic News')).toBeInTheDocument();
+        expect(screen.getByText('Your daily updates on economic trends')).toBeInTheDocument();
+    });
+
+    test('renders mock news and RSS sections', () => {
+        expect(screen.getByText('Mock Economic News Section')).toBeInTheDocument();
+        expect(screen.getByText('Mock RSS Feed Economic News Section')).toBeInTheDocument();
+    });
+
+    test('renders news and RSS feed cards', () => {
+        const newsCards = screen.getAllByRole('button', { name: /news-card/i });
+        expect(newsCards.length).toBeGreaterThan(0);
+    });
+
+    test('shows all cards when "All" category is selected', () => {
+        fireEvent.click(screen.getByText('Stock Market'));
+        fireEvent.click(screen.getByText('All'));
+        const visibleCards = screen.getAllByRole('button', { name: /news-card/i });
+        expect(visibleCards.length).toBeGreaterThan(0);
+    });
+});