#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,7 +91,11 @@ 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} />
@@ -147,9 +150,7 @@ const CompanyCard = ({ companyData, isAuthorized }) => {
                 </div>
               </div>
             </div>
-            {/* {isAuthorized ? (isSaved ? filledStar : outlinedStar) : null} */}
             {star}
-            {/* <div>{}</div> */}
           </div>
         </div>
       </div>

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,151 @@
+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();
+});
+
+describe('CompanyCard component unit tests', () => {
+  test('renders years of experiense', () => {
+    const company = {
+      id: 1,
+      name: 'Testname',
+      categories: [1, 2],
+      region: 'Testregion',
+      founded: 2005,
+      service_info: 'Testinfo',
+      address: 'Testadress',
+      banner_image: '',
+    };
+
+    render(
+      <MemoryRouter>
+        <CompanyCard isAuthorized={{ isAuth: true }} companyData={company} />
+      </MemoryRouter>
+    );
+    const divElement = screen.getByText(/18 років досвіду/i, { exact: false });
+    expect(divElement).toBeInTheDocument();
+  });
+
+  test('testing stars', () => {
+    const company = {
+      id: 1,
+      name: 'Testname',
+      categories: [1, 2],
+      region: 'Testregion',
+      founded: 2005,
+      service_info: 'Testinfo',
+      address: 'Testadress',
+      banner_image: '',
+    };
+    jest.mock('axios');
+    const axios = require('axios');
+
+    async () => {
+      await 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,
+          },
+        ],
+      });
+    };
+
+    async () => {
+      await 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', () => {
+    const company = {
+      id: 1,
+      name: 'Testname',
+      categories: [1, 2],
+      region: 'Testregion',
+      founded: 2005,
+      service_info: 'Testinfo',
+      address: 'Testadress',
+      banner_image: '',
+    };
+    jest.mock('axios');
+    const axios = require('axios');
+
+    async () => {
+      await 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,
+          },
+        ],
+      });
+    };
+
+    async () => {
+      await 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,40 @@
+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 agry 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');
+  });
+});

FrontEnd/src/tests/Search.test.js

@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import Search from '../components/SearchPage/Search';
+
+afterEach(() => {
+  jest.resetAllMocks();
+});
+
+describe('Search component unit tests', () => {
+  test('renders sale search page', () => {
+    render(
+      <MemoryRouter>
+        <Search isAuthorized={{ isAuth: true }} />
+      </MemoryRouter>
+    );
+    const counterElement = screen.getByText(/РЕЗУЛЬТАТІВ ЗА ПОШУКОМ/i, {
+      exact: false,
+    });
+    expect(counterElement).toBeInTheDocument();
+  });
+
+  test('testing search', () => {
+    jest.mock('axios');
+    // const axios = require('axios');
+    const axios = require('axios', () => {
+      jest.fn().mockResolvedValue({});
+
+      async () => {
+        await axios.get.mockResolvedValue({
+          data: [
+            {
+              id: 1,
+              name: 'saleonline',
+              categories: [
+                {
+                  id: 1,
+                  name: 'trade',
+                },
+                {
+                  id: 2,
+                  name: 'transport',
+                },
+              ],
+              region: 'Dnipro',
+              founded: 1980,
+              service_info: null,
+              address: 'Kyiv',
+              banner_image: null,
+            },
+            {
+              id: 2,
+              name: 'sale',
+              categories: [
+                {
+                  id: 1,
+                  name: 'trade',
+                },
+              ],
+              region: 'Dnipro',
+              founded: 2007,
+              service_info: null,
+              address: 'Dnipro',
+              banner_image: null,
+            },
+            {
+              id: 3,
+              name: 'PizzaHousesale',
+              categories: [],
+              region: 'Charkiv',
+              founded: null,
+              service_info: null,
+              address: 'Zaporija',
+              banner_image: null,
+            },
+          ],
+        });
+      };
+
+      render(
+        <MemoryRouter>
+          <Search isAuthorized={{ isAuth: true }} />
+        </MemoryRouter>
+      );
+      expect(axios.get).toBeCalled();
+      expect(screen.getByText(/назад/i, { exact: false })).toBeInTheDocument();
+      expect(screen.getByRole('link')).toHaveAttribute('href', '/');
+      expect(screen.getByText(/3/i, { exact: false })).toBeInTheDocument();
+    });
+  });
+});