如何将 Angular 单元测试中的值传递到动态 HTML 标记中答案

【问题标题】：How to pass value from Angular unit test into dynamic HTML tag如何将 Angular 单元测试中的值传递到动态 HTML 标记中
【发布时间】：2019-08-09 11:14:07
【问题描述】：

我想将单元测试中的 "test" 值传递给此动态 HTML 标记中的 nodeName 和 nodeDisplayName，以便显示此复选框。

我的单元测试：

it('checkbox is appearing', () => {
        const nodes= [{
          nodeDisplayName: "test",
          nodeName: "test"
        }];
         //  pass value to HTML code

        const checkbox= fixture.debugElement.query((de) => {
          return de.nativeElement.id === 'test';
        });
        expect(checkbox).not.toBeNull();
});

我的 HTML 标签：

<div *ngFor="let node of nodes let i = index" class="multipleNodes">
    <label class="nodebtn bold" [id]=node.nodeName ngbTooltip="{{node.nodeDisplayName}}" tooltipClass="nodeTooltip">
         <input type="checkbox" attr.for="{{node}}" value="{{i}}" name="{{i}}" (change)="checkboxChange($event)">
                  {{node.nodeName}}
    </label>
</div>

期望 HTML 输出（检查）：

<div class="multipleNodes">
      <label class="nodebtn bold active" tooltipClass="nodeTooltip" ng-reflect-tooltip-class="nodeTooltip" ng-reflect-ngb-tooltip="test" id="test">
            <input type="checkbox" for="[object Object]" value=0 name=0 >
                      " test "
      </label>
</div>

n.name 和 n.displayName 实际上是通过单击特定元素然后发送到此页面从上一页获得的，但我只想测试 'test' 元素。

我的.ts 文件中的相关代码：

@Input() data;
 ngOnInit() {
if (this.data.process === 'click') {
        this.setLinear = true;
        this.nodes = this.data.nodes.map((n) => {
          return {
            nodeName: n.name,
            nodeDisplayName: n.displayName,
          };
        });
}

【问题讨论】：

能否分享与您分享的模板相关的component.ts？
@Erbsenkoenig 刚刚更新

标签： html angular unit-testing automated-tests

【解决方案1】：

您可以模拟您的导入（我个人更喜欢）或在 onInit 完成后更新组件属性。

请务必了解，ngOnInit() 在您的 describe 块中的第一次 fixture.detectChanges() 调用期间被触发。

如果您在模拟导入时使用第一种方法，则需要确保在调用fixture.detectChanges 之前完成此操作。通常当 cli 生成测试时，在 beforeEach 循环中会有一个fixture.detectChanges。那个需要删除，并且在每个it 中，您需要在设置完成时明确调用它。

输入模拟：

it('checkbox is appearing', () => {
     const nodes = [{
              nodeDisplayName: "test",
              nodeName: "test"
            }]
     component.nodes = nodes; //in case nodes is public
     (component as any).nodes = nodes //in case nodes is private
     fixture.detectChanges();

     const checkbox= fixture.debugElement.query((de) => {
        return de.nativeElement.id === 'test';
     });
     expect(checkbox).not.toBeNull();
});

onInit 完成后的更改（恕我直言不是最好的方法）：

it('checkbox is appearing', () => {
     fixture.detectChanges();
     const data = {
          process: 'click',
          nodes: [{
              nodeDisplayName: "test",
              nodeName: "test"
            }]
         }
     component.data = data;
     fixture.detectChanges();

     const checkbox= fixture.debugElement.query((de) => {
        return de.nativeElement.id === 'test';
     });
     expect(checkbox).not.toBeNull();
});

【讨论】：