exercicios nivel 1 #4
Conversation
There was a problem hiding this comment.
Parabéns pela resolução dos exercícios @eduardoeffs. 👏🏻
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.
…racoes desnecessarias
…ar apenas a parte estatica do messenger header
|
Alterações realizadas! |
There was a problem hiding this comment.
Mais uma vez ótimo trabalho @eduardoeffs! 💯
Deixei outros comentários para lhe ajudar a melhorar ainda mais o design do código.
Lembre-se se só enviar novas mudanças para revisão após o terceiro encontro da Test Design Masterclass.
| it('Should show and hide a success message upon successfully sending the messenger form', () => { | ||
| cy.clock(); | ||
| cy.get('[aria-label="Open messenger"]') | ||
| .click(); |
There was a problem hiding this comment.
| .click(); | |
| .click(); | |
E um dos próximos encontros falaremos sobre o padrão 3A - AAA (Arrange, Act, Assert).
Ao utilizar essa convensão, é recomendado deixar uma linha em branco entre as pré-condições do teste (Arrange), as ações (Act) e as verificações de resultados esperado (Assert).
There was a problem hiding this comment.
Olá, não dei Resolve neste pois não ajustei.
| cy.get('#message') | ||
| .type('Test message'); | ||
| cy.get('button[type="submit"]') | ||
| .click(); |
There was a problem hiding this comment.
Até aqui seriam as ações (Act).
| .click(); | |
| .click(); | |
E abaixo as verificações (Assert).
There was a problem hiding this comment.
Recomendo revisitar isso para os outros testes também
…ra cy, removendo linha desnecessearia no cypress config
… para verificar o texto quando abro o messenger
There was a problem hiding this comment.
@eduardoeffs, parabéns pela resolução dos exercícios. 👏🏻
Deixei alguns últimos comentários, os quais acredito que lhe ajudarão a desenvolver testes com um design melhor ainda.
Espero que tenhas gostado da experiência.
| cy.request('GET', CUSTOMERS_API_URL) | ||
| .then(({status, body}) => { | ||
| expect(status).to.eq(200); | ||
| expect(body).to.have.property('customers'); |
There was a problem hiding this comment.
Que tal também verificar as sub-propriedades de customers?
| failOnStatusCode: false, | ||
| }).then(({status, body}) => { | ||
| expect(status).to.eq(400); | ||
| expect(body).to.have.property('error'); |
There was a problem hiding this comment.
Que tal verificar a mensagem de erro propriamente dita?
There was a problem hiding this comment.
O mesmo vale para outros testes de cenários de erro.
There was a problem hiding this comment.
A propósito, que tal testar também o cenário onde page=0, visto que a mensagem de erro retornada é Invalid page or limit. Both must be positive numbers.
Perceba o positive numbers.
| @@ -0,0 +1,155 @@ | |||
| describe('EngageSphere', () => { | |||
| beforeEach(() => { | |||
| Cypress.on('window:before:load', window => { | |||
There was a problem hiding this comment.
Uma solução ainda mais simples, a qual substituiria 3 linhas por uma, seria a seguinte.
cy.setCookie('cookieConsent', 'accepted')Que tal?
| cy.contains('button', 'View') | ||
| .click() | ||
| cy.get('[class^="CustomerDetail"] h2') | ||
| .should('be.visible'); |
There was a problem hiding this comment.
| .should('be.visible'); | |
| .should('be.visible'); | |
| cy.get('[class^="CustomerDetail"] h2') | ||
| .should('be.visible'); | ||
| cy.contains('button', 'Back') | ||
| .click(); |
There was a problem hiding this comment.
| .click(); | |
| .click(); | |
É uma boa prática separar pré-condições, ações e resultados esperados por uma linha em branco.
Isso facilita identificar cada parte do teste.
Falaremos mais sobre isso no último encontro da Test Design Masterclass quando abordarmos o padrão AAA (Arrange, Act, Assert).
There was a problem hiding this comment.
O mesmo vale para os demais testes.
| it('Should return to the customer list after clicking back', () => { | ||
| cy.contains('button', 'View') | ||
| .click() | ||
| cy.get('[class^="CustomerDetail"] h2') |
There was a problem hiding this comment.
Que tal um seletor mais simples, como o seguinte?
| cy.get('[class^="CustomerDetail"] h2') | |
| cy.contains('h2', 'Customer Details') |
Dessa forma, garantimos que o texto correto é exibido no h2.
|
|
||
| it('Should display the footer with the correct text and links', () => { | ||
| cy.contains('p', 'Copyright 2024 - Talking About Testing') | ||
| .should('be.visible'); |
There was a problem hiding this comment.
Atenção com a indentação.
Aqui devia ser assim:
| .should('be.visible'); | |
| .should('be.visible'); |
There was a problem hiding this comment.
O mesmo vale para outros lugares onde a indentação está incorreta.
There was a problem hiding this comment.
Consistência é importante para um bom design.
|
|
||
| it('Should displays the greeting "Hi, Joe" when the name Joe is given', () => { | ||
| cy.get('input[type="text"]') | ||
| .type('Joe'); |
There was a problem hiding this comment.
| .type('Joe'); | |
| .type('Joe'); | |
Só separando ação de resultado esperado.
There was a problem hiding this comment.
Aplique o mesmo aos outros testes.
E antes de fazer tal separação, pense bem sobre quais são as pré-condições dos testes, suas ações e seus resultados esperados.
| it('Should display title, theme switcher and input field', () => { | ||
| cy.contains('h1', 'EngageSphere') | ||
| .should('be.visible'); | ||
| cy.get('[class^="ThemeToggle_button"]') |
There was a problem hiding this comment.
Visto que seletores assim se repetem ao longo do código, que tal criar um comando customizado chamado getByClassThatStartsWith?
O mesmo seria implementado assim:
Cypress.Commands.add('getByClassThatStartsWith', classPart => {
cy.get(`[class^="${classPart}"]`)
})E seria usado assim:
cy.getByClassThatStartsWith('ThemeToggle_button')There was a problem hiding this comment.
Acabo de ver mais abaixo que você já criou tal comando, portanto, recomendo usá-lo aqui.
| .should('be.visible'); | ||
| cy.get('[aria-label="Close messenger"]') | ||
| .click(); | ||
| cy.get('[class^="Messenger_header"]') |
No description provided.