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

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

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

开源深度爱好者

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

联系我: h@phodal.com

微信公众号: 与我沟通

标签