Blog

Blog

PHODAL

Grunt Jasmine RequireJS 编写前端测试

在不知道用什么方法来跑Jasmine测试的时候,突然想起来,我们可以用PhantomJS来跑Jasmine。

Gruntfile 编写

于是在谷歌了多次之后,总算写下了自己的gruntfile,主要依赖于

"grunt": "0.4.5",
"grunt-contrib-jasmine": "0.8.1",
"grunt-template-jasmine-requirejs": "0.2.0"

所以把上面的包添加到package.json中。

然后创建一个gruntfile.js

module.exports = function (grunt) {
"use strict";

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json')
  , jasmine: {
    src: "web/test/lib/*.js"
    , options: {
      specs: "web/test/spec/*Spec.js",
      template: require('grunt-template-jasmine-requirejs'),
      templateOptions:{
        requireConfig: {
          baseUrl: './',
          paths: {
            'text': 'web/lib/text/text',
            jquery: 'web/lib/jquery/dist/jquery.min',
            json: 'web/lib/require/json',
            router: 'web/router',
            underscore: 'web/lib/underscore/underscore',
            mustache: 'web/lib/mustache/mustache',
            backbone: 'web/lib/backbone/backbone',
            "jquery-cookie": "web/lib/jquery.cookie/jquery.cookie"
          },
          shim: {
            "jquery-cookie": ["jquery"],
            underscore: {
              exports: '_'
            }
          }
        }
      }
    }
  }
});

grunt.loadNpmTasks('grunt-contrib-jasmine');

grunt.registerTask('test', ['jasmine']);
grunt.registerTask('default', ['test']);

};

代码中比较重要的应该就是Requirejs相关的配置

    template: require('grunt-template-jasmine-requirejs'),
    templateOptions:{
      requireConfig: {
        baseUrl: './',
        paths: {
          'text': 'web/lib/text/text',
          jquery: 'web/lib/jquery/dist/jquery.min',
          json: 'web/lib/require/json',
          router: 'web/router',
          underscore: 'web/lib/underscore/underscore',
          mustache: 'web/lib/mustache/mustache',
          backbone: 'web/lib/backbone/backbone',
          "jquery-cookie": "web/lib/jquery.cookie/jquery.cookie"
        },
        shim: {
          "jquery-cookie": ["jquery"],
          underscore: {
            exports: '_'
          }
        }
      }
    }

注意:这里的baseUrl可能会有问题,如果不注意的话

其他

一开始用的是karma,结果报各种错,最后只好用phantomjs来跑

./node_modules/karma/bin/karma start karma.conf.js
INFO [karma]: Karma v0.12.24 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/fdhuang/learing/freerice/web/test-main.js" does not match any file.
WARN [watcher]: Pattern "/Users/fdhuang/learing/freerice/web/test/lib/*.js" does not match any file.
INFO [Chrome 38.0.2125 (Mac OS X 10.10.0)]: Connected on socket Y_6khIJrAU_-klyONmnZ with id 89307968
Chrome 38.0.2125 (Mac OS X 10.10.0) ERROR
  Uncaught Error: Mismatched anonymous define() module: function ($, UserSession) {
    'use strict';

以及下面的一些配置问题

files: [
  'test/test-main.js',
  {pattern: 'test/lib/*.js', included: false},
  {pattern: 'test/spec/*Spec.js', included: false}
],

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签