Góc 1.x/2 Hybrid, thử nghiệm nghiệp không bootstrapping ng1 ứng dụng

Question

Tôi hiện đang có ứng dụng Hybrid Angular (2.4.9 và 1.5.0) bằng angular-cli. Hiện nay, khi chạy ứng dụng của chúng tôi, chúng tôi có thể bootstrap 1,5 ứng dụng một cách chính xác:

// 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}); 
    }); 
}); 

Tuy nhiên, trong test.ts tập tin của chúng tôi:

// 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(); 

Tôi không chắc chắn chính xác làm thế nào để bootstrap ứng dụng 1.5 của chúng tôi vào môi trường thử nghiệm, tất cả những gì tôi nhận được là Module 'myApp' is not available! và các kỹ năng của Google của tôi đã thất bại khi cố gắng tìm một ví dụ.

Answer 1

Tôi đã hy vọng tiền thưởng mà tôi đã thêm vào đêm qua có nghĩa là tôi có thể đăng nhập vào sáng nay với một giải pháp tốt đẹp được đặt ra cho tôi. Than ôi, nó không. Vì vậy, thay vào đó tôi đã dành cả ngày bay xung quanh nhiều câu trả lời SO và các vấn đề github làm cho nó hoạt động. Tôi xin lỗi tôi đã không theo dõi tất cả mọi thứ đã giúp tôi ghi nhận chúng, nhưng đây là giải pháp của tôi. Nó có lẽ không phải là lý tưởng, nhưng nó đang làm việc cho đến nay vì vậy tôi hy vọng nó là một khởi đầu tốt.

This github issue cho biết rằng downgradeComponent hiện không hoạt động, vì vậy tôi đã đi với những gì tôi cho là một kỹ thuật cũ hơn sử dụng UpgradeAdapter. Lưu ý rằng kỹ thuật này không sử dụng initTestEnvironment. Dưới đây là các đoạn có liên quan, với một số giải thích dưới đây:

// 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",() => { ... }); 
}); 

Một vài trong số những điểm nổi bật từ mã rằng:

• tôi hạ cấp linh kiện khác nhau cho các bài kiểm tra hơn so với các ứng dụng, vì vậy tôi làm một danh sách DRY trong số họ trong downgrade.ts
• tôi hạ cấp linh kiện cho các ứng dụng chính từ main.ts bằng cách gọi downgradeForApp() như trình bày ở trên (sử dụng với AOT cho một gói sản xuất), và cũng main-jit.ts, không hiển thị ở trên (được sử dụng để phát triển)
• Tôi đã hiển thị các mục nhập mà tôi cần để thêm vào để bắt đầu tích hợp các thành phần Góc vào các thử nghiệm AngularJS của tôi. Bạn có thể cần thêm/những cái khác nhau tùy thuộc vào ví dụ: về việc thử nghiệm của bạn có đồng bộ hay không, hoặc bạn sử dụng Jasmine thay vì Mocha.
• Vào đầu mỗi bài kiểm tra mà cần phải sử dụng các thành phần hạ, tôi "bootstrap" thứ với useAdaptedModule() thay vì beforeEach(angular.mock.module("app"));
• tôi nhập khẩu một sự thay thế it từ những người giúp đỡ tôi, mà kết thúc tốt đẹp it cung cấp bởi Mocha. Không có bài kiểm tra nào của tôi là không đồng bộ; nếu bạn có một số thì có thể yêu cầu tinh chỉnh. Tôi không biết làm thế nào nó có thể cần phải được điều chỉnh cho Jasmine.

Một caveat: Instantiating các thành phần phải xảy ra trong vòng một callback it để nó xảy ra trong vòng upgradeAdapterRef.ready(...). Cố gắng làm điều đó trong một số beforeEach quá sớm.