Question

我从未在茉莉花中编写单元测试来测试HTML元素，我希望得到答案以及关于该主题的一些资源。

以下是代码：

<div class="ui-g-4 patientName">
    <h1><b [innerText]="header.patient.name || na"></b>,</h1>
    <div class="patientInfo">
        <h3><b [innerText]="header.patient.sex || na"></b></h3>
        <h3><b [innerText]="(header.patient.dateOfBirth | date) || na"></b></h3>
    </div>
</div>

你可以看到我有'h1'和2'h3'。在patient.dateOfBirth上，我还使用管道来过滤日期。

正如我之前所说，我从来没有为这类事情编写测试，也不知道从哪里开始。如果你知道资源，链接或例子可以随意发布，所以我可以阅读更多相关信息。如果你想写'描述'和'它（应该......'和描述，我也会很感激。

由于

Answer 1

在您的单位规范中，您需要以编程方式创建组件，将值分配给患者对象的属性，并启动检测更改，以便绑定将启动。

TestBed.createComponent()返回引用了组件和本机HTML元素的对象ComponentFixture。

通过fixture，您可以访问组件属性并在组件模板中查找特定的HTML元素。

    it('should display patient data ', () => {      

     let fixture = TestBed.createComponent(PatientComponent);  
            
     let element = fixture.nativeElement;         // DOM element           
     let component = fixture.componentInstance;   // Angular component          

  component.header.patient = {name: "Mary", ...}; // assign values to the patient obj

  fixture.detectChanges(); // trigger change detection to update the DOM element                 

  expect(element.querySelector('h1').innerHTML).toBe('Mary');      
  ...
  });

调用detectChanges()后，将应用绑定，管道将进行转换。阅读有关组件测试的文档：https://angular.io/docs/ts/latest/guide/testing.html

如何在Angular2中为具有数据绑定和管道的元素编写Jasmine单元测试

1 个答案: