- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在 Angular 4 应用程序中使用 jasmine 编写单元测试用例。我每次都收到“无法读取 null 的属性‘nativeElement’”,我不知道为什么。下面我要做的是检查按钮是否被点击。以下是我的代码文件。
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, CheckboxModule, CalendarModule, 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, dataShare, scooterRepairService, 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();
})
}));
import { Component, OnInit, ViewEncapsulation, ElementRef, Output, Input } from '@angular/core';
import { Pipe, PipeTransform, Inject } from '@angular/core';
import { Http, Response, RequestOptions, Request, 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;
}
}
<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
关于 Angular 4 : Jasmine: Failed: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44804946/
您好,下面是我在 AWS 中创建启用了弹性 IP 的实例的模板。但是我不确定我哪里出错了。我已经通过在线 json 验证器验证了 json,仍然面临问题请帮忙 { "AWSTemplateForm
标题有点乱,但已经说明了一切。我想在一个属性的属性上有一个属性观察器: class A { var b: B init() { b = B() } fu
假设我的一个 Controller 中有这样的方法: [Route("api/Products")] public IQueryable GetProducts() { return db.P
这有效: // @flow import React, {Component} from 'react'; type Props = {}; class Delete extends Componen
我有一个 ViewModelBase 类,我在其中为 INotifyPropertyChanged 接口(interface)定义了 RaisePropertyChanged 方法。大多数 MVVM
我创建了类: class StorageBase { public Queue Slices {get;set;} } 和 wpf 自定义控件,它具有 StorageBase 类型的依赖属性
我的 java 应用程序问题是 log4j2 系统日志不是写在 'local1.log' 中而是'消息'。我的/etc/rsyslog.conf 在/etc/rsyslog.conf 中配置为 'lo
为什么需要在对象中使用 this.property = property ?它是用来定义对象的“外部世界”的属性吗? function Person(property) { this.property
摘要: 这个问题是关于属性的继承与从彼此继承属性的类的内部和外部的不同读/写访问相结合。 详细信息: 我有一个类 A 和另一个继承自 A 的类 B。 A 中声明了属性someProperty。我希望该
我正在开发 ASP.NET MVC 应用,设计域模型,使用(测试)新的 EF Code First 功能。 我有一个可能有也可能没有截止日期的事件实体,处理它的最佳方法是什么? 1 个属性: publ
我在配置项目时经常使用它们,但大多数情况下都是按照指示添加 fragment 。我完全不知道哪个文件到底是做什么的。谁能清楚地说明每个文件的用途。 到目前为止我认为 local.properties
在运行 python 文件以使用 rasa nlu 训练文件时,我在命令提示符下收到此错误 我目前正在使用 Windows 10 rasa_core==0.8.2 rasa_nlu==0.11.4 p
我在这方面遇到了一些麻烦,尽管我已经搜索了答案,但还是找不到。 为了使用 AsyncAppender,我看到了很多不同的 log4j 配置,无论如何,它们都与 .properties 配置文件无关。
我正在编写一个 Python 类,并使用 @property 装饰器为该类创建属性。 我在文档中没有找到太多关于这个装饰器的信息,但是从我可以从 Stack Overflow 和我的 Python l
在 gradle 任务中,我可以创建这样的路径: System.env.FOLDER_PATH + '/subFolder' 但我想在我的 gradle.properties 中设置它,所以它会像 s
如何在属性文件的 log4j2 中创建键值对? 我知道在 log4j 版本 1 中它是这样完成的: log4j.appender.x.additionalFields={'key': 'value'}
我想通了 struct PropertyTest { @property int x() { return val; } @property void x( int newVal )
我有 REST (Jersey) webservice,它利用了一些编码/解码到/来自 XML 的数据对象。数据对象位于 webservice war 所依赖的单独项目/jar 中。 我使用 MOXy
我正在创建一个 LinkedList 类: function LinkedList(){ ... 有什么区别: this.addNode = function(data){
关于语义的快速问题:) 如果我正在编写一个协议(protocol),这是首选: // (a) @protocol MyProtocol @property (nonatomic, copy) NSSe
我是一名优秀的程序员,十分优秀!