angular - 如何在角度 8 中测试 window.innerWidth 属性？

Question

我在 Angular 和 TDD 方面相当新。目前，我正在尝试测试在调整大小事件期间调用它的函数。这是我的以下代码：

header.component.ts

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss'],
    host: {
        '(window:resize)': 'onResize($event)'
    }
})
export class HeaderComponent implements OnInit {
    isDesktop = window.innerWidth > 768;
    menuOpen = false;

    constructor() {}

    ngOnInit() {}

    onResize(event) {
        this.isDesktop = event.target.innerWidth > 768;
        this.menuOpen = !this.isDesktop && this.menuOpen;
    }
}

header.component.ts

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HeaderComponent,SideMenuComponent ]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  })

  it('should trigger onResize method when window is resized', () => {
    const spyOnResize = spyOn(component, 'onResize');
    window.dispatchEvent(new Event('resize'));
    expect(spyOnResize).toHaveBeenCalled();
  });

当我运行测试时，它输出测试失败说_<spyOn> : could not find an object to spy upon。有什么想法或线索可以解决这个问题吗？非常感谢任何帮助谢谢。

标签： angulartestingjasmine