angular2单元测试学习

2023-11-04

单元测试简介:https://segmentfault.com/a/1190000009737186

单元测试-Jasmine:https://segmentfault.com/a/1190000009737204

angular2单元测试:https://segmentfault.com/a/1190000009769787#articleHeader1

 

概念简介

Jasmine 

Jasmine测试框架提供了编写测试脚本的工具集,而且非常优秀的语义化,让测试代码看起来像是在读一段话。

describe,beforeEach,it,expect等方法,利用这些方法可以定义单元测试如何执行,单元测试的结果和预期。

官方文档:https://jasmine.github.io/api/edge/global.html#expect

Karma

有Jasmine测试脚本,还需要Karma来帮忙管理这些脚本,以便于在浏览器中运行,可以理解Karma为运行这些测试脚本的容器。

需要在根目录创建 karma.conf.js 文件,这相当于一些约定。文件是为了告知karma需要启用哪些插件、加载哪些测试脚本、需要哪些测试浏览器环境、测试报告通知方式、日志等等。

官方文档:https://karma-runner.github.io/1.0/config/configuration-file.html

Angular测试工具集

testded

testded是angular提供用于单元测试的主要工具方法。为单元测试配置和初始化环境,提供创建组件和服务的方法。

还有spy和一些异步支持

 

结合Jasmine和Angular测试工具集编写单元测试案例

Jasmine单元测试的基础概念

Jasmine中的单元测试有几个概念:test suit、Specs、Expectations

test suit 测试套件

可以理解为一组单元测试用例的集合。Jasmine用describe函数来表示

Specs 测试案例

一个单元测试用例,Jasmine使用函数it来表示

Expectations 期望值

一个单元测试用例执行后,对执行结果的期待,Jasmine使用函数expect来表示

 

Jasmine单元测试常用方法

Matchers:对期待值进行判断,toBeTruthy,toBeNull这种,也可以自己实现Matcher

Setup 与 Teardown:在测试套件中,一些重复的代码可以放在setup和teardown中。setup(对应beforeEach)为每一个单元测试案例执行之前会执行,Teardown(对应afterEach)为每一个单元测试案例执行之后会执行,

数据共享:在describe 来定义相应的变量,这样每个 it 内部可以共享它们

spy: 文档翻译:https://blog.csdn.net/GuoJiangweigege/article/details/52130589  并参照:https://www.cnblogs.com/laixiangran/p/5060922.html

spyOn(object, "methodNam");//在object对象上添加methodNam,当调用object对象上的方法,为模拟调用,不会执行methodNam方法的代码。spyOn写在beforEach或者it中,每一个测试案例执行完之后,被销毁。

spyOn(object, "methodNam").and.callThrough();//methodNam方法的代码会被执行

spyOn(object, "methodNam").and.callFake(fn);//methodNam方法会被fn替代,执行fn

spyOn(object, "methodNam").and.returnValue(value);//methodNam的返回值为value

 

Angular工具集

TestBed

如官方所说,是angular单元测试最主要的api。个人理解是一组单元测试的测试context,按配置生成模块、组件,然后提供这些模块或者组件用于单元测试。

1 TestBed创建模块:TestBed.configureTestingModule

构建一个angular模块,并返回,接受参数用于配置模块,和@NgModule的配置无差别。

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [HttpModule],
        declarations: [TestComponent]
    });
});

2 TestBed创建组件:TestBed.createComponent

创建组件,返回一个fixture。fixture 包括组件实例、变更监测以及DOM相关的属性,它是用来写单元测试的核心。

 1 @Component({
 2     template: `<trade-view [id]="id" (close)="_close()"></trade-view>`
 3 })
 4 class TestComponent {
 5     id: number = 0;
 6     _close() { }
 7 }
 8 
 9 beforeEach(() => {
10     TestBed.configureTestingModule({
11         imports: [HttpModule],
12         declarations: [TestComponent]
13     });
14     fixture = TestBed.createComponent(TestComponent);
15     component = fixture.componentInstance; //组件实例
16     el = fixture.nativeElement; //组件原生元素17 });

 3 异步beforeach(具体可参考angular官方文档 测试-调用compileComponents())

如果一个组件使用了templateUrl和styleUrls获取模板或者模板样式,这是一个异步的过程,那么需要使用异步beforeach创建组件,否则会报错无法编译组件。

如下是没有使用异步beforeach创建组件:

1 beforeEach(() => {
2   TestBed.configureTestingModule({
3     declarations: [ BannerComponent ],
4   });
5   fixture = TestBed.createComponent(BannerComponent);
6 });

如果这个组件没有使用templateUrl或styleUrls,那么不会有任何问题,因为createComponet就会执行组件的编译,然后再创建组件。但如果使用了templateUrl或styleUrls,则获取url地址文件的过程是异步的,在createComponent时如果没有返回地址,那么执行编译就会报错。这时,用异步的beforeach来解决这个问题。

 1 beforeEach(async(() => { //使用angular提供的辅助异步函数
 2   TestBed.configureTestingModule({
 3     declarations: [ BannerComponent ],
 4   })
 5   .compileComponents()
 6   .then(() => {
 7     fixture = TestBed.createComponent(BannerComponent);
 8     component = fixture.componentInstance;
 9     h1 = fixture.nativeElement.querySelector('h1');
10   });
11 }));

 

转载于:https://www.cnblogs.com/hahlzj/p/11294630.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

angular2单元测试学习 的相关文章

随机推荐

  • C++题库

    文章目录 1 求最大值 2 求圆面积 3 编写重载函数来打印字符串 4 设计带构造函数的Dog类 5 定义一个带重载构造函数的日期类 6 C 第三章 指针 动态生成Person类的对象 7 编写一个小小的计算器 能够计算两个浮点数的加 减
  • 使用Myeclipse插件将wsdl生成java客户端代码

    使用环境 MyEclipse9 0 本教程使用Myeclipse内置插件生成java代码 网上说这是xfire插件 不管怎样 生成和调用客户端代码都十分简单 1 在项目上右键 选择New gt Other gt Web Service gt
  • Mysql常用命令行

    Mysql常用命令行 第一招 mysql服务的启动和停止 net stop mysql net start mysql 第二招 登陆mysql 语法如下 mysql u用户名 p用户密码 键入命令mysql uroot p 回车后提示你输入
  • 如何用python调用webservice接口

    最近项目需要去调用其他平台接口 接口类型为webservice接口 跟经常用的http请求还不一样 然后就找到python的suds三方包 以下为根据号码查询归属地接口进行测试和举例 安装suds三方包 命令行 pip3 install s
  • VSCode 的 Local History插件使用

    VSCode 的 Local History 插件使用 在使用vscode编写代码的时候 往往需要查看历史的修改记录 这时可以安装 Local History 插件 安装成功之后 关闭 vscode 然后重新启动就可使用 在左下角可以看到
  • linux 查找安装包路径,查看yum安装软件包的路径

    Linux系统下查找安装包所在目录的方法 linux中查看软件文件安装路径 Linux查看软件安装路径 linux查找安装包路径 rpm查找安装包路径 rpm rpm qa grep php fpm rpm ql php73 php fpm
  • python的struct模块

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 了解c语言的人 一定会知道struct结构体在c语言中的作用 它定义了一种结构 里面包含不同类型的数据 int char bool等等 方便对某一结构对象进行处理 而在网络
  • oshi - 服务器及应用监控库 - 简介与使用

    by Claudia 文章目录 简介 特性 相关资料 运行 具体使用 源码分析 SetCpuInfo SetMemInfo SetSysInfo SetJvmInfo SetSysFiles Why oshi 竞品分析 总结 简介 oshi
  • el-form表单中不同数据类型对应的时间格式化和校验规则

    1 在表单中 当选择不同的数据类型时 需要在下面选择时间时和数据类型对应上 通过监听数据类型的变化 给时间做格式化 2 但是当不按顺序选择数据类型后 再选时间可能会报错 所以需要在dom更新后 再清空表单 3 校验规则 结束时间需要大于开始
  • 2022-12-30 工作记录--React/JS-关闭一个弹窗后,根据需求判断是否继续弹出该弹窗

    React JS 关闭一个弹窗后 根据需求判断是否继续弹出该弹窗 一 实现效果 假如用户在 任务弹窗 同时完成了三个非签到任务 想要实现 当用户返回 首页 时 依次弹出对应完成的任务的 完成任务弹窗 如下图 二 实现代码 后端返的数据 接口
  • 模型集成(Model Ensemble)

    模型集成 Model Ensemble 模型集成是融合多个训练好的模型 基于某种方式实现测试数据的多模型融合 这样来使最终的结果能够 取长补短 融合各个模型的学习能力 提高最终模型的泛化能力 近年来 model ensemble已成刷榜神器
  • 计算机组成原理笔记01

    做题笔记1 学习内容 教材的思维导图 课后练习 计算部分 中国大学MOOC计算机组成原理 计算部分 1 教材的思维导图 2 课后练习P17 7 某计算机主频为1 2GHz 其指令分为4类 它们在基准程序中所占比例及CPI如表1 7所示 指令
  • Rancher应用商店的questions.yml接收数组参数

    背景 制作FlinkCluster的Chart包 要求应用商店界面输入接受数组参数 questions yml 是不支持这种形式的 解决方案 questions yml中的参数最终是以 set name value 的形式拼接到命令中的 h
  • m3u8 videojs 倍速播放属性

    var myVideo videojs myVideo bigPlayButton true textTrackDisplay false posterImage false errorDisplay false playbackRates
  • Elasticsearch-拼音分词/排序

    1 拼音分词器安装 1 1下载拼音分词插件 要和安装的es版本保持一致 我的版本是6 6 0 下载地址 https github com medcl elasticsearch analysis pinyin tree v6 4 0 1 2
  • C++学习难点1

    数据类型与表达式 1 运算符 1 1 自增自减运算符 int i 0 j j i 后置 i的值自增变为1 表达式i 的值为i自增之前的值 即j得值为0 j i 前置 i的值自增变为1 表达式i 的值为i自增之后的值 即j得值为1 注意 自增
  • UnityShader 模型空间转剪裁空间

    模型空间转剪裁空间 1 引入UnityCG cginc库 include Lighting cginc 2 使用UnityObjectToClipPos 方法 v2f vert a2v v v2f f f svPos UnityObject
  • IO流

    过滤器字节流 FilterInputStream 过滤器字节输入流 FilterOutputStream 过滤器字节输出流 它们的主要用于封装其他的输入输出流 为它们提供一些额外的功能 具有以下实现类 以下以FilterInputStrea
  • 【完全开源】小安派-KVM 三进一出切换器

    目录 一 概述 二 使用方法 2 1 连接 2 2 切换 2 3 掉电储存 三 控制原理 3 1 HIDMI控制 3 2 USB切换控制 3 3按键读取 四 资料 一 概述 AiPi KVM 是一款三进一出的HDMI USB的切换器 可以让
  • angular2单元测试学习

    单元测试简介 https segmentfault com a 1190000009737186 单元测试 Jasmine https segmentfault com a 1190000009737204 angular2单元测试 htt