首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular 6测试- Jasmine - mock连锁承诺

是指在Angular 6中使用Jasmine框架进行测试时,通过mock连锁承诺来模拟异步操作的行为。

在前端开发中,经常需要进行异步操作,例如从服务器获取数据或发送HTTP请求。为了测试这些异步操作,我们需要模拟这些操作的行为,以便能够准确地测试代码的逻辑和功能。

Jasmine是一个流行的JavaScript测试框架,它提供了一套丰富的API来编写和运行测试。在Angular 6中,我们可以使用Jasmine来编写单元测试和集成测试。

在测试中,我们经常需要模拟异步操作的返回值。这时,我们可以使用Jasmine的spy对象来创建一个模拟函数,并使用Jasmine的连锁承诺(chaining promises)来模拟异步操作的行为。

连锁承诺是指在一个异步操作完成后,可以继续执行其他操作。在Angular 6中,我们可以使用Jasmine的spy对象的and.returnValue()方法来模拟异步操作的返回值,并使用Jasmine的spy对象的and.callFake()方法来模拟异步操作的行为。

下面是一个示例代码:

代码语言:typescript
复制
import { TestBed, async } from '@angular/core/testing';
import { MyService } from './my.service';

describe('MyService', () => {
  let service: MyService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [MyService]
    });
    service = TestBed.inject(MyService);
  });

  it('should get data asynchronously', async(() => {
    const mockData = 'mock data';
    spyOn(service, 'getData').and.returnValue(Promise.resolve(mockData));

    service.getData().then(data => {
      expect(data).toBe(mockData);
    });
  }));
});

在上面的示例中,我们首先使用TestBed.configureTestingModule()方法配置测试环境,并使用TestBed.inject()方法获取要测试的服务实例。

然后,我们使用spyOn()方法创建一个模拟函数,并使用and.returnValue()方法设置模拟函数的返回值为一个Promise对象,该Promise对象的resolve()方法返回模拟的数据。

最后,我们调用服务的异步方法getData(),并使用then()方法来处理异步操作的返回值。在then()方法中,我们使用expect()方法来断言返回的数据是否与模拟的数据相等。

通过使用Jasmine的mock连锁承诺,我们可以方便地模拟异步操作的行为,从而准确地测试Angular 6应用程序的逻辑和功能。

推荐的腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 之 单元测试

组件的测试 单独的service测试 Angular测试工具 Angular测试工具类包含了TestBed类和一些辅助函数方法,当时这不是唯一的,你可以不依赖Angular 的DI(依赖注入)系统,...通过将测试代码放到特殊的异步测试区域来运行,async函数简化了异步测试程序的代码。 接受无参数的函数方法,返回无参数的函数方法,变成Jasmine的it函数的参数。...比如,它不返回承诺,并且没有done方法可调用,因为它是标准的Jasmine异步测试程序。...fakeAsync fakeAsync是另一种Angular测试工具。 和async一样,它也接受无参数函数并返回一个函数,变成Jasmine的it 函数的参数。...虽然async和fakeAsync函数大大简化了异步测试,但是你仍然可以使用传统的Jasmine异步测试技术。

5.5K20
  • 【UTP自动化测试平台系列之终章】前端探索之路

    之前Android测试可以利用Mockito高效模拟测试数据,所幸Web端的开发也有类似的Mock.js,对Web前端开发来说真是个福音。 疑问四:如果前后端分离可行,用户信息咋办?...5.3 单元测试引入:Karma+Jasmine+Istanbul 一般开发人员都是比较喜欢架构开发、功能迭代,而不会花很多时间和精力在单元测试上,但是随着模块增多,迭代速度增快,变得开发的功能非常不可控...对于Angular的单元测试,可以利用Karma和Jasmine进行ng模块的单元测试,并可用Istanbul来生成代码覆盖率测试报告,是非常实用的工具。 ?...5.4 Mock技术引入:angular-mocks utp前后端分离架构分离后,前后端交互使用了http get/post+json进行数据传输和获取,可以比较方便的进行后台服务的模拟。...为了更好地进行测试数据的模拟,前端通过mock技术进行模拟测试。 (1)下载angular-mocks:npm install ng2-mock-server --save-dev。

    2.5K110

    angular面试问题_kafka面试题

    Angular中有什么作用? 什么是Jasmine? 在Angular中有什么用? 什么是protractor? 单元测试 Unit Test 什么是Angular中的单元测试?...单元测试(Unit Test):基于jasmine和Karma。...jasmine是一套通用的测试框架,除了Angular之外,也有广泛引用;Karma是Angular专用的用于管理测试配置等的框架,让测试代码方便的在指定浏览器执行;另外,根据喜好,也可以选择 Mocha...在Angular项目的根目录下,我们具有用于配置Karma的文件karma.conf。 什么是Jasmine? 在Angular中有什么用?...Jasmine和BDD通常尝试以一种人类可读的格式描述测试,以便非技术人员可以理解所测试的内容。 什么是protractor? protractor是Angular的端到端测试框架。

    2.3K20

    25个超有用的 AngularJS Web 开发工具

    由于Protractor支持Angular的具体定位策略,故而你无需进行任何设置就可以测试特定的Angular元素。 ?...官方网站:http://angular.github.io/protractor/ 2)AngularJS测试框架——Jasmine Jasmine对于JavaScript用户而言,也是一款测试框架。...官方网站:https://github.com/jasmine/jasmine 3)支持AngularJS的IDE——Webstorm WebStorm的智能代码编辑器为JavaScript、Node.js...官方网站:https://www.firebase.com/docs/web/libraries/angular/index.html 5)AngularJs测试工具——karma karma也是一款非常盛行的测试框架...官方网站:http://karma-runner.github.io/0.12/index.html 6)最佳AngularJS工具——Mochajs Mocha是一款运行在Node.js和浏览器上,功能丰富的

    3.7K50

    web自动化测试(1):再谈UI发展史与UI、功能自动化测试

    互联网发展如火如荼,推荐看下《浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战》,本人13年从Java入坑H5,但是前端的UI测试,除了前端工程师的 mocha karma jasmine...单元自动化测试一般需要借助单元测试框架,如java的Junit、TestNG,python的unittest,常见的手段是code review等; 前端单元测试框架: Jasmine: 自带断言(assert...),mock功能 Mocha: 框架不带断言和mock功能,需要结合其他工具,像chai。...由tj大神开发 Jest: 由Facebook出品的测试框架,在Jasmine测试框架上演变开发而来,集成了 Mocha,chai,jsdom,sinon等功能。...Google Angular 团队写的,功能很强大,有很多插件。可以连接真实的浏览器跑测试用例。能够用一些测试覆盖率统计的工具统计一下覆盖率;或是能够加入持续集成,提交代码后自动跑测试用例。

    1.7K20

    Webpack单元测试,e2e测试

    此篇文章是续 webpack多入口文件、热更新等体验,主要说明单元测试与e2e测试的基本配置以及相关应用。 一、单元测试 实现单元测试框架的搭建、es6语法的应用、以及测试覆盖率的引入。 1....需要安装的项目: jasmine:单元测试库 karma:测试框架,配置选择phantomjs浏览器 karma-jasmine:操作jasmine的插件 karma-webpack:webpack与karma...的连接 mock:用于数据模拟,用'npm install --save-dev mockjs'安装 karma-coverage:测试覆盖率报表 karma-spec-reporter:命令行输出测试用户的运行结果...config) { config.set({ // 基路径:表示karma从那个位置开始找文件 basePath: '', // 框架 frameworks: ['jasmine...from 'mockjs'; var template = { 'title': 'Demo01', 'btnName|1-3': '*' } export default Mock.mock

    2.4K100

    Twitter工程师聊JS

    Angular? Ember?...这个网站是个很好的ES6入门读物 尽管JS有着不同的运行环境,但并不影响使用ES6新特性,因为有了像Babel这类很棒的工具,可以把你的代码转换为兼容各个平台的代码 JS还有一些变体,例如 ClojureScript...JS的测试越来越重要,JS本身没有测试框架,需要依赖外置库 Mocha和Jasmine是两个主流库,你来定义预期行为,然后进行断言 对于运行测试,Mocha提供了命令行工具,而Jasmine没有,很多开发者使用...Karma,他是一个test runner,Mocha和Jasmine测试都可以使用Karma运行 我个人的建议是 Karma + Jasmine,如果需要用到浏览器测试时,使用PhantomJS...PhantomJS 是一个没有界面的浏览器,常用来配合自动测试 还有一些其他有用的测试工具: Selenium 可以在浏览器中进行真实的集成测试 Sinon 对于AJAX请求类型的测试很有帮助

    1.4K60

    搭建 karma + jasmine 测试环境

    什么是 karma karma 是由Angular团队开发的一款测试工具,帮助开发者更好更快速地在多种环境下执行测试代码,拿到测试结果。...根据配置项的选择安装插件 (1) 测试框架选择的是jasmine,安装步骤如下: $ npm install jasmine-core karma-jasmine -D 复制代码 这里要装两个,一个是jasmine...(2) 浏览器选择的是PhantomJS,安装步骤如下: $ npm install karma-phantomjs-launcher -D 复制代码 (3) 如果涉及到对以ES6编写的代码进行测试,就要安装...plugins": ["transform-es2015-modules-umd"], "auxiliaryCommentBefore": "istanbul ignore next" } 复制代码 6....运行测试 $ karma start 复制代码 8. 结束 按照上述步骤,大家应该可以配置好自己的 karma + jasmine 测试环境,如果遇到问题或者文中有写错的地方,欢迎大家来讨论。

    1.7K20

    搭建 karma + jasmine 测试环境

    什么是 karma karma 是由Angular团队开发的一款测试工具,帮助开发者更好更快速地在多种环境下执行测试代码,拿到测试结果。...在 init 时会让你选择一些配置项: test framework ---- 我这里选择的是jasmine,它是一款JavaScript断言测试库 use Require.js ---- 根据个人情况...根据配置项的选择安装插件 (1) 测试框架选择的是jasmine,安装步骤如下: $ npm install jasmine-core karma-jasmine -D 这里要装两个,一个是jasmine...(2) 浏览器选择的是PhantomJS,安装步骤如下: $ npm install karma-phantomjs-launcher -D (3) 如果涉及到对以ES6编写的代码进行测试,就要安装Babel...运行测试 $ karma start 8. 结束 按照上述步骤,大家应该可以配置好自己的 karma + jasmine 测试环境,如果遇到问题或者文中有写错的地方,欢迎大家来讨论。

    14610

    写代码无BUG,网易云前端单元测试方案总结

    单元测试的技术方案很多,不同工具之间有互相协同,也存在功能重合,给我们搭配测试方案带来不小的困难,而且随着 ES6, TypeScript 的出现,单元测试又增加了很多其他步骤,完整配置起来往往需要很大的时间成本...jasmine 的出现就稍微缓解了一下这个问题,但也不够完整,jasmine提供一个测试框架,里面包含了 测试流程框架,断言函数,mock工具等测试中会遇到的工具。...总结下 Jasmine 的工具链 Node 环境下测试 : Jasmine + babel 模拟 JSDOM 测试 : Jasmine + JSDOM + babel 真实浏览器测试 : Karma +...jest Jest 是 facebook 出的一个完整的单元测试技术方案,集 测试框架, 断言库, 启动器, 快照,沙箱,mock工具于一身,也是 React 官方使用的测试工具。...另外测试 React组件除了 Enzyme 提供的操作, Jest 中还有很多其他有用的特性,比如可以 mock 一个 npm 组件的实现,调整 setTimeout 时钟等,真正进行单元测试时,这些工具也是必不可少的

    9.6K20

    分享7个专业级的JavaScript测试库,提高你的工作效率

    https://github.com/jasmine/jasmine 使用示例 Jasmine是一个用于JavaScript代码的行为驱动开发(BDD)测试框架。...首先,你需要安装Jasmine。...在Node.js环境中,你可以通过npm(Node包管理器)来安装: npm install --save-dev jasmine 安装完Jasmine后,你可以在你的项目中创建一些测试文件。...,那么测试就会通过。如果函数的行为与我们的预期不符,那么测试就会失败,并显示一条描述失败原因的消息。 以上就是对Jasmine库的基本介绍和示例。...6、TestDouble 你在编写JavaScript测试,并在寻找一个模拟库来替你模拟真实的东西吗?这是一个有自己独特见解的,设计精心的测试替身库。该库旨在适用于Node.js和浏览器解释器。

    30420

    用 jest 单元测试改善老旧的 Backbone.js 项目

    当然,采用 ES6语法 和 babel 并非一定必要,AMD 也是可以实现测试的。 Backbone.js ?...原有用例 早期的项目中其实是有一些单元测试代码的,主要是用 Jasmine 对部分 model/collection 进行了测试。...由于 Jest 内置了 Jasmine2,所以这部分的语法问题不大,基本可以无痛迁移。...的单元测试并不严谨,依赖了提供 mock 数据的 php 服务器环境 三是由于视图层没有很好的组件化,从而缺乏对视图组件的测试 jest for Backbone 的实践 jest 是比较新的测试框架...build 时运行测试 目标项目中,其实是用 babel 5 做的 ES6 转译;但是由于之前的源代码已经全部采用了 ES6 语法开发(部分初始 AMD 代码也做过自动转化),所以我们完全可以在测试时采用较新的

    3.5K10

    如何管理云原生应用程序的依赖关系

    ": "^8.0.0", "@angular/language-service": "^8.0.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2..."~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter...它提供的功能包括:完全自动化地拉取请求创建和合并,基于软件包流行度和测试数据的依赖关系选择,支持多个软件包管理器,包括 npm、yarn、composer,以及为每个仓库定制的更新规则。...全面地测试这些依赖关系对任何云原生应用的成功都至关重要。然而,手动更新所有的依赖关系可能很困难,也很耗时。自动化的依赖管理工具可以帮助减少花在管理依赖关系上的时间,也可以提高代码的质量。...今日好文推荐 谷歌计划裁员上万人:利用刚上线半年的新绩效系统解雇6%“排名垫底”员工 世界杯将是压垮 Twitter 的最后一根稻草?

    1.7K10
    领券