Я создаю небольшой класс JS, который содержит элемент <canvas>
и использует его для динамического рисования некоторых изображений. В частности, эти изображения имеют как фон (заливка), так и текст.
После этого я хотел написать несколько модульных тестов, чтобы гарантировать, что при некотором вводе сгенерированный вывод (в виде строки base64) всегда одинаков. Это означает, что если я хочу создать изображение с розовым фоном и белым текстом, сгенерированный вывод всегда будет розовым изображением с белым текстом, и размеры будут одинаковыми. Другими словами, строки, закодированные в base64, равны.
Я могу запускать эти тесты локально, и они проходят (MacOS), но они не выполняются в моем задании интеграции Jenkins (работает на Linux). Это потому, что шрифт изображения немного отличается. Многое прочитав об этом, я подозреваю, что это потому, что шрифты реализованы по-разному в разных ОС.
См. Изображения:
Ожидается, получено локально в MacOS :
Фактически, получено в Linux:
Вы видите, что фактическое изображение, которое я получаю, немного выше ожидаемого (нижний отступ под текстом меньше). Текущий шрифт, который я использую: "44px Arial"
См. Код:
Реализация
generateImage(backgroundColor, fontColor = "#000000") {
if (backgroundColor) {
this.drawBackgroundWithColor(backgroundColor);
}
this.drawTexOverBackground("Text to draw", X_POSITION, Y_POSITION, fontColor, "44px Arial");
return this.getCurrentCanvasAsBase64String();
}
drawBackgroundWithColor(backgroundColor){
if (backgroundColor) {
const context = this.getCanvasContext();
context.save();
context.fillStyle = backgroundColor;
context.fillRect(0, 0, this.width, this.height);
context.restore();
}
}
drawTexOverBackground(text, x, y, hexColor, font = this.font) {
const context = this.getCanvasContext();
context.save();
context.font = font;
context.textBaseline = "top";
context.fillStyle = hexColor;
context.fillText(text, x, y);
context.restore();
}
Модульный тест:
it('should create a basic pink background with black text', () => {
const backgroundGenerator = new ImageGenerator();
const createdBackground = backgroundGenerator.generateImage("#FFC0CB");
assert.equal(createdBackground, expectedTransparentImageWithText);
});
Будучи expectedTransparentImageWithText
глобальной переменной модуля, которая содержит ожидаемое значение строки base64, полученное в MacOS.
Я должен уточнить, что для В модульном тестировании я использую модуль canvas npm , который работает на узле и, как говорят в документации, он "реализует этот API как можно ближе" (ссылаясь на API браузера Canvas). Я подозреваю, что это причина, почему шрифты отличаются. Я также получил здесь и обнаружил, что шрифты ДЕЛАЮТСЯ в разных операционных системах , и между ними нет 100% -ной совместимости.
Есть ли какие-либо предложения, которые вы можете дать мне, чтобы лучше протестировать этот модуль и принять на счет шрифтов хорошо? Сейчас я тестирую только изображения без текста, поэтому я могу избежать описанного сценария, но, конечно, это не лучшая вещь.