Html 如何测试渲染了多少组件

我试着测试一个组件的渲染时间是否和我在Angular中预期的一样多。e、 g.应用程序接收器

我正在测试一个具有以下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>

以下是我的测试设置：

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

或

---

正确的测试方法是什么？

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);

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

// 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);