Mocha 测试，Yeoman，Chrome 扩展

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' 添加到该列表。这将包括测试执行时的应用程序目录。从那里开始，诀窍是将 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 %>'
      ]
    }
  }
}

Mocha 测试，Yeoman，Chrome 扩展

Mocha Test, Yeoman, Chrome Extension

mocha.js

google-chrome-extension