Feature/89 fe integrate the students list filters hf

package.json

@@ -14,7 +14,6 @@
     "@hookform/resolvers": "3.3.2",
     "@reduxjs/toolkit": "1.9.7",
     "axios": "1.6.2",
-    "axios-mock-adapter": "^1.22.0",
     "classnames": "2.5.1",
     "i18next": "23.6.0",
     "i18next-browser-languagedetector": "7.1.0",
@@ -30,8 +29,8 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "0.5.10",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "14.2.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.2.2",
     "@types/js-cookie": "3.0.6",
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",

src/__tests__/components/studentFilters/ApiGetUserDetail.test.tsx

@@ -0,0 +1,95 @@
+import React, { useContext } from 'react'
+import axios from 'axios'
+import { fireEvent, render } from '@testing-library/react'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import MockAdapter from 'axios-mock-adapter'
+import { FetchStudentsListHome } from '../../../api/FetchStudentsList'
+import {
+  StudentFiltersProvider,
+  StudentFiltersContext,
+} from '../../../context/StudentFiltersContext'
+import StudentFiltersContent from '../../../components/studentFilters/StudentFiltersContent'
+
+const mockAxios = new MockAdapter(axios)
+
+describe('FetchStudentsListHome function', () => {
+  afterEach(() => {
+    mockAxios.reset()
+  })
+
+  it('should fetch student list for home', async () => {
+    const selectedRoles = ['role1', 'role2']
+
+    const expectedUrl =
+      'https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home?specialization=role1,role2'
+
+    const mockData = [
+      { id: 1, name: 'Student 1' },
+      { id: 2, name: 'Student 2' },
+    ]
+
+    mockAxios.onGet(expectedUrl).reply(200, mockData)
+
+    const result = await FetchStudentsListHome(selectedRoles)
+
+    expect(result).toEqual(mockData)
+  })
+
+  it('should handle errors', async () => {
+    const selectedRoles: string[] = []
+
+    const expectedUrl =
+      'https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home'
+
+    mockAxios.onGet(expectedUrl).reply(500)
+
+    await expect(FetchStudentsListHome(selectedRoles)).rejects.toThrow()
+  })
+})
+
+describe('StudentFiltersContent component', () => {
+  it('renders StudentFiltersContent and handles user events', () => {
+    const { getByTestId } = render(
+      <StudentFiltersProvider>
+        <StudentFiltersContent />
+      </StudentFiltersProvider>,
+    )
+
+    // Verifies that the component renders correctly
+    expect(getByTestId('student-filters-content')).toBeDefined()
+  })
+
+  it('should add and remove role', () => {
+    const TestComponent = () => {
+      const { selectedRoles, addRole, removeRole } =
+        useContext(StudentFiltersContext) || {}
+
+      if (!selectedRoles || !addRole || !removeRole) {
+        throw new Error('Context is undefined')
+      }
+      return (
+        <div data-testid="student-filters-content">
+          <button type="button" onClick={() => addRole('test')}>
+            Add role
+          </button>
+          <button type="button" onClick={() => removeRole('test')}>
+            Remove role
+          </button>
+          <div>{selectedRoles.join(',')}</div>
+        </div>
+      )
+    }
+
+    const { getByText, queryByText } = render(
+      <StudentFiltersProvider>
+        <TestComponent />
+      </StudentFiltersProvider>,
+    )
+
+    fireEvent.click(getByText('Add role'))
+    expect(getByText('test')).toBeInTheDocument()
+
+    fireEvent.click(getByText('Remove role'))
+    expect(queryByText('test')).not.toBeInTheDocument()
+  })
+})

src/__tests__/components/studentFilters/Landing.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react'
+import { Provider } from 'react-redux' // Import Provider from react-redux
+import Landing from '../../../components/landing/Landing'
+
+import { store } from '../../../store/store'
+
+describe('StudentDetailsLayout', () => {
+  it('should render the studentDetailsLayout component correctly', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Landing />
+      </Provider>,
+    )
+    expect(container).toBeInTheDocument()
+  })
+
+  test('renders all the different cards', () => {
+    expect(screen.queryByTestId('MenuNavbar')).toBeDefined()
+    expect(screen.queryByTestId('UserNavbar')).toBeDefined()
+    expect(screen.queryByTestId('StudentFiltersLayout')).toBeDefined()
+    expect(screen.queryByTestId('StudentLayout')).toBeDefined()
+    expect(screen.queryByTestId('StudentDetailsLayout')).toBeDefined()
+  })
+})

src/__tests__/components/studentFilters/StudenFtiltersContext.test.tsx

@@ -0,0 +1,43 @@
+import { renderHook, act } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { ReactNode, useContext } from 'react'
+import {
+  StudentFiltersProvider,
+  StudentFiltersContext,
+} from '../../../context/StudentFiltersContext'
+
+describe('StudentFiltersProvider', () => {
+  it('should add role to selectedRoles', () => {
+    const wrapper = (
+      { children }: { children: ReactNode }, // Explicitly type children prop
+    ) => <StudentFiltersProvider>{children}</StudentFiltersProvider>
+
+    const { result } = renderHook(() => useContext(StudentFiltersContext), {
+      wrapper,
+    })
+
+    act(() => {
+      result.current?.addRole('Role1') // Guard against result.current being undefined
+    })
+
+    expect(result.current?.selectedRoles).toEqual(['Role1']) // Guard against result.current being undefined
+  })
+
+  it('should remove role from selectedRoles', () => {
+    const wrapper = (
+      { children }: { children: ReactNode }, // Explicitly type children prop
+    ) => <StudentFiltersProvider>{children}</StudentFiltersProvider>
+
+    const { result } = renderHook(() => useContext(StudentFiltersContext), {
+      wrapper,
+    })
+
+    act(() => {
+      result.current?.addRole('Role1') // Guard against result.current being undefined
+      result.current?.addRole('Role2') // Guard against result.current being undefined
+      result.current?.removeRole('Role1') // Guard against result.current being undefined
+    })
+
+    expect(result.current?.selectedRoles).toEqual(['Role2']) // Guard against result.current being undefined
+  })
+})

src/__tests__/components/studentFilters/StudentFiltersContent.test.tsx

@@ -0,0 +1,69 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { render, RenderResult, waitFor } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import StudentFiltersProvider from '../../../components/studentFilters/StudentFiltersContent';
+import { StudentFiltersContext } from '../../../context/StudentFiltersContext';
+
+describe('StudentFiltersProvider', () => {
+  let mock: MockAdapter;
+
+  beforeAll(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    mock.reset();
+  });
+
+  afterAll(() => {
+    mock.restore();
+  });
+
+  const selectedRoles: string[] = [];
+  const addRole = () => { };
+  const removeRole = () => { };
+
+  const value = {
+    selectedRoles,
+    addRole,
+    removeRole,
+  };
+
+  const rolesData: string[] | undefined = [];
+  const developmentData: string[] | undefined = [];
+
+  test('renders student filters correctly', async () => {
+    // Mock API responses
+    mock
+      .onGet('https://itaperfils.eurecatacademy.org/api/v1/specialization/list')
+      .reply(200, rolesData);
+
+    mock
+      .onGet('https://itaperfils.eurecatacademy.org/api/v1/development/list')
+      .reply(200, developmentData);
+
+    let getByText: RenderResult['getByText'];
+
+    // Render the component
+    await act(async () => {
+        const renderResult = render(
+          <StudentFiltersContext.Provider value={value}>
+            <StudentFiltersProvider />
+          </StudentFiltersContext.Provider>
+        );
+        getByText = renderResult.getByText;      
+
+        // Wait for data to be fetched and rendered
+        await waitFor(() => {
+          rolesData.forEach((role) => {
+            expect(getByText(role)).toBeInTheDocument();
+          });
+
+          developmentData.forEach((development) => {
+            expect(getByText(development)).toBeInTheDocument();
+          });
+        });
+      });
+  });
+});

src/api/FetchStudentsList.ts

@@ -1,15 +1,26 @@
-import axios from 'axios'
-import { IStudentList } from '../interfaces/interfaces'
+// eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
+import axios, { AxiosError } from 'axios';
+import { IStudentList } from '../interfaces/interfaces';
 
 // eslint-disable-next-line consistent-return
-export const FetchStudentsListHome = async () => {
+export const FetchStudentsListHome = async (selectedRoles:Array<string>= []) => {
+
   try {
-    const response = await axios.get<IStudentList[]>(
-      'https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home',
-    )
-    return response.data
-  } catch (e) {
+    let queryParams = '';
+
+    // Construir la cadena de consulta para roles seleccionados
+    if (selectedRoles.length > 0) {
+      queryParams += `specialization=${selectedRoles.join(',')}`;
+    }
+
+    // Construir la URL completa con la cadena de consulta
+    const url = `https://itaperfils.eurecatacademy.org/api/v1/student/list/for-home${queryParams ? `?${queryParams}` : ''}`;
+
+    const response = await axios.get<IStudentList[]>(url);
+    return response.data;
+    // @ts-expect-error throws AxiosError exception
+  } catch (e: AxiosError) {
     // eslint-disable-next-line no-console
-    console.error(e)
+    throw new DOMException(e.message, 'ConnectionFailed');
   }
-}
+  };

src/components/landing/Landing.tsx

@@ -3,19 +3,25 @@ import UserNavbar from '../userNavBar/UserNavbar'
 import StudentDetailsLayout from '../studentDetail/StudentDetailsLayout'
 import StudentsLayout from '../students/StudentsLayout'
 import StudentFiltersLayout from '../studentFilters/StudentFiltersLayout'
+import { StudentFiltersProvider } from '../../context/StudentFiltersContext'
 
 const Landing = () => (
   <div className="flex h-screen">
-    <MenuNavbar />
+    <MenuNavbar data-testid="MenuNavbar" /> {/* Added data-testid */}
     <div className="flex w-full md:w-[calc(100%-176px)] flex-col gap-3 p-2.5 md:p-2 md:pb-8 md:pr-14">
-      <UserNavbar />
-      <div className="flex h-[90vh] gap-10">
-        <div className="flex flex-1 w-auto h-full rounded-xl bg-white p-10">
-          <StudentFiltersLayout />
-          <StudentsLayout />
+      <UserNavbar data-testid="UserNavbar" /> {/* Added data-testid */}
+      <StudentFiltersProvider>
+        <div className="flex h-[90vh] gap-10">
+          <div className="flex flex-1 w-auto h-full rounded-xl bg-white p-10">
+            <StudentFiltersLayout data-testid="StudentFiltersLayout" />{' '}
+            {/* Added data-testid */}
+            <StudentsLayout data-testid="StudentLayout" />{' '}
+            {/* Added data-testid */}
+          </div>
+          <StudentDetailsLayout data-testid="StudentDetailsLayout" />{' '}
+          {/* Added data-testid */}
         </div>
-        <StudentDetailsLayout />
-      </div>
+      </StudentFiltersProvider>
     </div>
   </div>
 )