Teste roberta

.gitignore

@@ -13,5 +13,11 @@ cypress/downloads/
 cypress/screenshots/
 cypress/videos/
 
+
 # misc
 .DS_Store
+cypress/fixtures/
+/Lixo
+/bash.exe.stackdump
+cypress/fixtures/
+cypress/support/

README.md

@@ -24,6 +24,12 @@ Read the following [doc](./docs/TestEnvironment.md) to install and start the bac
 
 Read the following [doc](./docs/TestCases.md) to get a list of test cases.
 
+to run the test cases:
+npx cypress open
+
 ___
 
 Made with ❤️ by [Walmyr](https://walmyr.dev).
+
+
+

cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3000",
+    env: {
+      apiUrl: "http://localhost:3001",
+      CUSTOMERS_API_URL: "http://localhost:3001/customers",
+    },
+  },
+});

cypress/e2e/Api.cy.js

@@ -0,0 +1,37 @@
+describe("EngageSphere API", () => {
+  const apiUrl = Cypress.env("CUSTOMERS_API_URL"); 
+  it("Verificando se na recuperação do cliente o status é 200", () => {
+    const page = 1;
+
+    cy.request({
+      method: "GET",
+      url: `${apiUrl}?page=${page}`, 
+    }).then((response) => {
+      expect(response.status).to.eq(200);
+    });
+  });
+
+  it("Recuperando 10 clientes com sucesso", () => {
+    const page = 1;
+
+    cy.request({
+      method: "GET",
+      url: `${apiUrl}?page=${page}`,
+    }).then((response) => {
+      expect(response.body).to.have.property("customers");
+      expect(response.body.customers).to.be.an("array").that.has.length(10);
+    });
+  });
+
+  it("Realiza a paginação de clientes corretamente", () => {
+    cy.request("GET", `${apiUrl}?page=2`).as("getCustomersPageTwo");
+
+    cy.get("@getCustomersPageTwo").then((response) => {
+      expect(response.body).to.have.property("pageInfo");
+      expect(response.body.pageInfo).to.have.property("currentPage", 2);
+    });
+  });
+});
+
+
+

cypress/e2e/Gui.cy.js

@@ -0,0 +1,63 @@
+describe("EngageSphere GUI", () => {
+  beforeEach(() => {
+    cy.setCookie('cookieConsent', 'accepted');
+    cy.visit("/");
+  });
+  it("Recupera clientes com sucesso e mantém os filtros ao voltar da visualização de detalhes do cliente *)", () => {
+    cy.get('[data-testid="size-filter"]').select('Small');
+    cy.contains('button', 'View').click();
+    cy.contains('button', 'Back').click();
+    cy.get('[data-testid="size-filter"]').should('have.value', 'Small');
+  });
+  it('exibe o rodapé com o texto e links corretos', () => {
+    cy.get('[data-testid="footer"]').should('be.visible')
+    cy.get('[data-testid="footer"]').contains('Copyright 2025 - Talking About Testing')
+    // Verifica os links
+    const links = [
+      { text: 'Blog', href: 'https://talkingabouttesting.com' },
+      { text: 'Courses', href: 'https://talking-about-testing.vercel.app/' },
+      { text: 'Podcast', href: 'https://open.spotify.com/show/5HFlqWkk6qtgJquUixyuKo' },
+      { text: 'YouTube', href: 'https://youtube.com/@talkingabouttesting' }
+    ]
+    links.forEach(link => {
+      cy.get('[data-testid="footer"]')
+        .contains('a', link.text)
+        .should('have.attr', 'href', link.href)
+        .and('have.attr', 'target', '_blank') // Garante que o link abre em nova aba
+    })
+  })
+  it('exibe a saudação padrão "Hi there!" quando nenhum nome é fornecido', () => {
+    cy.get('[data-testid="name"]').type('Joe')
+    cy.get('[data-testid="table"]')
+      .find('h2')
+      .should('contain.text', 'Hi Joe')
+  })
+  it("Retorna à lista de clientes ao clicar no botão Voltar", () => {
+    cy.contains('button', 'View').click();
+    cy.contains('button', 'Back').click();
+    cy.url().should("eq", "http://localhost:3000/");
+
+  });
+  describe("Filtragem por tamanho", () => {
+    const filtros = ['Small', 'Medium', 'Enterprise', 'Large Enterprise', 'Very Large Enterprise'];
+    filtros.forEach((filtro) => {
+      it(`Deve filtrar por ${filtro} e garantir que o filtro permanece ao voltar`, () => {
+        cy.get('[data-testid="size-filter"]').select(filtro);
+        cy.contains('button', 'View').click();
+        cy.contains('button', 'Back').click();
+        cy.get('[data-testid="size-filter"]').should('have.value', filtro);
+      });
+    });
+  });
+  describe("Filtragem por indústria", () => {
+    const industrias = ['Logistics', 'Retail', 'Technology', 'HR', 'Finance'];
+    industrias.forEach((industria) => {
+      it(`Deve filtrar por ${industria} e garantir que o filtro permanece ao voltar`, () => {
+        cy.get('[data-testid="industry-filter"]').select(industria);
+        cy.contains('button', 'View').click();
+        cy.contains('button', 'Back').click();
+        cy.get('[data-testid="industry-filter"]').should('have.value', industria);
+      });
+    });
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/e2e.js

@@ -0,0 +1 @@
+import './commands'

frontend/src/components/CustomerDetails/index.js

@@ -54,7 +54,7 @@ const CustomerDetails = ({ customer, onClick }) => {
           <button className={styles.showAddressBtn} onClick={showAddressHandler}>Show address</button>
         </div>
       )}
-      <Button text="Back" onClick={onClick} />
+      <Button text="Back" onClick={onClick} datatest="button-back" />
     </div>
   )
 }

frontend/src/components/Greeting/index.js

@@ -13,3 +13,5 @@ const Greeting = ({ name }) => {
 }
 
 export default Greeting
+
+

frontend/src/components/Table/index.js

@@ -67,9 +67,9 @@ const Table = ({
             <td>{customer.industry}</td>
             <td>{customer.employees}</td>
             <td>{customer.size}</td>
-            <td onClick={() => customerActionClickHandler(customer)}>
+            <td onClick={() => customerActionClickHandler(customer)} >
               <strong>
-                <button aria-label={`View company: ${customer.name}`} key={customer.id} onClick={() => customerActionClickHandler(customer)}>
+                <button aria-label={`View company: ${customer.name}`} key={customer.id} onClick={() => customerActionClickHandler(customer)} >
                   View
                 </button>
               </strong>
@@ -82,3 +82,101 @@ const Table = ({
 }
 
 export default Table
+
+
+
+// import { useState } from 'react'
+
+// import styles from './Table.module.css'
+
+// const Table = ({
+//   customers,
+//   customerActionClickHandler,
+// }) => {
+//   const [sortCriteria, setSortCriteria] = useState('size')
+//   const [sortOrder, setSortOrder] = useState('desc')
+
+//   const sortCustomers = (criteria) => {
+//     if (sortCriteria === criteria) {
+//       setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
+//     } else {
+//       setSortOrder('desc')
+//     }
+//     setSortCriteria(criteria)
+//   }
+
+//   const sortedCustomers = [...customers].sort((a, b) => {
+//     const order = sortOrder === 'asc' ? 1 : -1
+//     if (sortCriteria === 'size') {
+//       const mapSizeToNumber = (size) => {
+//         switch (size.toLowerCase()) {
+//           case 'small': return 1
+//           case 'medium': return 2
+//           case 'enterprise': return 3
+//           case 'large enterprise': return 4
+//           case 'very large enterprise': return 5
+//           default: return 0
+//         }
+//       }
+//       return order * (mapSizeToNumber(a[sortCriteria]) - mapSizeToNumber(b[sortCriteria]))
+//     }
+//     return order * (a[sortCriteria] - b[sortCriteria])
+//   })
+
+//   const sortNumberOfEmployeesHandler = () => sortCustomers('employees')
+//   const sortSizeHandler = () => sortCustomers('size')
+
+//   return (
+//     <table border="1" className={styles.container} data-test="customer-table">
+//     <thead>
+//       <tr data-test="customer-table-header">
+//         <th scope="col">ID</th>
+//         <th scope="col">Company name</th>
+//         <th scope="col">Industry</th>
+//         <th scope="col" onClick={sortNumberOfEmployeesHandler} data-test="sort-employees-header">
+//           <button onClick={sortNumberOfEmployeesHandler} data-test="sort-employees-button">
+//             Number of employees 
+//             {sortCriteria === 'employees' && (sortOrder === 'asc' ? <span aria-label="ordering by number of employees asc">&uarr;</span> : <span aria-label="ordering by number of employees desc">&darr;</span>)}
+//           </button>
+//         </th>
+//         <th scope="col" onClick={sortSizeHandler} data-test="sort-size-header">
+//           <button onClick={sortSizeHandler} data-test="sort-size-button">
+//             Size 
+//             {sortCriteria === 'size' && (sortOrder === 'asc' ? <span aria-label="ordering by size asc">&uarr;</span> : <span aria-label="ordering by size desc">&darr;</span>)}
+//           </button>
+//         </th>
+//         <th scope="col">Action</th>
+//       </tr>
+//     </thead>
+//     <tbody>
+//       {sortedCustomers.map((customer, index) => (
+//         <tr key={customer.id} data-test={`customer-row-${index}`}>
+//           <td data-test={`customer-id-${index}`}>{customer.id}</td>
+//           <td data-test={`customer-name-${index}`}>{customer.name}</td>
+//           <td data-test={`customer-industry-${index}`}>{customer.industry}</td>
+//           <td data-test={`customer-employees-${index}`}>{customer.employees}</td>
+//           <td data-test={`customer-size-${index}`}>{customer.size}</td>
+//           <td onClick={() => customerActionClickHandler(customer)} data-test={`customer-action-${index}`}>
+//             <strong>
+//               <button
+//                 aria-label={`View company: ${customer.name}`}
+//                 key={customer.id}
+//                 onClick={() => customerActionClickHandler(customer)}
+//                 data-test={`view-customer-${index}`}
+//               >
+//                 View
+//               </button>
+//             </strong>
+//           </td>
+//         </tr>
+//       ))}
+//     </tbody>
+//     </table>
+
+//   )
+// }
+
+// export default Table
+
+
+