成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【前端自動化測試】Karma + Jasmine + RequireJS 的自動化測試實現(xiàn)

nevermind / 3385人閱讀

摘要:介紹使用,就可以測試指定的案例加入可以進行測試異步模塊的案例安裝全局配置命令行配置加載框架引入。

介紹

使用 karma + Jasmine,就可以測試指定的案例, 加入RequireJS, 可以進行測試異步模塊的案例

安裝
# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

# Install karma-requirejs
$ npm install requirejs --save-dev
$ npm install karma-requirejs --save-dev

全局配置karma 命令行

npm install -g karma-client
配置
module.exports = function (config) {
  config.set({
    // ...
    frameworks: ["jasmine", "requirejs"],
    files: [
      {pattern: "lib/**/*.js", included: false},
      {pattern: "src/**/*.js", included: false},
      {pattern: "test/**/*[sS]pec.js", included: false},
      "test-main.js"
    ]
    // ...
  })
}

加載karma-jasmine, karma-requirejs 框架, 引入 test-main.js. files

test-main.js 介紹
var allTestFiles = []

// 測試文件
var TEST_REGEXP = /(spec|test).js$/i

// Get a list of all the test files to include
// 解析files 和 frameworks 對應(yīng)需要加載的文件
Object.keys(window.__karma__.files).forEach(function (file) {

  if (TEST_REGEXP.test(file)) {
    // Normalize paths to RequireJS module names.
    // If you require sub-dependencies of test files to be loaded 
    // as-is (requiring file extension)
    // then do not normalize the paths
    // 將符合條件的測試文件轉(zhuǎn)化為 requirejs 能加載的模塊名
    var normalizedTestModule = file.replace(/^/base/|.js$/g, "")
    allTestFiles.push(normalizedTestModule)
  }
})

require.config({
  // Karma serves files under /base, which is the basePath from your config file
  // karma 將basePath 對應(yīng)的靜態(tài)路徑設(shè)置為 /base
  // requirejs 加載文件也應(yīng)當由 /base 開始
  baseUrl: "/base",

  // dynamically load all test files
  // 動態(tài)加載測試文件
  deps: allTestFiles,

  // we have to kickoff jasmine, as it is asynchronous
  // deps 加載完后 執(zhí)行 單元測試
  callback: window.__karma__.start
})
簡單demo

目錄結(jié)構(gòu)

- test
- src
- lib
- test-main.js
- index.html
- main.js

源文件 src/utils/qs.js

define(function () {

  var encodeURIComponent = window.encodeURIComponent;
  var decodeURIComponent = window.decodeURIComponent;

  function isArray (o) {
    return Object.prototype.toString.call(o) === "[object Array]";
  }
 
  function isObject (o) {
    return Object.prototype.toString.call(o) === "[object Object]";    
  }
  
  return {
    parse: function (url) {

      if (typeof url !== "string") {
        throw new TypeError("qs.parse() Error, url should transmit a string param");
      }

      var result = {};
      url = url.substr(url.indexOf("?") + 1);
      var querystring = url.replace(/#.*/, "");
      var patterns = querystring.split("&");

      patterns.forEach(function(pattern) {
        if (!pattern) {
          return;
        }
        var matched = pattern.match(/([^=]+)=(.*)/);
        if (!matched) {
          return;
        }
        var key = matched[1],
          value = matched[2],
          isArr = false;

        if (key.slice(-2) === "[]") {
          key = key.slice(0, -2);
          isArr = true;
        }

        key = decodeURIComponent(key);
        value = decodeURIComponent(value);

        if (isArr) {
          if (!Array.isArray(result[key])) {
            result[key] = [];    
          }
          result[key].push(value);
        } else {
          result[key] = value;
        }
      }, this);

      return result;
    },

    stringify: function (obj) {

      if (!isObject(obj)) {
        throw new TypeError("qs.stringify() Error, Unexpected obj is not Object");
      }

      return Object.keys(obj).map(function (name, index) {
        if (isArray(obj[name])) {
          return obj[name].map(function (item) {
            return encodeURIComponent(name) + "[]=" + encodeURIComponent(item); 
          }).join("&");
        }
        return encodeURIComponent(name) + "=" + encodeURIComponent(obj[name]);
      }).join("&");
    }
  }
});

測試文件 test/utils/qsSpec.js

define(["src/utils/qs"], function(qs) {

  beforeAll(function () {
    spyOn(qs, "parse").and.callThrough();
    spyOn(qs, "stringify").and.callThrough();
  });

  describe("qs.parse() suite", function() {

    it("should throw TypeError", function() {
      expect(qs.parse).toThrowError(TypeError);
    });

    it("should parse to object", function () {
      var url = "http://liylblog.com/?a=1&b=2&c=3";
      expect(qs.parse(url)).toEqual({
        a: "1",
        b: "2",
        c: "3"
      });
    });

    it("should parse to object array", function () {
      var url = "http://liylblog.com/?a[]=1&a[]=2&a[]=3";
      expect(qs.parse(url)).toEqual({
        a: ["1", "2", "3"]
      });
    });

    it("should be decodeURIComponent", function () {
      var aVal = window.encodeURIComponent("=1");
      var bVal = window.encodeURIComponent("?2");
      var url = "http://liylblog.com/?a=" + aVal + "&b=" + bVal + "&c=3#";
      expect(qs.parse(url)).toEqual({
        a: "=1",
        b: "?2",
        c: "3"
      });
    });

  });

  describe("qs.stringify() suite", function () {
    var obj;

    beforeEach(function () {
      obj = {
        a: 1,
        b: ["你好", "世界"],
        c: ["2", null, ""]
      };
    });
    
    afterEach(function () {
      obj = null;
    });

    it("should throw TypeError", function() {
      expect(qs.stringify).toThrowError(TypeError);
    });

    it("should stringify obj", function () {
      var querystring = qs.stringify(obj); 
      var containB = (function () {
        var str = ""
        for (var i = 0, len = obj["b"].length; i < len; i++) {
          str += i > 0 ? "&" : ""
          str += "b[]=" + encodeURIComponent(obj["b"][i])
        }
        return str;
      })();
      var containC = "c[]=null";

      expect(querystring).toContain("a=1")
      expect(querystring).toContain(containB);
      expect(querystring).toContain(containC);
    });

  });
});
執(zhí)行

karma start ./karma.conf.js

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/88609.html

相關(guān)文章

  • AMD module 單元測試

    摘要:前言配合進行單元測試,存在官方版本,版本雖然陳舊,但是功能實現(xiàn)沒有問題。單元測試中配置文件與實際存在差異,所以單元測試保證模塊的可靠性,具體生產(chǎn)環(huán)境下注意模塊可正常加載就好。。為單元測試而安裝的模塊。 如有排版效果混亂,請移步https://www.zybuluo.com/bornkiller/note/24759。 前言 karma配合requirejs進行單元測試,存在官方版...

    gggggggbong 評論0 收藏0
  • karma 入門

    摘要:本文介紹了的入門知識點。注意,此處并沒有直接引入的。可以引入的插件來查看測試覆蓋率,該插件會在目標代碼中插入很多額外的代碼,用于判斷測試代碼執(zhí)行流程有沒有走到這些地方。在的時候,最好關(guān)掉功能,不然這些額外的代碼非常影響調(diào)試。 本文介紹了 karma 的入門知識點。 什么是 karma karma 是一個提升測試效率的工具,幫助開發(fā)者更好更快速地在多種環(huán)境下執(zhí)行測試代碼,拿到測試結(jié)果。在...

    妤鋒シ 評論0 收藏0
  • Javascript CI篇(2)- Karma 基礎(chǔ)學(xué)習(xí)

    摘要:核心功能就是啟動一個服務(wù)并監(jiān)聽項目文件改變,文件改變后再刷新服務(wù)器。 Karma 簡介 Karma是Testacular的新名字,在2012年google開源了Testacular,2013年Testacular改名為Karma。Karma是一個讓人感到非常神秘的名字,表示佛教中的緣分,因果報應(yīng),比Cassandra這種名字更讓人猜不透! Karma是一個基于Node.js的JavaS...

    Ku_Andrew 評論0 收藏0
  • angularjs + requirejs 完整手腳架

    摘要:還記得一年半前轉(zhuǎn)向后端的那種無助的感覺,獨自一人摸黑走路,學(xué)習(xí)各種前端知識,走了不少彎路,現(xiàn)在終于算是入門了前端我相信不少人也有我當時同樣的無助,所以我在空閑時間整理了下所用到的知識,便編寫了一個手腳架,希望能給其他正學(xué)習(xí)前端的同學(xué)一些參考 還記得一年半前轉(zhuǎn)向后端的那種無助的感覺,獨自一人摸黑走路,學(xué)習(xí)各種前端知識,走了不少彎路,現(xiàn)在終于算是入門了前端~我相信不少人也有我當時同樣的無助...

    anyway 評論0 收藏0
  • 前端單元測試Karma環(huán)境搭建

    摘要:主要完成一下工作啟動一個服務(wù)器,生成包含源代碼和測試腳本的頁面運行瀏覽器加載頁面,并顯示測試的結(jié)果如果開啟檢測,則當文件有修改時,執(zhí)行繼續(xù)執(zhí)行以上過程。如果我們引入了一些其它的庫,比如之類的,將源代碼和庫代碼打包在一起后,覆蓋率會更難看。。 前言 在前端開發(fā)中,測試常常是被忽略的一環(huán)。因此最近在研究前端自動化測試框架Karma,把個人的學(xué)習(xí)過程分享出來,希望對大家有幫助。 什么是Kar...

    mrli2016 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<