如何在ngOnit方法中编写用于订阅服务器和超时的测试用例? [英] How to write test cases for Subscriber and timeout inside ngOnit method?

问题描述

我在使用以下ngOnit方法的angular8应用程序中有一个类

I have a class in angular8 application with following ngOnit method

  ngOnInit(): void {
    this.setCustomizedValues();
    this.sub = PubSub.subscribe('highlightEntity', (subId, entityIdentifier: string) => {
      document.querySelector(entityIdentifier).classList.add('highlight');

      setTimeout(() => {
        document.querySelector(entityIdentifier).classList.remove('highlight');
      }, 2000);

    });
  }

我已经初始化了以下测试用例

I have initialised the following test case

describe('aComponent', () => {

    
  let httpCallerServiceStub = jasmine.createSpyObj('httpCallerServiceStub', ['get']);

  let fixture: ComponentFixture<aComponent>;
  let componentInstance: aComponent;
  localStorage.clear();
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [aComponent],
      providers: [
        {
          provide: HttpCallerService,
          useValue: httpCallerServiceStub
        }],
      imports: [CommonModule, CmcSpinnerModule, NgbModule],
    }).compileComponents();

    fixture = TestBed.createComponent(aComponent);
    componentInstance = fixture.componentRef.instance;
    fixture.autoDetectChanges();
  });

 describe('ngOnInit method', () => {
    beforeEach(() => {
      fixture.componentInstance.customized = {};
    });

    it('should initialize with minimum input', () => {
      // Triggers ngOnInit
      fixture.detectChanges();
      expect(fixture.componentInstance.customized).toEqual({});
    });
  });

所以当我运行它时，它会随机抛出以下错误

So when I run this it randomly throwing the following error

 "message": "An error was thrown in afterAll\nTypeError: Cannot read property 'classList' of null\n    at <Jasmine>\n    at webpack:///components/aComponent/aComponent.ts:33:53 

这是业力测试运行程序中的控制台错误，

Here is console error in karma test runner,

这是文件的建议

因此，在此之后，无论我写多少测试，问题仍然存在，有时可行，有时不可行.

So after this point however number of test I write ahead, the issue still remains the same, sometime it works, sometime it doesnt.

您能告诉我ngonit内部的pubsub.subscriber和超时怎么办吗?

Can you please tell me what to do with pubsub.subscriber and timeout inside ngonit?

推荐答案

由于您对DOM感到困惑，因此ngOnInit可能为时过早. DOM尚未绘制.尝试将逻辑移至ngAfterViewInit

Since you're messing with the DOM, ngOnInit can be too early for that. The DOM has not yet been painted. Try moving the logic to ngAfterViewInit

ngAfterViewInit() {
    this.sub = PubSub.subscribe('highlightEntity', (subId, entityIdentifier: string) => {
      document.querySelector(entityIdentifier).classList.add('highlight');

      setTimeout(() => {
        document.querySelector(entityIdentifier).classList.remove('highlight');
      }, 2000);
    });
}

要测试setTimeout，可以使用fakeAsync和tick.

import { fakeAsync, tick } from '@angular/core/testing';
...
it('should initialize with minimum input', fakeAsync(() => {
      // Triggers ngOnInit
      fixture.detectChanges();
      // do your assertions for ngAfterViewInit
      // make 2s pass in a fake way
      tick(2000);
      // do your assertions for the setTimeout callback
      expect(fixture.componentInstance.customized).toEqual({});
    }));

这篇关于如何在ngOnit方法中编写用于订阅服务器和超时的测试用例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！