单元测试:如何使用Angular + Jasmine模拟窗口对象的innerWidth属性？
在Angular中，我们可以使用Jasmine来进行单元测试。要模拟窗口对象的innerWidth属性，我们可以使用Angular提供的TestBed和ComponentFixture来创建一个组件实例，并在测试中模拟窗口对象。
首先，我们需要在测试文件的顶部导入所需的依赖：
import { TestBed, ComponentFixture } from '@angular/core/testing';然后，我们可以创建一个describe块来描述我们的测试场景，并在其中创建一个it块来编写具体的测试用例：
describe('ComponentName', () => {
let component: ComponentName;
let fixture: ComponentFixture<ComponentName>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ComponentName]
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ComponentName);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should simulate innerWidth property', () => {
// 模拟窗口对象的innerWidth属性
spyOnProperty(window, 'innerWidth').and.returnValue(800);
// 断言组件中使用了innerWidth属性的逻辑
expect(component.someMethod()).toBe(800);
});
});在上面的代码中，我们首先使用TestBed.configureTestingModule方法配置测试模块，并通过compileComponents方法编译组件。然后，我们使用TestBed.createComponent方法创建组件实例，并通过fixture.componentInstance获取组件实例的引用。最后，我们使用spyOnProperty方法来模拟窗口对象的innerWidth属性，并使用expect断言来验证组件中使用了innerWidth属性的逻辑。
需要注意的是，由于innerWidth是只读属性，我们使用spyOnProperty方法来模拟它的返回值。在这个例子中，我们将innerWidth属性模拟为800。
关于Angular和Jasmine的更多信息，你可以参考腾讯云的Angular产品文档和Jasmine官方文档：
- Angular产品文档：https://cloud.tencent.com/document/product/1130
- Jasmine官方文档：https://jasmine.github.io/
相关·内容
这是我的spec.ts文件。我被错误困住了
错误:无法解析RequestOptions的所有参数：(?)
我也进口了所有必要的供应商。有人能帮我解决这个错误吗？
import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { ResetPasswordComponent } from './reset-password.component';
import { ConfigService } from './../config-s
浏览 1提问于2018-03-26得票数 1
我似乎不知道如何为使用[routerLinkActiveOptions]指令的组件设置*.component.spect.ts文件。我一直收到这个错误：
Can't bind to 'routerLinkActiveOptions' since it isn't a known property of 'button'.
这是spec文件：
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {RouterTestingMod
浏览 0提问于2018-12-18得票数 0
1回答
我使用ng generate component test创建了一个组件，生成的文件很少。有一个文件名为test.component.spec.ts。它有这样的内容。
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestComponent } from './donations-pay.component';
describe('TestComponent ', () => {
let component: Te
浏览 37提问于2018-12-06得票数 0
回答已采纳
StaticInjectorError(DynamicTestModule)MatTable -> ChangeDetectorRef: StaticInjectorError(平台:核心)MatTable -> ChangeDetectorRef: NullInjectorError:没有ChangeDetectorRef的提供者！
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MessagesComponent } from '
浏览 0提问于2019-01-29得票数 1
2回答
我正在尝试测试一个具有注入服务的组件。我想在我的测试中提供模拟服务。然而，测试使用的是原始服务而不是模拟服务(我知道这一点，因为我得到了一个“！”)。错误，并且在测试中输出的原始服务中有一个console.log )。
我可以通过导入HttpClientTestingModule来修复错误，但这并不能解决使用原始服务而不是模拟服务这一事实。
你知道我做错了什么吗？
这是我的测试代码。角版7
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { HelloWorld
浏览 1提问于2019-01-04得票数 9
回答已采纳
1回答
茉莉花测试特性可观察订阅
、、、、
我有这样的代码：
export class ProgramComponent implements OnInit {
@Input() events: Observable<any>;
eventsSubscription: any;
...
ngOnInit() {
this.eventsSubscription = this.events.subscribe((event) => {
... <- Some code that I want to test!!!!
console.log(&
浏览 0提问于2019-01-31得票数 3
回答已采纳
当运行我得到的测试时，我得到的是"TypeError: this.dashboardService.serviceAgents$.pipe不是一个函数“错误。
ServiceDashboard页面代码如下：
import { Component } from '@angular/core';
import { ServiceDashboardService } from '../services/service-dashboard.service';
import { tap } from 'rx
浏览 2提问于2019-10-14得票数 4
回答已采纳
我真的在努力解决这个错误，在互联网上没有任何东西能帮助我.
lr-categories.component.spec.ts**:**
export function main() {
describe('LrCategoriesComponent', () => {
let fixture: ComponentFixture<LrCategoriesComponent>;
let component: LrCategoriesComponent;
let de: DebugElement;
let glService: Ge
浏览 5提问于2018-01-08得票数 6
回答已采纳
我创建了这个测试：
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { GamePanelComponent } from './gamepanel.component';
describe('GameP
浏览 2提问于2016-12-23得票数 0
回答已采纳
2回答
我想为addItem可能在product.component.spec.ts文件中的方法编写测试用例。这是我的密码
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent i
浏览 7提问于2020-09-30得票数 0
回答已采纳
我正在使用下面的ngbPopover在我的角度页和编写单元测试为它。它抛出一个编译错误。就像下面
没有将"exportAs“设置为"ngbPopover”(单击)=“p1.open()”“ERROR ->#p1="ngbPopover">的指令
<span placement="bottom" [ngbPopover]="popContent" triggers="manual"
(click)="p1.open()" #p1="ngbPop
浏览 7提问于2019-11-15得票数 1
回答已采纳
我已经在Angular Cli 6.0.1应用程序上设置了上述测试基础。
使用Jasmine V2.8.0和Karma V2.0.0
我在第13行得到以下错误
Error: Cannot create the component AddressLookUpDirective as it was not imported into the testing module!
不知道哪里出了问题..最受欢迎的建议
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { BrowserDyna
浏览 0提问于2018-05-18得票数 2
2回答
我在viewProviders中用FormGroupDirective测试组件时遇到了一些问题。无法创建parent的模拟并将formGroup设置为空。
我的组件：
@Component({
(...)
viewProviders: [
{
provide: ControlContainer, useExisting: FormGroupDirective
}
]
})
export class SomeNestedFormComponent implements OnInit {
form: FormGroup;
c
浏览 1提问于2018-11-22得票数 9
我正在尝试为一个也使用Angular材质和Angular Flex布局的Angular样本应用程序创建测试。 在我的应用程序中，我已经使用了一个共享模块来导入所有的角度材质组件。它是这样的： import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIc
浏览 4提问于2019-04-14得票数 0
回答已采纳
1回答
我想在angular2中测试一个子组件@output。我希望使用这个模拟子组件@output来激活父组件函数并测试它。
模拟组件并测试所有异步方法。
<wizard-quick-search-page *ngIf="initSearchPanel" [createUserAttributes]="createUserAttributes" [existingUserAttributes]="existingUserAttributes" (edit)="showEditUserPanel($event)"
(create
浏览 0提问于2019-06-18得票数 9
回答已采纳
我已经在angular2网站上看过了，也检查了很多SO帖子，但我找不到一个通过用例来说明的例子。
我想模拟来自具有@Input()标记的对象的数据。我的组件如下所示
...
export class DriftInfoDisplayComponent implements OnInit {
showThisDriftInfo:boolean;
headerText:string;
informationText:string;
linkText:string;
@Input() inputInfo:DriftInfo;
constructor(){}
ngOn
浏览 0提问于2017-05-30得票数 18
回答已采纳
我是角10测试中的新手，在运行ng测试时，我不断地收到下一条消息，所以尽管我一直在寻找相同的问题，但我没有找到它。
这是我的app.component.html和app.component.ts
<app-navbar></app-navbar>
<div class="container pt-4">
<flash-messages></flash-messages>
<router-outlet></router-outlet>
</div>
import {Fla
浏览 1提问于2021-01-18得票数 0
我在运行ng test时遇到了这个问题。它编译得很好，ng build --prod运行得很好。我甚至没有看到那些变量的名字，只有可观测的，但有一个$ infront的变量。
问题更新
“@type/jasmine”："2.8.9“、”@type/jasminewd2 2“："~2.0.3”、“@类型/节点”："~8.9.4“、"codelyzer"："~4.2.1”、“茉莉花-核心”："~2.99.1“、”茉莉花-spec-记者“："~4.2.1”、“业力”："~1.7.1"，“业力-铬发射器”："~2
浏览 1提问于2019-05-29得票数 3
回答已采纳
1回答
我试图在Ionic 3中测试一个页面，所以，我在src/ page / page文件夹中手动创建了该页面的.spec.ts。但是，当我使用TestBed.createComponent创建组件时，它会显示以下错误：
about.spec.ts文件
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { TestBed, ComponentFixture, async } from "@angular/core/testing";
import { AboutPag
浏览 3提问于2020-02-11得票数 1
1回答
角度测试:模拟基类
、、、、
我想测试一个扩展基类的组件。组件的测试应该与BaseClass隔离。
可以模拟使用过的基类进行测试吗？我试图通过将它添加到提供程序覆盖中来覆盖它，但是它没有工作(仍然应用了普通基类)。
my-component.page.ts
import {Component, OnDestroy, OnInit} from '@angular/core';
import {MyBaseClass} from '../my-base-class';
@Component({
selector: 'my-component',
templateUrl:
浏览 0提问于2019-03-08得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
