Jasmine入门

本文是jasmine学习整理文章。适合入门,是作者参考了网上三篇文章之后,自己整理的。

初学者可以百度进入jasmine官网,点击release菜单进入github的版本释放页面:https://github.com/jasmine/jasmine/releases;下载最近的版本。下载之后

目录结构解释一下:

  • lib:存放了运行测试案例所必须的文件,其内包含jasmine-2.2.0文件夹。可以将不同版本的Jasmine放在lib下,以便使用时切换。
  • jasmine.js:整个框架的核心代码。
  • jasmine-html.js:用来展示测试结果的js文件。
  • boot.js:jasmine框架的的启动脚本。需要注意的是,这个脚本应该放在jasmine.js之后,自己的js测试代码之前加载。
  • jasmine.css:用来美化测试结果。
  • spec:存放测试脚本。
  • PlayerSpec.js:就是针对src文件夹下的Player.js所写的测试用例。
  • SpecHelper.js:用来添加自定义的检验规则,如果框架本身提供的规则(诸如toBe,toNotBe等)不适用,就可以额外添加自己的规则(在本文件中添加了自定义的规则toBePlaying)。
  • src:存放需要测试的js文件。Jasmine提供了一个Example(Player.js,Song.js)。
  • SpecRunner.html:运行测试用例的环境。它将上面3个文件夹中一些必要的文件都包

总结一下:

Suite表示一个测试集,以函数describe(string, function)封装,它包含2个参数:

string:测试组名称,

function:测试组函数。

Specs 通过调用 it 的全局函数来定义。

一个Suite(describe)包含多个Specs(it),一个Specs(it)包含多个断言(expect)。

下载文档是官方提供的测试文档,可以直接打开html文件查看测试结果。而所谓的测试就是通过一个测试集,测试集下面有测试方案,测试方案下有多个断言。

给一个简单的测试用例吧,直接将SpecRunner文件中的官方链接测试脚本下图中

替换为下面脚本,然后运行html文件,就可以看自己案例的效果了。

describe("Test suite is a function.", function() {
  var gVar;

  it("Spec is a function.", function() {
    gVar = true;
    expect(gVar).toBe(true);
  });

  it("Another spec is a function.", function() {
    gVar = false;
    expect(gVar).toBe(false);
  });

});

  测试本质就是输入一些内容,然后判断其与输出的关系。当然实际当中会有很多关系,这个关系就构成了jasmine的各种方法了也就是各种Matchers,具体的有哪些方法参考下面文章吧。

参考文章:

JavaScript单元测试框架-Jasmine

JavaScript 单元测试框架:Jasmine 初探

前端测试-jasmine

时间: 2024-07-30 20:19:45

Jasmine入门的相关文章

Jasmine入门(下)

上一篇 Jasmine入门(上) 介绍了Jasmine以及一些基本的用法,本篇我们继续研究Jasmine的其他一些特性及其用法(注:本篇中的例子均来自于官方文档). Spy Spy用来追踪函数的调用历史信息(是否被调用.调用参数列表.被请求次数等).Spy仅存在于定义它的describe和it方法块中,并且每次在spec执行完之后被销毁. 示例1: 1 (function(){ 2 describe("A spy", function() { 3 var foo, bar = null

Jasmine入门(上)

什么是Jasmine Jasmine是一个Javascript的BDD(Behavior-Driven Development)测试框架,不依赖任何其他框架. 如何使用Jasmine 从Github上(https://github.com/pivotal/jasmine/releases)下载所需的Jasmine版本.下载完成之后,直接打开SpecRunner.html即为Demo,除了引入Jasmine框架之外,只需引用自己所需测试的js文件以及Jasmine测试脚本引可. 图1: 基本语法介

Angularjs 基于karma和jasmine的单元测试

目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller     3.1 测试controller中变量值是否正确     3.2 模拟http请求返回值,测试$http服务相关 4. 从文件中读取json,来模拟 http请求返回数据 5. 测试返回promise的service 已经有很多教程提到了angularjs项目的单元测试,但大都不是很全,如一些入门的文章,介绍了测试http service 却没有介绍如何从文件中读取测试数据来仿真.一些介绍如何从文件中读

基于karma和jasmine的Angularjs 单元测试

Angularjs 基于karma和jasmine的单元测试 目录: 1. 单元测试的配置 2. 实例文件目录解释 3. 测试controller     3.1 测试controller中变量值是否正确     3.2 模拟http请求返回值,测试$http服务相关 4. 从文件中读取json,来模拟 http请求返回数据 5. 测试返回promise的service 已经有很多教程提到了angularjs项目的单元测试,但大都不是很全,如一些入门的文章,介绍了测试http service 却

30分钟QUnit入门教程

30分钟Qunit入门教程 15分钟让你了解Javascript单元测试框架QUnit,并能在程序中使用. QUnit是什么 QUnit是一个强大,易用的JavaScript单元测试框架,由jQuery团队的成员所开发,并且用在jQuery,jQuery UI,jQuery Mobile等项目. Hello World 学习QUnit还是从例子开始最好,首先我们需要一个跑单元测试的页面,这里命名为index-test.html: <!DOCTYPE html> <html> <

Angular系列----AngularJS入门教程04:迭代器过滤(转载)

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视着你的应用,并且在发生回归的时候迅速报告. 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框.注意到页面上的手机列表随着用户在搜索框中的输入而变化. 步骤2和步骤3之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器 我们对控制器不做

Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

转摘_结合个人经历总结的前端入门方法

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最

前端入门方法(大全)

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最