Question

我想通过预处理器注入一些CSS和JavaScript文件。

在我的预处理器中，我将html模板注入body元素。我通过console.log(document.body)打印出结果 - 您可以在底部看到结果。它看起来不错，但不会评估脚本。

如果我在测试中运行console.log(window.foobar)，那么它是未定义的。其实我不想注入简单的脚本，我想通过
加载一些文件 <script src="build/app.js"></script>

我在每次测试中都需要它，所以我不想为相同的代码注入重构每一个测试，这就是为什么我试图将它放入由karma生成的html中的原因。

<body><script>    window.foobar = 'miau!';</script>
  <!-- The scripts need to be at the end of body, so that some test running frameworks
       (Angular Scenario, for example) need the body to be loaded so that it can insert its magic
       into it. If it is before body, then it fails to find the body and crashes and burns in an epic
       manner. -->
  <script type="text/javascript">
    // sets window.__karma__ and overrides console and error handling
    // Use window.opener if this was opened by someone else - in a new window
    if (window.opener) {
      window.opener.karma.setupContext(window);
    } else {
      window.parent.karma.setupContext(window);
    }

    // All served files with the latest timestamps
    window.__karma__.files = {
  '/base/node_modules/mocha/mocha.js': '253e2fdce43a4b2eed46eb25139b784adbb5c47f',
  '/base/node_modules/karma-mocha/lib/adapter.js': '3664759c75e6f4e496fef20ad115ce8233a0f7b5',
  '/base/test/custom-test.js': 'abf5b0b3f4dbb62653c816b264a251c7fc264fb9',
  '/base/test/build/build.css': 'df7e943e50164a1fc4b66e0a0c46fc86efdef656',
  '/base/test/build/build.js': '9f0a39709e073846c73481453cdee8d37e528856',
  '/base/test/build/test.js': '0ccd4711b9c887458f81cf1dedc04c6ed59abe43'
};

  </script>
  <!-- Dynamically replaced with <script> tags -->
  <script type="text/javascript" src="/base/node_modules/mocha/mocha.js?253e2fdce43a4b2eed46eb25139b784adbb5c47f"></script>
<script type="text/javascript" src="/base/node_modules/karma-mocha/lib/adapter.js?3664759c75e6f4e496fef20ad115ce8233a0f7b5"></script>
<script type="text/javascript" src="/base/test/custom-test.js?abf5b0b3f4dbb62653c816b264a251c7fc264fb9"></script></body>

Answer 1

Karma像ajax一样引入了页面脚本/ html，所以一旦附加完成它就不会执行。

您需要为每个规范附加文件。我有一份帮助这项工作的人：

function appendCSS(path){
    var  link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href='base/' + path;
    document.body.appendChild(link)
}
function appendScript(path){
    var  link = document.createElement('script');
    link.type = 'javascript';
    link.src='base/' + path;
    document.body.appendChild(link)
}    
function loadAssets(page){
    document.body.innerHTML = __html__['_site/' + (page || 'index') + '.html'];
    appendCSS('_site/styles/demo.css');
    appendCSS('_site/styles/' + page + '.css');
    appendScript('_site/scripts/vendor.js');
    appendScript('_site/scripts/' + page + '.js');
}

module.exports = {
    loadAssets: loadAssets
};

在我的规范中，我只需调用帮助程序，传递要测试的html页面的名称。

require('../helper').loadAssets('tested-page-name');

正如您所看到的，我使用borwserify插件，但我希望这会有所帮助。

karma-runner：通过DOM加载脚本（和CSS）

1 个答案: