Merge pull request #25 from severidade/tests

Tests

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);

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);

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)
+  });
+});

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>