CODEWITHSUNDEEP
cypress
soeik
soeik

Reputation: 925

Why stub in cypress may not work for route called after page was loaded

I am using cypress to write tests and have a problem which doesn't appear in every test. In some cases it works and I don't know why. So...

The Problem:

I defined a route and alias for it in beforeEach:

beforeEach(function () {
  cy.server()
  cy.route('GET', '/favourites?funcName=columnPreset', []).as('columnPresetEmpty')
  cy.visit('#/search')
})

Stub works fine if http request occured on page load. But if I perform request responding to click event (modal dialog opens and executes http request) it just appear in commands not makred as stubbed and following cy.wait('@columnPresetEmpty') fails with request timeout.

 it('does not work', function () {
   cy.get('[data-test=button-gridSettings]').click()
   cy.wait('@columnPresetEmpty')
 })

At the same time in other tests I have almost similar functionality where request is performed just by clicking on a button, without opening new modal window. It's the only difference.

What am I doing wrong?

Upvotes: 3

Views: 7135

Answers (3)

soeik
soeik

Reputation: 925

I found the reason causing such behavior. Problem was not in a modal window itself, but code performing second request was called in promise's callback of another request. Something like:

fetch('/initData')
  .then(loadView)

And loadView function executed second fetch.

So when I removed loadView from promise's callback both requests become visible for cypress.

Upvotes: 1

user8745435
user8745435

Reputation:

For info, I tried it out on my search modal (in a Vue app) and it works ok.

What I did:

  • created a dummy file named test-get-in-modal.txt in the app's static folder

  • added an http.get('test-get-in-modal.txt') inside the modal code, so it only runs after the modal is open

  • in the spec, did a cy.server(), cy.route('GET', 'test-get-in-modal.txt', []).as('testGetInModal') in a before()

  • in the it() added cy.wait('@testGetInModal') which succeeded

  • changed to cy.route('GET', 'not-the-file-you-are-looking-for.txt'..., which failed as expected

The only difference I can see is that I cy.visit() the page prior to cy.server(), which is not the documented pattern but seems to be ok in this scenario.

Upvotes: 0

gabberr
gabberr

Reputation: 357

The issue might be cypress can not yet fully handle fetch calls. You can disable it the following way but make sure you have fetch polyfill. This will then issue XHR requests which cypress can observe. 

cy.visit('#/search', {
    onBeforeLoad: (win) => {
        win.fetch = null
    }
})

More to read here: https://github.com/cypress-io/cypress/issues/95#issuecomment-281273126

Upvotes: 4

Related Questions