角度1.x/2混合,业力测试不引导ng1应用程序

Question

我目前使用angular-cli的Hybrid 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技能未能尝试找到示例.

Answer 1

我希望我昨晚补充的赏金意味着我今天早上可以登录为我提供一个很好的解决方案.唉,事实并非如此.因此,我花了一天时间围绕许多SO答案和github问题开始工作.对不起,我没有跟踪所有帮助我归功于他们的东西,但这是我的解决方案.它可能不太理想,但它到目前为止工作,所以我希望这是一个良好的开端.

这个github问题表明downgradeComponent现在不会起作用,所以我采用了我认为使用的旧技术UpgradeAdapter.请注意,此技术不使用initTestEnvironment.以下是相关摘要,下面有一些解释:

// 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
• 我main.ts通过调用downgradeForApp()如上所示调用主要应用程序的组件降级(与AOT一起用于生产包),并且main-jit.ts上面未显示(用于开发)
• 我展示了我需要添加的导入以开始将Angular组件集成到我的AngularJS测试中.您可能需要更多/不同的,具体取决于您的测试是否是异步,或者您使用Jasmine而不是Mocha.
• 在需要使用降级组件的每个测试开始时,我使用"bootstrap" useAdaptedModule()来代替beforeEach(angular.mock.module("app"));
• 我it从我的助手中导入一个替代品,它包装了itMocha提供的.我的测试都不是异步的; 如果你有一些它可能需要调整.我不知道它可能需要如何适应Jasmine.

警告:实例化组件必须在it回调中发生,以便在其中发生upgradeAdapterRef.ready(...).试图在一个内部做到这beforeEach一点太早了.