Как ждать при тестировании асинхронного кода в Angular 8 с Jasmine? - PullRequest
Новая
       16

Как ждать при тестировании асинхронного кода в Angular 8 с Jasmine?

1 голос
/ 10 октября 2019

Мне удалось настроить автоматическое тестирование модулей (компонентов) в приложении Angular 8 с использованием Karma и Jasmine. Он правильно выполняет весь тест, а также отображает содержимое компонента приличным образом (можно увидеть, как данные действительно изменяют компонент).

Однако я хочу иметь возможность замедлить запуск теста со временемвремя, чтобы увидеть, как компонент выглядит после каждого теста. Конечно, это не требуется для конвейера, но было бы неплохо для некоторых сеансов отладки + демонстрационные цели.

Я пытался использовать функцию afterEach для выполнения длинного tick, но функция заканчивается намного быстрее, чем ожидалось. 

const testBedConfiguration = {
  imports: [
    ComponentTestingModule,
    CustomCoreModule
  ],
  declarations: [TableLevelTagListComponent],
  providers: [
    // mocked services
    { provide: LoggingService, useClass: MockedLoggingService },
    { provide: SecurityTagCustomService, useClass: MockedSecurityTagCustomService },
    { provide: SecurityTagsService, useClass: MockedSecurityTagsService}
  ]
};

describe("TableLevelTagListComponent", () => {
  let component: TableLevelTagListComponent;
  let fixture: ComponentFixture<TableLevelTagListComponent>;

  const getDebugElement = () => fixture.debugElement;
  const btnLoadFromApi = () => getDebugElement().query(e => e.nativeElement.id === "btnLoadFromApi").nativeElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule(testBedConfiguration)
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TableLevelTagListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  afterEach(fakeAsync(() => {
    console.log("Trying to wait after the test");
    tick(1000);
  }));

  it("TableLevelTagListComponent should be created", () => {
    expect(component).toBeTruthy();
  });

  it("positive testing of getting information from own API",
    fakeAsync(inject( [SecurityTagCustomService], (tagService: MockedSecurityTagCustomService) => {

      setupSimpleMockService(tagService, fixture, () => {
        console.log("Btn load from api", btnLoadFromApi());
        btnLoadFromApi().click();
      });

      component.tagList$.subscribe(tags => {
          console.log("Received some tags from own API: ", tags);
          fixture.detectChanges();
          expect(tags.length).toBeGreaterThan(3);
          expect(tags[0].id).toEqual("TableTag1");
      });
    })));

Я использую ngrx / Store и все мои тестыявляются асинхронными (fakeAsync).

Вопрос: Как ждать при тестировании асинхронного кода в Angular 8 с помощью Jasmine?

1 Ответ

1 голос
/ 17 октября 2019

Как я упоминал в комментариях, быстрое и относительно простое решение вашей проблемы - просто использовать async() и setTimeout() для достижения фактического времени ожидания в Angular 8 с использованием Jasmine.

Вы показали этов afterEach(), или он также может заменить логику в спецификации it(), но изменение предложения, которое у вас есть в ответе напрямую, будет выглядеть точно так же, как вы показали, скопировано здесь просто для ясности, так как комментарий выше недопустимое расстояние: 

afterEach(async(() => {
  console.log("Trying to wait after the test");
  setTimeout(() => { }, 1000);
}));
...