赛普拉斯与SystemJS [英] Cypress with SystemJS

问题描述

我正在尝试创建一些基本测试来试用新的赛普拉斯库。在我的测试中，我有 cy.visit（'http://mywebsite.com'）; ，它正在加载使用SystemJS的AngularJS应用程序。

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 SystemJS.

如果我正确理解赛普拉斯，我不应该做任何其他事情，它会确保在运行其他任何内容之前加载页面。但是这似乎没有用，因为页面已加载，但SystemJS仍在加载模块。

If I understand Cypress correctly, I shouldn't have to do anything else and it will make sure the page is loaded before running anything else. However this doesn't seem to be working because the page is loaded, but SystemJS is still loading the modules.

如何让赛普拉斯等待所有的SystemJS模块在运行任何更多测试之前加载而不使用 cy.wait（5000）？

How can I get Cypress to wait for all the SystemJS modules to load before running any more tests without using cy.wait(5000)?

EDIT

感谢Dwelle这是适合我的解决方案。我将初始System.import包装在一个AngularJS应用程序被引导后解析的承诺中。

Thanks to Dwelle this is the solution that works for me. I wrap the initial System.import in a promise that gets resolved once the AngularJS app has been bootstrapped.

window.APP_READY = new Promise(function(resolve, reject) {
    System.import('app').then(function(app) {
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['app']);
            resolve();
        });
    });
});

然后在测试中

cy.visit('http://mywebsite.com').its('APP_READY');

推荐答案

不熟悉SystemJS或您的应用，但如果我们假设您在加载时正在进行一些异步工作，您可以设置一些全局属性来指示应用程序是否准备就绪。

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.js
let _appReadyResolver;
window.APP_READY = new Promise( resolve => _appReadyResolver = resolve );

// do some async setup
setTimeout(() => {

    _appReadyResolver();
});

然后，在你的测试中：

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")

这就是说 - 如果您没有在您的应用中进行任何异步设置，但 main.js 只是异步加载，可能需要4秒以上，然后我会这样做：

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 = new Promise( resolve => {
    let interval = setInterval(() => {
        if ( window.MAIN_READY ) {
            resolve();
            clearTimeout(interval);
        };
  }, 100 );
</script>

// main.js
window.MAIN_READY = true;

你想剥去 APP_READY 来自生产构建的逻辑。

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

这篇关于赛普拉斯与SystemJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！