npm test（CLI）を使用してHTML DOMを使用する方法

Question

を実行する方法を見つけようとしていますmochaをHTML DOM以上に実行しています。この場合、グローバルdocumentを使用してDOMのうちtableを検索しています。

：私は documentが undefinedであると私は、何とか、1を自分で作成する必要があること、しかし、私は私の主な問題があると考えていることを理解し

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. 

：私はnpm testを実行したときしかし、私はエラーのような何かを得ます

1. 初めてnpmとmochaを使用しており、そのドキュメントに関連するものが見つかりませんでした。私は、CLIを使用しています//あなたは私がと同様の問題を解決していることがわかります下に主に、webbrowsers に関連している人々はについてきたすべての問題は、それは私のコードではGitHubの
2. にトラヴィスでテストされます
3. XMLHttpRequest。しかし、私は、document変数を私のテストに適切に含めるための最良の方法を理解できません。

   テストutilities.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(); 
       }); 
       }); 
   }); 
   ... 
   

   ：したがって

は、次のように私はそれが、この答えはstackoverflowの

私のコードの上に既に存在するものを求めている容赦しますutilities.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); 
}; 
... 

何か助けていただければ幸いです。ありがとうございました！

Answer 1

私は非常に良いツールを見つけました：JSDOM。その目的は、DOMのようなWebブラウザのサブセットをエミュレートすることです。それで、私は自分の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