https://angular.github.io/protractor/#/
http://jasmine.github.io/2.4/introduction.html

测试程序有两种主要方法:端对端测试和单元测试。

端对端测试
如果使用自上而下的方法进行测试,那么写测试时就将程序视为一个“黑盒”。与程序交互就如真实用户一样,从“旁观者”的角度评判程序是否达标。这种自上而下的测试技巧被称为端对端测试。

在Angular中,最常用的工具叫作Protractor。Protractor能够打开浏览器与程序交互,收集测试结果,并检验测试结果与预期值是否相符。

单元测试
第二种常用的测试方法是隔离程序的每个部件,在隔离环境中运行测试。这种测试形式叫作单元测试。
在单元测试中,所写的测试需要事先提供既定的输入值与相应的逻辑单元,检测输出结果,确定它是否与我们的预期结果匹配。

--------------------------------------------------------------------------------
下面说说单元测试。

为了测试程序,我们将用到两种工具:Jasmine和Karma。

【Jasmine】
Jasmine是一种用于测试JavaScript代码的行为驱动框架。
利用Jasmine,你可以设置代码在调用后的预期结果。
比如,我们假定Calculator对象有一个sum函数。想确保1加1的结果为2,就可以用一个测试(也叫规格,spec)来表达。使用以下代码:
describe('Calculator', () => {
it('sums 1 and 1 to 2', () => {
var calc = new Calculator();
expect(calc.sum(1, 1)).toEqual(2);
});
});

使用Jasmine的一个优点是代码易于阅读。从以上代码可以看到,我们期望 calc.sum的结果等于2。

测试通常由多个describe块和it块组成。
通常,我们用describe来组织要测试的逻辑单元,对于其内部每个要使用断言的预期都会用到一个it块。然而,这并不是一个硬性规定。你会经常看到一个it块包含多个预期。
在上述Calculator示例中,我们只是列举了一个简单的对象。正因为如此,整个类只使用了一个describe块,而每个方法使用一个it块。
大多数情况下并非如此。比如,某些方法会根据不同输入值产生不同结果,那么这些方法可以拥有多个相应的it块。在这种情况下,最好使用嵌套的describe块:对象级别用一个,每个方法也各用一个,然后在其内部的每个断言语句用一个单独的it块包裹。
更多有关Jasmine和其语法的资料, 参见Jasmine 官方文档: http://jasmine.github.io/2.4/introduction.html。

【Karma】
使用Jasmine,我们可以描述测试和预期结果。要运行测试,还需要为测试提供一个浏览器环境。
Karma应运而生。使用Karma,我们可以在Chrome或Firefox之类的真实浏览器或者PhantomJS这样的空壳浏览器(无用户界面)内运行JavaScript代码。

--------------------------------------------------------------------------------
【Angular 单元测试框架】
Angular自身提供了一套基于Jasmine框架的辅助类,用以帮助我们编写单元测试。
主要的测试框架位于 @angular/core/testing 包中。(然而,为了测试组件,我们会用到 @angular/compiler/testing 包和 @angular/platform-browser/testing 包中的一些辅助类。稍后具体介绍。)

注:如果这是你初次测试Angular程序,那么在为Angular写单元测试时,需要先完成一些必要的设置步骤。
例如,在需要注入依赖时,我们经常手动配置它们。在测试一个组件时,需要使用测试辅助类初始化它们。在测试路由时,还需要构建一些依赖。
设置有些繁琐,但不用太担心。一旦掌握,你就会发现从一个项目切换到另外一个项目,配置不会有多大变化。

Angular单元测试的更多相关文章

  1. angular单元测试与自动化UI测试实践

    关于本文:介绍通过karma与jsmine框架对angular开发的应用程序进行单元与E2E测试. angular单元测试与集成测试实践 先决条件 创建项目 webstorm中创建空白web项目 创建 ...

  2. Angular单元测试系列

    Angular单元测试系列 - 大纲Angular单元测试系列 - 简介Angular单元测试系列 - 如何使用Jasmine进行Angular单元测试Angular单元测试系列 - Router.C ...

  3. karma作为jQuery单元测试Runner

    karma作为angular测试runner出现,如果你使用过karma一定感受到这很不错的javascript测试runner.简单干净的配置文件karma.config.js,以及karma in ...

  4. Angular学习笔记--last_update 20151106

    参考来源:http://www.angularjs.cn/tag/AngularJS?p=1&s=50 基本要求:一周搞定33篇学习文章 目标:develop/refactor lms系统an ...

  5. ApacheCN Asp.NET 译文集 20211126 更新

    ASP.NET Core2 基础知识 零.前言 一.搭建舞台 二.控制器 三.视图 四.模型 五.验证 六.路由 七.RestBuy 八.添加功能.测试和部署 ASP.NET Core3 和 Angu ...

  6. 使用Angular CLI进行单元测试和E2E测试

    第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...

  7. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  8. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

  9. 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

随机推荐

  1. [Android] 配置安卓模拟器,使得dex文件不被优化成odex

    最近做一个模块,需要将apk里面加载的dex文件dump出来,所以需要配置让dalvik不要把dex文件优化成odex. 1. 配置build.prop 主要是通过修改文件/system/build. ...

  2. having使用的时机

    where 子句的作用是在对查询结果进行分组前,将不符合where条件的行去掉,即在分组之前过滤数据,条件中不能包含聚组函数,使用where条件显示特定的行. having 子句的作用是筛选满足条件的 ...

  3. loading图标modal弹窗 和jquery ajax的关系

    在ajax配置中 ,async:false,非异步,modal窗口会失效,只有重新设置为async:true,或者删除async的设置,则loading的模态框才能展示出来 loading图标的模态框 ...

  4. Java类集框架——List接口

    学习目标 掌握List接口与Collection接口的关系. 掌握List接口的常用子类:ArrayList.Vector. 掌握ArrayList与Vector类的区别.    Collection ...

  5. mapxtreme java学习之路(1)——.dwg转.tab再转.gst详细教程

    [背景] 因为项目的需要,需要在java web 项目中使用到地图,厂家提供的是dwg格式的地图,而我们采用的是mapxtreme java技术,所以先要把dwg格式的地图转成mapxtreme ja ...

  6. python 类 __module__ __class__

    __module__ 和  __class__  __module__ 表示当前操作的对象在那个模块 __class__     表示当前操作的对象的类是什么 创建一个目录lib 在day7 目录下创 ...

  7. Redhat 7改动默认执行级别方法 --RHEL7使用systemd创建符号链接指向默认执行级别

    今天装了下正式版的RHEL7,发现熟悉的inittab中没有了改动默认执行级别,打开inittab例如以下 [root@localhost init.d]# vi /etc/inittab # ini ...

  8. [Axiom3D]第一个Axiom3D程序

    Axiom3D程序的基本渲染流程 #region Namespace Declarations using System; using System.Linq; using Axiom.Core; u ...

  9. 5.2 Components — Defining A Component

    一.概述 1. 为了定义一个组件,创建一个模板,它的名字以components/开头.为了定义一个新组件{{blog-post}},例如,创建一个components/blog-post模板. 2.注 ...

  10. appcmd创建站点、应用程序、虚拟目录批处理程序

    创建站点(放置在站点下运行): @echo off cls :start echo start set /p sitename="sitename:" @set "phy ...