我刚刚开始学习Karma和Jasmine。我卡在无法对组件执行单元测试的地步,我要触发的功能与某些特定值的按钮*ngIf
条件绑定。
my.component.ts
import { Component, Input, EventEmitter, Output } from '@angular/core';
import { Location } from '@angular/common';
import { XService } from 'src/app/services/x-service';
@Component({
selector: 'my-head-component',
templateUrl: './headComponent.html',
styleUrls: ['./head.scss']
})
export class MyComponent {
@Input() variableX = '';
@Output() outVar1: EventEmitter<string> = new EventEmitter();
@Output() outVar2: EventEmitter<string> = new EventEmitter();
y1='';
y2='';
constructor(private location: Location,
private xServ:XService ) { }
lookBack() {
this.location.back();
}
doSearch() {
this.y1= '';
this.y2 = '';
this.outVar1.emit(this.y1);
this.outVar2.emit(this.y2);
}
...
}
头部组件.html
...
<header class="head">
<div class="firstDiv">
<a href="javascript:;" class="btnClass"
*ngIf="(variableX !== 'value1')
&& (variableX !== 'value2')
(click)="lookBack()">
</a>
</div>
</header>
...
x-service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Yserv } from './y-service';
import { Router } from '@angular/router';
const keyName = 'xxxxx';
@Injectable({
providedIn: 'root'
})
export class XService {
constructor(private http: HttpClient, private util: YServ,
private router: Router) { }
logout() {
this.router.navigate(['/home-page']);
this.util.removeValue(keyName);
}
getUser() {
return JSON.parse(this.util.getValue(keyName));
}
}
my.component.spec.ts
import {TestBed, ComponentFixture, inject, async} from '@angular/core/testing';
import {MyComponent} from './my.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { XService } from 'src/app/services/x-service';
import {Location, LocationStrategy, PathLocationStrategy, APP_BASE_HREF} from '@angular/common';
import { FormsModule } from '@angular/forms';
import {DebugElement} from '@angular/core';
import {By} from '@angular/platform-browser';
describe('MyComponent',()=>{
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
let xServ: XService;
let locServ : Location;
let backEl: DebugElement;
beforeEach(async(()=>{
TestBed.configureTestingModule({
declarations: [MyComponent],
imports: [FormsModule, HttpClientTestingModule,RouterTestingModule],
providers: [XService,Location,{ provide: LocationStrategy, useClass: PathLocationStrategy }, {provide: APP_BASE_HREF, useValue : '/' }]
}).compileComponents().then(()=>{
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
xServ = TestBed.get(XService);
locServ = TestBed.get(Location);
});
}));
it('should have a defined a type of MyComponent', () => {
expect(component).toBeTruthy();
});
it('should click back button when variableX = value1 or value2 or value3 and call function Back()',async(()=>{
spyOn(locServ,'back');
component.variableX = 'value1';
fixture.detectChanges();
fixture.whenStable().then(()=>{
backEl = fixture.debugElement.query(By.css('a.btnClass')).nativeElement;
backEl.click(); /* <- error TS2339: Property 'click' does not exist on type 'DebugElement'. */
expect(locServ.back).toHaveBeenCalled();
});
}));
});
在终端使用ng test
运行我的规范文件时,它没有启动,它抛出了这样的错误 error TS2339: Property 'click' does not exist on type 'DebugElement'
.但是当我更改规范文件中的某些内容并保存它时,ng test 会自动运行我的规范文件并显示此错误 - TypeError: Cannot read property 'nativeElement' of null
和TypeError: Cannot read property 'nativeElement' of null
,我无法定位 html 文件中的锚标记以在我的组件中触发 lookBack 函数。我不确定我做错了什么。到目前为止,我已经根据我的搜索和阅读格式化了代码。
任何帮助将不胜感激。谢谢:)
像这样使用 JavaScript 选择器
const button = fixture.debugElement.nativeElement.querySelector('.btnClass');
button.click();
如果使用 href 标签不重要,则可以使用 button 代替标签
但是如果需要使用它,请尝试这个
<a href="" ng-click="logout()">Sign out</a>
但是这重新加载您的页面只是使用防止默认的方法