时间戳

首页 > 解决方案 > 如何测试渲染了多少组件

html - 如何测试渲染了多少组件

问题描述

我尝试测试，如果一个组件的渲染时间与我在 Angular 中所期望的一样多。例如应用程序接收器

我正在测试一个具有以下 html 的组件：

<div class="wichtel-form-container">
  <form class="wichteln-group-form" *ngIf="router.url == '/dostuff'" 
     #startWichtelForm="ngForm">
     <div class="form-group-container">
        <app-sender class=".sender" [sender]="sender"></app-sender>
        <app-receiver *ngFor="let receiver of receivers; let i = index" 
           [receiver]="receivers[i]" [receiversAmount]="receivers.length"
                [receiverIndex]="receivers.indexOf(receiver)" 
        (delete)="removeReceiver($event)"></app-receiver>
      </div>
   </form>
 </div>

在测试时，我总是得到这个：

Expected [  ] to have size 3.

这是我的测试设置：

beforeEach(async () => {
TestBed.overrideProvider(Router, {useValue: {url: 'http://someurl.li'}});

await TestBed.configureTestingModule({
  declarations: [WichtelnGroupComponent, SenderComponent,
    ReceiverComponent, WichtelnDetailsComponent, ConfirmationComponent, 
     CheckConfirmationComponent],
  providers: [
    WichtelDataHandlerService
  ],
  imports: [FormsModule]
});
});

以及失败的测试：

  it('should create', () => {
    TestBed.overrideProvider(Router, {useValue: {url: 
    'http://someurl.li/dostuff'}});
     fixture = TestBed.createComponent(WichtelnGroupComponent);
     createComponents();
     expect(component).toBeTruthy();
     expect(component.receivers).toHaveSize(3);
     expect(document.getElementsByClassName('.sender')).not.toBeNull();
     expect(document.getElementsByClassName('.wichteln-group-form .form-group- 
      container app-sender')).not.toBeNull();
      const arr = Array.from(document.getElementsByClassName('.wichteln-group-form 
      ' +  '.form-group-container app-receiver'));
      expect(arr).toHaveSize(3);
     });

     function createComponents(): void {
      component = fixture.componentInstance;
      fixture.detectChanges();
      TestBed.compileComponents();
      }

如果我使用结果是一样的

document.getElementsByClassName

或者

expect(fixture.debugElement.queryAll(By.css('.wichteln-group-form .form-group- 
    container app-sender'))).toHaveSize(3);

测试这个的正确方法是什么？

标签： htmlangulartestingjasmine

解决方案

queryAll返回一个数组，并且您正在将数组与数字进行比较。

尝试这个：

// check out .length here and check for app-receiver
// If app-receiver works, it means your CSS selector is not accurate
expect(fixture.debugElement.queryAll(By.css('app-receiver')).length).toBe(3);

推荐阅读