Primeiro PR Teste #6

fabianoseller · 2024-10-09T23:42:51Z

Teste 01 API

wlsf82

Parabéns pela resolução dos exercícios @fabianoseller. 👏🏻

Deixei comentários ao longo do seu código, os quais creio que lhe ajudarão a melhorar o design do mesmo.

Aguarde até o próximo encontro antes de implementar as mudanças.

cypress.config.js

cypress/e2e/apiTeste1.cy.js

wlsf82 · 2024-10-10T01:03:28Z

cypress/e2e/apiTeste1.cy.js

+    const UI_URL = 'http://localhost:3000'
+
+    const clickCookieConsent = () => {
+      cy.wait(2000) // Espera 2 segundos para garantir que a página carregou completamente


NUNCA use cy.wait(Number).

Isso é uma má prática que:

Ou vai fazer o teste mais lento do que o necessário se a página carregar antes desse tempo.

Ou vai tornar o teste não determinísito, se tal tempo não for o suficiente.

O Cypress já tem mecanismos de espera bem estabelecidos, portanto, evite isso.

Se for usar o cy.wait(), utilize-o em conjunto com o cy.intercept(...).as('alias'), onde após uma ação do usuário disparar tal requisição, você possa verificar por ela, através de seu alias. Ex.: cy.wait('@alias').

Ok, retirado.

Ok, removido.

wlsf82 · 2024-10-10T01:09:38Z

cypress/e2e/apiTeste1.cy.js

+    beforeEach(() => {
+      cy.visit(UI_URL, {
+        onBeforeLoad: (win) => {
+          win.localStorage.setItem('cookieConsent', 'true');


Os valores corretos para o cookieConsent são accepted ou declined.

Ok, revisado.

Ok, resolvido.

wlsf82 · 2024-10-10T01:11:34Z

cypress/e2e/apiTeste1.cy.js

+        }
+      })
+    })
+  })


É recomendado deixar uma linha em branco ao final de cada arquivo.

Dessa forma, ferramentas como o GitHub não exibem o ícone de No newline at end of file.

Isso é uma boa prática e convenção que deve ser seguida.

Suggested change

})

})

wlsf82 · 2024-10-10T01:12:30Z

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{


Recomendo deletar tal arquivo visto que ele não está sendo usado.

Segue uma explicação abaixo:

Deixar as pastas cypress/fixtures/ e cypress/support/ quando estas não estão em uso

É comum alunos/as escreverem testes que não fazem uso dos arquivos contidos nas pastas cypress/fixtures/ e cypress/support/.

Por que tal prática fere um bom design de testes?

Tal prática aumenta a complexidade do projeto, visto que é mais código para ler e entender.

Sugestão com um melhor design

Caso os arquivos das pastas citadas acima não estejam sendo usados, é recomendado deletar tais pastas por completo e configurar o Cypress para ignorá-las, conforme demonstrado abaixo.

// cypress.config.js const { defineConfig } = require('cypress') module.exports = defineConfig({ e2e: { baseUrl: '...', supportFile: false }, fixturesFolder: false, })

Dessa forma, ao inicializar o Cypress, o mesmo não irá re-gerar tais arquivos e pastas, a base de código estará menor e mais simples, que é exatamente o que buscamos com um bom design (simplicidade).

Como corrigido se o arquivo continua aqui?

Ok. verificado.

wlsf82 · 2024-10-10T01:12:40Z

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************


Mesmo que o comentário anterior.

wlsf82 · 2024-10-10T01:14:39Z

package.json

@@ -30,5 +30,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "dependencies": {
+    "cypress": "^13.15.0"


O Cypress deveria ter sido instalado como devDependencies, não dependencies.

Segue uma explicação detalhada abaixo:

Instalação de libs (ou packages) como dependencies em vez de devDependencies

É comum alunos/as instalarem packages do npm que servem para suportar o desenvolvimento de aplicações como dependencies em vez de devDependencies.

Por que tal prática fere um bom design de testes?

Tal prática prejudica o desempenho do projeto, visto que mais pacotes externos exigem mais tempo para serem baixados da internet e em esteiras de entrega contínua, é possível configurar que somente as dependencies sejam instaladas no momento da implantação de uma nova versão em um ambiente produtivo, por exemplo, sem perda de tempo instalando devDependencies.

Sugestão com um melhor design

Basta entender o pra que serve cada pacote e instalar os pacotes certos do jeito certo.

Aqui vai uma breve explicação:

No contexto de módulos npm, a principal diferença entre dependencies e devDependencies está no momento em que os pacotes são necessários:

dependencies: São os pacotes essenciais que o projeto precisa para funcionar em produção. Esses módulos são instalados quando o projeto é executado em ambientes finais, como servidores de produção ou em builds de lançamento. São usados diretamente pelo código do projeto durante a execução (ex.: React).

devDependencies: São pacotes usados apenas durante o desenvolvimento e testes do projeto. Incluem ferramentas como linters, frameworks de testes e geradores de documentação. Esses módulos não são necessários em produção e, portanto, não são instalados quando o projeto é implementado nesse ambiente, exceto se forem explicitamente requisitados.

Em resumo, dependencies são para a execução do projeto, enquanto devDependencies são para o suporte ao desenvolvimento do mesmo.

Faltou esse ajuste.

Ok. },
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"cypress"

wlsf82

Tá na mão @fabianoseller. 👍🏻

Deixei alguns comentários, os quais creio que lhe ajudarão a melhorar o design dos testes.

Além disso, a maioria dos testes não estão passando, conforme imagem em anexo.

Da próxima vez, recomendo testar localmente antes de mandar para revisão.

Lembre-se de só enviar mudanças para um novo round de code review depois do próximo encontro da Test Design Masterclass (depois de 19/10/2024).

cypress.config.js

cypress/e2e/EngageSphere.cy.js

cypress/support/commands.js

frontend/package.json

wlsf82 · 2024-10-17T21:41:29Z

package.json

@@ -30,5 +30,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "dependencies": {
+    "cypress": "^13.15.0"


Faltou esse ajuste.

fabianoseller

Tentei arrumar alguns códigos mas quebraram outros...perdão.

fabianoseller

Enviando novamente

Co-authored-by: Walmyr <wlsf82@gmail.com>

wlsf82

@fabianoseller, parabéns pela resolução dos exercícos.

Deixei novos comentários, os quais espero que lhe ajudem a desenvolver habilidades de design de testes automatizados.

Uma observação: senti falta de criar testes para a interface gráfica de usuário.

Sua suíte de testes só validou a API. Ou seja, se a GUI estiver "quebrada" seus testes não vão pegar isso.

Espero que tenhas gostado da experiência de code review da Test Design Masterclass da Talking About Testing. 😉

wlsf82 · 2024-11-01T15:51:10Z

cypress.config.js

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


Você está definindo a URL do frontend mas deletou todos os testes para esta parte da aplicação.

Se o frontend não está mais sendo testado, esta configuração não se faz necessária.

A propósito, o que o levou a deletar os testes do frontend?

wlsf82 · 2024-11-01T15:51:30Z

cypress/e2e/EngageSphere.cy.js

@@ -0,0 +1,72 @@
+// cypress/e2e/api/customers.cy.js


Todos os testes deste arquivo estão falhando, portanto, não irei revisá-lo.

wlsf82 · 2024-11-01T15:52:19Z

cypress/e2e/api/customers.cy.js

@@ -0,0 +1,70 @@
+// cypress/e2e/api/customers.cy.js


Este comentário é complemente desnecessário, visto que simplemente replica o caminho do arquivo na estrutura de pastas.

Recomendo removê-lo por completo.

wlsf82 · 2024-11-01T15:53:10Z

cypress/e2e/api/customers.cy.js

+    it('returns a list of customers with default pagination', () => {
+      cy.request(CUSTOMERS_API_URL).then(({ status, body }) => {
+        expect(status).to.eq(200);
+        expect(body).to.have.property('customers').that.is.an('array');


Que tal verificar também as sub-propriedades de customers, assim como fez com as sub-propriedades de pageInfo?

wlsf82 · 2024-11-01T15:56:41Z

cypress/e2e/api/customers.cy.js

+      cy.request(CUSTOMERS_API_URL).then(({ status, body }) => {
+        expect(status).to.eq(200);
+        const customer = body.customers[0];
+        expect(customer).to.have.all.keys('id', 'name', 'employees', 'industry', 'contactInfo', 'address', 'size');


Estas verificações poderiam estar no primeiro teste desta suíte, evitando um teste a mais.

Quanto menos testes, mais rápido o feedback.

wlsf82 · 2024-11-01T15:57:49Z

cypress/support/e2e.js

+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')


Suggested change

// require('./commands')

// require('./commands')

Recomenda-se deixar uma linha em branco ao final de cada arquivo.

Dessa forma, ferramentas como o GitHub não exibem o ícone de No newline at end of file.

Isso é uma boa prática e convenção a ser seguida.

wlsf82 · 2024-11-01T15:58:43Z

frontend/package.json

@@ -8,7 +8,8 @@
    "react-scripts": "^5.0.1"
  },
  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+     "cypress": "^13.15.0"


Visto que você não está testando o frontend à nível de componentes, não há a necessidade de instalar o Cypress na pasta frontend/.

wlsf82 · 2024-11-01T15:59:12Z

package.json

@@ -17,7 +17,8 @@
  "license": "MIT",
  "homepage": "https://github.com/wlsf82/EngageSphere-Test-Design-Masterclass-Turma-3/blob/main/README.md",
  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "cypress": "^13.12.0"


Que tal atualizar para a versão mais recente do Cypress?

fabianoseller added 2 commits October 8, 2024 21:26

Teste api 01

1fa3116

Teste api 01_1

8912001

wlsf82 requested changes Oct 10, 2024

View reviewed changes

REvisão 2 de código e criação arquivo clientList

6bc8287

fabianoseller requested a review from wlsf82 October 17, 2024 01:39

fabianoseller added 2 commits October 17, 2024 13:57

Revisão 3 de código e alteração nome arquivo para EngageSphere

83b1f60

Revisão 3 de código e alteração nome arquivo para EngageSphere

e5aaf23

wlsf82 requested changes Oct 17, 2024

View reviewed changes

Revisão incompleta

ae9103b

fabianoseller requested a review from wlsf82 October 31, 2024 01:05

fabianoseller commented Oct 31, 2024

View reviewed changes

fabianoseller marked this pull request as draft October 31, 2024 13:42

fabianoseller marked this pull request as ready for review October 31, 2024 13:43

fabianoseller and others added 3 commits October 31, 2024 10:46

Update cypress.config.js

d76f37f

Co-authored-by: Walmyr <wlsf82@gmail.com>

Update frontend/package.json

de13a3c

Co-authored-by: Walmyr <wlsf82@gmail.com>

Update frontend/package.json

68f98e8

Co-authored-by: Walmyr <wlsf82@gmail.com>

wlsf82 requested changes Nov 1, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Primeiro PR Teste #6

Primeiro PR Teste #6

fabianoseller commented Oct 9, 2024

wlsf82 left a comment

wlsf82 Oct 10, 2024

fabianoseller Oct 31, 2024

fabianoseller Oct 31, 2024

wlsf82 Oct 10, 2024

fabianoseller Oct 31, 2024

fabianoseller Oct 31, 2024

wlsf82 Oct 10, 2024

fabianoseller Oct 31, 2024

wlsf82 Oct 10, 2024

fabianoseller Oct 17, 2024

wlsf82 Oct 17, 2024

fabianoseller Oct 31, 2024

wlsf82 Oct 10, 2024

fabianoseller Oct 31, 2024

wlsf82 Oct 10, 2024

wlsf82 Oct 17, 2024

fabianoseller Oct 31, 2024

wlsf82 left a comment •

edited

Loading

wlsf82 Oct 17, 2024

fabianoseller left a comment

fabianoseller left a comment

wlsf82 left a comment

wlsf82 Nov 1, 2024

wlsf82 Nov 1, 2024

wlsf82 Nov 1, 2024

wlsf82 Nov 1, 2024

wlsf82 Nov 1, 2024

wlsf82 Nov 1, 2024

wlsf82 Nov 1, 2024

wlsf82 Nov 1, 2024

		@@ -0,0 +1,25 @@
		// ***********************************************

Primeiro PR Teste #6

Are you sure you want to change the base?

Primeiro PR Teste #6

Conversation

fabianoseller commented Oct 9, 2024

wlsf82 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Deixar as pastas cypress/fixtures/ e cypress/support/ quando estas não estão em uso

Por que tal prática fere um bom design de testes?

Sugestão com um melhor design

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Instalação de libs (ou packages) como dependencies em vez de devDependencies

Por que tal prática fere um bom design de testes?

Sugestão com um melhor design

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wlsf82 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fabianoseller left a comment

Choose a reason for hiding this comment

fabianoseller left a comment

Choose a reason for hiding this comment

wlsf82 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Deixar as pastas `cypress/fixtures/` e `cypress/support/` quando estas não estão em uso

Instalação de libs (ou packages) como `dependencies` em vez de `devDependencies`

wlsf82 left a comment •

edited

Loading