如何測試需要DOM元素的npm模塊

Question

我目前不熟悉開發npm模塊並嘗試開發我的第一個模塊。 我希望能夠將其包含在瀏覽器中（帶有腳本標簽），以及通過npm install使其可用...，我也希望能夠對其進行測試，兩者都可以通過在瀏覽器，其中包含代碼，並通過Node運行測試（例如，使用npm run test）。

基本上，我的庫基於畫布的ID在畫布上繪制x，y圖形，因此我將其像這樣使用：

var g1 = new Plotter('canvas1');
g1.plot([[x1, y1], [x2, y2], [x3, y3]];

所以我的繪圖儀構造函數看起來像這樣

constructor(idElement) {
    this.canvas = root.document.getElementById(idElement);
    this.ctx = this.canvas.getContext('2d');
    this.origin = {
        x: this.canvas.width / 2,
        y: this.canvas.height / 2
    };
}

它在瀏覽器中運行良好，但是嘗試使用Mocha，Chai，AVA，Jasmine時，我不知道如何運行測試。 它總是導致無法找到undefined的getElementById屬性 。 這是我的構造函數測試：

it('Constructor test', function() {
        const window = new Window();
        const canvas = window.document.createElement('canvas');
        canvas.setAttribute('id', 'canvas1');
        const g1 = new Plotter('canvas1');
        g1.plot([0,0],[40,5]);
        expect(canvas.id).to.equal('graphique');
    });

您是否知道應該如何執行此操作，或者根本不知道，在npm模塊中使用getELementById是一個好習慣？ 我是否應該只接收畫布的寬度和高度作為構造函數的參數？

如果您需要更多信息，請與我們聯系，

感謝您的關注

Answer 1

您正在循環尋找燈具，可以（臨時）模擬/存根HTML進行測試的小代碼段。 您可以為此使用像jasmine-jquery這樣的庫（即使您不是使用usbg jquery的人）。

我為DOM操作（ bem.js ）構建了一個NPM模塊，但也使用此方法進行了測試。 您也許可以將其用作參考。

Answer 2

Node沒有DOM或window對象，因此您將無法在Node中測試畫布庫，

NW.js將Web-kit瀏覽器與所有node.js功能結合在一起，可以滿足您的需求。