升级到RC5后,我将Angular2单元测试转换为新语法。我有一个测试,它使用一个值(Location)注入到被测组件的构造函数中,我无法弄清楚如何使用新的TestBed类执行此操作。
待测组件
export class RSUAppComponent implements AfterViewInit {
constructor(private _location: Location, private _appSettingsService: AppSettingsService) {
_appSettingsService.DeleteAppSettings();
}
// To maintain proper nav item highlighting
public IndicateSelected(linkRoute: string) {
let path = this._location.path().toLowerCase();
if (path.length == 0 && linkRoute.toLowerCase() == 'dashboard') {
return "mdl-navigation__link mdl-navigation__link--current";
} else {
if (this._location.path().toLowerCase().includes(linkRoute.toLowerCase())) {
return "mdl-navigation__link mdl-navigation__link--current";
} else {
return "mdl-navigation__link";
}
}
}
}
在RC5之前工作的测试
let testAppComponent: RSUAppComponent;
beforeEach(() => {
addProviders([
AppSettingsService,
// injected into the constructor of RSUViewer
provide(Location, { useClass: SpyLocation })])
});
it('#IndicateSelected should return the selected styling for the selected menu item',
async(inject([TestComponentBuilder, Location], (tcb: TestComponentBuilder, testLocation: SpyLocation) => {
return tcb
.overrideTemplate(RSUAppComponent, `
<nav class="mdl-navigation">
</nav>
`)
.overrideDirective(RSUAppComponent, RSUHomeComponent, EmptyComponent)
.overrideDirective(RSUAppComponent, RSUNotiesComponent, EmptyComponent)
.createAsync(RSUAppComponent)
.then((fixture: ComponentFixture<RSUAppComponent>) => {
let selectedOutput: string;
fixture.detectChanges();
testAppComponent = fixture.componentInstance;
// initial navigation by app - user has not selected any menu link
selectedOutput = testAppComponent.IndicateSelected('Dashboard');
expect(selectedOutput).toMatch('mdl-navigation__link--current');
selectedOutput = testAppComponent.IndicateSelected('Noties');
expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
selectedOutput = testAppComponent.IndicateSelected('Users');
expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
// user has selected the Users link
testLocation.go('/users');
selectedOutput = testAppComponent.IndicateSelected('Dashboard');
expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
selectedOutput = testAppComponent.IndicateSelected('Noties');
expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
selectedOutput = testAppComponent.IndicateSelected('Users');
expect(selectedOutput).toMatch('mdl-navigation__link--current');
});
}))
);
这就是我尝试重写测试的方法。问题是我不知道如何让测试使用testLocation参数,以便它可以切换位置。在RC5之前,它与TestComponentBuilder一起注入测试,但现在我们没有将测试组件注入测试中。
let testAppComponent: RSUAppComponent;
let testLocation: SpyLocation;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [RSUAppComponent],
providers: [
AppSettingsService,
// injected into the constructor of RSUViewer
{provide: Location, useClass: SpyLocation }
]
})
});
it('#IndicateSelected should return the selected styling for the selected menu item',
async(() => {
TestBed.overrideComponent(RSUAppComponent, {
set: {
template: `
<nav class="mdl-navigation">
</nav>
`
}
})
.overrideDirective(RSUHomeComponent, EmptyComponent)
.overrideDirective(RSUNotiesComponent, EmptyComponent);
TestBed.compileComponents().then(() => {
const fixture = TestBed.createComponent(RSUAppComponent);
let selectedOutput: string;
fixture.detectChanges();
testAppComponent = fixture.componentInstance;
// initial navigation by app - user has not selected any menu link
selectedOutput = testAppComponent.IndicateSelected('Dashboard');
expect(selectedOutput).toMatch('mdl-navigation__link--current');
selectedOutput = testAppComponent.IndicateSelected('Noties');
expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
selectedOutput = testAppComponent.IndicateSelected('Users');
expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
// user has selected the Users link
testLocation.go('/users');
selectedOutput = testAppComponent.IndicateSelected('Dashboard');
expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
selectedOutput = testAppComponent.IndicateSelected('Noties');
expect(selectedOutput).not.toMatch('mdl-navigation__link--current');
selectedOutput = testAppComponent.IndicateSelected('Users');
expect(selectedOutput).toMatch('mdl-navigation__link--current');
});
}));