Merge pull request #10 from fga-eps-mds/teste-benefitValue-loginNovo

Teste benefit value e login novo

src/Components/AdvantagesModal/index.jsx

@@ -7,7 +7,7 @@ export default function AdvantagesModal({ title, description, onClose }) {
       <div className="modal-overlay">
         <div className="modal-box">
           <button className="close-button" onClick={onClose}>
-            &times;
+            x
           </button>
 
           <h2 className="modal-header">{title}</h2>

src/Pages/Protected/Benefit/BenefitsValue/index.jsx

@@ -31,7 +31,7 @@ export default function BenefitsValue() {
     <section className="benefits-container">
       <div className="benefits-list">
         <div className="benefits-header">
-          <h1> Valores dos benefícios</h1>
+          <h1>Valores dos benefícios</h1>
           <p>Benefícios disponíveis</p>
         </div>
         <div className="box-benefits">

src/Pages/Protected/Benefit/BenefitsValue/index.test.jsx

@@ -0,0 +1,97 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { BrowserRouter as Router } from "react-router-dom";
+import BenefitsValue from "./index";
+import { getBenefitsForm } from "../../../../Services/benefitsService";
+
+import "@testing-library/jest-dom";
+
+vi.mock("../../../../Services/benefitsService");
+vi.mock("../../../../Utils/permission", () => ({
+  usePermissions: () => ({
+    somePermission: true,
+  }),
+  checkAction: () => true,
+}));
+
+describe("BenefitsValue", () => {
+  beforeEach(() => {
+    localStorage.setItem("@App:user", JSON.stringify({ token: "mock-token" }));
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+  });
+
+  it("renders correctly", async () => {
+    getBenefitsForm.mockResolvedValue([]);
+
+    render(
+      <Router>
+        <BenefitsValue />
+      </Router>
+    );
+
+    expect(screen.getByText("Valores dos benefícios")).toBeInTheDocument();
+    expect(screen.getByText("Benefícios disponíveis")).toBeInTheDocument();
+
+    await waitFor(() => expect(getBenefitsForm).toHaveBeenCalledTimes(1));
+  });
+
+  it("fetches and displays benefits", async () => {
+    const benefits = [
+      { _id: "1", nome: "Benefício 1", descricao: "descrição beneficio 1" },
+      { _id: "2", nome: "Benefício 2", descricao: "descrição beneficio 2" },
+    ];
+    getBenefitsForm.mockResolvedValue(benefits);
+
+    render(
+      <Router>
+        <BenefitsValue />
+      </Router>
+    );
+
+    await waitFor(() => expect(getBenefitsForm).toHaveBeenCalledTimes(1));
+    expect(screen.getByText("Benefício 1")).toBeInTheDocument();
+    expect(screen.getByText("Benefício 2")).toBeInTheDocument();
+
+    const detailButtons = screen.getAllByText("Mais Detalhes");
+    expect(detailButtons).toHaveLength(benefits.length);
+
+    const valorText = screen.getAllByText("Valor");
+    expect(valorText).toHaveLength(benefits.length);
+
+    expect(screen.getByText("Incluso na filiação")).toBeInTheDocument();
+    expect(screen.getByText("Disconto de 15%")).toBeInTheDocument();
+  });
+
+  it("exibits benefit details on Mais detalhes click", async () => {
+    const benefits = [
+      { _id: "1", nome: "Benefício 1", descricao: "descrição beneficio 1" },
+      { _id: "2", nome: "Benefício 2", descricao: "descrição beneficio 2" },
+    ];
+    getBenefitsForm.mockResolvedValue(benefits);
+
+    render(
+      <Router>
+        <BenefitsValue />
+      </Router>
+    );
+
+    await waitFor(() => expect(getBenefitsForm).toHaveBeenCalledTimes(1));
+    await waitFor(() => {
+      const detailButtons = screen.getAllByText("Mais Detalhes");
+      fireEvent.click(detailButtons[0]);
+    });
+
+    expect(screen.getByText("descrição beneficio 1")).toBeInTheDocument();
+
+    await waitFor(() => {
+      const detailButtons = screen.getAllByText("Mais Detalhes");
+      fireEvent.click(detailButtons[1]);
+    });
+
+    expect(screen.getByText("descrição beneficio 2")).toBeInTheDocument();
+  });
+});

src/Pages/Public/LoginNovo/index.test.jsx

@@ -1,10 +1,49 @@
 import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import LoginNovo from "./index"; // Substituído Login por LoginNovo
 import { BrowserRouter } from "react-router-dom";
+import { getBenefitsForm } from "../../../Services/benefitsService";
+
+vi.mock("../../../Services/benefitsService");
 
 describe("LoginNovo", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should render header sentinela image", () => {
+    render(
+      <BrowserRouter>
+        <LoginNovo />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByAltText("Logo Sentinela")).toBeInTheDocument();
+  });
+
+  it("should render header vantagens and filiar buttons", () => {
+    render(
+      <BrowserRouter>
+        <LoginNovo />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByText("Vantagens")).toBeInTheDocument();
+    expect(screen.getByText("Filiar")).toBeInTheDocument();
+  });
+
+  it("should render body vantagens and filiar buttons", () => {
+    render(
+      <BrowserRouter>
+        <LoginNovo />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByText("Filiar-me ao sindicato")).toBeInTheDocument();
+    expect(screen.getByText("Ver vantagens")).toBeInTheDocument();
+  });
+
   it("should render email and password input fields", () => {
     render(
       <BrowserRouter>
@@ -39,15 +78,36 @@ describe("LoginNovo", () => {
     expect(forgotPasswordButton).toBeInTheDocument();
   });
 
-  it("should render secondary button with text 'Filiar-me ao sindicato'", () => {
+  it("should render quero filiar and voltar ao topo buttons", () => {
+    render(
+      <BrowserRouter>
+        <LoginNovo />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByText("Quero filiar")).toBeInTheDocument();
+    expect(screen.getByText("Voltar ao Topo")).toBeInTheDocument();
+  });
+
+  it("fetches and displays benefits", async () => {
+    const benefits = [
+      { _id: "1", nome: "Benefício 1", descricao: "descrição beneficio 1" },
+      { _id: "2", nome: "Benefício 2", descricao: "descrição beneficio 2" },
+    ];
+    getBenefitsForm.mockResolvedValue(benefits);
+
     render(
       <BrowserRouter>
         <LoginNovo />
       </BrowserRouter>
     );
 
-    const secondaryButton = screen.getByText("Filiar-me ao sindicato");
-    expect(secondaryButton).toBeInTheDocument();
+    await waitFor(() => expect(getBenefitsForm).toHaveBeenCalledTimes(1));
+    expect(screen.getByText("Benefício 1")).toBeInTheDocument();
+    expect(screen.getByText("Benefício 2")).toBeInTheDocument();
+
+    const detailButtons = screen.getAllByText("Saber mais");
+    expect(detailButtons).toHaveLength(benefits.length);
   });
 
   it("should update email field", () => {
@@ -63,6 +123,7 @@ describe("LoginNovo", () => {
 
     expect(emailField.value).toBe("[email protected]");
   });
+
   it("should update password field", () => {
     render(
       <BrowserRouter>
@@ -76,4 +137,55 @@ describe("LoginNovo", () => {
 
     expect(passwordField.value).toBe("password123");
   });
+
+  it("modal should be visible after clicking saber mais", async () => {
+    const benefits = [
+      { _id: "1", nome: "Benefício 1", descricao: "descrição beneficio 1" },
+      { _id: "2", nome: "Benefício 2", descricao: "descrição beneficio 2" },
+    ];
+    getBenefitsForm.mockResolvedValue(benefits);
+
+    render(
+      <BrowserRouter>
+        <LoginNovo />
+      </BrowserRouter>
+    );
+
+    await waitFor(() => expect(getBenefitsForm).toHaveBeenCalledTimes(1));
+    await waitFor(() => {
+      const detailButtons = screen.getAllByText("Saber mais");
+      fireEvent.click(detailButtons[0]);
+    });
+
+    expect(screen.getByText("descrição beneficio 1")).toBeVisible();
+  });
+
+  it("modal should not be visible after clicking on the x", async () => {
+    const benefits = [
+      { _id: "1", nome: "Benefício 1", descricao: "descrição beneficio 1" },
+      { _id: "2", nome: "Benefício 2", descricao: "descrição beneficio 2" },
+    ];
+    getBenefitsForm.mockResolvedValue(benefits);
+
+    render(
+      <BrowserRouter>
+        <LoginNovo />
+      </BrowserRouter>
+    );
+
+    await waitFor(() => expect(getBenefitsForm).toHaveBeenCalledTimes(1));
+    await waitFor(() => {
+      const detailButtons = screen.getAllByText("Saber mais");
+      fireEvent.click(detailButtons[0]);
+    });
+
+    expect(screen.getByText("descrição beneficio 1")).toBeVisible();
+
+    await waitFor(() => {
+      const xButton = screen.getByText("x");
+      fireEvent.click(xButton);
+    });
+
+    expect(screen.queryByText("descrição beneficio 1")).toBeNull();
+  });
 });