添加路由器提供程序时角度测试失败

Question

我有一个在主组件上调用的标头组件，这是因为我有一个 *ngIf 来检查我是哪个路由并以不同的方式呈现标头。 代码工作正常，标题的呈现方式因我在应用程序上的位置而异。

我正在尝试根据我的路线测试标头。 如果我不接触代码，前面的测试就会通过，但是当我添加路由器提供程序时，所有测试都会失败。

只需添加提供程序所有测试失败，我什至不需要添加新测试。

可能是什么原因？

import {async, ComponentFixture, TestBed} from "@angular/core/testing";
import {DatasetMainComponent} from "./dataset-main.component";
import {DatasetHeaderComponent} from "../dataset-header/dataset-header.component";
import {DatasetNavigationComponent} from "../dataset-navigation/dataset-navigation.component";
import {CustomMaterialModule} from "../../shared/customMaterial.module";
import {ActivatedRoute, Router} from "@angular/router";
import {ActivatedRouteStub} from "../../testing/activatedRouteStub";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {RouterTestingModule} from "@angular/router/testing";
import {DatasetVersionService} from "../services/datasetVersion.service.interface";
import {MockDatasetServiceImpl} from "../utils/commonData.spec";
import {HttpClientModule} from "@angular/common/http";
import {Directive, Input, LOCALE_ID} from "@angular/core";
import {MatExpansionPanel} from "@angular/material/expansion";
import {By} from "@angular/platform-browser";
import {ErrorHandlingStubComponent} from "../../testing/error-handling-stub";
import {MatMenuItem} from "@angular/material/menu";
import {MetadataService} from "../../common-metadata/services/metadata.service.interface";
import {MockMetadataImplService} from "../../shared-study-metadata/utils/common-data.spec";
import {AppModule} from "../../app.module";
import {of} from "rxjs";
import {SharedModule} from "../../shared/shared.module";
import {PermissionDirective} from "../../core/utils/permission.directive";
import {ButtonComponent} from "../../shared/components";
import {RouterStub} from "../../testing/routerStub";
import {AuthorizationService, AuthService} from "../../core/services";
import {AuthImplService} from "../../core/services/authImpl.service";
import {MockAuthorizationService} from "../../core/specs/commonData.spec";
const activatedRoute = new ActivatedRouteStub();
@Directive({selector: "[appPermissions]"})
export class StubPermissionDirective {
@Input() permissions: any[];
}
fdescribe("DatasetMainComponent", () => {
let component: DatasetMainComponent;
let componentFixture: ComponentFixture<DatasetMainComponent>;
let element: any;
let debugElement: any;
let datasetVersionService: MockDatasetServiceImpl;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
DatasetMainComponent,
DatasetHeaderComponent,
DatasetNavigationComponent,
ErrorHandlingStubComponent,
StubPermissionDirective,
],
imports: [
AppModule,
SharedModule,
CustomMaterialModule,
BrowserAnimationsModule,
RouterTestingModule,
HttpClientModule
],
providers: [
{provide: ActivatedRoute, useValue: activatedRoute},
{provide: DatasetVersionService, useClass: MockDatasetServiceImpl},
{provide: MetadataService, useClass: MockMetadataImplService},
{provide: Router, useClass: RouterStub},
{provide: AuthService, useClass: AuthImplService},
{provide: AuthorizationService, useClass: MockAuthorizationService},
{provide: LOCALE_ID, useValue: "en"},
]
}).overrideModule(SharedModule, {
remove: {
exports: [PermissionDirective]
}
}).compileComponents().then(() => {
activatedRoute.setParamMap({datasetVersionId: "1", datasetRefNumber: "1"});
componentFixture = TestBed.createComponent(DatasetMainComponent);
component = componentFixture.componentInstance;
element = componentFixture.nativeElement;
debugElement = componentFixture.debugElement;
});
datasetVersionService = TestBed.get(DatasetVersionService);
}));
it("Delete a dataset works", () => {
componentFixture.detectChanges();
spyOn(datasetVersionService, "deleteDatasetVersion").and.callThrough();
spyOn(component.dialogController, "openSimpleDialog").and.returnValue(of(true));
spyOn(component, "deleteDatasetVersion").and.callThrough();
// Confirm deletion on DialogControllerStubComponent
const buttons  = element.getElementsByTagName("button");
buttons[2].click();
componentFixture.detectChanges();
// const menuItems = debugElement.queryAll(By.directive(MatMenuItem));
const menuItems = debugElement.queryAll(By.directive(ButtonComponent));
expect(menuItems.length).toBe(4);
expect(menuItems[3].nativeElement.innerText).toBe("Delete");
// Use component instance to get isDisabled property
expect(menuItems[3].componentInstance.isDisabled).toBe(false);
// app-button wraps a button with click function that triggers the event 'onclick'
menuItems[3].query(By.css("button")).nativeElement.click();
componentFixture.detectChanges();
expect(component.deleteDatasetVersion).toHaveBeenCalled();
expect(datasetVersionService.deleteDatasetVersion).toHaveBeenCalledWith(1);
});
it("navigation menu is shown correctly", () => {
componentFixture.detectChanges();
const panels = componentFixture.debugElement.queryAll(By.directive(MatExpansionPanel));
expect(panels.length).toBe(2);  // Files is not a panel
panels[0].triggerEventHandler("open", null);
const links = element.getElementsByTagName("a");
expect(links.length).toBe(7);  // Files is a link
expect(links[0].innerText).toBe("Description");
expect(links[1].innerText).toBe("Archiving");
expect(links[2].innerText).toBe("Block 1 en");
expect(links[3].innerText).toBe("Block 2 en");
expect(links[4].innerText).toBe("Files");
expect(links[5].innerText).toBe("Deposit contract");
expect(links[6].innerText).toBe("User contract");
});
it("Update a dataset version works", () => {
componentFixture.detectChanges();
spyOn(component.dialogController, "openSimpleDialog").and.returnValue(of(true));
spyOn(datasetVersionService, "updatePublishedDatasetVersion").and.callThrough();
const buttons  = element.getElementsByTagName("button");
buttons[1].click();
componentFixture.detectChanges();
expect(datasetVersionService.updatePublishedDatasetVersion).toHaveBeenCalledWith(1);
});
it("Only displays Title and ref on Catalogue Route", () => {
const router = TestBed.get(Router);
router.url = "/catalogue";
componentFixture.detectChanges();
const title = element.getElementsByTagName("sub-title-wrapper");
console.log(title);
});
});

最后一个测试是我的新测试，我想检查包装器中是否呈现了某些内容，但由于以下错误，我什至看不到日志：

TypeError: Cannot read property 'subscribe' of undefined

一旦我添加这个，此错误就会出现在所有测试中：

{provide: Router, useClass: RouterStub},

Answer 1

我没有检查 Shashank 解决方案，所以我无法判断是否可以解决问题。

我找到的解决方案是像这样声明路由：

RouterTestingModule.withRoutes([
{path: "Machines", component: InfoPanelStubComponent},
{path: "Users", component: InfoPanelStubComponent}
])

然后使用导航访问：

const router = TestBed.get(Router);
router.navigate(["Machines"]);
flush();