DOM 요소를 필요로하는 npm 모듈을 테스트하는 방법

현재 npm 모듈을 개발하고 첫 번째 모듈을 개발하려고하는 것이 처음입니다. 브라우저 태그 (스크립트 태그 포함)에 포함시킬 수 있고 npm install을 통해 사용 가능하게하고 싶습니다. 또한 HTML 페이지를 열어서 테스트 할 수 있기를 바랍니다. 브라우저를 사용하여 코드를 포함하고 Node를 통해 테스트를 실행합니다 (예 : npm run test 포함).DOM 요소를 필요로하는 npm 모듈을 테스트하는 방법

이

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 
    }; 
}

다음과 같습니다

는

기본적으로, 나의 서재 플롯 X는 캔버스의 ID를 기반으로 캔버스에 Y 그래프는 그래서 그것을 좋아 사용합니다

브라우저에서는 잘 작동하지만 모카, 차이, AVA, 재스민을 사용하면서 테스트를 실행하는 방법을 알 수 없었습니다. 의 결과는 항상 정의되지 않은의 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를 사용하는 것이 좋습니다가 얼마나있는 방법을 알고 계십니까? 대신 캔버스의 너비와 높이를 생성자의 인수로 받아야합니까?

좀 더 자세한 정보가 필요하면 알려주세요

은, 비품에 대한 반복

출처

2017-11-11 Evgeni Koltsov