Jasmine + Angular2：このテストモジュールでは、 "templateUrl"を使用しているコンポーネントLoginを使用していますが、コンパイルされていません。

Question

現在、私はAngular 2プロジェクトに単体テストを統合しています。私はサービスをテストすることができますが、外部のテンプレートを取得するためにtemplateUrlを使用しているコンポーネントのテストに問題があります。私は、パス/ディレクトリを間違って解決しているwebpackに関連していると思います。ここに私のテストファイルがあります。

import { TestBed, async } from '@angular/core/testing'; 
import { FormGroup, ReactiveFormsModule } from '@angular/forms'; 
import { BasePage } from '../../base/base.page'; 
import { LoginPage } from './login.page'; 

describe('Page: LoginPage',() => { 
let page: LoginPage; 

beforeEach(() => { 
    TestBed.configureTestingModule({ 
    declarations: [BasePage, LoginPage], 
    imports: [ReactiveFormsModule] 
    }); 

    const fixture = TestBed.createComponent(LoginPage); 
    page = fixture.componentInstance; 
}); 

it('Page: LoginPage should create a `FormGroup` comprised of `FormControl`s', async(() => { 
    TestBed.compileComponents().then(() => { 
    const fixture = TestBed.createComponent(LoginPage); 
    page = fixture.componentInstance; 
    page.ngOnInit(); 

    expect(page).toBeDefined(); 
    expect(page.loginForm instanceof FormGroup).toBe(true); 

    expect(Object.keys(page.loginForm.controls)).toEqual([ 
     'email', 'password' 
    ]); 
    }); 
})); 

}）;

私は、コンソール上の出力は次され、テストを実行している：

WARN [web-server]: 404: /login.page.html 
PhantomJS 2.1.1 (Linux 0.0.0) Page: LoginPage Page: LoginPage should create a `FormGroup` comprised of `FormControl`s FAILED 
    Error: This test module uses the component LoginPage which is using a "templateUrl", but they were never compiled. Please call "TestBed.compileComponents" before your test. in spec-bundle.js (line 15105) 

私もテンプレートでテンプレートをロードしようとした：生 '（必要./ login.page.html！ '）の代わりにtemplateUrl：' login.page.html 'を使用します。しかし、テンプレートの解析エラーのためにテストが失敗する：

Error: Template parse errors: 
Unexpected closing tag "h4" (" col-lg-4 offset-lg-4\">\n   <h4 class=\"card-title\">{{ 'pages.login.title' | translate }}[ 

この問題を解決する方法はありますか？

Answer 1

compileComponentsの前には、のコンポーネントを作成しようとしています。 では、compileComponentsを呼び出す前にコンポーネントを作成しようとしています。それを取り除くだけです。

beforeEach(() => { 
    TestBed.configureTestingModule({ 
    declarations: [BasePage, LoginPage], 
    imports: [ReactiveFormsModule] 
    }); 

    // const fixture = TestBed.createComponent(LoginPage); 
    // page = fixture.componentInstance; 
}); 

EDIT

I guess the problem is related to webpack

実際、WebPACKのを使用しているとき、あなたはテンプレートがtemplateUrlから採取しtemplatesにコンパイルを取得する必要があるためのWebPACKであなたは、compileComponentsを呼び出す必要はありません。テスト設定では、'angular2-template-loader'を使用していることを確認する必要があります。あなたは見ることができますthis basic webpack configuration

Answer 2

テンプレートの取得プロセスは非同期であるため、beforeEach asyncを呼び出す必要があります。また、configureTestingModuleを呼び出した後にcomplileComponentを呼び出して、コンポーネントを作成する必要があります。 `

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
    declarations: [BasePage, LoginPage], 
    imports: [ReactiveFormsModule] 
    }).compileComponent().then(() => { 
    const fixture = TestBed.createComponent(LoginPage); 
    page = fixture.componentInstance; 
}) 
})); 

`