test: Atualizando testes unitários

frontend/src/components/footer/__snapshots__/footer.test.js.snap

@@ -25,9 +25,9 @@ Array [
   </li>,
   <li>
     <a
-      href="/dashboard"
+      href="/graficos"
     >
-      Dashboard
+      Gráficos
     </a>
   </li>,
   <li>

frontend/src/components/footer/footer.test.js

@@ -12,18 +12,18 @@ describe('Deve renderizar os links para as rotas: ', () => {
     const linkRoute = screen.getByText('Licitações');
     expect(linkRoute).toBeInTheDocument();
   });
-  test('sobrenos', () => {
+  test('artigos', () => {
     render(<BrowserRouter>
       <Footer />
     </BrowserRouter>);
-    const linkRoute = screen.getByText('Sobre a Equipe');
+    const linkRoute = screen.getByText('Conheça o Projeto');
     expect(linkRoute).toBeInTheDocument();
   });
-  test('Dashboard', () => {
+  test('Gráficos', () => {
     render(<BrowserRouter>
       <Footer />
     </BrowserRouter>);
-    const linkRoute = screen.getByText('Dashboard');
+    const linkRoute = screen.getByText('Gráficos');
     expect(linkRoute).toBeInTheDocument();
   });
   test('Fale conosco', () => {
@@ -47,7 +47,7 @@ test('Deve renderizar a lista de links presentes no componente', () => {
     <Footer />
   </BrowserRouter>);
   const listaDeLinks = screen.getAllByRole('listitem');
-  expect(listaDeLinks).toHaveLength(5);
+  expect(listaDeLinks).toHaveLength(6);
 });
 
 test('Deve renderizar o snapshot da lista de links presentes no componente', () => {

frontend/src/components/header/header.test.js

@@ -13,43 +13,25 @@ describe('Deve renderizar os links das rotas: ', () => {
       </MemoryRouter>,
     );
     const linkRoute = screen.getAllByText('Licitações');
-    expect(linkRoute).toHaveLength(2);
+    expect(linkRoute).toHaveLength(3);
   });
-  test('Sobre as Licitações', () => {
+  test('Conheça o Projeto', () => {
     render(
       <MemoryRouter>
         <Header />
       </MemoryRouter>,
     );
-    const linkRoute = screen.getAllByText('Sobre as Licitações');
-    expect(linkRoute).toHaveLength(1);
+    const linkRoute = screen.getAllByText('Conheça o Projeto');
+    expect(linkRoute[0]).toBeInTheDocument();
   });
-  test('Sobre o Projeto', () => {
+  test('Gráficos', () => {
     render(
       <MemoryRouter>
         <Header />
       </MemoryRouter>,
     );
-    const linkRoute = screen.getAllByText('Sobre o Projeto');
-    expect(linkRoute).toHaveLength(1);
-  });
-  test('Sobre Nós', () => {
-    render(
-      <MemoryRouter>
-        <Header />
-      </MemoryRouter>,
-    );
-    const linkRoute = screen.getAllByText('Sobre Nós');
-    expect(linkRoute).toHaveLength(2);
-  });
-  test('Dashboard', () => {
-    render(
-      <MemoryRouter>
-        <Header />
-      </MemoryRouter>,
-    );
-    const linkRoute = screen.getAllByText('Dashboard');
-    expect(linkRoute).toHaveLength(2);
+    const linkRoute = screen.getAllByText('Gráficos');
+    expect(linkRoute).toHaveLength(3);
   });
 });
 
@@ -60,7 +42,7 @@ test('Deve renderizar a lista de links presentes no componente', () => {
     </MemoryRouter>,
   );
   const listaDeLinks = screen.getAllByRole('listitem');
-  expect(listaDeLinks).toHaveLength(11);
+  expect(listaDeLinks).toHaveLength(8);
 });
 
 test('Deve renderizar o snapshot da lista de links do componente', () => {

frontend/src/pages/about-us/card-member/card-member.test.js

@@ -1,6 +1,12 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor, renderHook } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import CardMember from '.';
+import useGetImage from '../../../hooks/useGetImage';
+
+// import imagem from '../../../../assets/members/member1.jpg'
+
+jest.mock('../../../../assets/members/member1.jpg', () => 'mocked-image-path-1', { virtual: true });
+jest.mock('../../../../assets/members/member2.jpg', () => 'mocked-image-path-2', { virtual: true });
 
 const mockMember = {
     id: 1,
@@ -17,30 +23,47 @@ const mockMember2 = {
     github: 'https://github.com/MariaCHelena',
 }
 
+
+
 describe('O componente CardMember deve', () => {
-    test('renderizar o nome do membro', () => {
+    test('renderizar o nome do membro', async () => {
+        const { result, waitForNextUpdate } = renderHook(() => useGetImage('member1'));
         render(<CardMember nome={mockMember.nome} descricao={mockMember.descricao} github={mockMember.github} id={mockMember.id} />)
         const nome = screen.getByText(mockMember.nome)
-        expect(nome).toHaveTextContent("Maria Helena")
+        await waitFor(() => {
+            expect(nome).toHaveTextContent("Maria Helena")
+        })
     })
-    test('renderizar a descrição do membro', () => {
+    test('renderizar a descrição do membro', async () => {
+        const { result, waitForNextUpdate } = renderHook(() => useGetImage('member1'));
         render(<CardMember nome={mockMember2.nome} descricao={mockMember2.descricao} github={mockMember2.github} id={mockMember2.id} />)
         const nome = screen.getByText(mockMember.descricao)
-        expect(nome).toHaveTextContent("Me chamo Maria Helena Carvalho e sou Scrum Master e Desenvolvedora Front End do projeto. Atualmente, também trabalho com desenvolvimento Front End e Mobile, além de ser atuar como assessora de projetos em uma Empresa Júnior da Universidade de Brasília, o que me proporciona um vasto contato com o mundo do desenvolvimento de projetos de Software. Espero que, com esse projeto, as informações a respeito do dinheiro público se tornem mais transparentes e acessíveis, e que mais moradores de Brasília se mantenham conscientes e ativos politicamente.")
+        await waitFor(() => {
+            expect(nome).toHaveTextContent("Me chamo Maria Helena Carvalho e sou Scrum Master e Desenvolvedora Front End do projeto. Atualmente, também trabalho com desenvolvimento Front End e Mobile, além de ser atuar como assessora de projetos em uma Empresa Júnior da Universidade de Brasília, o que me proporciona um vasto contato com o mundo do desenvolvimento de projetos de Software. Espero que, com esse projeto, as informações a respeito do dinheiro público se tornem mais transparentes e acessíveis, e que mais moradores de Brasília se mantenham conscientes e ativos politicamente.")
+        })
     })
-    test('renderizar o link para o github do membro', () => {
+    test('renderizar o link para o github do membro', async () => {
+        const { result, waitForNextUpdate } = renderHook(() => useGetImage('member1'));
         render(<CardMember nome={mockMember.nome} descricao={mockMember.descricao} github={mockMember.github} id={mockMember.id} />)
         const nome = screen.getByRole('link')
-        expect(nome).toBeInTheDocument()
+        await waitFor(() => {
+            expect(nome).toBeInTheDocument()
+        })
     })
-    test('renderizar o link para o github do membro', () => {
+    test('renderizar o link para o github do membro', async () => {
+        const { result, waitForNextUpdate } = renderHook(() => useGetImage('member1'));
         render(<CardMember nome={mockMember.nome} descricao={mockMember.descricao} github={mockMember.github} id={mockMember.id} />)
         const nome = screen.getByRole('link')
-        expect(nome).toBeInTheDocument()
+        await waitFor(() => {
+            expect(nome).toBeInTheDocument()
+        })
     })
-    test('renderizar a imagem do membro', () => {
+    test('renderizar a imagem do membro', async () => {
+        const { result, waitForNextUpdate } = renderHook(() => useGetImage('member1'));
         render(<CardMember nome={mockMember.nome} descricao={mockMember.descricao} github={mockMember.github} id={mockMember.id} />)
         const nome = screen.getByRole('img')
-        expect(nome).toBeInTheDocument()
+        await waitFor(() => {
+            expect(nome).toBeInTheDocument()
+        })
     })
 })

frontend/src/pages/about-us/card-member/index.jsx

@@ -4,17 +4,6 @@ import { useEffect, useState } from 'react';
 import useGetImage from '../../../hooks/useGetImage';
 
 export default function CardMember({ nome, descricao, github, id }) {
-  // const [memberImage, setMemberImage] = useState('');
-
-  // useEffect(() => {
-  //   import(`../../../../assets/members/${id}.jpg`)
-  //   .then((image) => {
-  //     setMemberImage(image.default);
-  //   })
-  //   .catch((err) => {
-  //     console.error(`Erro ao carregar a imagem do membro ${id}:`, err);
-  //   });
-  // }, [id]);
   const memberImage = useGetImage(id);
 
   const controler = id % 2 === 1;

frontend/src/pages/about-us/card-member/style.module.css

@@ -47,6 +47,11 @@ li{
   }
 
   @media (max-width: 800px) {
+    .cardAboutUsPhotoEstilizado {
+      margin-top: 1rem;
+      width: 150px;
+      height: 150px;
+  }
     li{
         flex-direction: column-reverse;
     }

frontend/src/pages/about-us/index.jsx

@@ -16,12 +16,12 @@ export default function AboutUs() {
         contribuindo para uma gestão pública mais transparente e eficiente.
       </p>
 
-      {/* <img
+      <img
         className={styles.aboutUsImg}
         data-testid="photo-testid"
-        src={fotoemgrupo} 
+        src={fotoemgrupo}
         alt="Foto de toda a equipe"
-      /> */}
+      />
 
       <h2 className={styles.aboutUsTitle}>Agora, um pouco de cada um</h2>
 

frontend/src/pages/about-us/style.module.css

@@ -21,10 +21,16 @@
 
 .aboutUsImg {
     width: 70%;
-  @media (max-width: 1500px) {
-    width: 80%;
-  }
-  @media (max-width: 1000px) {
+}
+
+@media (max-width: 1000px) {
+  .aboutUsImg{
     width: 100%;
   }
+}
+
+  @media (max-width: 1500px) {
+    .aboutUsImg{
+      width: 80%;
+    }
 }