我正在使用角度4 app中的jasmine编写单元测试用例.我每次都得到’无法读取属性’nativeElement’的’null’,我不知道为什么.我在下面尝试做的是检查按钮是否被点击.以下是我的代码文件.
spec文件
import { Http,Response,RequestOptions,Request,ConnectionBackend } from '@angular/http';
import { DataShareService } from '../core/services/data-share.service';
import { scooterRepairservice } from './services/scooterRepair.service';
import { Router } from '@angular/router';
import { scooterRepairUnitComponent } from './scooter-repair-Unit.component';
import { Testbed,ComponentFixture,async,inject } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement,NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SelectItem,CheckBoxModule,CalendarModule,MultiSelectModule } from 'primeng/primeng';
import { CoreUIModule } from 'core-ui';
import { RouterTestingModule } from '@angular/router/testing';
describe('scooterRepairUnitComponent',() => {
let fixture: ComponentFixture<scooterRepairUnitComponent>;
let component: any;
let http: Http;
let dataShare: DataShareService;
let scooterRepairservice: scooterRepairservice;
let router: Router
let comp = new scooterRepairUnitComponent(http,dataShare,scooterRepairservice,router);
// service stubs to mock services
let MockResponse = {
navigate: jasmine.createSpy('Response')
}
let MockRequestOptions = {
navigate: jasmine.createSpy('RequestOptions')
}
let MockRequest = {
navigate: jasmine.createSpy('Request')
}
let MockConnectionBackend = {
navigate: jasmine.createSpy('ConnectionBackend')
}
// async beforeEach
beforeEach(async(() => {
Testbed.configureTestingModule({
declarations: [scooterRepairUnitComponent],// declare the test component
imports: [FormsModule,MultiSelectModule,CoreUIModule,RouterTestingModule],schemas: [NO_ERRORS_SCHEMA],providers: [Http,{ provide: Response,useValue: MockResponse },{ provide: RequestOptions,useValue: MockRequestOptions },{ provide: Request,useValue: MockRequest },{ provide: ConnectionBackend,useValue: MockConnectionBackend },DataShareService,scooterRepairservice]
})
.compileComponents(); // compile template and css
fixture = Testbed.createComponent(scooterRepairUnitComponent);
component = fixture.componentInstance;
}));
// synchronous beforeEach -- used if component is having external templates
beforeEach(() => {
comp = new scooterRepairUnitComponent(http,router);
});
it('should',async(() => {
spyOn(component,'onClearClick');
let de: DebugElement = fixture.debugElement.query(By.css('#clearSearch'));
let el: HTMLElement = de.nativeElement;
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(component.onClearClick).toHaveBeenCalled();
})
}));
component.ts
import { Component,OnInit,ViewEncapsulation,ElementRef,Output,Input } from '@angular/core';
import { Pipe,PipeTransform,Inject } from '@angular/core';
import { Http,ConnectionBackend } from '@angular/http';
import { IScooter } from './models/Scooter';
import { IShop } from './models/shop';
import { ISelectedTab } from './models/selectedTab';
import { RestClientService,EnvironmentService } from 'core-shared/core.service';
import { Observable } from 'rxjs/Observable';
import { DataShareService } from '../core/services/data-share.service';
//mport { CommonService } from '../shared/services/common.service';
import { NgForm,FormBuilder,Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { SelectItem } from 'primeng/primeng';
import { ScooterRepairservice } from './services/ScooterRepair.service';
@Component({
selector: 'Scooter-repair-Unit',templateUrl: './Scooter-repair-Unit.component.html',styleUrls: ['./Scooter-repair-Unit.component.scss'],encapsulation: ViewEncapsulation.None,})
export class ScooterRepairUnitComponent {
selectedTab: string = 'ScooterRepair';
showRepairUnitSelection: boolean=true;
showScooterRepairUnit:boolean=true;
showShopRepairUnit:boolean=false ;
showMissingRepairUnit:boolean=false;
showAddScooterRepairUnit:boolean=false;
showAddShopRepairUnit: boolean = false;
showScooterRepairUnitResultGrid = false;
ScooterRepairUnitSearchTitle= 'Search Scooter Repair Unit Threshold';
ScooterRepairUnitSearchResult= 'Scooter Repair Unit Results';
shopRepairUnitSearchTitle= 'Search Shop Repair Unit Threshold';
shopRepairUnitSearchResult= 'Shop Repair Unit Results';
missingRepairUnitSearchResult= 'Missing Repair Unit Results';
updateRepairUnitTitle= 'Update Results';
gridPageSize: number;
Scooters: IScooter[];
errorMessage: string;
ScooterRepairs: IScooter[] = [];
canSubmitAuditRequest = false;
totalScooterRepairRecords: number;
isValidated: boolean;
isSubmittedSuccessfully: boolean;
clearScooterRepairsearch: boolean;
constructor(private http: Http,private dataShare: DataShareService,// private commonService: CommonService,private ScooterRepairservice: ScooterRepairservice,// private loggerService: LoggerService,// private storageService: StorageService,private router: Router) {
this.gridPageSize = 10;
}
onSelectionChange(tabname) {
this.SetTab(tabname);
}
private SetTab(tabname: string){
this.showScooterRepairUnit = false;
this.showShopRepairUnit = false ;
this.showMissingRepairUnit = false;
if (tabname === 'ScooterRepair') {
this.showScooterRepairUnit = true;
}
if (tabname === 'shopRepair') {
this.showShopRepairUnit = true ;
}
if (tabname === 'missingRepair') {
this.showMissingRepairUnit = true;
}
}
ngOnInit(): void {
this.setBreadCrumb();
this.setLastSearch();
this.selectedTab = 'ScooterRepair';
}
private setBreadCrumb() {
// Setting Page title
this.dataShare.setData('appTitle','Repair Unit Maintenance');
// Setting Breadcrumb
this.dataShare.setData('breadcrumbItems',[
{ label: 'Business Rule Engine' },{ label: 'Repair Unit Maintenance',url: '/cra' }
]);
}
onClearClick()
{
this.clearScooterRepairsearch = true;
}
}
HTML文件
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngIf="showRepairUnitSelection">
<div class="panel ">
<form class="form-horizontal scooterUnitSearchForm" #requestauditsearchform="ngForm" action="#" >
<div class="form-group ">
<div class="col-lg-12 col-xs-12 clearfix">
<label for="" class=" col-lg-2 col-xs-6 control-label">
Search By:
</label>
<label class="control-label radio-inline">
<input type="radio" id="showscooter" name="mainTab" [(ngModel)]="selectedTab" value="scooterRepair" (change)="onSelectionChange(selectedTab)"
[checked]="selectedTab === scooterRepair">
scooter Repair Unit
</label>
<label class=" control-label radio-inline">
<input type="radio" name="mainTab" id="showShop" [(ngModel)]="selectedTab" value="shopRepair" (change)="onSelectionChange(selectedTab)"
[checked]="selectedTab === shopRepair">
Shop Repair Unit
</label>
<label class=" control-label radio-inline">
<input type="radio" name="mainTab" id="showMissingscooter" [(ngModel)]="selectedTab" value="missingRepair"(change)="onSelectionChange(selectedTab)"
[checked]="selectedTab === missingRepair">
Missing scooter Repair Unit
</label>
</div>
</div>
</form>
</div>
</div>
<div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12">
<collapse-expand-frame
[frametitle]="scooterRepairUnitSearchTitle" *ngIf="showscooterRepairUnit">
<scooter-repair-Unit-search
(requestscooterRepairsearch)="searchscooterRepairRequest($event)"
[clearscooterRepairsearch]="clearscooterRepairsearch"
>
</scooter-repair-Unit-search>
</collapse-expand-frame>
</div>
<div class="row" style="Margin-bottom:20px" *ngIf="showscooterRepairUnit">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<div class="form-group">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-sm-right text-md-right text-right">
<button pButton type="button" label="Add Repair Unit" (click)="onAddscooterRepair()" class="btn btn-default"></button>
<button pButton type="button" label="Search" class="btn btn-default"></button>
<button pButton type="button" label="Clear" (click)="onClearClick()" class="btn btn-default"></button>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12 clearfix" *ngIf="showAddscooterRepairUnit">
<collapse-expand-frame >
<add-scooter-repair-Unit
(requestscooterRepairsearch)="searchscooterRepairRequest($event)"
>
</add-scooter-repair-Unit>
</collapse-expand-frame >
</div>
<div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12">
<collapse-expand-frame
[frametitle]="scooterRepairUnitSearchResult" *ngIf="showscooterRepairUnit">
<scooter-repair-Unit-search-grid
>
</scooter-repair-Unit-search-grid >
</collapse-expand-frame>
</div>
<div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12">
<collapse-expand-frame
[frametitle]="updateRepairUnitTitle" *ngIf="showscooterRepairUnit">
<update-scooter-repair-Unit
>
</update-scooter-repair-Unit>
</collapse-expand-frame>
</div>
<div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12">
<collapse-expand-frame
[frametitle]="shopRepairUnitSearchTitle" *ngIf="showShopRepairUnit">
<shop-repair-Unit-search
>
</shop-repair-Unit-search>
</collapse-expand-frame>
</div>
<div class="row" style="Margin-bottom:20px" *ngIf="showShopRepairUnit">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<div class="form-group">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-sm-right text-md-right text-right">
<button pButton type="button" label="Add Repair Unit" (click)="onAddShopRepair()" class="btn btn-default"></button>
<button pButton type="button" label="Search" class="btn btn-default"></button>
<button pButton type="button" label="Clear" id="clearSearch" (click)="onClearClick()" class="btn btn-default"></button>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12">
<collapse-expand-frame
*ngIf="showAddShopRepairUnit">
<add-shop-repair-Unit
>
</add-shop-repair-Unit>
</collapse-expand-frame>
</div>
<div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12">
<collapse-expand-frame
[frametitle]="shopRepairUnitSearchResult" *ngIf="showShopRepairUnit">
<shop-repair-Unit-search-grid
>
</shop-repair-Unit-search-grid >
</collapse-expand-frame>
</div>
<div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12">
<collapse-expand-frame
[frametitle]="updateRepairUnitTitle" *ngIf="showShopRepairUnit">
<update-shop-repair-Unit
>
</update-shop-repair-Unit>
</collapse-expand-frame>
</div>
<div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12">
<collapse-expand-frame
[frametitle]="missingRepairUnitSearchResult" *ngIf="showMissingRepairUnit">
<missing-repair-Unit-search-grid
>
</missing-repair-Unit-search-grid>
</collapse-expand-frame>
</div>
解决方法
我遇到了同样的问题,我将问题追溯到div上的* ngIf语句
你必须在测试中为’showscooterRepairUnit’设置一个值,否则它将假定为false并将css元素设置为null,导致debugElement为null
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
