我的组件中有一个包含a的close函数 setTimeout()以便给动画完成时间.
public close() {
this.animate = "inactive"
setTimeout(() => {
this.show = false
}, 250)
}
this.show 必然是一个 ngIf.
this.animate 绑定动画.
我有一个需要测试此功能的测试
it("tests the exit button click", () => {
comp.close()
fixture.detectChanges()
//verifies the element is no longer in the DOM
const popUpWindow = fixture.debugElement.query(By.css("#popup-window"))
expect(popUpWindow).toEqual(null)
})
如果有的话,你如何正确测试这个功能？ setTimeout()？
我正在使用,jasmine.clock().tick(251)但窗户永远不会消失.对此有何想法？
我正在尝试测试由窗口调整大小事件触发的功能（使用Karma）。一切在现实世界中都可以正常工作，但是当我尝试在测试中手动触发事件时，永远不会调用该函数。这导致测试失败。
这是我的HTML：
<div id="topnav"
class="navbar navbar-graylight header-width"
role="banner"
(window:resize)="onResize($event)"></div>
这是我的onResize（）函数：
@Component({
selector: "main-header",
templateUrl: "main-header.component.html",
})
export class MainHeaderComponent {
public itWasTriggered = false;
public onResize(event) {
this.itWasTriggered = true;
}
}
这是我的测试：
it("Why is onResize() not being ran", () => {
const heroEl = fixture.debugElement.query(By.css(".navbar-graylight"));
heroEl.triggerEventHandler("window:resize", null);
expect(comp.itWasTriggered).toBe(true);
});
这是检查器中显示的内容：
<div _ngcontent-a-1="" class="navbar navbar-graylight header-width" id="topnav" role="banner">
<!--template bindings={}-->
<!--template bindings={}-->
</div>
在Angular 2的Kendo UI(beta)中,如何在选择特定行时触发事件？行本身没有指令或组件; 因此,如果没有行元素,则(click)="triggeredFunction()"无效.
这是我的网格:
<kendo-grid [data]="gridData" [selectable]="true">
<kendo-grid-column field="ProductName">
<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
{{column.field}}({{columnIndex}})
</template>
</kendo-grid-column>
<kendo-grid-column field="ProductName">
<template kendoCellTemplate let-dataItem>
<kendo-dropdownlist [data]="listItems"></kendo-dropdownlist>
</template>
</kendo-grid-column>
</kendo-grid>
这是我的组件:
@Component({
selector: "ultron",
styleUrls: [String("./ultron.component.less")],
templateUrl: "./ultron.component.html",
})
export class UltronComponent {
private gridData: any[] = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": true,
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false,
}
}];
private listItems: Array<string> = ["@", "$", "#", "%"];
public triggeredFunction(){ ... }
}
我有一个测试,检查部分DOM元素是否已被ngIf删除.当我使用以下方法检查DOM时:fixture.debugElement.query(By.css(".button-area"))它result是nullDOM元素或者是DOM元素.
如果result是null,那么以下测试工作正常.但是,如果测试result包含一个元素,它不会简单地通过测试,它会冻结浏览器.
测试看起来像这样:
var result = fixture.debugElement.query(By.css(".button-area"))
expect(result).toBe(null)
我也尝试过expect(result).toEqual(null),.toBeFalsy()结果相同.
测试DOM元素是否已正确删除的正确方法是什么？
更新 1/23/2017
我发现这个问题是由返回的元素指定的:
fixture.debugElement.query(By.css(".button-area"))
这可能是角2或茉莉的错误.如果我使用document.getElementByClassName("button-area")它不是一个问题,测试工作正常.
当我尝试使用i18n将英语翻译成法语时,在按照https://angular.io/docs/ts/latest/cookbook/i18n.html逐字逐句进行国际化教程时,一切都很有效.
但是,当我尝试使用Angular 2的数据绑定将变量文本插入到HTML中时,它就会停止工作.
这是我的HTML:
<h1 i18n="User welcome|An introduction header for this sample">{{value}}</h1>
这是我的组件:
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
public value = "Hello i18n!";
}
这是我的XLF文件:
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">
<source>Hello i18n!</source>
<target>Bonjour i18n!</target>
<note priority="1" from="description">An introduction header for this sample</note>
<note priority="1" from="meaning">User welcome</note>
</trans-unit>
</body>
</file>
</xliff>
这是错误:
zone.js@0.6.25:357错误:未捕获(在承诺中):错误:模板解析错误:消息不可用于消息id ="95184d0fe43359bff724d20df3a1317aef86799c"("[错误 - …
我需要能够模拟 angularng-template进行单元测试。当我尝试运行它时，出现此错误：
Components on an embedded template: NgTemplateStub ("
<grid-column>
[ERROR ->]<ng-template gridCellTemplate dataItem>
<custom-column-template [data]="dataItem"></custom-column-template>
</ng-template>
<grid-column>
")
这是我的模拟版本 ng-template
@Component({
selector: "ng-template",
template: "<div><ng-content></ng-content></div>",
})
export class NgTemplateStub {}
这是我试图模拟的实际模板
<grid [data]="form$ | async" [pageSize]="pageSize">
<grid-column width="50">
<ng-template gridCellTemplate dataItem>
<custom-column [dataItem]="dataItem"></custom-column>
</ng-template>
</grid-column>
<!-- other columns -->
</grid>
这是测试模块
fixture = TestBed.configureTestingModule({
declarations: [
...
FormsGridComponent,
NgTemplateStub,
],
imports: [
...
],
providers: [
...
],
}).createComponent(GridComponent)
可以模拟ng-template吗？
更改数据后，如何刷新Angular 2 Kendo网格？
private trash() {
this.gridView.data.splice(index, 1);
//I wish to refresh here
}
我有一个动态图标列表，这些图标显示在右侧栏中。图标会根据用户的操作传递到侧边栏中。使用图标显示此动态图标数组ngFor。
不幸的是，有些图标来自Font Awesome，有些来自Google Material。
<!--Font Awesome-->
<i class="{{myIcon}}"></i>
<!--Material-->
<md-icon>{{myIcon}}></md-icon>
<!--Or-->
<i class="material-icon">{{myIcon}}</i>
看到它们不完全匹配，如何使用ngFor使其只显示图标名称的字符串就可以同时显示两种。
angular ×8
jasmine ×4
kendo-grid ×2
kendo-ui ×2
unit-testing ×2
components ×1
css ×1
data-binding ×1
dom ×1
events ×1
font-awesome ×1
javascript ×1
ngfor ×1
settimeout ×1
templates ×1
testing ×1