Angular 1.x/2 Hybrid，业力测试不引导 ng1 应用程序答案

【问题标题】：Angular 1.x/2 Hybrid, karma tests not bootstrapping ng1 appAngular 1.x/2 Hybrid，业力测试不引导 ng1 应用程序
【发布时间】：2017-03-09 16:34:08
【问题描述】：

我目前有一个使用 angular-cli 的混合 Angular 应用程序（2.4.9 和 1.5.0）。目前，在运行我们的应用程序时，我们能够正确引导 1.5 应用程序：

// main.ts
import ...

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  angular.element(document).ready(() => { 
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['myApp'], {strictDi: true});
  });
});

但是，在我们的test.ts 文件中：

// test.ts
// This file is required by karma.conf.js and loads recursively all the .spec and framework files

import ...;

declare var __karma__: any;
declare var require: any;

__karma__.loaded = function () {};

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  // I'm assuming that I need to call 'boostrapModule()' somehow here...
  platformBrowserDynamicTesting() 
);

const context = require.context('./', true, /\.spec\.ts$/);

context.keys().map(context);

__karma__.start();

我不确定如何将我们的 1.5 应用程序引导到测试环境中，我得到的只是 Module 'myApp' is not available!，而我的 Google 技能无法找到示例。

【问题讨论】：

删除declare var __karma__: any; 并使用实际的@types/karma 包可能会更好。这不会导致您的错误，但您代码中的每个 declare const lib: any; 都会丢弃通常有用的工具。
我必须承认，当我阅读“Angular 1.x/2 Hybrid”时，我什至不敢相信这样的事情是可能的。

标签： angularjs angular ng-upgrade angular2-upgrade

【解决方案1】：

我希望我昨晚添加的赏金将意味着我今天早上可以登录到为我制定的一个很好的解决方案。唉，它没有。因此，我花了一天的时间在许多 SO 答案和 github 问题上游弋，让它发挥作用。很抱歉，我没有记录所有帮助我归功于他们的事情，但这是我的解决方案。这可能并不理想，但到目前为止它正在工作，所以我希望这是一个好的开始。

This github issue 表示 downgradeComponent 现在不能工作，所以我采用了我认为是使用 UpgradeAdapter 的旧技术。请注意，此技术不使用initTestEnvironment。以下是相关的sn-ps，下面有一些解释：

// downgrade.ts:
export const componentsToDowngrade = {
    heroDetail: HeroDetailComponent,
    ...
};
export function downgradeForApp() {
    forOwn(componentsToDowngrade, (component, name) => {
        app.directive(name!, downgradeComponent({ component }));
    });
}


// main.ts:
downgradeForApp();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory).then((platformRef) => {
    ...
});

// test.ts:
require("../src/polyfills.ts");
require("zone.js/dist/proxy");
require('zone.js/dist/sync-test');
require("zone.js/dist/mocha-patch");

// test-helper.ts
let upgradeAdapterRef: UpgradeAdapterRef;
const upgradeAdapter = new UpgradeAdapter(AppModule);
forEach(componentsToDowngrade, (component, selectorName) => {
    angular.module("app").directive(
        selectorName!,
        upgradeAdapter.downgradeNg2Component(component) as any,
    );
});
export function useAdaptedModule() {
    beforeEach(() => {
        upgradeAdapterRef = upgradeAdapter.registerForNg1Tests(["app"]);
    });
}
export function it(expectation: string, callback: () => void) {
    test(expectation, (done) => {
        inject(() => { }); // triggers some kind of needed initialization
        upgradeAdapterRef.ready(() => {
            try {
                callback();
                done();
            } catch (ex) { done(ex); }
        });
    });
}


// hero-detail.component.spec.ts
import { it, useAdaptedModule } from "test-helpers/sd-app-helpers";
describe("", () => {
    useAdaptedModule();
    it("behaves as expected", () => { ... });
});

该代码的一些亮点：

我为测试和应用程序降级组件的方式不同，因此我在downgrade.ts 中制作了它们的 DRY 列表
我通过调用downgradeForApp() 将主应用程序的组件从main.ts 降级为如上所示（与AOT 一起用于生产捆绑包），以及main-jit.ts，上面未显示（用于开发）
我展示了我需要添加的导入，以便开始将 Angular 组件集成到我的 AngularJS 测试中。您可能需要更多/不同的，具体取决于例如关于您的测试是异步的，还是您使用 Jasmine 而不是 Mocha。
在每个需要使用降级组件的测试开始时，我使用useAdaptedModule() 而不是beforeEach(angular.mock.module("app"));“引导”事物
我从我的助手那里导入了一个替代it，它包装了Mocha 提供的it。我的测试都不是异步的；如果你有一些可能需要调整。我不知道它可能需要如何适应 Jasmine。

警告： 组件的实例化必须在 it 回调中进行，以便在 upgradeAdapterRef.ready(...) 中进行。尝试在 beforeEach 中执行此操作为时过早。

【讨论】：