Cypress With Systemjs

I am attempting to create some basic tests to try out the new Cypress library. In my test I have cy.visit('http://mywebsite.com'); which is loading an AngularJS app that uses Syste

Solution 1:

Not familiar with SystemJS or your app, but if we assume you're doing some asynchronous work on load, you can set up some global property which indicates whether the app is ready or not.

// your main.jslet _appReadyResolver;
window.APP_READY = newPromise( resolve => _appReadyResolver = resolve );

// do some async setupsetTimeout(() => {

    _appReadyResolver();
});

Then, in your tests:

cy.visit("/")
    // by default will wait 4sec for APP_READY prop to exist on//  window object (unfortunately I don't know how to increase timeouts//  of `cy.its` command)// After that, it will wait indefinitely for your promise to resolve
    .its("APP_READY")

That being said --- if you're not doing any async setup in your app, but the main.js is simply being loaded asynchronously and it can take longer than 4sec, then I'd do this:

// index.js
<script>
  SystemJS.import('/js/main.js');
  window.APP_READY = newPromise( resolve => {
    let interval = setInterval(() => {
        if ( window.MAIN_READY ) {
            resolve();
            clearTimeout(interval);
        };
  }, 100 );
</script>

// main.jswindow.MAIN_READY = true;

You'll want to strip the APP_READY logic from production build.

Solution 2:

In theory, you can also solve this in a pure Cypress way.

If your page makes any request which indicates that your app is ready, you can make Cypress wait for it to complete before it proceeds. You might find this cleaner than the APP_READY work-around. Its just an opinion though, as this approach will fail if there are not requests you can trust to signal that your app is ready.

cy.server();
cy.route('**/api/getData').as('getData');
cy.visit('/home');
cy.wait('@getData');

Cypress best practices: Unnecessary-Waiting.

Cypress docs on wait Alias.