带SystemJS的柏树

Question

我正在尝试创建一些基本测试来尝试新的柏树库。在我的测试中，我有一个cy.visit('http://mywebsite.com');，它正在加载一个使用SystemJS的AngularJS应用程序。

如果我正确理解Cypress，我不需要做任何其他的事情，它将确保页面在运行其他内容之前已经加载。但是，这似乎不起作用，因为页面已经加载，但是SystemJS仍然在加载模块。

如何让Cypress在没有使用SystemJS的情况下运行更多测试之前等待所有的cy.wait(5000)模块加载？

编辑

多亏了德维勒，这是对我有用的解决方案。我将初始System.import封装在一个承诺中，一旦AngularJS应用程序被引导，这个承诺就会得到解决。

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');

Answer 1

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

// 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秒的时间，那么我会这样做：

// 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逻辑。

Answer 2

理论上，你也可以用一种纯柏树的方式来解决这个问题。

如果您的页面提出任何请求，表明您的应用程序已经准备好，您可以让Cypress等待它完成之前，它继续进行。你可能会发现这个清洁剂比APP_READY的工作环境还要干净。不过，这只是一种看法，因为如果没有你可以信任的请求来表示你的应用程序已经准备好了，这种方法就会失败。

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

柏树最佳实践:不必要的等待。

塞普斯特医生在等着阿莉亚斯。