using click() in Cypress

Question

I am testing my app using Cypress, in my app there is a one minute timer. When the timer expires, no button should work. To put it more precisely, even though the user clicks on buttons, nothing should happen (functions connected to those buttons should not be triggered). How can I test such a thing?

cy.get('#timer-btn').click().wait(60000)
cy.get('#timer').should('have.text', 'TIME IS UP, your score is: 0')
cy.get('.btn').click() 
//???

Answer 1

1. Instead of using wait use timeout because wait waits for a total of 60 seconds, but with a timeout, it is terminated whenever the expected condition is met.

cy.get('#timer-btn').click()
cy.get('#timer', {timeout: 60000}).should(
  'have.text',
  'TIME IS UP, your score is: 0'
)
cy.get('.btn').click()

2. Now if the button is disabled after 60 seconds you can use:

cy.get('#timer-btn').click()
cy.get('#timer', {timeout: 60000}).should(
  'have.text',
  'TIME IS UP, your score is: 0'
)
cy.get('.btn').should('be.disabled')

3. Now, if you see on comparing the HTML of the button during and after the timer, if any attribute-value pair is added to the button after the timer is completed, you can assert that using:

cy.get('#timer-btn').click()
cy.get('#timer', {timeout: 60000}).should(
  'have.text',
  'TIME IS UP, your score is: 0'
)
cy.get('.btn').should('have.attr', 'attr-name', 'attr-value')

4. If you see just an attribute is added you can just use

cy.get('.btn').should('have.attr', 'attr-name')

Answer 2

I believe you could use cy.clock() and .tick() to manipulate the time the browser thinks has passed

cy.clock();
cy.get('#timer-btn').click();
cy.tick(60000);
cy.get('#timer').should('have.text', 'TIME IS UP, your score is: 0');
cy.get('.btn').click();