Wie mache ich eine Angular 2 Route?

Question

Ich habe den folgenden Code ...

export class LoginComponent { 
    userName: string; 
    password: string; 
    rememberMe: boolean = false; 
    constructor(private auth: AuthenticationService, 
       private router: Router) { 
     ... 
    } 
    ... 
} 

ich Unit-Test versuchen aber mein erster Versuch gescheitert ....

beforeEach(() => { 
     router = new Router(); 
     component = new LoginComponent(authService, router); 
}); 

Weil es die params für das Router-Konstruktor muss. Here I saw ...

beforeEach(() => addProviders([ 
    APP_ROUTER_PROVIDERS, // must be first 
    {provide: APP_BASE_HREF, useValue: '/'}, // must be second 
    {provide: ActivatedRoute, useClass: Mock}, 
    {provide: Router, useClass: Mock} 
])); 

Aber ich scheine nicht APP_ROUTER_PROVIDERS oder Mock überall in meinen Abhängigkeiten zu haben, so denke ich, es abgestanden sein könnte (oder ich brauche Abhängigkeiten).

Wie mache ich das aus? Es ist nicht einmal wichtig für den Test, an dem ich arbeite.

Answer 1

Für einen einfachen Fall können Sie nur Ihre eigene Mock erstellen und per Wert bieten, zum Beispiel:

describe('whatever',() => { 
    let mockRouter: any; 
    ... 

    beforeEach(async(() => { 
    // create your own mock 
    mockRouter = jasmine.createSpyObj('Router', ['navigate']); 

    ... 

    TestBed.configureTestingModule({ 
     declarations: [LoginComponent], 
     providers: [ 
     // provide it by value 
     { provide: Router, useValue: mockRouter }, 
     ... 
     ], 
    }).compileComponents(); 
    })); 

    ... 

}); 

Dies nutzt das Dependency Injection-Test-Bett, anstatt auf „new -up“ die Klasse versuchen, im Test.

Für ein Beispiel im Zusammenhang, siehe z.B. one of my projects on GitHub.

Answer 2

Ich nahm die oben Antwort, weil es scheint, aber richtig ist, zu sein, ich habe es tatsächlich anders implementiert ...

describe("Login Component",() => { 
    let component: LoginComponent; 
    let authService: AuthenticationService; 
    let router: Router; 

    describe("Testing the subscription happens",() => { 
     beforeEach(() => { 
      TestBed.configureTestingModule({imports: [RouterTestingModule]}); 
      router = TestBed.get(Router); 
      authService = new AuthenticationService(); 
      authService.notifications = new Subject(); 
      authService.notifications.subscribe = jasmine.createSpy("SpyToTestNotifications"); 
     }); 
     it("Make sure we try to subscribe to the auth event",() => { 
      component = new LoginComponent(authService, router); 
      expect(authService.notifications.subscribe).toHaveBeenCalled(); 
     }) 
    }); 
}); 

Wie Sie dies erfordert nur zwei Zeilen in der before ... sehen

TestBed.configureTestingModule({imports: [RouterTestingModule]}); 
router = TestBed.get(Router); 

Pro @ jonrsharpe tut dies jedoch viele Dinge, so dass Sie nicht garantieren können, welche anderen Nebenwirkungen passieren könnten. Aber es ist schnell, es ist schmutzig und es scheint zu "arbeiten"

Answer 3

Hier ist ein funktionierendes Beispiel zum Laden von Abfrage-String-Parameter für jeden Test. Arbeiten an Angular 2.3.

beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ 
     MyViewerComponent, 
     ... 
     ], 
     imports: [ 
     HttpModule, 
     FormsModule, 
     RouterModule, 
     ... 
     ], 
     providers: [ 
     {provide: ActivatedRoute, useValue: {queryParams: {test: 111}}}, 
     {provide: MyService, useClass: MyMockService} 
     ] 
    }) 
     .compileComponents(); 
    }));