使用异步HTML管的角度集成测试失败

Question

我在集成测试上会出现以下错误：

typeError：无法读取null的属性（读取'triggereventhandler'）

我认为它是因为管道异步，但我没有知道如何管理这个异步问题。 我需要单击按钮并触发函数initiaTereTurns（）采取下一个操作。 由于异步管问题，我只是无法获取无效的DOM元素。

谢谢

详细信息，component.html

<div class="w-100 details-container container-fluid" *ngIf="!(isLoadingDetails$ | async)">
    <div class="d-flex justify-content-end p-2 mb-3" *ngIf="enableReturn">
        <button id="initiate-returns" mat-button class="button button-devolution" (click)='initiateReturns()'>
            <ng-container class="itens-container">
                <span>Start Devolution</span>
            </ng-container>
        </button>
    </div>
</div>

lidets.component.html

import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { DetailsType } from '../../../../enums/details-type.enum';
import { DetailsModel } from '../../../../details.types';
import { DetailsActions } from '../../../../state/details.actions';
import { DetailsState } from '../../../../state/details.state';



@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {
  @Input() id: number;
  @Input() maxValue: number;
  @Input() enableReturn: boolean;

  @Select(DetailsState.isLoadingDetails) isLoadingDetails$: Observable<boolean>;
  @Select(DetailsState.error) error$: Observable<boolean>;

  @Select(DetailsState.selectedItemToReturn) details$: Observable<DetailsModel>;

  public detailsType = DetailsType;

  constructor(private router: Router, public store: Store,) { }

  ngOnInit(): void {
    this.store.dispatch(new DetailsActions.GetById(this.id));
  }

  initiateReturns() {
    this.store.dispatch(new DetailsActions.AdvanceToInputValuesStep(this.maxValue));
    this.router.navigateByUrl('/returns-flow');
  }


}

lidets.component.test.ts

import { HttpClient } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { TranslateModule, TranslateService, TranslateStore } from '@ngx-translate/core';
import { NgxsModule, Store } from '@ngxs/store';
import { of } from 'rxjs';
import { DetailsModel } from '../../../../details.types';
import { DetailsActions } from '../../../../state/details.actions';
import { DetailsState } from '../../../../state/details.state';
import { DetailsComponent } from './details.component';



describe('DetailsComponent', () => {
  let component: DetailsComponent;
  let fixture: ComponentFixture<DetailsComponent>;
  let router: Router;
  let store: Store;
  let httpClient: HttpClient;

  beforeEach((() => {
    TestBed.configureTestingModule({
      declarations: [DetailsComponent],
      schemas:[CUSTOM_ELEMENTS_SCHEMA],
      imports: [
        RouterTestingModule,
        NgxsModule.forRoot([DetailsState]),
        TranslateModule.forChild(),
        HttpClientTestingModule
      ],
      providers: [TranslateService, TranslateStore]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DetailsComponent);
    component = fixture.componentInstance;
    component.id = 1;
    component.maxValue = 50;
    component.enableReturn = true; 
    fixture.detectChanges();
    router = TestBed.inject(Router);
    store = TestBed.inject(Store);
    httpClient = TestBed.inject(HttpClient);
    jest.spyOn(store, 'dispatch');
    store.dispatch(new DetailsActions.GetById(component.id));
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it ('should dispatch new id to state', () => {
    expect(store.dispatch).toHaveBeenCalledWith(new DetailsActions.GetById(component.id));
  });


  it ('should call function initiateReturns when button id initiate-returns clicked', async () => {
    
    const isLoadingSpy = await jest.spyOn(DetailsState, 'isLoadingDetails');

    spyOn(component,'initiateReturns');
    fixture.detectChanges();
    const button = fixture.debugElement.query(By.css('#initiate-returns'));
    button.triggerEventHandler('click',{stopPropagation: ()=>{}});
    expect(component.initiateReturns).toHaveBeenCalledWith();

    
  });

  
});

Answer 1

模拟您的条件以立即显示 +使用超时，以防它仍然不起作用。

it('...', () => {
  component.enableReturn = true;
  
  // component.isLoadingDetails = of(true);
  Object.defineProperty(component, 'isLoadingDetails', { value: of(true) });
  
  const button = fixture.debugElement.query(By.css('#initiate-returns'));
  button.triggerEventHandler('click',{stopPropagation: ()=>{}});
  expect(component.initiateReturns).toHaveBeenCalledWith();
});

有超时：

it('...', (done) => {
  component.enableReturn = true;

  // component.isLoadingDetails = of(true);
  Object.defineProperty(component, 'isLoadingDetails', { value: of(true) });

  const button = fixture.debugElement.query(By.css('#initiate-returns'));
  button.triggerEventHandler('click',{stopPropagation: ()=>{}});
  
  setTimeout(() => {
    expect(component.initiateReturns).toHaveBeenCalledWith();
    done();
  });
});