Problem when testing a click on link binded by javascripts

[jdeguehegny]

Hi,

I encounter an issue when I test a click behavior on an anchor link into my application.

If I don't use a cy.wait(10000), the test "doOpenAddWidgetDialog" fails some times.

I think the click action in my Cypress test doesn't wait for the "click" event binded by Javascripts of the app but use the native browser handler.

For example:
App I want to test :
https://demo-b2c.orocrm.com/index.php/

And you can find my Cypress test below :

describe('CRM demo tests', function() {
    function doLogin() {
        cy.visit('/')

        cy.get('#prependedInput').type('admin')
        cy.get('#prependedInput2').type('admin')

        cy.get('form').submit()
        cy.get('#user-menu button').should('contain', 'John Doe')
    }

    function doGoDashboard() {
        cy.visit('/dashboard/view/2?change_dashboard=1')
    }

    function doOpenAddWidgetDialog() {
        // cy.wait(10000);
        cy.get('.dashboard-widgets-add').contains('Add widget').should('be.visible').click();
        cy.get('body').should('have.class', 'modal-open');
        cy.get('h3.modal-title').contains('Dashboard Widgets').should('be.visible');
    }

    before(function() {
        cy.clearCookie('CRMID')
    })

    beforeEach(function() {
        Cypress.Cookies.preserveOnce('CRMID')
    })

    it('Login', () => {
        doLogin()
    })

    it('Open add widget dialog', () => {
        doGoDashboard()
        doOpenAddWidgetDialog()
    })
})

I read the Cypress article that talk about that:
https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/

so I tried to use this method, but I have no idea how I can use it with my test because the event is specific to an anchor and it's not a global window object event !

I also tried to use the "pipe" plugin to execute the click in a pipe until an assertion is true, but I have some trouble to use this plugin correctly in my test.

Can someone already have this issue ?
How can I solve it ?
Can you give me a solution based on my test case ?

Regards,

[jjhelguero]

What your test is currently lacking is the combination of spying and waiting on intercepts, checking for loading icons, checking on url updates, and the use of stronger assertions.

Below is what I have added to your test so it should be more stable now and avoids the hardcoded wait. You can run the test here.

// doLogin()
cy.visit("https://demo-b2c.orocrm.com/index.php/user/login");
cy.get("#prependedInput").type("admin");
cy.get("#prependedInput2").type("admin");

// before we log in we spy api call made by the app
cy.intercept("POST", "https://demo-b2c.orocrm.com/index.php/sync/ticket").as(
  "ticket"
);
// spy on navigation bar
cy.intercept(
  "GET",
  "https://demo-b2c.orocrm.com/index.php/api/rest/latest/navigationitems/pinbar"
).as("navBar");
cy.contains(/log in/i)
  // good to have assertions before clicking
  .should("be.visible")
  .and("be.enabled")
  .click();
// check progress bar is shown and then wait for ticket intercept
cy.get("#progressbar").should("be.visible");
cy.wait("@ticket");
// now progress bar should not be visible
cy.get("#progressbar").should("not.be.visible");
// once ticket intercept is completed we are redirected to new page
// so we should check the new url does not contain the '/user/login'
// in the pathname
cy.location("pathname").should("not.include", "/user/login");
// loading icon is shown and we should check it
cy.get(".loader-mask").should("be.visible");
cy.wait("@navBar");
// now loading icon should not be visible
cy.get(".loader-mask").should("not.be.visible");
cy.contains("#user-menu button", "John Doe").should("be.visible");

//doOpenAddWidgetDialog()
// use contains for stronger selection
cy.contains(/Add widget/i)
  .should("be.visible")
  .click();
// now we expect a modal to appear for adding a widget
cy.contains(".modal", /Dashboard Widgets/i).should("be.visible");