Add Cypress tests for UI interactions and form validations by brunonf15 · Pull Request #2 · wlsf82/EngageSphere-Test-Design-Masterclass-Turma-4

brunonf15 · 2025-03-15T10:31:09Z

✅ Updated Pull Request Description:

Summary:
This PR enhances and refines Cypress tests to validate key UI functionalities, including form validations, messenger interactions, footer verification, and responsive table behavior.

Changes include:

🛠 Improved button selection strategies using CSS attribute selectors instead of relying on data-testid.
📩 Enhanced messenger interactions (open, close, submit, reset behavior).
🔍 More robust footer link verification (ensuring correct attributes and behavior).
📱 Updated responsive table test (confirming correct columns are shown/hidden in mobile view).

How to Test:

Run npm run cypress:open or npx cypress run.
Verify that all tests pass in the Cypress Test Runner.

Why?

Improves test reliability by using CSS attribute selectors instead of relying solely on data-testid.
Ensures the UI behaves correctly across different scenarios.
Helps catch regressions in future updates.

Reviewer Notes:

Focus on how I mapped the buttons without data-testid, using:
```
cy.get('[class^="Messenger_openCloseButton"]') 
```

wlsf82

Bom trabalho @brunonf15! 🎉

No entanto, deixei uma série de comentários ao longo do seu código, os quais creio que lhe ajudarão a melhorar o design do mesmo.

Obs.: Só faça novas alterações depois do encontro de hoje da Test Design Masterclass.

.prettierrc

cypress.config.js

cypress/e2e/api/engageAPI.cy.js

cypress/e2e/e2e/engageE2e.cy.js

cypress/support/commands.js

frontend/src/components/Button/index.js

frontend/src/components/Greeting/index.js

frontend/src/components/Messenger/index.js

package.json

wlsf82

Bom trabalho @brunonf15! 👏🏻 👏🏻

No entanto, deixei novos comentários, os quais creio que lhe ajudarão a melhorar ainda mais o design dos testes.

Lembre-se de aplicar as mudanças sugeridas somente após o terceiro encontro da Test Design Masterclass da TAT.

.prettierrc

README.md

cypress/e2e/e2e/engageGUI.cy.js

Adding new scripts to run API and gui tests Adding new scripts to run Cypress tests Rename api and gui tests Updating the readme

Renaming the tests cases acording to the list Adding some extra spactes to improve the readbility of the tests

Using a command Adding more spaces to improve the readability of the code

wlsf82

Bom demais @brunonf15! Com ajustes de pequenos detalhes essa suíte de testes ficará 🔝

👏🏻 👏🏻 👏🏻

wlsf82 · 2025-03-28T22:19:09Z

README.md

+### Installing Cypress
+
+1. Install Cypress as a development dependency by running:
+```bash


Suggested change

```bash

```bash

wlsf82 · 2025-03-28T22:19:32Z

README.md

+```bash
+npm install 
+```
+


Uma linha em branco já é o suficiente.

Suggested change

wlsf82 · 2025-03-28T22:19:58Z

README.md

+
+- **API Tests**: Located in `cypress/e2e/api/engageSphere.cy.js`.
+- **GUI Tests**: Located in `cypress/e2e/gui/engageSphere.cy.js`.
+


O mesmo aqui.

Suggested change

wlsf82 · 2025-03-28T22:20:35Z

README.md

+```bash
+npm test
+```
+


Suggested change

wlsf82 · 2025-03-28T22:20:55Z

README.md

+```bash
+npm run test:api
+```
+


Suggested change

wlsf82 · 2025-03-28T22:41:04Z

cypress/e2e/gui/engageSphere.cy.js

+    cy.getByClassThatStartsWith('Messenger_success')
+      .should('be.visible')
+      .and('contain', 'Your message has been sent.');
+    cy.tick(3000);


Suggested change

cy.tick(3000);

cy.tick(3000);

Deixando uma linha pra separar o assert.

wlsf82 · 2025-03-28T22:41:47Z

cypress/e2e/gui/engageSphere.cy.js

+  });
+
+  it('Limpa todos os campos do formulário do messenger ao preenchê-los, fechar o messenger e abri-lo novamente', () => {
+    cy.getByClassThatStartsWith('Messenger_openCloseButton').click();


Suggested change

cy.getByClassThatStartsWith('Messenger_openCloseButton').click();

// Arrange

cy.getByClassThatStartsWith('Messenger_openCloseButton').click();

// Act

wlsf82 · 2025-03-28T22:42:10Z

cypress/e2e/gui/engageSphere.cy.js

+    cy.getByClassThatStartsWith('Messenger_openCloseButton').click();
+    cy.getByClassThatStartsWith('Messenger_openCloseButton').click();
+
+    cy.get('#messenger-name').should('have.value', '');


E então:

Suggested change

cy.get('#messenger-name').should('have.value', '');

// Assert

cy.get('#messenger-name').should('have.value', '');

wlsf82 · 2025-03-28T22:42:32Z

cypress/e2e/gui/engageSphere.cy.js

+    cy.contains('th', 'Size').should('not.be.visible');
+  });
+
+  it('Bug - Edit name bloquado apos filtro não retornar dados', () => {


A descrição do caso de teste deve ser do comportamento sendo testado, não a descrição do bug.

Algo como:

Suggested change

it('Bug - Edit name bloquado apos filtro não retornar dados', () => {

it('Reativa o campo de entrada ao retornar de um filtro de estado vazio para um não vazio', () => {

wlsf82 · 2025-03-28T22:47:44Z

cypress/e2e/support/commands.js

@@ -0,0 +1,3 @@
+Cypress.Commands.add('getByClassThatStartsWith', classPart => {
+    cy.get(`[class^="${classPart}"]`)
+  })


Suggested change

})

})

wlsf82 · 2025-03-28T22:56:28Z

cypress/e2e/api/engageSphere.cy.js

+    });
+  });
+
+  it('Trata requisições inválidas (por exemplo, página negativa)', () => {


Que tal criar também casos de testes para os cenários onde page e limit são iguais a 0?

wlsf82 · 2025-03-28T23:02:24Z

cypress/e2e/api/engageSphere.cy.js

+      }
+    }).then((response) => {
+      const totalCustomers = response.body.pageInfo.totalCustomers;
+      const expectedTotalPages = Math.ceil(totalCustomers / limit);


Explicarei com detalhes esse teste no encontro de amanhã.

wlsf82 · 2025-03-29T13:24:08Z

cypress.config.js

+module.exports = defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3000",
+    supportFile: false,


Visto que você criou o comando customizado, remova esta configuração, crie o arquivo cypress/support/e2e.js e dentro dele importe o arquivo cypress/support/commands.js.

wlsf82 requested changes Mar 15, 2025

View reviewed changes

brunonf15 force-pushed the main branch from 9933be9 to 0303df2 Compare March 21, 2025 14:47

Adicionando testes em Cypress ao projeto

540342c

brunonf15 force-pushed the main branch from 0303df2 to 540342c Compare March 21, 2025 14:48

Updating the README.md

56248f1

brunonf15 requested a review from wlsf82 March 21, 2025 16:01

wlsf82 requested changes Mar 21, 2025

View reviewed changes

brunonf15 added 8 commits March 25, 2025 18:32

Fixing setCookie

6c81181

Fixing PR suggestions

4ed90d7

Adding new scripts to run API and gui tests Adding new scripts to run Cypress tests Rename api and gui tests Updating the readme

Adding better name to the alias

cb66467

Fixing the PR suggestions

049d0c6

Renaming the tests cases acording to the list Adding some extra spactes to improve the readbility of the tests

Fixing the latest suggestions

aab44f6

Using a command Adding more spaces to improve the readability of the code

Adding more API tests

571c6e6

Adding a new test to evidence the bug

abb5339

Removing prettier

2e7f039

wlsf82 requested changes Mar 28, 2025

View reviewed changes

wlsf82 requested changes Mar 29, 2025

View reviewed changes


		- API Tests: Located in `cypress/e2e/api/engageSphere.cy.js`.
		- GUI Tests: Located in `cypress/e2e/gui/engageSphere.cy.js`.

	cy.get('#messenger-name').should('have.value', '');
	// Assert
	cy.get('#messenger-name').should('have.value', '');

	it('Bug - Edit name bloquado apos filtro não retornar dados', () => {
	it('Reativa o campo de entrada ao retornar de um filtro de estado vazio para um não vazio', () => {

Conversation

brunonf15 commented Mar 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Updated Pull Request Description:

Uh oh!

wlsf82 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wlsf82 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

wlsf82 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

brunonf15 commented Mar 15, 2025 •

edited

Loading