构造函数中的 Angular 单元测试条件

Question

我有一个角度分量，在构造函数中带有条件：

export class NavbarComponent implements OnInit {
  noOpener = true;
  scrumTimerWindow = null;
  jiraTimerWindow = null;
  private windowProps = 'resizable=no,scrollbars,status,top=0,right=0,width=';
  private popupWidth = 360;
  constructor(
    public nav: NavbarService
    ) {
    const hasOpener = window.opener;
    let openerMessage = '';
    try {
      if (hasOpener) {
        this.noOpener = false;
        openerMessage = 'Not Displaying popout link. already popped out';
        this.nav.hide();
      } else {
        this.noOpener = true;
        openerMessage = 'Displaying pop out link';
      }
    } catch (e) {
      console.error(e);
      openerMessage = 'Not Displaying popout link. Already popped out (exception)';
      this.noOpener = false;
      this.nav.hide();
    }
    console.info(openerMessage);
  }

基本上，条件是查看

window.opener

属性以查看它是否已被其他页面打开，并基于此显示菜单。

我对如何测试它有疑问。

我开始写案例：

it('should hide popout link when opened by script',() => {
  const windowSpy = spyOn(window, 'open').and.returnValue(isOpenedMock);
  //...
});

但我意识到我犯了两个错误：

1. 那么晚我就无法联系间谍了。
2. 如果注入成功，我将无法运行常规测试。

那么我该如何测试这两种情况呢？我应该从调用它的另一个组件进行测试吗？如果是的话，如何进行测试？或者我应该创建一个额外的 NavBar2.component.spec.ts 文件，其中包含 window.opener 案例的测试？

Answer 1

我会做以下事情。

describe('NavbarComponent', () => {
  // set up of test, make sure you don't call TestBed.createComponent()
  // because that's when the constructor is called.

  describe('with opener', () => {
    beforeEach(() => {
      // set opener to something
      window.opener = {} as any;
      fixture = TestBed.createComponent(NavbarComponent);
      component = fixture.componentInstance;
    });
    
    afterEach(() => {
      // reset the opener property to undefined so it's not set for other 
      // tests
      window.opener = undefined as any;
    });
    
    it('should do xyz', () => {
    
    });    
  });

  describe('with no opener', () => {
   // I assume no changes are require here
    beforeEach(() => {
      fixture = TestBed.createComponent(NavbarComponent);
      component = fixture.componentInstance;
    });
    it('should do xyz', () => {
     
    });
  });
});