前端开发--实战篇之测试框架

如果不了解前端开发环境,请参考搭建前端开发环境

如果不了解实战篇的项目配置,请参考前端开发--实战篇

步骤一:待命

在cmd里面,进入到public文件夹待命。

步骤二:初始化karma配置文件karma.conf.js

执行初始化配置文件的命令:

karma init

根据向导,大多数使用默认配置即可。具体见下图:

步骤三:根据当前目录结构,修改配置文件karma.conf.js

添加待测试的js文件:

files: [
  ‘app/dist/lib/angular/*.js‘,
  ‘app/dist/lib/**/*.js‘,
  ‘app/js/**/*.js‘,
  ‘test/**/*.js‘
],

注意:必须先引入angular下的js文件。

步骤四:写个测试用例试试看

在test目录下新建文件testHello.js,内容:

describe("A suite of test", function() {
    it("always true",function(){
        expect("1").toEqual("1");
    });
});

describe("A suite of test", function() {
    it("always false",function(){
        expect("1").toEqual("2");
    });
});

写了两条测试用例。如果要了解更多,请参考jasmine文档

迫不及待的运行一把,执行命令:

karma start

会发现自动打开chrome浏览器并执行了测试用例,结果如下:

Chrome 45.0.2454 (Windows 10 0.0.0) A suite of test always false FAILED
        Expected ‘1‘ to equal ‘2‘.
            at Object.<anonymous> (F:/workspace1/public/test/testHello.js:9:21)
Chrome 45.0.2454 (Windows 10 0.0.0): Executed 2 of 2 (1 FAILED) (0.02 secs / 0.007 secs)

步骤五:代码覆盖率

编辑配置文件karma.conf.js,修改或追加的内容:

preprocessors: {
  ‘app/js/**/*.js‘: ‘coverage‘
}
coverageReporter: {
  type : ‘html‘,
  dir : ‘coverage/‘
}
reporters: [‘progress‘, ‘coverage‘]

再次运行karma start,发现public目录下生成一个coverage文件夹,打开index.html,样子是这样的:

时间: 2024-10-10 08:22:48

前端开发--实战篇之测试框架的相关文章

前端开发--实战篇

如果不了解前端开发环境,请参考搭建前端开发环境 下面以angular为开发框架,实战个前端开发项目.(windows环境为例) 步骤一:初始化项目目录 创建项目根目录文件夹:public 在cmd里面,进入到public文件夹待命. 步骤二:初始化node配置文件package.json 步骤三:安装并初始化grunt配置文件Gruntfile.js 步骤四:初始化bower配置文件bower.json 步骤五:项目目录规划 步骤六:结合grunt和grunt-bower-task进行优化

Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导 航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换的.这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧. 首先还是在前面博文的基础上加以实现,其实只用HTML和CSS还是可以做出不错的效果,但是相较于JS和 jQuery来说就有很

高性能极致用户体验前端开发实战

课程介绍 高性能极致用户体验前端开发实战课程适合所有前端开发学习或者从业者,结合目前前端开发的最佳实践,提供前端网页性能分析优化知识,结合实际项目经验分析可以采用的优化思路,并给出开发高性能极致体验网页的通用方法和技巧. 课程官方博客:前端学堂 在开始学习本课程之前,先提2个基本要求: 了解业务 作为一名合格的前端开发,我们的开发工作不是盲目的,我们的优化目标需要明确,所以首先要了解你所做的业务.不仅要知道整个业务背景,还需要了解业务需求,业务目的,最后最好能拿到业务结果. 了解业务的目的是能让

iOS开发网络篇—使用ASI框架进行文件下载

原文  http://www.cnblogs.com/wendingding/p/3961681.html iOS开发网络篇—使用ASI框架进行文件下载 说明 :本文介绍iOS网络编程中经常用到的框架ASI,如何使用该框架进行文件的下载. 一.简单介绍 代码示例: 1 #import "YYViewController.h" 2 #import "ASIHTTPRequest.h" 3 4 @interface YYViewController () 5 6 7 @

Web前端开发第一篇

本人在学习和开发web前端中得到的一些javascript.jquery.html等等效果可能对大家有用和对大家有帮助的东西一起分享给大家. 这些效果也许很多人都已经有了,不过我还是积累下,分享给一起学习Web前端的人员和刚刚开始学习Web前端的人员, 希望能帮助大家. 我的语言组织能力比较差,还有我的技术水平也是比较差的,有些东西可能理解的不对,大神们可以指点出来我加以改正,希望大家见谅! Web前端开发第一篇

Django企业开发实战 高效Python Web框架指南

高清PDF,带书签 Django企业开发实战 高效Python Web框架指南Django企业开发实战 高效Python Web框架指南Django企业开发实战 高效Python Web框架指南gACkM793118 粘贴链接到地址栏访问: https://fgk.pw/i/gACkM793118 原文地址:https://www.cnblogs.com/ziqang/p/11051134.html

怎么能学好Web前端开发 如何快速掌握Vue框架

怎么能学好Web前端开发?如何快速掌握Vue框架?很多人看好Web前端的市场前景,因此纷纷选择学习入行前端行业?.很多学Web前端的小伙伴在进阶阶段都要学习Vue,因为它是目前企业常用的技术之一.下面给大家分享一个比较不错的Vue学习路线. Vue是一个用于构建Web用户界面的JavaScript框架,因此在开始使用Vue之前,你至少先要掌握JavaScript和Web开发的基础知识.具备一定基础后,你可以了解以下内容: Vue生命周期.在构建你的第一个Vue应用之前,你要了解如何在网页中去安装

iOS开发——实战篇&amp;Xcode 7真机测试详解

Xcode 7真机测试详解 1.准备 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题:could not find developer disk image 首先,准备好下面的设备机相关软件 MAC版本:OSX10.10.4 Xcode版本:Xcode7 beta5(点击下载) 真机设备:iPad Air(iOS 8.1.3)/iphone 6 2.首先先安装Xcode7,并且运行Xcode,点击左上角菜单Xcode -> Preferences

Web前端开发实战3:二级下拉式菜单之jQuery实现

大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现 的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: 1)使用$(function(){...})获取到想要作用的HTML元素. 2)通过使用children()方法寻找子元素. 3)通过使用show()方法来显示HTML元素. 4)通过使用hide()方法来隐藏HTML元素. 5)jQuery库引用方法: 第一种方法:将jQuery库下载到电脑上