Question

Jasmine 单元测试用例中的模拟窗口对象

2020-12-21

4847

angular unit-testing jasmine tdd karma-jasmine

我正在尝试编写一个测试用例，但我被卡住了，因为我无法在 jasmine 中的单元测试用例中复制窗口。

我有一个如下的类

public init(): void {
    this.Icon['text'] = window['SWIPE']['src'];
    this.Icon['altTag'] = window['SWIPE']['alt'];
  }

我试图在 spec.ts 文件中模拟上述窗口对象，如下所示

let window = {
      'SWIPE': { 'src': 'image', alt: 'image' }
    };

根据条件从其他类调用 init 类，如下所示

public onMessageReceived(event: object) {
        switch (event && event['event']) {
          case 'onNavigation':
            this.init();
            this.isReady = true; 
            break;
    }
    }

我编写的相同测试用例如下

it('should set isReady as true on onNavigation value in switch', async(() => {
    component.ngOnInit();
    fixture.detectChanges();

    fixture.whenStable().then(() => {
      component.onMessageReceived({ event: 'onNavigation', data: {} });
      expect(component.isReady).toBeTrue();
    });
  }));

以及我在 beforeEach 中尝试和模拟的窗口值，如下所示

beforeEach(() => {
    fixture = TestBed.createComponent(ConComponent);
    component = fixture.componentInstance;


    let window = {
      'SWIPE': { 'src': 'image', alt: 'image' }
    };


    fixture.detectChanges();
  });

当我运行测试用例时，我仍然收到错误“ TypeError: 无法读取未定义的属性‘src’ ”，我应该去哪里错误任何指导都会有所帮助，因为我仍在学习在 Jasmine 中编写测试用例

Answer 1

一种可能的选择是存根 window 对象以进行测试

// backup / restore the property.
const backup = window.SWIPE;
beforeEach(() => backup = window.SWIPE);
afterEach(() => window.SWIPE = backup);

// now the test
beforeEach(() => {
  // no let of const
  window = {
    'SWIPE': { 'src': 'image', alt: 'image' }
  };

  fixture = TestBed.createComponent(ConComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

PS。正确的方法是重构应用程序以提供 window 作为令牌。然后您可以通过 providers 伪造它。

Answer 2

如果您使用的是 ChromeHeadless - 您需要模拟浏览器历史记录状态以通过以下方式覆盖 URL 的查询：

beforeEach(() => {
  const search = `name=value&name2=value2`;
  window.history.pushState({}, 'Test', `/dummy-link.com?${search}`);
});

希望这会有所帮助。