Question

我目前刚开始开发npm模块并尝试开发我的第一个模块。我希望能够将它包含在浏览器中（带有脚本标记），并通过npm install使其可用...我也希望能够通过打开一个html页面来测试它。包含代码的浏览器以及通过Node运行测试（例如，使用npm run test）。

基本上，我的库根据画布的id在画布上绘制x，y图形，所以我会像：

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

所以我的Plotter构造函数看起来像这样

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，我无法弄清楚如何运行测试。它总是会导致找不到未定义的属性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进行测试的litlle代码片段。你可以使用像jasmine-jquery这样的库（即使你不是usibg jquery）。

我为DOM操作构建了一个NPM模块（bem.js），这也是使用这种方法测试的。您可以将其用作参考。

Answer 2

Node没有DOM或window对象，因此您将无法在Node中测试画布库，

NW.js将网络工具包浏览器与所有node.js功能相结合，可能符合您的需求。

如何测试需要DOM元素的npm模块

2 个答案: