karma下测试异步载入的js文件


默认情况下karma是把所有的需要测试文件载入到测试页面,如果我们要对一个jsonp方法或者一个模块载入方法进行测试,它会给出一个找不到文件的提示,原因是karma的本地服务器会把需要测试的文件放在/base/*下,这个搞起来也很方便, 两步就搞定

  • 设置karma的conf文件里的files
  • 对需要测试的方法进行mock,如果是本地请求路径,加上/base/

需要测试的方法

function loadScript (url, success, charset) {
  var node = doc.createElement('script')

  if (charset) {
    node.charset = charset
  }

  var re = /^(?:loaded|complete|undefined)$/
  node.onreadystatechange = node.onload = node.onerror = function () {
    if (re.test(node.readyState)) {
      node.onload = node.onerror = node.onreadystatechange = null

      success.call(node)
      node = null
    }
  }

  node.async = true
  node.src = url

  var head = documentElement.getElementsByTagName('head')[0] || doc.documentElement
  head.insertBefore(node, head.firstChild)
}

karma.conf.js

测试的代码写在tests/mainSpec.js里,我们要载入tests/loader/1.js,修改karma的配置

... other config code ...
  files: [
    //保证loader下的文件可以访问,但是又不会直接引用到页面上
    { pattern: 'tests/loader/*.js', included: false },
    'tests/lib/jquery-1.7.2.min.js',
    'tests/lib/expect.js',
    'tests/configData.js',
    'src/loader.js',
    'tests/**/*Spec.js'
  ],
... other config code ...

mainSpec.js里的改造

需要在karma的环境中,改造一下loadScript方法,其它环境中可以忽略

if (window.__karma__) { // 只处理在karma的环境中
  var __loadScript = loadScript
  loadScript = function () {
    var args = Array.prototype.slice.call(arguments)
    // 只处理本地路径
    if (args[0].indexOf('http://') == -1) {
      args[0] = '/base/tests/' + args[0]
    }

    __loadScript.apply(null, args)
  }
}

最后写一句最近非常大的一个感悟:没有测试代码的代码都是狗屎代码!


推荐文章