#276 implement first tests to fe

FrontEnd/package.json

@@ -2,6 +2,12 @@
   "name": "frontend",
   "version": "0.1.0",
   "private": true,
+  "jest": {
+    "moduleNameMapper": {
+      "axios": "axios/dist/node/axios.cjs"
+    }
+  },
+  "test": "react-app-rewired test --transformIgnorePatterns 'node_modules/(?!axios)/'",
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@emotion/react": "^11.11.1",
@@ -55,6 +61,7 @@
     "dotenv": "^16.3.1",
     "eslint": "^8.50.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest-mock-axios": "^4.7.3"
   }
 }

FrontEnd/src/components/SearchPage/Search.js

@@ -163,3 +163,5 @@ export function Search({ isAuthorized }) {
     </div>
   );
 }
+
+export default Search;

FrontEnd/src/components/SearchPage/search_field/companies/CompanyCard.js

@@ -5,14 +5,13 @@ import { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';
 import axios from 'axios';
 import styles from './CompanyCard.module.css';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 const CompanyCard = ({ companyData, isAuthorized }) => {
-  // CompanyCard.propTypes = {
-  //   companyData: PropTypes.object,
-  //   isAythorized: PropTypes.object,
-  // };
-  // console.log(companyData['id']);
+  CompanyCard.propTypes = {
+    companyData: PropTypes.object,
+    isAythorized: PropTypes.object,
+  };
 
   const { mutate } = useSWRConfig();
   const authToken = localStorage.getItem('Token');
@@ -92,10 +91,18 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
   });
 
   const filledStar = (
-    <StarFilled className={styles['star']} onClick={handleClick} />
+    <StarFilled
+      className={styles['star']}
+      onClick={handleClick}
+      data-testid="star"
+    />
   );
   const outlinedStar = (
-    <StarOutlined className={styles['star']} onClick={handleClick} />
+    <StarOutlined
+      className={styles['star']}
+      onClick={handleClick}
+      data-testid="emptystar"
+    />
   );
 
   useEffect(() => {
@@ -147,9 +154,7 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
                 </div>
               </div>
             </div>
-            {/* {isAuthorized ? (isSaved ? filledStar : outlinedStar) : null} */}
             {star}
-            {/* <div>{}</div> */}
           </div>
         </div>
       </div>

FrontEnd/src/components/cookieacception/CookieMod.jsx

@@ -1,4 +1,3 @@
-
 import { Link } from 'react-router-dom';
 import { useCookies } from 'react-cookie';
 import styles from './CookieMod.module.css';
@@ -26,7 +25,7 @@ const CookieMod = ({ active, setActive }) => {
       className={`${styles['modal-window']} ${active && styles['active']}`}
       onClick={() => setActive(false)}
     >
-      <div className={styles['modal-content']}>
+      <div className={styles['modal-content']} data-testid="cookiemodal">
         <p className={styles['cookie-text']}>
           Наш веб-сайт використовує файли cookie, щоб покращити ваш досвід. Ви
           можете відмовитися, якщо хочете. Дізнатися більше{' '}

FrontEnd/src/components/cookieacception/CookieMod.module.css

@@ -8,11 +8,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transform: scale(0);
+  visibility: hidden;
 }
 
 .modal-window.active {
-  transform: scale(1);
+  visibility: visible;
 }
 
 .modal-content {
@@ -57,4 +57,4 @@
 .cookie-text {
   text-align: justify;
   color: #187860;
-}
+}

FrontEnd/src/components/landing-page/MainPage.jsx

@@ -12,11 +12,11 @@ const MainPage = (props) => {
   return (
     <div className="main-app">
       <div className="main-app-header">
-        <MainBanner isAuthorized={props.isAuthorized}/>
+        <MainBanner isAuthorized={props.isAuthorized} />
         <div className={css['main-app-body']}>
           <MainCompanies />
           <MainPartners />
-          {!props.isAuthorized ? <MainLoginBanner /> : (null)}
+          {!props.isAuthorized ? <MainLoginBanner /> : null}
           <MainAboutSection />
           <div>
             <CookieMod

FrontEnd/src/tests/CompanyCard.test.js

@@ -0,0 +1,131 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import CompanyCard from '../components/SearchPage/search_field/companies/CompanyCard';
+
+afterEach(() => {
+  jest.resetAllMocks();
+});
+
+const company = {
+  id: 1,
+  name: 'Testname',
+  categories: [1, 2],
+  region: 'Testregion',
+  founded: 2005,
+  service_info: 'Testinfo',
+  address: 'Testadress',
+  banner_image: '',
+};
+
+describe('CompanyCard component unit tests', () => {
+  test('renders years of experiense', () => {
+    render(
+      <MemoryRouter>
+        <CompanyCard isAuthorized={{ isAuth: true }} companyData={company} />
+      </MemoryRouter>
+    );
+    const divElement = screen.getByText(/18 років досвіду/i, { exact: false });
+    expect(divElement).toBeInTheDocument();
+  });
+
+  test('testing stars', () => {
+    jest.mock('axios');
+    const axios = require('axios');
+
+    () => {
+      axios.get.mockResolvedValue({
+        results: [
+          {
+            id: 1,
+            name: 'Testname',
+            founded: 2005,
+            service_info: 'Testinfo',
+            person: 3,
+            is_registered: true,
+            is_startup: false,
+            official_name: null,
+            region: 'Testregion',
+            region_display: 'Testregion',
+            common_info: null,
+            address: 'Testadress',
+            categories: [1, 2],
+            activities: [],
+            banner_image: null,
+            is_saved: true,
+          },
+        ],
+      });
+    };
+
+    () => {
+      axios.post.mockResolvedValue({
+        company_pk: 1,
+      });
+
+      render(
+        <MemoryRouter>
+          <CompanyCard isAuthorized={{ isAuth: true }} companyData={company} />
+        </MemoryRouter>
+      );
+      expect(screen.getByTestId('star')).toBeInTheDocument();
+      expect(axios.post).toBeenCalledWith(
+        'http://localhost:8000/api/saved-list/',
+        { company_pk: 1 }
+      );
+      expect(axios.get).toHaveBeenCalledWith(
+        'http://localhost:8000/api/profiles/?is_saved=True'
+      );
+    };
+  });
+
+  test('testing empty stars', () => {
+    jest.mock('axios');
+    const axios = require('axios');
+
+    () => {
+      axios.get.mockResolvedValue({
+        results: [
+          {
+            id: 2,
+            name: 'Test',
+            founded: 2000,
+            service_info: 'info',
+            person: 4,
+            is_registered: true,
+            is_startup: false,
+            official_name: null,
+            region: 'Testregion',
+            region_display: 'Testregion',
+            common_info: null,
+            address: 'adress',
+            categories: [2],
+            activities: [],
+            banner_image: null,
+            is_saved: true,
+          },
+        ],
+      });
+    };
+
+    () => {
+      axios.post.mockResolvedValue({
+        company_pk: 1,
+      });
+
+      render(
+        <MemoryRouter>
+          <CompanyCard isAuthorized={{ isAuth: true }} companyData={company} />
+        </MemoryRouter>
+      );
+      expect(screen.getByTestId('emptystar')).toBeInTheDocument();
+      expect(axios.post).toBeenCalledWith(
+        'http://localhost:8000/api/saved-list/',
+        { company_pk: 1 }
+      );
+      expect(axios.get).toHaveBeenCalledWith(
+        'http://localhost:8000/api/profiles/?is_saved=True'
+      );
+    };
+  });
+});

FrontEnd/src/tests/CookieModal.test.js

@@ -0,0 +1,50 @@
+import { render, screen, cleanup } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import CookieMod from '../components/cookieacception/CookieMod';
+
+afterEach(cleanup);
+
+describe('CookieMod component unit tests', () => {
+  test('renders agree button', () => {
+    render(
+      <MemoryRouter>
+        <CookieMod active={true} />
+      </MemoryRouter>
+    );
+    const buttonElement = screen.getByText(/Погоджуюсь/i);
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  test('renders deny button', () => {
+    render(
+      <MemoryRouter>
+        <CookieMod active={true} />
+      </MemoryRouter>
+    );
+    const buttonElement = screen.getByText(/Відмовляюсь/i);
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  test('renders cookiepolicy link', async () => {
+    render(
+      <MemoryRouter>
+        <CookieMod active={true} />
+      </MemoryRouter>
+    );
+
+    const linkElement = screen.getByText(/про кукі-файли/i);
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', '/cookies-policy');
+  });
+
+  test('renders hidden cookie modal window', () => {
+    render(
+      <MemoryRouter>
+        <CookieMod active={false} />
+      </MemoryRouter>
+    );
+    const cookieElement = screen.queryByTestId('cookiemodal', { hidden: true });
+    expect(cookieElement).toBeInTheDocument();
+  });
+});