Question

我使用Chrome扩展程序的生成器创建了一个项目。下面是我的文件夹结构的表示。

my-wonderful-chrome-extension
   app
     scripts
        common.js
   test
     index.html
     spec
        test.js

我想测试common.js。我对Mocha的理解是我应该有一个index.html这样的文件：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mocha Spec Runner</title>
        <link rel="stylesheet" href="bower_components/mocha/mocha.css">
    </head>
    <body>
        <div id="mocha"></div>
        <script src="bower_components/mocha/mocha.js"></script>
        <script>    
            mocha.setup('bdd');
            mocha.reporter('html');
        </script>
        <script src="bower_components/chai/chai.js"></script>
        <script>
            var assert = chai.assert;
            var expect = chai.expect;
            var should = chai.should();
        </script>

        <!-- include source files here... -->
        <script src="../app/scripts/common.js"></script>

        <!-- include spec files here... -->
        <script src="spec/test.js"></script>

        <script>mocha.run()</script>
    </body>
</html>

测试文件（test.js）如下所示：

/* global describe, it */
describe('Find the root recipe node', function () {
    it('Should not find an elem in null dom', function () {
        console.log(dds_hmr.findRecipeRoot);
    });
});

common.js文件如下所示：

var dds_hmr = {};
dds_hmr.findRecipeRoot = function (elem) {
    if (elem && elem.hasAttribute("itemtype")
            && elem.getAttribute("itemtype") === "http://schema.org/Recipe") {
        return [elem];
    } else {
        var result = [];
        if (elem) {
            for (var i = 0; i < elem.childNodes.length; i++) {
                var child = dds_hmr.findRecipeRoot(elem.childNodes[i]);
                result.concat(child);
            }
        }
        return result;
    }
};

这是我得到的错误：

1) Find the root recipe node Should not find an elem in null dom:
    ReferenceError: Can't find variable: dds_hmr
        at http://localhost:9000/spec/test.js:4
        at http://localhost:9000/bower_components/mocha/mocha.js:4263
        at http://localhost:9000/bower_components/mocha/mocha.js:4635
        at http://localhost:9000/bower_components/mocha/mocha.js:4694
        at next (http://localhost:9000/bower_components/mocha/mocha.js:4561)
        at http://localhost:9000/bower_components/mocha/mocha.js:4570
        at next (http://localhost:9000/bower_components/mocha/mocha.js:4514)
        at http://localhost:9000/bower_components/mocha/mocha.js:4538
        at timeslice (http://localhost:9000/bower_components/mocha/mocha.js:5531)

我需要做些什么才能让测试引用common.js文件中的代码？

Answer 1

事实证明，解决方案在于Grunt配置（有意义）。在grunt服务器的connect密钥中，有一个test密钥。在属性options下，还有另一个属性base。将'app'添加到该列表中。这将包括测试执行时的app目录。从那里的诀窍是更改index.html中的脚本包含

<!-- include source files here... -->
<script src="../app/scripts/common.js"></script>

到

<!-- include source files here... -->
<script src="scripts/common.js"></script>

更新：添加了Grunt部分

// Grunt server and debug server setting
connect: {
  options: {
    port: 9000,
    livereload: 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname: 'localhost'
  },
  chrome: {
    options: {
      open: false,
      base: [
        '<%= config.app %>'
      ]
    }
  },
  test: {
    options: {
      open: false,
      base: [
        'test',
        'app',
        '<%= config.app %>'
      ]
    }
  }
}

摩卡测试，Yeoman，Chrome扩展

1 个答案: