Shoshi/tests

client-side/package.json

@@ -12,22 +12,20 @@
     "@mui/x-charts": "^7.10.0",
     "@mui/x-data-grid": "^7.10.0",
     "@reduxjs/toolkit": "^2.2.6",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
     "@types/redux": "^3.6.31",
     "axios": "^1.7.2",
     "formik": "^2.4.6",
     "html2canvas": "^1.4.1",
     "html2pdf.js": "^0.10.2",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.8.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.1",
-    "react-scripts": "5.0.1",
     "redux": "^5.0.1",
     "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4",
@@ -61,6 +59,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@chromatic-com/storybook": "^1.6.0",
     "@eslint/compat": "^1.1.0",
     "@eslint/js": "^9.6.0",
@@ -74,16 +73,37 @@
     "@storybook/react": "^8.1.11",
     "@storybook/react-webpack5": "^8.1.11",
     "@storybook/test": "^8.1.11",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "babel-jest": "^29.7.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-storybook": "^0.8.0",
     "globals": "^15.8.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-transform-stub": "^2.0.0",
     "notistack": "^3.0.1",
     "prop-types": "^15.8.1",
     "react-scripts": "^5.0.1",
     "regenerator-transform": "^0.15.2",
     "sass": "^1.77.6",
     "storybook": "^8.1.11"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "moduleNameMapper": {
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!some-module-to-transform).+\\.(js|jsx|ts|tsx)$"
+    ]
   }
 }

client-side/src/components/homePageComponent.jsx

@@ -0,0 +1,74 @@
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { IconButton } from '@mui/material';
+import { AccountCircle, Settings, Report, People } from '@mui/icons-material';
+import { homePageTexts } from '../../src/constants/homePageconstatnts';
+import '../styles/homePage.scss';
+
+const HomePage = () => {
+  return (
+    <div className="homepage">
+      <main>
+        <section className="feature even">
+          <div className="content">
+            <div className="text">
+              <h2>{homePageTexts.enhanceBrowsing.title}</h2>
+              <p>{homePageTexts.enhanceBrowsing.description}</p>
+              <Link to={homePageTexts.enhanceBrowsing.link} className="btn-primary">{homePageTexts.enhanceBrowsing.buttonText}</Link>
+            </div>
+            <div className="feature-icon-container">
+              <IconButton className="feature-icon">
+                <AccountCircle fontSize="inherit" />
+              </IconButton>
+            </div>
+          </div>
+        </section>
+        <section className="feature odd">
+          <div className="content">
+            <div className="feature-icon-container">
+              <IconButton className="feature-icon">
+                <People fontSize="inherit" />
+              </IconButton>
+            </div>
+            <div className="text">
+              <h2>{homePageTexts.personalizeProfiles.title}</h2>
+              <p>{homePageTexts.personalizeProfiles.description}</p>
+              <Link to={homePageTexts.personalizeProfiles.link} className="btn-primary">{homePageTexts.personalizeProfiles.buttonText}</Link>
+            </div>
+          </div>
+        </section>
+        <section className="feature even">
+          <div className="content">
+            <div className="text">
+              <h2>{homePageTexts.manageSettings.title}</h2>
+              <p>{homePageTexts.manageSettings.description}</p>
+              <Link to={homePageTexts.manageSettings.link} className="btn-primary">{homePageTexts.manageSettings.buttonText}</Link>
+            </div>
+            <div className="feature-icon-container">
+              <IconButton className="feature-icon">
+                <Settings fontSize="inherit" />
+              </IconButton>
+            </div>
+          </div>
+        </section>
+        <section className="feature odd">
+          <div className="content">
+            <div className="feature-icon-container">
+              <IconButton className="feature-icon">
+                <Report fontSize="inherit" />
+              </IconButton>
+            </div>
+            <div className="text">
+              <h2>{homePageTexts.getReports.title}</h2>
+              <p>{homePageTexts.getReports.description}</p>
+              <Link to={homePageTexts.getReports.link} className="btn-primary">{homePageTexts.getReports.buttonText}</Link>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default HomePage;

client-side/src/constants/homePageconstatnts.js

@@ -0,0 +1,28 @@
+
+export const homePageTexts = {
+    enhanceBrowsing: {
+      title: "Enhance Your Browsing Experience with Our Chrome Add-on",
+      description: "Install our Chrome extension to block or limit access to specific websites. Create profiles for work, home, and more, giving you control over your online activity.",
+      buttonText: "Login",
+      link: "/login"
+    },
+    personalizeProfiles: {
+      title: "Personalize Your Profiles",
+      description: "Create and manage profiles for different settings like work and home. Link accounts from over 17,000 financial institutions and view your transactions in one place.",
+      buttonText: "Go to Profiles",
+      link: "/profiles"
+    },
+    manageSettings: {
+      title: "Manage Your Settings",
+      description: "Customize your preferences to better track and understand your spending habits. Adjust your profile settings to suit your needs and enhance your browsing experience.",
+      buttonText: "Go to Settings",
+      link: "/settings"
+    },
+    getReports: {
+      title: "Get Detailed Reports",
+      description: "Review your transactions, track your spending by category, and receive monthly insights to help you better understand your money habits.",
+      buttonText: "Go to Reports",
+      link: "/reports"
+    }
+  };
+

client-side/src/router/router.jsx

@@ -1,24 +1,24 @@
 import React from "react";
 import {createBrowserRouter } from "react-router-dom";
-import ProfileList from "../components/profileComponent.jsx";
 import Layout from "./layout.jsx";
 import Login from "../login/Login.jsx";
+import HomePage from "../components/homePageComponent.jsx";
 export  const router = createBrowserRouter([
     {
         path: '',
         element: <Layout/>,
         children: [
             {
-                path: '/',
-                element: <h1>home</h1>
+                path: '/home',
+                element: <HomePage />
             },
             {
                 path: '/home',
-                element: <h1>home</h1>
+                element: <HomePage />
             },
             {
                 path: '/profiles',
-                element:<ProfileList/>
+
             },
             {
                 path: '/login',

client-side/src/setupTests.js

@@ -3,3 +3,4 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';

client-side/src/stories/table/TableComponent.jsx

@@ -22,7 +22,7 @@ const TableComponent = ({ dataObject, widthOfTable = "80%" ,widthOfColums}) => {
             paginationModel: { page: 0, pageSize: 5 },
           },
         }}
-        pageSizeOptions={[4, 8]}
+        pageSizeOptions={[4,5, 8]}
       />
     </div>
   );

client-side/src/stories/tests/table.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import TableComponent from '../table/TableComponent';
+
+describe('TableComponent', () => {
+  const mockData1 = {
+    dataObject: {
+      headers: ['id', 'name', 'age', 'city'],
+      rows: [
+        { id: 1, name: 'יונתן', age: 25, city: 'תל אביב' },
+        { id: 2, name: 'מיכל', age: 30, city: 'ירושלים' },
+      ],
+    },
+    widthOfTable: "60%",
+    widthOfColums: [150, 150, 150, 150],
+  };
+
+  const mockData2 = {
+    dataObject: {
+      headers: ['id', 'name', 'profession', 'age', 'city'],
+      rows: [
+        { id: 1, name: 'יונתן', profession: 'אנגלית', age: 25, city: 'תל אביב' },
+        { id: 2, name: 'מיכל', profession: 'חשבון', age: 30, city: 'ירושלים' },
+      ],
+    },
+    widthOfTable: "80%",
+    widthOfColums: [150, 150, 150, 150, 150],
+  };
+
+  test('renders the table with data1 correctly', () => {
+    render(<TableComponent {...mockData1} />);
+
+    expect(screen.getByText('id')).toBeInTheDocument();
+    expect(screen.getByText('name')).toBeInTheDocument();
+    expect(screen.getByText('age')).toBeInTheDocument();
+    expect(screen.getByText('city')).toBeInTheDocument();
+    expect(screen.getByText('יונתן')).toBeInTheDocument();
+    expect(screen.getByText('מיכל')).toBeInTheDocument();
+  });
+
+  test('renders the table with data2 correctly', () => {
+    render(<TableComponent {...mockData2} />);
+
+    expect(screen.getByText('id')).toBeInTheDocument();
+    expect(screen.getByText('name')).toBeInTheDocument();
+    expect(screen.getByText('profession')).toBeInTheDocument();
+    expect(screen.getByText('age')).toBeInTheDocument();
+    expect(screen.getByText('city')).toBeInTheDocument();
+    expect(screen.getByText('יונתן')).toBeInTheDocument();
+    expect(screen.getByText('מיכל')).toBeInTheDocument();
+    expect(screen.getByText('אנגלית')).toBeInTheDocument();
+    expect(screen.getByText('חשבון')).toBeInTheDocument();
+  });
+});

client-side/src/stories/variables.scss

@@ -7,4 +7,14 @@ $primary-color: black;
 $secondary-color: rgb(103, 252, 210);
 $light-black: rgba(0, 0, 0, 0.1);
 $errorColor:red;
+$primary-color-home: rgb(103, 252, 210);
+$black-color: #000000;
+$white-color: #ffffff;
+$hover-color: rgba(103, 252, 210, 0.8);
+
+
+$font-family-primary: 'Nanum Gothic', sans-serif;
+
 @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
+
+