javascript 如何使用npm测试(CLI)来使用HTML DOM

我试图找到一种方法，在HTML DOM上使用mocha运行npm test。在本例中，我使用globaldocument从DOM中检索table。但是，当我运行npm test时，我得到类似以下错误的信息：

ReferenceError: document is not defined
at /home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:92:61
at extFunc (/home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:49:11)
at Array.every (native)
at Utilities.tryMatchUrlExtension (/home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:60:25)
at Utilities.<anonymous> (/home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:90:16)
at xhr.onload (/home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:24:11)
at dispatchEvent (/home/luiz/Projects/linguist-unknown/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:591:25)
at setState (/home/luiz/Projects/linguist-unknown/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:614:14)
at IncomingMessage.<anonymous> (/home/luiz/Projects/linguist-unknown/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:447:13)
at emitNone (events.js:91:20)
at IncomingMessage.emit (events.js:185:7)
at endReadableNT (_stream_readable.js:974:12)
at _combinedTickCallback (internal/process/next_tick.js:80:11)
at process._tickCallback (internal/process/next_tick.js:104:9)
  1) should refresh table

16 passing (3s)
1 failing

1) Loader Utilities should refresh table:
 Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.

我知道document是undefined，我需要自己创建一个，但是，我认为我的主要问题是：
1.我第一次使用npm和mocha，在他们的文档中找不到任何与之相关的东西。
1.大多数情况下，人们遇到的所有问题都与Web浏览器有关*//我使用的是CLI，将在Github上使用Travis进行测试 *
1.在下面的代码中，您将看到我解决了XMLHttpRequest的一个类似问题，但是，我无法找出将document变量正确包含到测试中的最佳方法。
因此，请原谅我问，这个答案应该已经在stackoverflow上了吗
我的代码如下：

测试实用程序. js *

...
global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
global.jsyaml = require('../src/scripts-min/js-yaml.min.js');
global.LinguistHighlighter = require('../src/scripts/ling-highlighter.js').LinguistHighlighter;
var LinguistLoader = require('../src/scripts/ling-loader.js').LinguistLoader;
describe('Loader', function () {
  var utilities = new LinguistLoader.Utilities();
  it('should refresh table', function(done) {
    var location = {
      hostname: "github.com",
      href: "https://github.com/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain",
      pathname: "/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain"
    };

    // check if it is not breaking
    utilities.refresh(location, function(langObj, table){
      done();
    });
  });
});
...

实用程序. js *：

...
Utilities.prototype.refresh = function(location, callback) {
  var new_url = location.href;

  if (new_url === current_url || !this.isGithub(location)) {
    return;
  }

  current_url = new_url;
  if (linguistObj === null) {
    linguistObj = {
      path: this.getPossibleFilepath(location)
    };
  }

  setTimeout(function() {
    var downloadHelper = new DownloadHelper();
    downloadHelper.load(linguistObj.path, function(objs){
      this.tryMatchUrlExtension(current_url, objs, function(langObj){
        var table = document.getElementsByClassName("blob-wrapper")[0]
                          .getElementsByTagName("table")[0];
        new LinguistHighlighter.Highlighter(langObj).draw(table);

        // callback for tests purposes only
        if (callback) {
          callback(langObj, table);
        }
      });
    }.bind(this));
  }.bind(this), 100);
};
...

任何帮助我都感激不尽。谢谢!

我发现了一个非常好的工具：JSDOM。它的目标是模拟Web浏览器的一个子集，比如DOM。有了它，我甚至可以在不接触utilities.js文件的情况下实现test-utilities.js文件，这正是我想要的。
下面是文件test-utilities.js的分辨率

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
global.jsyaml = require('../src/scripts-min/js-yaml.min.js');
global.LinguistHighlighter = require('../src/scripts/ling-highlighter.js').LinguistHighlighter;
var LinguistLoader = require('../src/scripts/ling-loader.js').LinguistLoader;

describe('Loader', function () {
  var utilities = new LinguistLoader.Utilities();
  
  it('should refresh the code table', function(done) {
    // Download the HTML string and parse it to JSDOM
    JSDOM.fromURL("https://github.com/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain").then(dom => {

    // JSDOM does not support 'innerText' and that is why I am creating this property for all objects. 
    var o = Object.prototype;
    Object.defineProperty(o, "innerText", {
      get: function jaca() {
        if (this.innerHTML === undefined)
          return "";
        return this.innerHTML;
      }
    });

    var location = {
      hostname: "github.com",
      href: "https://github.com/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain",
      pathname: "/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain"
    };

    // check if it is not breaking
    utilities.refresh(location, function(langObj, table) {
      done();
    });
  });
});

那现在工作正常了！我希望它对任何人都有帮助！：D

javascript 如何使用npm测试(CLI)来使用HTML DOM

1条答案

相关问题

热门标签

最新问答