fix: [100] add test case

frontend/setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

frontend/src/scenes/errors/403.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import { ErrorComponent } from './Error'
 import { NAVIGATE_403_URL, TEXT_403 } from './constant'
+import { useNavigate } from 'react-router-dom';
 
 export const Error403 = () => {
+  const navigate = useNavigate();
+
   return (
-    <ErrorComponent text={TEXT_403} navigateUrl={NAVIGATE_403_URL} />
+    <ErrorComponent text={TEXT_403} errorAction={() => navigate(NAVIGATE_403_URL)} />
   )
 }

frontend/src/scenes/errors/404.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import { ErrorComponent } from './Error';
 import { NAVIGATE_404_URL, TEXT_404 } from './constant';
+import { useNavigate } from 'react-router';
 
 export const Error404 = () => {
+  const navigate = useNavigate();
+
   return (
-    <ErrorComponent text={TEXT_404} navigateUrl={NAVIGATE_404_URL} />
+    <ErrorComponent text={TEXT_404} errorAction={() => navigate(NAVIGATE_404_URL)} />
   )
 }

frontend/src/scenes/errors/Error.jsx

@@ -2,10 +2,8 @@ import React from 'react'
 import PropTypes from "prop-types";
 import styles from './Error.module.scss';
 import Button from '../../components/Button/Button';
-import { useNavigate } from 'react-router';
 
-export const ErrorComponent = ({ text, navigateUrl }) => {
-  const navigate = useNavigate()
+export const ErrorComponent = ({ text, errorAction }) => {
   const errorButtonStyle = {
     borderRadius: '8px',
     marginTop: '58px',
@@ -22,7 +20,7 @@ export const ErrorComponent = ({ text, navigateUrl }) => {
        </div>
        <Button 
         style={errorButtonStyle}
-        onClick={() => navigate(navigateUrl)}
+        onClick={errorAction}
         text='Go to the main dashboard' 
       />
     </div>
@@ -31,5 +29,5 @@ export const ErrorComponent = ({ text, navigateUrl }) => {
 
 ErrorComponent.propTypes = {
   text: PropTypes.string,
-  navigateUrl: PropTypes.string
+  errorAction: PropTypes.func,
 }

frontend/src/tests/components/Error/Error.test.jsx

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { ErrorComponent } from '../../../scenes/errors/Error';
+
+describe('ErrorComponent', () => {
+  const mockErrorAction = vi.fn();
+
+  it('renders the error message and text', () => {
+    const errorMessage = 'Page not found';
+
+    render(<ErrorComponent text={errorMessage} errorAction={mockErrorAction} />);
+
+    expect(screen.getByText('We cannot find this page')).toBeInTheDocument();
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it('calls errorAction when button is clicked', () => {
+    render(<ErrorComponent text="Error occurred" errorAction={mockErrorAction} />);
+
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+
+    expect(mockErrorAction).toHaveBeenCalled();
+  });
+
+  it('applies custom styles to the button', () => {
+    render(<ErrorComponent text="Error occurred" errorAction={mockErrorAction} />);
+
+    const button = screen.getByRole('button');
+
+    expect(button).toHaveStyle('border-radius: 8px');
+    expect(button).toHaveStyle('margin-top: 58px');
+    expect(button).toHaveStyle('font-size: 13px');
+    expect(button).toHaveStyle('line-height: 24px');
+    expect(button).toHaveStyle('padding: 5px 27px');
+  });
+});

frontend/vite.config.js

@@ -7,6 +7,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'jsdom',
+    setupFiles: ["./setupTests.js"],
     include: ['src/tests/**/*.test.jsx']
   },
 });