Question

好，所以我有一个要为其编写测试的组件。在此组件中，我还有另一个具有Input的组件：

@Component({
  selector: 'navigator',
  templateUrl: './navigator.component.html',
  styleUrls: ['./navigator.component.scss'],
})
export class Navigator{

    @Input()
    public myobject: InputClass;
}

InputClass是一个简单的对象：

export class InputClass{
    public id: string;
    public Name: any;

    constructor(id: string) {
        this.id = id;
    }
}

在主要组件中，我具有相应的属性：

@Component({
      selector: 'main-component',
      templateUrl: './mainComponent.component.html',
      styleUrls: ['./mainComponent.component.scss'],
    })
    export class MainComponent{

         public myObject: InputClass;
    }

mainComponent模板：

 <navigator class="container" [myobject] = "myObject">
 </navigator>

现在我要测试一下，如果我在mainComponent的myObject属性中设置了某个值，然后检查导航器中的@Input值是否已收到该值：

it('set the input in navigator',() => {
    let testobj: InputClass;
    testobj = {
        id: '1',
        componentName: 'SomeValue',
    };

    component.myObject= testobj;
    fixture.detectChanges();

    el = fixture.debugElement.query(By.css('navigator'));

    // For test and debug purposes
    let test = el.nativeElement.attributes['ng-reflect-myobject'];

    expect(test.value).toBe(testobj);
});

我之前用另一个输入但字符串类型尝试过此操作，当设置该值时它像一个超级按钮一样工作，但是在这里失败了，当我用chrome调试时，我得到的属性值为[object对象]：

测试结果

调试信息

现在我认为正在发生的事情是我正在获取一个字符串化版本对象的（因为在js中，这是从对象到字符串的默认转换，对吗？）。如果是这种情况，如何从输入中获取对象？

Answer 1

您无法验证导航器HTML呈现的内容吗？

我相信在renderHTML中从字符串中搜索会容易得多，并且可以达到相同的测试效果。

在Angular Testing文档中，他们使用textContent属性来执行此操作：Angular Testing - By CSS

Angular 2+（7）嵌套组件的浅层测试

1 个答案: