在嵌入在 ng-switch 中的 ng-container 中进行测试和锚标记点击
Testing and anchor tag click inside a ng-container embbeded in a ng-switch
我对 angular 中的测试很陌生,而且我找不到解决这个问题的方法。
我正在尝试对单击锚标记后调用的方法进行测试。
此锚标记位于属于 ng-switch 的 ng-container 内:
<ng-container [ngSwitch]="layout">
<ng-container *ngSwitchCase="'public'" >
<div class="d-flex>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
>
</button>
</div>
<div class="class">
<ul class="class">
<ng-container *ngFor="let link of object">
<li class="nav-item">
<a
(click)="navigateToURL(link.route)"
>
{{ string }}
</a>
</li>
</ng-container>
</ul>
</div>
</ng-container>
<ng-container *ngSwitchCase="'other'">
<div class="class">
<ul class="class">
<ng-container *ngFor="let link of otherObject">
<li class="nav-item">
<a id='one'
(click)="navigateToURL(link.route)"
>
{{ other string }}
</a>
</li>
</ng-container>
</ul>
</div>
</ng-container>
</ng-container>
该方法是路由器的某种重定向
navigateToURL(url:stringstring):void{
this.router.navigateByURL(url)
}
然后在我的测试中
describe('AppComponent [navigation-root]', () => {
let fixture: ComponentFixture<AppComponent>;
let component: AppComponent;
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [AppComponent],
providers: [
{
provide: Router,
useValue: routerMock,
},
],
schemas: [NO_ERRORS_SCHEMA],
})
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
})
})
);
test('Should create the navigation micro app', () => {
expect(component).toBeTruthy();
});
describe('When user is redirected from anchor tag click', () => {
test('Should call navigateToURL method from anchor tag on click ', () => {
const goToRouteSpy = jest.spyOn(component, 'navigateToURL');
const link = fixture.debugElement.nativeElement.querySelector('[id="one"]') as HTMLElement;
link.click();
fixture.detectChanges();
expect......
});
});
});
但是由于无法点击 null,测试失败并抛出错误
有人可以帮我吗?
非常感谢
您必须先模拟数据,然后才能对其进行测试。
test('Should call navigateToURL method from anchor tag on click ', () => {
const goToRouteSpy = jest.spyOn(component, 'navigateToURL');
// first mock layout to be other
component.layout = 'other';
// mock the array of otherObject
component.otherObject = [{ route: 'abc' }];
// call fixture.detectChanges() so the HTML is updated with the previous
// properties
fixture.detectChanges();
// hopefully should work now, by the way it is better if you do
// .querySelector('#one') instead of '[id="one"]'
const link = fixture.debugElement.nativeElement.querySelector('[id="one"]') as HTMLElement;
link.click();
fixture.detectChanges();
expect......
});
我对 angular 中的测试很陌生,而且我找不到解决这个问题的方法。 我正在尝试对单击锚标记后调用的方法进行测试。 此锚标记位于属于 ng-switch 的 ng-container 内:
<ng-container [ngSwitch]="layout">
<ng-container *ngSwitchCase="'public'" >
<div class="d-flex>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
>
</button>
</div>
<div class="class">
<ul class="class">
<ng-container *ngFor="let link of object">
<li class="nav-item">
<a
(click)="navigateToURL(link.route)"
>
{{ string }}
</a>
</li>
</ng-container>
</ul>
</div>
</ng-container>
<ng-container *ngSwitchCase="'other'">
<div class="class">
<ul class="class">
<ng-container *ngFor="let link of otherObject">
<li class="nav-item">
<a id='one'
(click)="navigateToURL(link.route)"
>
{{ other string }}
</a>
</li>
</ng-container>
</ul>
</div>
</ng-container>
</ng-container>
该方法是路由器的某种重定向
navigateToURL(url:stringstring):void{
this.router.navigateByURL(url)
}
然后在我的测试中
describe('AppComponent [navigation-root]', () => {
let fixture: ComponentFixture<AppComponent>;
let component: AppComponent;
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [AppComponent],
providers: [
{
provide: Router,
useValue: routerMock,
},
],
schemas: [NO_ERRORS_SCHEMA],
})
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
})
})
);
test('Should create the navigation micro app', () => {
expect(component).toBeTruthy();
});
describe('When user is redirected from anchor tag click', () => {
test('Should call navigateToURL method from anchor tag on click ', () => {
const goToRouteSpy = jest.spyOn(component, 'navigateToURL');
const link = fixture.debugElement.nativeElement.querySelector('[id="one"]') as HTMLElement;
link.click();
fixture.detectChanges();
expect......
});
});
});
但是由于无法点击 null,测试失败并抛出错误 有人可以帮我吗? 非常感谢
您必须先模拟数据,然后才能对其进行测试。
test('Should call navigateToURL method from anchor tag on click ', () => {
const goToRouteSpy = jest.spyOn(component, 'navigateToURL');
// first mock layout to be other
component.layout = 'other';
// mock the array of otherObject
component.otherObject = [{ route: 'abc' }];
// call fixture.detectChanges() so the HTML is updated with the previous
// properties
fixture.detectChanges();
// hopefully should work now, by the way it is better if you do
// .querySelector('#one') instead of '[id="one"]'
const link = fixture.debugElement.nativeElement.querySelector('[id="one"]') as HTMLElement;
link.click();
fixture.detectChanges();
expect......
});