Я пытаюсь создать пакет, который при запуске в браузере создает элемент SVG в DOM. Моя структура каталогов выглядит так:
tool-block-diagram/
- build-svg.js
- browser-svg-generator.js
- svg-generator.js
test/
- test.js
- browser-test.js
- browser-test-page.html
build-svg.js выглядит так:
// build-svg.js
const window = require('svgdom');
const SVG = require('svg.js')(window);
const document = window.document
module.exports = function buildSVG(color, id = 'svg-rect') {
const canvas = SVG(document.documentElement);
let rect = canvas.rect(90, 90).attr({
id: id,
x: "0",
y: "0",
stroke: "black",
fill: color
});
let str = canvas.svg();
canvas.clear();
return str;
}
Я использую пакет svgdom , чтобы создать элемент SVG и затем преобразовать его в строку. Это используется в файле browser-svg-generator.js:
// browser-svg-generator.js
const buildSVG = require('./buildSVG.js');
function addSVG(color, id) {
let svg = buildSVG(color, id)
document.body.insertAdjacentHTML('beforeend', svg);
}
module.exports = addSVG;
Чтобы проверить, что это работает как положено, я использую мокко. Мой файл browser-test.js:
//browser-test.js
const chai = require('chai');
const svgGenerator = require('../browser-svg-generator');
const { assert } = chai;
function checkBody(id) {
const svgElem = document.getElementById(id);
const rect = svgElem.childNodes[0];
return rect.getAttribute('fill');
}
describe('BrowserSVGGenerator', () => {
it('should create orange rectangles', () => {
svgGenerator('orange', 'orangeTest');
const actual = checkBody('orangeTest');
assert.equal(actual, 'orange', `actual color: ${actual}, expected color: orange`);
});
});
Когда я связываю это с помощью browserify и затем запускаю связанный файл на моей тестовой html-странице, я получаю эту ошибку:
Error: Error: Cannot find module './types/bmp'
at o (/test/browser-test-bundle.js:1:159)
at file:test/browser-test-bundle.js:1:316
at test/browser-test-bundle.js:56313:19
at Array.forEach (<anonymous>)
at Object.259../types (test/browser-test-bundle.js:56312:7)
at o (test/browser-test-bundle.js:1:265)
at test/browser-test-bundle.js:1:316
at Object.<anonymous> (test/browser-test-bundle.js:56333:16)
У меня такое чувство, что это связано с тем, что мне нужен мой файл build-svg.js. Ранее я генерировал строку svg в browser-svg-generator, и эта ошибка не появлялась. Это также может быть проблемой с SVGDOM, с которой я не очень знаком.
Любая помощь приветствуется.