From f518d60beafb561ce597df412c224c2981eba669 Mon Sep 17 00:00:00 2001
From: severo <oliveira.severo@gmail.com>
Date: Fri, 29 Nov 2024 10:10:57 -0300
Subject: [PATCH 1/2] test: :test_tube: Testes pra o componente Navbar

---
 src/components/Navbar/NavBar.test.tsx | 68 +++++++++++++++++++++++++++
 src/components/Navbar/Navbar.tsx      | 17 +++++--
 2 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Navbar/NavBar.test.tsx

diff --git a/src/components/Navbar/NavBar.test.tsx b/src/components/Navbar/NavBar.test.tsx
new file mode 100644
index 0000000..0545572
--- /dev/null
+++ b/src/components/Navbar/NavBar.test.tsx
@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom'; // Importa o MemoryRouter
+import Navbar from './Navbar';
+import styles from './navbar.module.css';
+
+describe('🍔 - Menu testes', () => {
+
+  it('Renderiza container com lista de itens de menu', () => {
+    // Envolve o componente Navbar com o MemoryRouter
+    render(
+      <MemoryRouter>
+        <Navbar />
+      </MemoryRouter>
+    );
+
+    const containerNav = screen.getByRole('navigation');
+
+    expect(containerNav).toBeInTheDocument();
+    expect(containerNav).toHaveClass(styles.container_nav_link);
+  });
+
+  it('Renderiza no mínimo um item de menu', () => {
+    render(
+      <MemoryRouter>
+        <Navbar />
+      </MemoryRouter>
+    );
+
+    const navLinkElements = screen.getAllByRole('link');
+    const navLinkElement = navLinkElements[0];
+
+    expect(navLinkElements.length).toBeGreaterThan(0);
+
+    expect(navLinkElement).toBeInTheDocument();
+    expect(navLinkElement).toHaveClass(styles.nav_link);
+  });
+
+  it('Inicia com a classe "ativo" na rota principal', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Routes>
+          <Route path="/" element={<Navbar />} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    const homeLink = screen.getByTestId('link-home');
+    expect(homeLink).toHaveClass(styles.active);
+  });
+
+  it('Verifica se o link "home" esta inativo quando outra rota é acessada', () => {
+
+    render(
+      <MemoryRouter initialEntries={['/demo02']}>
+        <Routes>
+          <Route path="/demo02" element={<Navbar />} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+
+    const navLinkElements = screen.getAllByRole('link');
+    const homeLink = navLinkElements[0];
+
+    expect(homeLink).not.toHaveClass(styles.active);
+    expect(navLinkElements[1]).toHaveClass(styles.active)
+  });
+});
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 820fdad..3105524 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -2,11 +2,22 @@ import styles from './navbar.module.css';
 import { NavLink } from 'react-router-dom';
 function Navbar() {
   return (
-    <nav className={styles.container_nav_link}>
-      <NavLink to="/" className={({ isActive }) => `${styles.nav_link} ${isActive && styles.active} link`} >
+    <nav 
+      className={styles.container_nav_link}
+      role="navigation"
+    >
+      <NavLink 
+        to="/" 
+        className={({ isActive }) => `${styles.nav_link} ${isActive && styles.active} link`}
+        data-testid="link-home"
+      >
         Demo 01
       </NavLink>
-      <NavLink to="/demo02" className={({ isActive }) => `${styles.nav_link} ${isActive && styles.active} link`}>
+      <NavLink 
+        to="/demo02" 
+        className={({ isActive }) => `${styles.nav_link} ${isActive && styles.active} link`}
+        data-testid="link-demo-02"
+      >
           Demo 02
       </NavLink>
     </nav>

From 1a4b8c66cad3c7d97fdd505c749a0ee13c6edf18 Mon Sep 17 00:00:00 2001
From: severo <oliveira.severo@gmail.com>
Date: Fri, 29 Nov 2024 10:17:07 -0300
Subject: [PATCH 2/2] feat: Testes com estilo

---
 src/components/Footer/Footer.test.tsx   | 2 +-
 src/components/Loading/Loading.test.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx
index 207a5de..f3b1ba8 100644
--- a/src/components/Footer/Footer.test.tsx
+++ b/src/components/Footer/Footer.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import Footer from './index';
 
-describe('Component Footer', () => {
+describe('👢 - Component Footer', () => {
   it('o texto "Tecnologias" deve ser exibido na tela', () => {
     render(<Footer />);
     const text = screen.getByText(/Tecnologias/i);
diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx
index 53b20cb..557d4a5 100644
--- a/src/components/Loading/Loading.test.tsx
+++ b/src/components/Loading/Loading.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import Loading from './index';
 
-describe('Component Loading', () => {
+describe('⏳ - Component Loading', () => {
   it('o texto "Carregando" deve ser exibido na tela', () => {
     render(<Loading />);
     const loadingText = screen.getByText(/Carregando/i);