2016-09-29 8 views
6

Zaczynając od kąta 2 po spędzeniu czasu z kątem 1. Nie mając jednostki testowanej tak bardzo, ponieważ jest to bardziej projekt strony bocznej, próbuję przynajmniej zacząć OK ... I zaczyna się od przykładu z AngularClass, jeśli to robi różnicę.Test jednostkowy w kątowym2, wtrysk zależności

Już się zmagam w app.component.ts, która zawiera moje bity nawigacyjne. Istotne bity szablonu tutaj:

<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> 

sam składnik nie zawierają dużo:

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

wszystkich modułów, komponentów i trasy są bootstrapped poprzez moduł aplikacji. Może publikować, jeśli jest to wymagane.

Test, który muszę napisać, polega na tym, że podłączam praktycznie wszystko z routera (tak się wydaje). Najpierw [routerLink] is not a native attribute of 'a'. Ok, naprawię to. Następnie:

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

Więc podłączenie routera, tylko znaleźć:

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

które dodałem, aby dowiedzieć się, że:

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

Teraz, test wygląda :

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

Już kpię sobie z wejść, thi wydaje mi się nie tak. Czy czegoś brakuje? Czy istnieje inteligentniejszy sposób ładowania całej aplikacji podczas testu, zamiast łączenia się w każdą pojedynczą zależność przez cały czas?

Odpowiedz

7

Do testowania należy użyć RouterTestingModule zamiast RouterModule. Jeśli chcesz dodać trasy można użyć withRoutes

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

Zobacz także

+0

Dzięki, przeczytam o tym. Dotychczas zmiana 'RouterModule' dla' RouterTestingModule' doprowadziła do: 'wbudowanego szablonu: 3: 6 spowodowanego przez: undefined nie jest obiektem (oceniającym 'router.events.subscribe')'. – Jorg

+0

Nieważne, ja za głupcem. Dzięki, twoje rozwiązanie działa :) – Jorg

+1

Domyślam się, że nadal używasz fałszywego 'Routera 'zamiast używać prawdziwego, –