angular - Angular 单元测试 ControlValueAccessor 与 ngFor
问题描述
在 ControleValueAccessor 内部使用时如何测试 ngFor 元素。
@Component({
selector: 'checkbox-group',
templateUrl: `
<h3 class="tt">s</h3>
<ng-container *ngFor="let item of _model;let i = index" > <h3>s</h3>
<div>
<input type="checkbox" id="c{{i}}"/>
</div>
</ng-container>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxGroupComponent),
multi: true
}
]
})
export class CheckboxGroupComponent implements ControlValueAccessor {
constructor(private ref: ChangeDetectorRef) {
ref.detach();
}
writeValue(value: any): void {
this._model = value;
if(value != null) { this.ref.detectChanges();
}
}
并从父 settings.html 导入此控件值访问器:
<div>
<checkbox-group [(ngModel)]="selectedItems"></checkbox-group>
</div>
现在当我想测试它时,它只有一个子元素。并且只知道标签是第一个和最后一个子元素
设置.spec.ts:
TestBed.configureTestingModule({
declarations: [ SettingsPage, CheckboxGroupComponent ],
imports: [IonicModule.forRoot()],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxGroupComponent),
multi: true
}
// other providers
],
schemas: [ NO_ERRORS_SCHEMA ]
}).compileComponents();
it('should get checkBoxGroup Childs', fakeAsync(() => {
let customComponent = fixture.nativeElement.querySelector('checkbox-group');
component.selectedItems = [true,true,true];
fixture.detectChanges();
fixture.whenStable().then(() => {
customComponent.NgModule=[true,false,true];
fixture.detectChanges();
debugger;
});
}))
在 customComponent 上调试:
解决方案
我不完全确定您要做什么,但试试这个:
注意标记的评论!
import { By } from '@angular/platform-browser';
....
TestBed.configureTestingModule({
declarations: [ SettingsPage, CheckboxGroupComponent ],
imports: [IonicModule.forRoot()],
providers: [
/* !! Get rid of these lines because CheckboxGroupComponent
is already doing the providing !!
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxGroupComponent),
multi: true
} */
// other providers
],
schemas: [ NO_ERRORS_SCHEMA ]
}).compileComponents();
it('should get checkBoxGroup Childs', fakeAsync(() => {
component.selectedItems = [true,true,true];
fixture.detectChanges();
// !! We can queryAll of the CSS elements and expect the length to be 3
let customComponents = fixture.debugElement.queryAll(By.css('checkbox-group'));
expect(customComponents.length).toBe(3);
}))
!!编辑 !!
<h3 class="tt">s</h3> // <-- this is the h3 you're seeing
<h1>Model's value: </h1>
<pre>{{ _model | json }}</pre>
<ng-container *ngFor="let item of _model;let i = index" > <h3>s</h3> // You want to see <h3>s</h3>
<div>
<input type="checkbox" id="c{{i}}"/>
</div>
</ng-container>
所以你是说你只看到带有 classtt
的 h3 而不是里面带有 s 的 h3?
我添加了一个h1
和一个pre
标签来显示_model
. 查看它的值并确保它不是空数组。
推荐阅读
- elm - Elm:如何在后续请求中使用来自一个 HTTP 请求的数据
- arm - 设置阶段 2 转换表 ARMv8
- .net - 使用 woocommrece API 在产品中添加属性
- c++ - 不同的 constexpr bool 导致 gcc vs clang
- gradle - gradle 中的库版本已降级
- java - 如何将Scalardb的结果映射到模型中
- javascript - 来到我的服务器的人,帐户不安全的人的角色
- javascript - 使用管道过早关闭,但如果使用管道则不会
- python-3.x - 我正在尝试通过数据结构和链表来增强我的基础知识,但我一直面临这个错误
- amazon-web-services - PowerShell 无法识别安装在同一脚本中的 AWS CLI