qileilove

          blog已經(jīng)轉(zhuǎn)移至github,大家請(qǐng)?jiān)L問(wèn) http://qaseven.github.io/

          karma作為jQuery單元測(cè)試Runner

          karma作為angular測(cè)試runner出現(xiàn),如果你使用過(guò)karma一定感受到這很不錯(cuò)的javascript測(cè)試runner。簡(jiǎn)單干凈的配置文件karma.config.js,以及karma init一些快捷的配置command。以及整套測(cè)試套件,如html2js,coverage。對(duì)于angular單元測(cè)試karma就是一個(gè)全生態(tài)的測(cè)試套件,能夠簡(jiǎn)潔快速的搭建整個(gè)測(cè)試流程。
            本文將嘗試運(yùn)用karma作為jQuery單元測(cè)試runner。對(duì)于jQuery這種DOM操作的框架,有時(shí)難于分離view邏輯,以及ajax這種外部資源的mock,所以比較難于實(shí)施對(duì)jQuery程序的TDD開(kāi)發(fā)。
            jasmime測(cè)試套件
            對(duì)于jasmine測(cè)試框架為了解決這些問(wèn)題有兩個(gè)插件jasmine-jquery和jasmine-ajax。
            jasmine-jquery
            jasmine-jQuery主要解決加載測(cè)試所需的DOM元素,為單元測(cè)試構(gòu)建前置環(huán)境。jasmine-jQuery加載DOM方法:
            jasmine.getFixtures().fixturesPath = 'base path';
            loadFixtures('myfixture.html');
            jasmine.getFixtures().load(...);
            這里的loadFixtures需要真實(shí)ajax獲取html fixtures所以我們需要提前host html fixtures。jasmine-jQuery還框架了一些有用的matchers,如toBeChecked, toBeDisabled, toBeFocused,toBeInDOM……
            jasmine-ajax
            jasmine-ajax則是對(duì)于一般ajax測(cè)試的mock框架,其從底層xmlhttprequest實(shí)施mock。所以讓我們能很容易實(shí)施對(duì)于jQuery的$.ajax,$.get…mock。如
          beforeEach(function() {
          jasmine.Ajax.requests.when = function (url) {
          return this.filter("/jquery/ajax")[0];
          };
          jasmine.Ajax.install();
          });
          it("jquery ajax success with getResponse", function() {
          var result;
          $.get("/jquery/ajax").success(function(data) {
          result = data;
          });
          jasmine.Ajax.requests.when("/jquery/ajax").response({
          "status": 200,
          "contentType": 'text/plain',
          "responseText": 'data from mock ajax'
          });
          expect(result).toEqual('data from mock ajax');
          });
          afterEach(function() {
          jasmine.Ajax.uninstall();
          });
            對(duì)于jasmine-ajax是實(shí)施mock之前一定需要jasmine.Ajax.install(),以及測(cè)試完成后需要jasmine.Ajax.uninstall();jasmine-ajax在install后會(huì)把所有的ajax mock掉,所以如果有需要真實(shí)ajax的需要在install之前完成,如jasmine-jQuery加載view loadFixtures。
           運(yùn)用karma runner
            我們已經(jīng)了解了jasmine測(cè)試的兩個(gè)框架jasmine-jQuery和jasmine-ajax,所以運(yùn)用karma作為runner,我們需要解決的問(wèn)題就是把他們和karma集成在一起。
            所以分為以下幾步: 1:karma中引入jasmine-jQuery和jasmine-ajax(可以利用bowerinstall) 2:host 測(cè)試的html fixtures。 3:加載html fixtures 與install ajax之前。
            對(duì)于host 文件karma提供了pattern模式,所以karma配置為:
          files: [
          {
          pattern: 'view/**/*.html',
          watched: true,
          included: false,
          served: true
          },
          'bower_components/jquery/dist/jquery.js',
          'bower_components/jasmine-jquery/lib/jasmine-jquery.js',
          'bower_components/jasmine-ajax/lib/mock-ajax.js',
          'src/*.js',
          'test/*.js'
          ],
            這里需要注意karma自帶的jasmine是低版本的,所以我們需要npm install karma-jasmine@2.0獲取最新的karma-jasmine插件。
            我們就可以完成了karma的配置,我們可以簡(jiǎn)單測(cè)試我們的配置:demo on github.
            測(cè)試html fixtures加載:
          describe('console html content', function() {
          beforeEach(function() {
          jasmine.getFixtures().fixturesPath = 'base/view/';
          loadFixtures("index.html");
          });
          it('index html', function() {
          expect($("h2")).toBeInDOM();
          expect($("h2")).toContainText("this is index page");
          });
          })
              測(cè)試mock ajax:
          describe('console html content', function() {
          beforeEach(function() {
          jasmine.Ajax.requests.when = function(url) {
          return this.filter("/jquery/ajax")[0];
          };
          jasmine.Ajax.install();
          });
          it('index html', function() {
          expect($("h2")).toBeInDOM();
          expect($("h2")).toContainText("this is index page");
          });
          it("ajax mock", function() {
          var doneFn = jasmine.createSpy("success");
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function(args) {
          if (this.readyState == this.DONE) {
          doneFn(this.responseText);
          }
          };
          xhr.open("GET", "/some/cool/url");
          xhr.send();
          expect(jasmine.Ajax.requests.mostRecent().url).toBe('/some/cool/url');
          expect(doneFn).not.toHaveBeenCalled();
          jasmine.Ajax.requests.mostRecent().response({
          "status": 200,
          "contentType": 'text/plain',
          "responseText": 'awesome response'
          });
          expect(doneFn).toHaveBeenCalledWith('awesome response');
          });
          it("jquery ajax success with getResponse", function() {
          var result;
          getResponse().then(function(data){
          result = data;
          });
          jasmine.Ajax.requests.when("/jquery/ajax").response({
          "status": 200,
          "contentType": 'text/plain',
          "responseText": 'data from mock ajax'
          });
          expect(result).toEqual('data from mock ajax');
          });
          it("jquery ajax error", function() {
          var status;
          $.get("/jquery/ajax").error(function(response) {
          status = response.status;
          });
          jasmine.Ajax.requests.when("/jquery/ajax").response({
          "status": 400
          });
          expect(status).toEqual(400);
          });
          afterEach(function() {
          jasmine.Ajax.uninstall();
          });
          })

          posted on 2014-11-06 09:58 順其自然EVO 閱讀(325) 評(píng)論(0)  編輯  收藏 所屬分類(lèi): 測(cè)試學(xué)習(xí)專(zhuān)欄

          <2014年11月>
          2627282930311
          2345678
          9101112131415
          16171819202122
          23242526272829
          30123456

          導(dǎo)航

          統(tǒng)計(jì)

          常用鏈接

          留言簿(55)

          隨筆分類(lèi)

          隨筆檔案

          文章分類(lèi)

          文章檔案

          搜索

          最新評(píng)論

          閱讀排行榜

          評(píng)論排行榜

          主站蜘蛛池模板: 大邑县| 鄂尔多斯市| 泸州市| 循化| 桃园市| 毕节市| 庆元县| 伊吾县| 宁武县| 湘乡市| 荔波县| 曲松县| 那曲县| 荥经县| 郯城县| 湄潭县| 保康县| 莱阳市| 静海县| 海丰县| 西藏| 墨竹工卡县| 盖州市| 绿春县| 嘉祥县| 海丰县| 司法| 遂溪县| 盖州市| 汝阳县| 宁河县| 建平县| 防城港市| 阿荣旗| 商城县| 大埔区| 博客| 同德县| 河西区| 哈巴河县| 舟山市|