如何使用angular-scenario与需求

How to use angular-scenario with requirejs

本文关键字：需求 angular-scenario 何使用      更新时间：2023-09-26

当你的angular应用准备好了DOM时，angular -scenario会很好地工作。当使用requires或其他AMD库时，情况并非如此。如何在angular场景中添加对AMD的支持?

你要做的就是重写默认的帧加载行为，并在你的应用程序准备好时发出一个新的事件。

第一件事是在你的angular应用程序中添加以下几行代码，以及angular。引导程序调用。angular-scenario需要这些数据。

angular.bootstrap(document, ['app']);
var html = document.getElementsByTagName('html')[0];
html.setAttribute('ng-app', 'app');
html.dataset.ngApp = 'app';
if (top !== window) {
    top.postMessage({
        type: 'loadamd'
    }, '*');
}

接下来，在您的e2e运行程序中，您必须包含这些行。如果它是一个外部脚本，它必须在angular场景之后加载，并且必须在DOM准备好之前对其进行解析:

/**
 *  Hack to support amd with angular-scenario
 */
(function() {
    var setUpAndRun = angular.scenario.setUpAndRun;
    angular.scenario.setUpAndRun = function(config) {
        if (config.useamd) {
            amdSupport();
        }
        return setUpAndRun.apply(this, arguments);
    };
    function amdSupport() {
        var getFrame_ = angular.scenario.Application.prototype.getFrame_;
        /**
         *  This function should be added to angular-scenario to support amd. It overrides the load behavior to wait from
         *  the inner amd frame to be ready.
         */
        angular.scenario.Application.prototype.getFrame_ = function() {
            var frame = getFrame_.apply(this, arguments);
            var load = frame.load;
            frame.load = function(fn) {
                if (typeof fn === 'function') {
                    angular.element(window).bind('message', function(e) {
                        if (e.data && e.source === frame.prop('contentWindow') && e.data.type === 'loadamd') {
                            fn.call(frame, e);
                        }
                    });
                    return this;
                }
                return load.apply(this, arguments);
            }
            return frame;
        };
    }
})();

最后，要启用amd配置，你必须在angular-scenario的script标签中添加ng-useamd属性。

<script type="text/javascript" src="lib/angular-1.0.3/angular-scenario.js" ng-autotest ng-useamd></script>

你现在准备好了

用angular-scenario v1.0.3测试

上面的答案在我的场景(Angular 1.1.4, fresh Karma)中部分失败了。在调试视图中，它运行正常，在正常的概述页面中，它失败了。我注意到一个额外的嵌套。

我将代码改为message到被测试应用程序的父iframe。

if (top !== window) {
    window.parent.postMessage({
        type: 'loadamd'
    }, '*');
}

公认的答案是绝对正确的，但遗憾的是，您必须将这些代码放入您的页面。

所以，如果有帮助的话，我为karma创建了一个预处理器，将"修复"注入其中，作为测试运行的一部分。

代码:https://github.com/tapmantwo/karma-ng-bootstrap-fix-preprocessornpm: https://www.npmjs.org/package/karma-ng-bootstrap-fix-preprocessor

注意，这仅在通过karma提供文件时有效。如果你代理它们，它们不需要经过预处理器。所以，作为一个替代方案，我有一个ng-scenario的分支，它做了一些类似的事情，允许手动引导网站运行;

https://github.com/tapmantwo/karma-ng-scenario

这不是一个节点模块，所以你必须手动设置它，但是最好有这样的东西，而不是用一些东西感染生产代码，只是为了让测试通过。

相关文章：