10

angular 1で時間を費やした後、angular 2から始めます。これはサイドプロジェクトのようなものであるため、これほどユニットテストを行っていません。少なくとも問題なく開始しようとしています... AngularClassの例から始めました違い。

app.component.ts私のナビゲーションビットを含む、すでに苦労しています。テンプレートの関連部分は次のとおりです。

<nav class="navbar navbar-light bg-faded">
  <div class="container">
    <div class="nav navbar-nav">
      <a class="navbar-brand" [routerLink]=" ['./'] ">Navbar</a>
      <loading class="nav-item nav-link pull-xs-right" [visible]="user === null"></loading>
  </div>
</div>
</nav>

<div class="container">
  <main>
    <router-outlet></router-outlet>
</main>
</div>

<footer>
  <hr>
  <div class="container">

</div>
</footer>

コンポーネント自体にはあまり含まれていません:

import { Component, ViewEncapsulation } from '@angular/core';
import { AuthService } from './_services';
import { User } from './_models';
import { Loading } from './_components';

@Component({
    selector: 'app',
    encapsulation: ViewEncapsulation.None,
    template: require('./app.component.html'),
    styles: [
        require('./app.style.css')
    ]
})
export class App {
    user: User;

    constructor(private auth: AuthService) {

    }

    ngOnInit() {
        this.auth.getUser().subscribe(user =>  this.user = user);
    }
}

すべてのモジュール、コンポーネント、およびルートは、App モジュールを介してブートストラップされます。必要に応じて投稿できます。

私が書かなければならないテストでは、基本的にルーターからすべてを接続する必要があります（そう思われます）。まず、[routerLink] is not a native attribute of 'a'. わかりました、私はそれを修正します。それで：

Error in ./App class App - inline template:3:6 caused by: No provider for Router!

したがって、ルーターを接続すると、次のことがわかります。

Error in ./App class App - inline template:3:6 caused by: No provider for ActivatedRoute!

私が追加したのは、次のことを確認するためです。

Error in ./App class App - inline template:3:6 caused by: No provider for LocationStrategy!

ここまでで、テストは次のようになります。

import { inject, TestBed, async } from '@angular/core/testing';
import { AuthService } from './_services';
import { Router, RouterModule, ActivatedRoute } from '@angular/router';
import { AppModule } from './app.module';

// Load the implementations that should be tested
import { App } from './app.component';
import { Loading } from './_components';

describe('App', () => {
    // provide our implementations or mocks to the dependency injector
    beforeEach(() => TestBed.configureTestingModule({
        declarations: [App, Loading],
        imports: [RouterModule],
        providers: [
            {
                provide: Router,
                useClass: class {
                    navigate = jasmine.createSpy("navigate");
                }
            }, {
                provide: AuthService,
                useClass: class {
                    getAccount = jasmine.createSpy("getAccount");
                    isLoggedIn = jasmine.createSpy("isLoggedIn");
                }
            }, {
                provide: ActivatedRoute,
                useClass: class { }
            }
        ]
    }));

    it('should exist', async(() => {

        TestBed.compileComponents().then(() => {
            const fixture = TestBed.createComponent(App);

            // Access the dependency injected component instance
            const controller = fixture.componentInstance;

            expect(!!controller).toBe(true);
        });
    }));
});

私はすでに入力を嘲笑していますが、これは私には間違っているようです。何か不足していますか？すべての依存関係を常にボルトで固定するのではなく、アプリ全体をテストにロードするよりスマートな方法はありますか?

4

1 に答える 1

13

テストでは、 のRouterTestingModule代わりに を使用する必要がありRouterModuleます。ルートを追加したい場合は、使用できますwithRoutes

imports: [
  RouterTestingModule.withRoutes(Routes) // same any normal route config
]

関連項目

于 2016-09-29T12:41:18.813 に答える