Cypress .click() action does not work inside modal

Question

I have bootbox modal triggered when #mybutton is clicked:

$('#mybutton').click(function(){

    bootbox.confirm({
        message: "This is a confirm with custom button text and color! Do you like it?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {
            console.log('This was logged in the callback: ' + result);
        }
    });
});

When I test with cypress everything passes right up to the last test. The click call does not close the modal.

it('Should raise modal and close it', () => {
    cy.visit('myview/');
    cy.get('#mybutton').click();
    cy.get('.modal-title').should('be.visible');     <-- PASSES
    cy.get('.btn-success').click();
    cy.get('.modal-title').should('not.be.visible')  <-- FAILS
});

In reality clicking this button does close the modal. I have tried:

cy.get('.btn-success').click({force: true});
cy.get('.btn-success').trigger('click', {force: true});

Neither work. Am I in some kind of callback hell?

Answer 1

It's good practice to have an assertion then an action. Here you may want to add .should() to check its visibility or enabled for buttons before sending a click to an element.

cy.get('#mybutton').should('be.visible').click();
cy.get('.modal-title').should('be.visible');
cy.get('.btn-success').should('be.visible').click();
cy.get('.modal-title').should('not.be.visible')