Angular/Karma 장치 테스트 오류 "1개의 타이머가 대기열에 있습니다."

Angular/Karma 장치 테스트 오류 "1개의 타이머가 대기열에 있습니다."

이것은 내가 처음으로 만난 것입니다."1 timer(s) still in the queue"하지만 보통 저는 사용할 방법을 찾습니다.tick()또는detectChanges()등, 그것에서 벗어나기 위해.

아래 테스트는 예외를 허용해야 하는 조건을 테스트하기 전까지는 정상적으로 작동했습니다.

  it('should be able to change case', fakeAsync(() => {
    expect(component).toBeTruthy();

    fixture.whenStable().then(fakeAsync(() => {
      component.case = 'lower';
      fixture.autoDetectChanges();
      tick(500);
      const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
      typeInElement('abcDEF', input);
      fixture.autoDetectChanges();
      tick(500);
      expect(component.text).toEqual('abcdef');

      component.case = 'upper';
      fixture.autoDetectChanges();
      tick(500);
      typeInElement('abcDEF', input);
      fixture.autoDetectChanges();
      tick(500);
      expect(component.text).toEqual('ABCDEF');

      // Everything above works fine. Here's where the trouble begins
      expect(() => {
        component.case = 'foo';
        fixture.autoDetectChanges();
        tick(500);
      }).toThrowError(/Invalid case attribute/);
    }));
  }));

제가 테스트하고 있는 것은 재료 입력 필드 주위의 래퍼인 Angular 구성 요소입니다.구성 요소에는 많은 선택적 속성이 있으며, 대부분은 일반적인 입력 필드 기능에 대한 패스스루 속성이지만 위에서 대/소문자 변환을 테스트하는 것과 같은 몇 가지 사용자 지정 속성도 있습니다.

의 허용 가능한 값case속성은upper,lower,그리고.mixed(빈 문자열, null 또는 정의되지 않은 문자열을 다음으로 처리)mixed). 구성 요소는 다른 모든 항목에 대해 예외를 던져야 합니다.분명히 그렇습니다. 그리고 테스트는 성공했지만, 성공과 함께 저는 다음과 같이 얻습니다.

ERROR: 'Unhandled Promise rejection:', '1 timer(s) still in the queue.', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: 1 timer(s) still in the queue.
Error: 1 timer(s) still in the queue.
   ...

제가 무엇을 잘못하고 있는지, 또는 남은 타이머를 지우는 좋은 방법을 알려주실 수 있는 분이 있습니까?

고지 사항:제가 카르마 단위 테스트에 대한 도움을 구하러 갈 때 큰 문제는 제가 "카르마"를 명시적으로 검색해도 대부분 Pr0tractor, Pr0tractor 및 더 많은 Pr0tractor에 대한 답을 찾을 수 있다는 것입니다.이것은 Pr0tractor가 아닙니다! (검색 일치를 얻지 못하도록 의도적으로 0으로 철자를 잘못 썼습니다.

업데이트: 다음과 같이 문제를 해결할 수 있습니다.

      expect(() => {
        component.inputComp.case = 'foo';
      }).toThrowError(/Invalid camp-input case attribute/);

이것은 테스트 구성 요소의 템플릿에서 HTML 특성을 통해 (나쁜) 값을 할당하는 것만큼 좋은 테스트는 아닙니다. 왜냐하면 속성 자체에 대한 구성 요소의 설정자에 값을 직접 강제로 입력하는 것이기 때문입니다. 하지만 더 나은 솔루션이 나올 때까지는 가능합니다.

저는 비슷한 문제에 직면한 적이 있습니다.해결책은 플러시 기능 사용이었습니다.

import { fakeAsync, flush } from '@angular/core/testing';

it('test something', fakeAsync(() => {

  // ...

  flush();
}));

최근에 동일한 문제가 발생했습니다. 해결하기 위해 전화했습니다.discardPeriodicTasks()-부터@angular/core/testing나의 마지막에it기능과 제 시험은 그 후에 통과했습니다.

이 시나리오에서는 기말고사 전에 삽입할 수 있습니다.expect

 it('should be able to change case', fakeAsync(() => {
    expect(component).toBeTruthy();

    fixture.whenStable().then(fakeAsync(() => {
      component.case = 'lower';
      fixture.autoDetectChanges();
      tick(500);
      const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
      typeInElement('abcDEF', input);
      fixture.autoDetectChanges();
      tick(500);
      expect(component.text).toEqual('abcdef');

      component.case = 'upper';
      fixture.autoDetectChanges();
      tick(500);
      typeInElement('abcDEF', input);
      fixture.autoDetectChanges();
      tick(500);
      expect(component.text).toEqual('ABCDEF');

      discardPeriodicTasks() <-------------------- try here

      // Everything above works fine. Here's where the trouble begins
      expect(() => {
        component.case = 'foo';
        fixture.autoDetectChanges();
        tick(500);
      }).toThrowError(/Invalid case attribute/);
      
    }));

tick당신의 가짜 Async 맥락에서 시간을 앞당기는 행동.

flush매크로 작업 대기열을 비울 때까지 배출하여 해당 컨텍스트에서 시간 완료를 시뮬레이션하는 동작을 수행합니다.

discardPeriodicTasks나머지 정기적인 작업을 "제거"합니다.

각각의 용도와 사용 사례가 다릅니다.

사용하다flush()실패하고 있는 당신의 시험의 마지막에.저 또한 이 문제에 직면했고 이 해결책을 사용했습니다.

@angular/core/testing에서 가져옵니다.

테스트 사례의 마지막 줄에서 정기 작업() 폐기 방법을 사용하여 남은 '대기열에 있는 타이머' 문제를 제거할 수 있습니다.

저의 경우, 테스트할 코드의 어딘가에서 라인을 삭제했습니다.

탐지를 변경합니다.변경 사항 감지();

그리고 나서 그 테스트는 매력적으로 작동했습니다.

언급URL : https://stackoverflow.com/questions/58416969/angular-karma-unit-test-error-1-timers-still-in-the-queue