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?
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
Nieważne, ja za głupcem. Dzięki, twoje rozwiązanie działa :) – Jorg
Domyślam się, że nadal używasz fałszywego 'Routera 'zamiast używać prawdziwego, –