如何在angular 8中测试window.innerWidth属性

Question

我在Angular和TDD方面还是个新手。目前，我正在尝试测试一个函数，它在调整大小事件中被调用。这是我的以下代码：

头组件.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;
}
}

头组件.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。有什么想法或线索可以解决这个问题吗？非常感谢您的帮助。谢谢。

Answer 1

你可以试试这个。您可以从一个方法返回内部宽度，并模拟该方法以返回不同的值

https://emailtoanees.medium.com/angular-unit-test-window-innerwidth-c523d2e64eaf