角1.x/2混合，業力測試不引導ng1應用程序

我目前有一個混合角應用程序（2.4.9和1.5.0）使用angular-cli。目前，運行我們的應用程序時，我們能夠正確地引導了1.5應用：角1.x/2混合，業力測試不引導ng1應用程序

// 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技巧未能找到一個例子。

來源

2017-03-09 jt-platterz

可能很好地移除'declare var __karma__：any;'並使用實際的'@ types/karma'包。這不會導致你的錯誤，但是你的代碼中的每一個'declare const lib：any;'都會丟掉通常很有用的工具。 –

我必須承認，當我讀到「Angular 1.x/2 Hybrid」時，我不相信這樣的事情甚至是可能的。 – wheeler

我希望昨晚我添加的賞金意味着我今天早上可以登錄到一個很好的解決方案。唉，它沒有。所以相反，我花了一天巡航許多SO答案和github問題。我很抱歉，我沒有記錄一切有助於我信譽的內容，但這裏是我的解決方案。這可能不是理想的，但它工作到目前爲止，所以我希望這是一個好的開始。

This github issue表示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
的我通過調用downgradeForApp()如上所示降級從main.ts主要的應用程序組件（用於與AOT對於生產束），並且還main-jit.ts，上述未示出（用於顯影）
我展示了我需要添加的進口，以便將Angular組件集成到我的AngularJS測試中。您可能需要更多/不同的人，例如，關於你的測試是否是異步的，或者你使用Jasmine而不是Mocha。
在需要使用降級組件每次測試開始時，我的「引導」事情的useAdaptedModule()代替beforeEach(angular.mock.module("app"));
我從我的助手，它封裝由摩卡提供的it進口替代it。我的任何測試都不是異步的;如果你有一些它可能需要調整。我不知道它可能需要如何適應茉莉花。

一個警告：實例化，使其內upgradeAdapterRef.ready(...)發生的組件必須在it回調中發生。試圖在beforeEach內完成這個過程太早。

來源

2017-04-16 13:12:22

角1.x/2混合，業力測試不引導ng1應用程序

回答

相關問題