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

问题描述

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

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
TypeError: Cannot read property 'classList' of null
    at <Jasmine>
    at webpack:///components/aComponent/aComponent.ts:33:53 

这是 karma 测试运行器中的控制台错误，

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.

你能告诉我如何处理 pubsub.subscriber 和 ngoni 中的超时吗?

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屋！