Node.js + jsdom + canvas

295

03 ноября 2017, 12:31

Необходимо автоматизировать тестирование библиотеки на JS.
Среда для тестирования Node.js т.к. сборка проекта организована через gulp.
Сложность заключается в том, что нужно протестировать создание и работу блоков с canvas.

Задача, как казалась решается jsdom. Возможность работы с DOM, почти как в браузере, появилась. Одно "НО": элемент canvas поддерживается на уровне Element, без всех необходимых расширений присущих canvas.

Например, ломается тут (на последней строке)

(function () {
    let dom = new JSDOM('<!DOCTYPE html><html lang="ru"><head><meta charset="utf-8"></head><body><div id="container"/></body></html>');
    if (!global.window) {
        let window = dom.window;
        global.window = window;
        global.document = window.document;
        global.navigator = window.navigator;
    }
})();
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
var context.fillStyle = 'rgba(0,150,0,0.75)';

Ошибка такая:

TypeError: Cannot set property 'fillStyle' of null

Ок, берем canvas, который предоставляет необходимые возможности. И все бы супер, "НО" - этот пакет работает независимо от предыдущего...
Да, часть функционала с его помощью удастся протестировать, если подправить код проекта, но он нужен именно в связке с остальным DOM.

Нужна возможность после создания canvas в dom-дереве иметь возможность рисовать на нем, не вырывая из контекста.
Конечно результатом теста будет файл со сгеннерированным html и изображением с canvas, но в начале нужно что бы они вместе отработали...

Как подружить canvas с jsdom под Node.js ?

UPD:
Кстати, описание jsdom говорит о том, что он поддерживает canvas:

jsdom includes support for using the canvas or canvas-prebuilt package to extend any <canvas> elements with the canvas API.

Ну, типа, если вы подключили перед jsdom пакет работы с canvas (canvas или canvas-prebuilt), то будут вам полные штаны счастья (он подцепится и с ним можно будет работать как в браузере).

Возможно, что я накосячил при ручной установке canvas (VS2017 не ставит этот пакет самостоятельно).
Буду признателен хотя бы и за ман по установке canvas под Windows.