前言

如有排版乱掉，参阅https://www.zybuluo.com/bornkiller/note/30734。
前端测试框架推荐karma，断言库推荐jasmine断言库，再配合jasmine-ajax, jasmine-jquery扩展，可以实现比较完整的前端测试。关于jquery的测试场景可能不多见，但有备无患。

声明amD模块

声明一个sample模块，emphasize进行DOM操作， getContent从后台获取数据。按照requirejs的AMD实现规范定义即可。

// ./modules/jquery/sample.js
define(['jquery'], function($) {
  VAR sample = {};
  sample.emphasize = function() {
      $('h3:First').addClass('tITle-emphasize');
      $('p:first').addClass('content-emphasize');
  };

  sample.getContent = function() {
      $.getJSON('/api/content')
          .done(function(data) {
              $('h3:first').text(data.title);
              $('p:first').text(data.content);
          })
  };
  return sample;
});

视图定义

karma默认的index.htML文件body内部为空，目的为方便测试。但进行DOM操作的模块依赖DOM才能进行，所以需要重定义view，并在测试时引入，此处定义简易。

<h3 class="title">love story</h3>
<p class="content">Love is complicated</p>

模块测试

jasmine.getFixtures().fixturesPath配置view加载相对路径
jasmine.getFixtures().load 将view内容加载进当前页面

define(['sample'], function(sample) {
    describe('just jquery test sample', function () {
        beforeeach(function () {
          jasmine.getFixtures().fixturesPath = '/base/views/';
          jasmine.getJSONFixtures().fixturesPath = '/base/configs';
        });

        beforeEach(function () {
          jasmine.getFixtures().load('sample.html');
          jasmine.Ajax.install();
        });

        it('just check view load', function () {
          expect($('h3:first')).toHaveClass('title');
          expect($('p:first')).toHaveClass('content');
        });

        it('just check sample module emphasize', function() {
            sample.emphasize();
            expect($('h3:first')).toHaveClass('title-emphasize');
            expect($('p:first')).toHaveClass('content-emphasize');
        });

        it('just check data load', function() {
            sample.getContent();
            expect(jasmine.Ajax.requests.mostRecent().url).toBe('/api/content');
            jasmine.Ajax.requests.mostRecent().response({
                "status": 200,
                "contentType": "application/json",
                "responseText": '{"title": "inception", "content": "youth is not a time of life"}'
            });
            expect($('h3:first')).toContainText('inception');
            expect($('p:first')).toContainText('youth is not a time of life');
        });

        afterEach(function () {
          jasmine.Ajax.uninstall();
        });
    });
});

衍伸思考

一个完整的Ajax请求如下图所示。

联系方式

Email: 491229492@QQ.COM