From c23f48573fc6a94691858365e7923e5f27207779 Mon Sep 17 00:00:00 2001 From: "Ron B. Yeh" Date: Mon, 12 Jul 2021 02:29:44 -0700 Subject: [PATCH 1/7] Rename vexflow_test_helpers.js => vexflow_test_helpers.ts --- tests/{vexflow_test_helpers.js => vexflow_test_helpers.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename tests/{vexflow_test_helpers.js => vexflow_test_helpers.ts} (100%) diff --git a/tests/vexflow_test_helpers.js b/tests/vexflow_test_helpers.ts similarity index 100% rename from tests/vexflow_test_helpers.js rename to tests/vexflow_test_helpers.ts From a0248a3439f22e3e05c8d637b499b881c4923b70 Mon Sep 17 00:00:00 2001 From: "Ron B. Yeh" Date: Mon, 12 Jul 2021 16:38:36 -0700 Subject: [PATCH 2/7] Migrate VexFlowTests. Clean up EasyScore tests. --- src/note.ts | 4 +- tests/declarations.ts | 1 + tests/easyscore_tests.ts | 31 +- tests/vexflow_test_helpers.ts | 558 +++++++++++++++++++--------------- 4 files changed, 337 insertions(+), 257 deletions(-) diff --git a/src/note.ts b/src/note.ts index a6b85faf07..c5ae02d3ae 100644 --- a/src/note.ts +++ b/src/note.ts @@ -106,9 +106,7 @@ export abstract class Note extends Tickable { return 'note'; } - /** Debug helper. Displays various note metrics for the given - * note. - */ + /** Debug helper. Displays various note metrics for the given note. */ static plotMetrics(ctx: RenderContext, note: Note, yPos: number): void { const metrics = note.getMetrics(); const xStart = note.getAbsoluteX() - metrics.modLeftPx - metrics.leftDisplacedHeadPx; diff --git a/tests/declarations.ts b/tests/declarations.ts index 473108c7e5..b4a8c4fd43 100644 --- a/tests/declarations.ts +++ b/tests/declarations.ts @@ -21,6 +21,7 @@ export const notStrictEqual = global.notStrictEqual; // TODO: npm install @types/qunit /* eslint-disable @typescript-eslint/no-explicit-any */ export interface Assert { + test: any; expect(amount: number): void; ok(state: any, message?: string): void; notOk(state: any, message?: string): void; diff --git a/tests/easyscore_tests.ts b/tests/easyscore_tests.ts index 18829ac897..398e5d2e1d 100644 --- a/tests/easyscore_tests.ts +++ b/tests/easyscore_tests.ts @@ -1,22 +1,21 @@ -/** - * VexFlow - EasyScore Tests - * Copyright Mohit Muthanna 2010 - */ +// [VexFlow](https://vexflow.com/) - Copyright (c) Mohit Muthanna 2010. +// MIT License +// +// EasyScore Tests + import { EasyScore } from '../src/easyscore'; import { StaveNote } from '../src/stavenote'; import { System } from '../src/system'; import { FretHandFinger } from '../src/frethandfinger'; import { QUnit, expect, Assert, TestOptions } from './declarations'; import { Articulation } from '../src/articulation'; +import { VexFlowTests } from './vexflow_test_helpers'; // eslint-disable-next-line -declare const VF: any; // TODO: Remove after migrating vexflow_test_helpers.js. -// eslint-disable-next-line -declare let Vex: any; // TODO: Remove after migrating vex.js. +declare const VF: any; // TODO: Remove soon! const EasyScoreTests = { Start: function (): void { - const VFT = Vex.Flow.Test; QUnit.module('EasyScore'); QUnit.test('Basic', EasyScoreTests.basic); QUnit.test('Accidentals', EasyScoreTests.accidentals); @@ -24,13 +23,13 @@ const EasyScoreTests = { QUnit.test('Chords', EasyScoreTests.chords); QUnit.test('Dots', EasyScoreTests.dots); QUnit.test('Options', EasyScoreTests.options); - VFT.runTests('Draw Basic', EasyScoreTests.drawBasicTest); - VFT.runTests('Draw Accidentals', EasyScoreTests.drawAccidentalsTest); - VFT.runTests('Draw Beams', EasyScoreTests.drawBeamsTest); - VFT.runTests('Draw Tuplets', EasyScoreTests.drawTupletsTest); - VFT.runTests('Draw Dots', EasyScoreTests.drawDotsTest); - VFT.runTests('Draw Options', EasyScoreTests.drawOptionsTest); - VFT.runTests('Draw Fingerings', EasyScoreTests.drawFingeringsTest); + VexFlowTests.runTests('Draw Basic', EasyScoreTests.drawBasicTest); + VexFlowTests.runTests('Draw Accidentals', EasyScoreTests.drawAccidentalsTest); + VexFlowTests.runTests('Draw Beams', EasyScoreTests.drawBeamsTest); + VexFlowTests.runTests('Draw Tuplets', EasyScoreTests.drawTupletsTest); + VexFlowTests.runTests('Draw Dots', EasyScoreTests.drawDotsTest); + VexFlowTests.runTests('Draw Options', EasyScoreTests.drawOptionsTest); + VexFlowTests.runTests('Draw Fingerings', EasyScoreTests.drawFingeringsTest); }, basic: function (assert: Assert): void { @@ -411,6 +410,4 @@ const EasyScoreTests = { }, }; -// Vex.Flow.Test.EasyScore = EasyScoreTests; - export { EasyScoreTests }; diff --git a/tests/vexflow_test_helpers.ts b/tests/vexflow_test_helpers.ts index fecef253da..0bb10775b1 100644 --- a/tests/vexflow_test_helpers.ts +++ b/tests/vexflow_test_helpers.ts @@ -1,16 +1,27 @@ -/** - * VexFlow Test Support Library - * Copyright Mohit Muthanna 2010 - */ +// [VexFlow](https://vexflow.com/) - Copyright (c) Mohit Muthanna 2010. +// MIT License +// +// VexFlow Test Support Library + +import { RenderContext } from '../src/types/common'; +import { Assert } from './declarations'; -const VF = Vex.Flow; +/* eslint-disable */ +declare var global: any; +declare var $: any; +declare var QUnit: any; +const VF: any = Vex.Flow; +/* eslint-enable */ -// When generating PNG images for the visual regression tests, -// we mock out the QUnit methods (since we don't care about assertions). +/** + * When generating PNG images for the visual regression tests, + * we mock out the QUnit methods (since we don't care about assertions). + */ function setupQUnitMockObject() { - const QUnit = {}; + // eslint-disable-next-line + const QUMock: any = {}; - QUnit.assertions = { + QUMock.assertions = { ok: () => true, equal: () => true, deepEqual: () => true, @@ -23,255 +34,328 @@ function setupQUnitMockObject() { notStrictEqual: () => true, }; - QUnit.module = (name) => { - QUnit.current_module = name; + QUMock.module = (name: string): void => { + QUMock.current_module = name; }; - QUnit.test = (name, func) => { - QUnit.current_test = name; - VF.shims.process.stdout.write(' \u001B[0G' + QUnit.current_module + ' :: ' + name + '\u001B[0K'); - func(QUnit.assertions); + // eslint-disable-next-line + QUMock.test = (name: number, func: Function): void => { + QUMock.current_test = name; + VF.shims.process.stdout.write(' \u001B[0G' + QUMock.current_module + ' :: ' + name + '\u001B[0K'); + func(QUMock.assertions); }; - global.QUnit = QUnit; - global.test = QUnit.test; - global.ok = QUnit.assertions.ok; - global.equal = QUnit.assertions.equal; - global.deepEqual = QUnit.assertions.deepEqual; - global.expect = QUnit.assertions.expect; - global.throws = QUnit.assertions.throws; - global.notOk = QUnit.assertions.notOk; - global.notEqual = QUnit.assertions.notEqual; - global.notDeepEqual = QUnit.assertions.notDeepEqual; - global.strictEqual = QUnit.assertions.strictEqual; - global.notStrictEqual = QUnit.assertions.notStrictEqual; + global.QUnit = QUMock; + global.test = QUMock.test; + global.ok = QUMock.assertions.ok; + global.equal = QUMock.assertions.equal; + global.deepEqual = QUMock.assertions.deepEqual; + global.expect = QUMock.assertions.expect; + global.throws = QUMock.assertions.throws; + global.notOk = QUMock.assertions.notOk; + global.notEqual = QUMock.assertions.notEqual; + global.notDeepEqual = QUMock.assertions.notDeepEqual; + global.strictEqual = QUMock.assertions.strictEqual; + global.notStrictEqual = QUMock.assertions.notStrictEqual; } -const VexFlowTests = (function () { - var Test = { - // Test Options. - RUN_CANVAS_TESTS: true, - RUN_SVG_TESTS: true, - RUN_NODE_TESTS: false, - - // Where images are stored for NodeJS tests. - NODE_IMAGEDIR: 'images', - - // Default font properties for tests. - Font: { size: 10 }, - - // Customize this array to test fewer fonts (e.g., ['Bravura', 'Petaluma']). - FONT_STACKS_TO_TEST: ['Bravura', 'Gonville', 'Petaluma'], - - FONT_STACKS: { - Bravura: [VF.Fonts.Bravura(), VF.Fonts.Gonville(), VF.Fonts.Custom()], - Gonville: [VF.Fonts.Gonville(), VF.Fonts.Bravura(), VF.Fonts.Custom()], - Petaluma: [VF.Fonts.Petaluma(), VF.Fonts.Gonville(), VF.Fonts.Custom()], - }, - - // Returns a unique ID for a test. - genID: function (prefix) { - return prefix + VF.Test.genID.ID++; - }, - - genTitle: function (type, assert, name) { - return assert.test.module.name + ' (' + type + '): ' + name; - }, - - // Run `func` inside a QUnit test for each of the enabled - // rendering backends. - runTests: function (name, func, params) { - if (VF.Test.RUN_CANVAS_TESTS) { - VF.Test.runCanvasTest(name, func, params); - } - if (VF.Test.RUN_SVG_TESTS) { - VF.Test.runSVGTest(name, func, params); - } - if (VF.Test.RUN_NODE_TESTS) { - VF.Test.runNodeTest(name, func, params); - } - }, - - // Run `func` inside a QUnit test for each of the enabled - // rendering backends. These are for interactivity tests, and - // currently only work with the SVG backend. - runUITests: function (name, func, params) { - if (VF.Test.RUN_SVG_TESTS) { - VF.Test.runSVGTest(name, func, params); - } - }, - - createTest: function (testId, testName, tagName) { - var testContainer = $('
').addClass('testcanvas'); - testContainer.append($('
').addClass('name').text(testName)); - testContainer.append($(`<${tagName}>`).addClass('vex-tabdiv').attr('id', testId)); - $(VF.Test.testRootSelector).append(testContainer); - }, - - resizeCanvas: function (elementId, width, height) { - $('#' + elementId).width(width); - $('#' + elementId).attr('width', width); - $('#' + elementId).attr('height', height); - }, - - makeFactory: function (options, width, height) { - return new VF.Factory({ - renderer: { - elementId: options.elementId, - backend: options.backend, - width: width || 450, - height: height || 140, - }, - }); - }, - - runCanvasTest: function (name, func, params) { - QUnit.test(name, function (assert) { - var elementId = VF.Test.genID('canvas_'); - var title = VF.Test.genTitle('Canvas', assert, name); - - VF.Test.createTest(elementId, title, 'canvas'); - - var testOptions = { - backend: VF.Renderer.Backends.CANVAS, - elementId: elementId, - params: params, - assert: assert, - }; - - func(testOptions, VF.Renderer.getCanvasContext); - }); - }, - - runSVGTest: function (name, func, params) { - if (!VF.Test.RUN_SVG_TESTS) return; - - const testFunc = (fontName) => (assert) => { - const defaultFontStack = VF.DEFAULT_FONT_STACK; - VF.DEFAULT_FONT_STACK = VF.Test.FONT_STACKS[fontName]; - var elementId = VF.Test.genID('svg_' + fontName); - var title = VF.Test.genTitle('SVG ' + fontName, assert, name); - - VF.Test.createTest(elementId, title, 'div'); - - var testOptions = { - elementId: elementId, - backend: VF.Renderer.Backends.SVG, - params: params, - assert: assert, - }; - - func(testOptions, VF.Renderer.getSVGContext); - VF.DEFAULT_FONT_STACK = defaultFontStack; - }; +type TestFunction = (fontName: string) => (assert: Assert) => void; - VF.Test.runTestWithFonts(name, testFunc); - }, +class VexFlowTests { + // Test Options. + static RUN_CANVAS_TESTS = true; + static RUN_SVG_TESTS = true; + static RUN_NODE_TESTS = false; - runNodeTest: function (name, func, params) { - var fs = VF.shims.fs; + // Where images are stored for NodeJS tests. + static NODE_IMAGEDIR: 'images'; - // Allows `name` to be used inside file names. - function sanitizeName(name) { - return name.replace(/[^a-zA-Z0-9]/g, '_'); - } + // Default font properties for tests. + static Font = { size: 10 }; - // Use an arrow function sequence (currying) to handle tests for all three fonts. - // This is the same approach as seen above in runSVGTest(...). - const testFunc = (fontName) => (assert) => { - const defaultFontStack = VF.DEFAULT_FONT_STACK; - VF.DEFAULT_FONT_STACK = VF.Test.FONT_STACKS[fontName]; - var elementId = VF.Test.genID('nodecanvas_'); - var canvas = document.createElement('canvas'); - canvas.setAttribute('id', elementId); - document.body.appendChild(canvas); - - var testOptions = { - elementId: elementId, - backend: VF.Renderer.Backends.CANVAS, - params: params, - assert: assert, - }; - - func(testOptions, VF.Renderer.getCanvasContext); - VF.DEFAULT_FONT_STACK = defaultFontStack; - - if (VF.Renderer.lastContext !== null) { - var moduleName = sanitizeName(QUnit.current_module); - var testName = sanitizeName(QUnit.current_test); - var fileName; - if (fontName === 'Bravura' && VF.Test.FONT_STACKS_TO_TEST.length === 1) { - // If we are only testing Bravura, we do not add the font name - // to the output image file's name, which allows visual diffs against - // the previous release: version 3.0.9. In the future, if we decide - // to test all fonts by default, we can remove this check. - fileName = `${VF.Test.NODE_IMAGEDIR}/${moduleName}.${testName}.png`; - } else { - fileName = `${VF.Test.NODE_IMAGEDIR}/${moduleName}.${testName}.${fontName}.png`; - } - - var imageData = canvas.toDataURL().split(';base64,').pop(); - var image = Buffer.from(imageData, 'base64'); - - fs.writeFileSync(fileName, image, { encoding: 'base64' }); - } - }; + /** Customize this array to test fewer fonts (e.g., ['Bravura', 'Petaluma']). */ + static FONT_STACKS_TO_TEST = ['Bravura', 'Gonville', 'Petaluma']; - VF.Test.runTestWithFonts(name, testFunc); - }, - - // Run QUnit.test() for each font that is included in VF.Test.FONT_STACKS_TO_TEST. - runTestWithFonts: function (name, func) { - VF.Test.FONT_STACKS_TO_TEST.forEach((fontName) => { - QUnit.test(name, func(fontName)); - }); - }, - - plotNoteWidth: VF.Note.plotMetrics, - plotLegendForNoteWidth: function (ctx, x, y) { - ctx.save(); - ctx.setFont('Arial', 8, ''); - - var spacing = 12; - var lastY = y; - - function legend(color, text) { - ctx.beginPath(); - ctx.setStrokeStyle(color); - ctx.setFillStyle(color); - ctx.setLineWidth(10); - ctx.moveTo(x, lastY - 4); - ctx.lineTo(x + 10, lastY - 4); - ctx.stroke(); - - ctx.setFillStyle('black'); - ctx.fillText(text, x + 15, lastY); - lastY += spacing; - } + /** + * + */ + // eslint-disable-next-line + static FONT_STACKS: Record = { + Bravura: [VF.Fonts.Bravura, VF.Fonts.Gonville, VF.Fonts.Custom], + Gonville: [VF.Fonts.Gonville, VF.Fonts.Bravura, VF.Fonts.Custom], + Petaluma: [VF.Fonts.Petaluma, VF.Fonts.Gonville, VF.Fonts.Custom], + }; - legend('green', 'Note + Flag'); - legend('red', 'Modifiers'); - legend('#999', 'Displaced Head'); - legend('#DDD', 'Formatter Shift'); + private static NEXT_TEST_ID = 0; + + /** Return a unique ID for a test. */ + static generateTestID(prefix: string): string { + return prefix + '_' + VexFlowTests.NEXT_TEST_ID++; + } + + /** + * @param type + * @param assert + * @param name + * @returns a title that will be displayed on flow.html. + */ + // eslint-disable-next-line + static generateTestTitle(type: string, assert: Assert, name: string): string { + return assert.test.module.name + ' (' + type + '): ' + name; + } + + /** + * Run `func` inside a QUnit test for each of the enabled rendering backends. + * @param name + * @param func + * @param params + */ + // eslint-disable-next-line + static runTests(name: string, func: Function, params?: any): void { + if (VexFlowTests.RUN_CANVAS_TESTS) { + VexFlowTests.runCanvasTest(name, func, params); + } + if (VexFlowTests.RUN_SVG_TESTS) { + VexFlowTests.runSVGTest(name, func, params); + } + if (VexFlowTests.RUN_NODE_TESTS) { + VexFlowTests.runNodeTest(name, func, params); + } + } + + /** + * These are for interactivity tests, and currently only work with the SVG backend. + * See: stavenote_tests.ts. + * @param name + * @param func + * @param params + */ + // eslint-disable-next-line + static runUITests(name: string, func: Function, params: any): void { + if (VexFlowTests.RUN_SVG_TESTS) { + VexFlowTests.runSVGTest(name, func, params); + } + } + + /** + * Use jQuery to append a
which contains the test case. + * @param testId + * @param testTitle + * @param tagName + */ + static createTest(testId: string, testTitle: string, tagName: string): void { + const testContainer = $('
').addClass('testcanvas'); // See flow.css for div.testcanvas + testContainer.append($('
').addClass('name').text(testTitle)); + testContainer.append($(`<${tagName}>`).addClass('vex-tabdiv').attr('id', testId)); + $('#vexflow_testoutput').append(testContainer); // See flow.html + } + + /** + * Currently unused. + * @param elementId + * @param width + * @param height + */ + static resizeCanvas(elementId: string, width: number, height: number): void { + $('#' + elementId).width(width); + $('#' + elementId).attr('width', width); + $('#' + elementId).attr('height', height); + } + + /** + * @param options + * @param width + * @param height + * @returns + */ + static makeFactory( + options: { elementId: any; backend: any } /* eslint-disable-line */, + width: number = 450, + height: number = 140 + ): any /* Factory */ /* eslint-disable-line */ { + return new VF.Factory({ + renderer: { + elementId: options.elementId, + backend: options.backend, + width: width || 450, + height: height || 140, + }, + }); + } + + /** + * + * @param name + * @param func + * @param params + */ + // eslint-disable-next-line + static runCanvasTest(name: string, func: Function, params: any): void { + // eslint-disable-next-line + QUnit.test(name, function (assert: Assert) { + const elementId = VexFlowTests.generateTestID('canvas_'); + const title = VexFlowTests.generateTestTitle('Canvas', assert, name); + + VexFlowTests.createTest(elementId, title, 'canvas'); + + const testOptions = { + backend: VF.Renderer.Backends.CANVAS, + elementId: elementId, + params: params, + assert: assert, + }; - ctx.restore(); - }, + func(testOptions, VF.Renderer.getCanvasContext); + }); + } + + /** + * + * @param name + * @param func + * @param params + */ + // eslint-disable-next-line + static runSVGTest(name: string, func: Function, params?: any): void { + if (!VexFlowTests.RUN_SVG_TESTS) return; + + const testFunc: TestFunction = (fontName: string) => (assert: Assert) => { + const defaultFontStack = VF.DEFAULT_FONT_STACK; + VF.DEFAULT_FONT_STACK = VexFlowTests.FONT_STACKS[fontName]; + const elementId = VexFlowTests.generateTestID('svg_' + fontName); + const title = VexFlowTests.generateTestTitle('SVG ' + fontName, assert, name); + + VexFlowTests.createTest(elementId, title, 'div'); + + const testOptions = { + elementId: elementId, + backend: VF.Renderer.Backends.SVG, + params: params, + assert: assert, + }; - almostEqual: function (value, expectedValue, errorMargin) { - return equal(Math.abs(value - expectedValue) < errorMargin, true); - }, - }; + func(testOptions, VF.Renderer.getSVGContext); + VF.DEFAULT_FONT_STACK = defaultFontStack; + }; + + VexFlowTests.runTestWithFonts(name, testFunc); + } + + /** + * @param name + * @param func + * @param params + */ + // eslint-disable-next-line + static runNodeTest(name: string, func: Function, params: any): void { + const fs = VF.shims.fs; + + // Allow `name` to be used inside file names. + function sanitizeName(name: string): string { + return name.replace(/[^a-zA-Z0-9]/g, '_'); + } + + // Use an arrow function sequence (currying) to handle tests for all three fonts. + // This is the same approach as seen above in runSVGTest(...). + const testFunc: TestFunction = (fontName: string) => (assert: Assert) => { + const defaultFontStack = VF.DEFAULT_FONT_STACK; + VF.DEFAULT_FONT_STACK = VexFlowTests.FONT_STACKS[fontName]; + const elementId = VexFlowTests.generateTestID('nodecanvas_'); + const canvas = document.createElement('canvas'); + canvas.setAttribute('id', elementId); + document.body.appendChild(canvas); + + const testOptions = { + elementId: elementId, + backend: VF.Renderer.Backends.CANVAS, + params: params, + assert: assert, + }; + + func(testOptions, VF.Renderer.getCanvasContext); + VF.DEFAULT_FONT_STACK = defaultFontStack; + + if (VF.Renderer.lastContext !== null) { + const moduleName = sanitizeName(QUnit.current_module); + const testName = sanitizeName(QUnit.current_test); + let fileName; + if (fontName === 'Bravura' && VexFlowTests.FONT_STACKS_TO_TEST.length === 1) { + // If we are only testing Bravura, we do not add the font name + // to the output image file's name, which allows visual diffs against + // the previous release: version 3.0.9. In the future, if we decide + // to test all fonts by default, we can remove this check. + fileName = `${VexFlowTests.NODE_IMAGEDIR}/${moduleName}.${testName}.png`; + } else { + fileName = `${VexFlowTests.NODE_IMAGEDIR}/${moduleName}.${testName}.${fontName}.png`; + } - Test.genID.ID = 0; - Test.testRootSelector = '#vexflow_testoutput'; + const imageData = canvas.toDataURL().split(';base64,').pop(); + const image = Buffer.from(imageData as string, 'base64'); - return Test; -})(); + fs.writeFileSync(fileName, image, { encoding: 'base64' }); + } + }; + + VexFlowTests.runTestWithFonts(name, testFunc); + } + + /** + * Run QUnit.test() for each font that is included in VexFlowTests.FONT_STACKS_TO_TEST. + * @param name + * @param func + */ + static runTestWithFonts(name: string, func: TestFunction): void { + VexFlowTests.FONT_STACKS_TO_TEST.forEach((fontName) => { + QUnit.test(name, func(fontName)); + }); + } + + static plotNoteWidth = VF.Note.plotMetrics; + + /** + * @param ctx + * @param x + * @param y + */ + static plotLegendForNoteWidth(ctx: RenderContext, x: number, y: number): void { + ctx.save(); + ctx.setFont('Arial', 8, ''); + + const spacing = 12; + let lastY = y; + + function legend(color: string, text: string) { + ctx.beginPath(); + ctx.setStrokeStyle(color); + ctx.setFillStyle(color); + ctx.setLineWidth(10); + ctx.moveTo(x, lastY - 4); + ctx.lineTo(x + 10, lastY - 4); + ctx.stroke(); + + ctx.setFillStyle('black'); + ctx.fillText(text, x + 15, lastY); + lastY += spacing; + } + + legend('green', 'Note + Flag'); + legend('red', 'Modifiers'); + legend('#999', 'Displaced Head'); + legend('#DDD', 'Formatter Shift'); + + ctx.restore(); + } +} if (!global.QUnit) { setupQUnitMockObject(); } +/** Currently unused. */ +global.almostEqual = (value: number, expectedValue: number, errorMargin: number): boolean => { + return global.equal(Math.abs(value - expectedValue) < errorMargin, true); +}; + global.VF = VF; global.VF.Test = VexFlowTests; From 13bc4fc87ee5a1f2865c66e31e8dae0954e86e2d Mon Sep 17 00:00:00 2001 From: "Ron B. Yeh" Date: Mon, 12 Jul 2021 18:06:38 -0700 Subject: [PATCH 3/7] Add support for optionally testing all fonts in vexflow_test_helpers.ts. --- tests/vexflow_test_helpers.ts | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/tests/vexflow_test_helpers.ts b/tests/vexflow_test_helpers.ts index 0bb10775b1..3ccf677ab1 100644 --- a/tests/vexflow_test_helpers.ts +++ b/tests/vexflow_test_helpers.ts @@ -191,22 +191,34 @@ class VexFlowTests { */ // eslint-disable-next-line static runCanvasTest(name: string, func: Function, params: any): void { - // eslint-disable-next-line - QUnit.test(name, function (assert: Assert) { - const elementId = VexFlowTests.generateTestID('canvas_'); - const title = VexFlowTests.generateTestTitle('Canvas', assert, name); + // Set to true if you want to test all fonts on the CANVAS context. + // By default we only test all fonts on the SVG context. + const TEST_ALL_FONTS = false; + + const testFunc: TestFunction = (fontName: string) => (assert: Assert) => { + const defaultFontStack = VF.DEFAULT_FONT_STACK; + VF.DEFAULT_FONT_STACK = VexFlowTests.FONT_STACKS[fontName]; + const elementId = VexFlowTests.generateTestID('canvas_' + fontName); + const title = VexFlowTests.generateTestTitle('Canvas ' + fontName, assert, name); VexFlowTests.createTest(elementId, title, 'canvas'); const testOptions = { - backend: VF.Renderer.Backends.CANVAS, elementId: elementId, + backend: VF.Renderer.Backends.CANVAS, params: params, assert: assert, }; func(testOptions, VF.Renderer.getCanvasContext); - }); + VF.DEFAULT_FONT_STACK = defaultFontStack; + }; + + if (TEST_ALL_FONTS) { + VexFlowTests.runTestWithFonts(name, testFunc); + } else { + QUnit.test(name, testFunc('Bravura')); + } } /** From 893cde469b2900bf254097de69fd0b34ca10a296 Mon Sep 17 00:00:00 2001 From: "Ron B. Yeh" Date: Sun, 18 Jul 2021 16:14:21 -0700 Subject: [PATCH 4/7] Move TestOptions into vexflow_test_helpers. --- tests/declarations.ts | 5 - tests/easyscore_tests.ts | 4 +- tests/vexflow_test_helpers.ts | 367 +++++++++++++++++----------------- 3 files changed, 181 insertions(+), 195 deletions(-) diff --git a/tests/declarations.ts b/tests/declarations.ts index b4a8c4fd43..334cc01dba 100644 --- a/tests/declarations.ts +++ b/tests/declarations.ts @@ -45,8 +45,3 @@ export interface Assert { raises(block: () => void, expected?: any, message?: any): void; } /* eslint-enable @typescript-eslint/no-explicit-any */ - -// See: vexflow_test_helpers. -export interface TestOptions { - assert: Assert; -} diff --git a/tests/easyscore_tests.ts b/tests/easyscore_tests.ts index 398e5d2e1d..1729076c91 100644 --- a/tests/easyscore_tests.ts +++ b/tests/easyscore_tests.ts @@ -7,9 +7,9 @@ import { EasyScore } from '../src/easyscore'; import { StaveNote } from '../src/stavenote'; import { System } from '../src/system'; import { FretHandFinger } from '../src/frethandfinger'; -import { QUnit, expect, Assert, TestOptions } from './declarations'; +import { QUnit, expect, Assert } from './declarations'; import { Articulation } from '../src/articulation'; -import { VexFlowTests } from './vexflow_test_helpers'; +import { VexFlowTests, TestOptions } from './vexflow_test_helpers'; // eslint-disable-next-line declare const VF: any; // TODO: Remove soon! diff --git a/tests/vexflow_test_helpers.ts b/tests/vexflow_test_helpers.ts index 3ccf677ab1..83712c65ed 100644 --- a/tests/vexflow_test_helpers.ts +++ b/tests/vexflow_test_helpers.ts @@ -3,6 +3,8 @@ // // VexFlow Test Support Library +import { Font } from '../src/font'; +import { ContextBuilder, Renderer } from '../src/renderer'; import { RenderContext } from '../src/types/common'; import { Assert } from './declarations'; @@ -13,6 +15,68 @@ declare var QUnit: any; const VF: any = Vex.Flow; /* eslint-enable */ +export interface TestOptions { + elementId: string; + params: any /* eslint-disable-line */; + assert: Assert; + backend: number; +} + +// Each test case will switch through the available fonts, and then restore the original font when done. +let originalFontStack: Font[]; +function useTempFontStack(fontName: string): void { + originalFontStack = VF.DEFAULT_FONT_STACK; + VF.DEFAULT_FONT_STACK = VexFlowTests.FONT_STACKS[fontName]; +} +function restoreOriginalFontStack(): void { + VF.DEFAULT_FONT_STACK = originalFontStack; +} + +// A micro util inspired by jQuery. +if (!global.$) { + // generate_png_images.js uses jsdom and does not include jQuery. + global.$ = (param: HTMLElement | string) => { + let element: HTMLElement; + if (typeof param !== 'string') { + element = param; + } else if (param.startsWith('<')) { + // Extract the tag name: e.g.,
=> div + // Assume param.match returns something (! operator). + // eslint-disable-next-line + const tagName = param.match(/[A-Za-z]+/g)![0]; + element = document.createElement(tagName); + } else { + element = document.querySelector(param) as HTMLElement; + } + + const $element = { + // eslint-disable-next-line + get(index: number) { + return element; + }, + addClass(c: string) { + element.classList.add(c); + return $element; + }, + text(t: string) { + element.textContent = t; + return $element; + }, + append(...elementsToAppend: HTMLElement[]) { + elementsToAppend.forEach((e) => { + element.appendChild(e); + }); + return $element; + }, + attr(attrName: string, val: string) { + element.setAttribute(attrName, val); + return $element; + }, + }; + return $element; + }; +} + /** * When generating PNG images for the visual regression tests, * we mock out the QUnit methods (since we don't care about assertions). @@ -32,17 +96,19 @@ function setupQUnitMockObject() { notDeepEqual: () => true, strictEqual: () => true, notStrictEqual: () => true, + test: { module: { name: '' } }, }; QUMock.module = (name: string): void => { QUMock.current_module = name; }; - // eslint-disable-next-line - QUMock.test = (name: number, func: Function): void => { + // See: https://api.qunitjs.com/QUnit/test/ + QUMock.test = (name: number, callback: (assert: Assert) => void): void => { QUMock.current_test = name; + QUMock.assertions.test.module.name = name; VF.shims.process.stdout.write(' \u001B[0G' + QUMock.current_module + ' :: ' + name + '\u001B[0K'); - func(QUMock.assertions); + callback(QUMock.assertions); }; global.QUnit = QUMock; @@ -59,10 +125,38 @@ function setupQUnitMockObject() { global.notStrictEqual = QUMock.assertions.notStrictEqual; } -type TestFunction = (fontName: string) => (assert: Assert) => void; +export type TestFunction = (options: TestOptions, contextBuilder: ContextBuilder) => void; + +/** Allow `name` to be used inside file names. */ +function sanitizeName(name: string): string { + return name.replace(/[^a-zA-Z0-9]/g, '_'); +} + +const CANVAS_TEST_CONFIG = { + backend: Renderer.Backends.CANVAS, + tagName: 'canvas', + testType: 'Canvas', + fontStacks: ['Bravura'], +}; + +const SVG_TEST_CONFIG = { + backend: Renderer.Backends.SVG, + tagName: 'div', + testType: 'SVG', + fontStacks: ['Bravura', 'Gonville', 'Petaluma'], +}; +const NODE_TEST_CONFIG = { + backend: Renderer.Backends.CANVAS, + tagName: 'canvas', + testType: 'NodeCanvas', + fontStacks: ['Bravura', 'Gonville', 'Petaluma'], +}; + +/** + * + */ class VexFlowTests { - // Test Options. static RUN_CANVAS_TESTS = true; static RUN_SVG_TESTS = true; static RUN_NODE_TESTS = false; @@ -73,19 +167,19 @@ class VexFlowTests { // Default font properties for tests. static Font = { size: 10 }; - /** Customize this array to test fewer fonts (e.g., ['Bravura', 'Petaluma']). */ - static FONT_STACKS_TO_TEST = ['Bravura', 'Gonville', 'Petaluma']; - /** * */ - // eslint-disable-next-line - static FONT_STACKS: Record = { + static FONT_STACKS: Record = { Bravura: [VF.Fonts.Bravura, VF.Fonts.Gonville, VF.Fonts.Custom], Gonville: [VF.Fonts.Gonville, VF.Fonts.Bravura, VF.Fonts.Custom], Petaluma: [VF.Fonts.Petaluma, VF.Fonts.Gonville, VF.Fonts.Custom], }; + static set NODE_FONT_STACKS(fontStacks: string[]) { + NODE_TEST_CONFIG.fontStacks = fontStacks; + } + private static NEXT_TEST_ID = 0; /** Return a unique ID for a test. */ @@ -93,73 +187,32 @@ class VexFlowTests { return prefix + '_' + VexFlowTests.NEXT_TEST_ID++; } - /** - * @param type - * @param assert - * @param name - * @returns a title that will be displayed on flow.html. - */ - // eslint-disable-next-line - static generateTestTitle(type: string, assert: Assert, name: string): string { - return assert.test.module.name + ' (' + type + '): ' + name; - } - /** * Run `func` inside a QUnit test for each of the enabled rendering backends. * @param name - * @param func - * @param params - */ - // eslint-disable-next-line - static runTests(name: string, func: Function, params?: any): void { - if (VexFlowTests.RUN_CANVAS_TESTS) { - VexFlowTests.runCanvasTest(name, func, params); - } - if (VexFlowTests.RUN_SVG_TESTS) { - VexFlowTests.runSVGTest(name, func, params); - } - if (VexFlowTests.RUN_NODE_TESTS) { - VexFlowTests.runNodeTest(name, func, params); - } - } - - /** - * These are for interactivity tests, and currently only work with the SVG backend. - * See: stavenote_tests.ts. - * @param name - * @param func + * @param testFunc * @param params */ // eslint-disable-next-line - static runUITests(name: string, func: Function, params: any): void { - if (VexFlowTests.RUN_SVG_TESTS) { - VexFlowTests.runSVGTest(name, func, params); - } + static runTests(name: string, testFunc: TestFunction, params?: any): void { + VexFlowTests.runCanvasTest(name, testFunc, params); + VexFlowTests.runSVGTest(name, testFunc, params); + VexFlowTests.runNodeTest(name, testFunc, params); } /** - * Use jQuery to append a
which contains the test case. - * @param testId + * Append a
which contains the test case title and rendered output. + * See flow.html and flow.css. + * @param elementId * @param testTitle * @param tagName */ - static createTest(testId: string, testTitle: string, tagName: string): void { - const testContainer = $('
').addClass('testcanvas'); // See flow.css for div.testcanvas - testContainer.append($('
').addClass('name').text(testTitle)); - testContainer.append($(`<${tagName}>`).addClass('vex-tabdiv').attr('id', testId)); - $('#vexflow_testoutput').append(testContainer); // See flow.html - } - - /** - * Currently unused. - * @param elementId - * @param width - * @param height - */ - static resizeCanvas(elementId: string, width: number, height: number): void { - $('#' + elementId).width(width); - $('#' + elementId).attr('width', width); - $('#' + elementId).attr('height', height); + static createTest(elementId: string, testTitle: string, tagName: string): HTMLElement { + const title = $('
').addClass('name').text(testTitle).get(0); + const vexOutput = $(`<${tagName}/>`).addClass('vex-tabdiv').attr('id', elementId).get(0); + const container = $('
').addClass('testcanvas').append(title, vexOutput).get(0); + $('#vexflow_testoutput').append(container); + return vexOutput; } /** @@ -183,142 +236,78 @@ class VexFlowTests { }); } - /** - * - * @param name - * @param func - * @param params - */ // eslint-disable-next-line - static runCanvasTest(name: string, func: Function, params: any): void { - // Set to true if you want to test all fonts on the CANVAS context. - // By default we only test all fonts on the SVG context. - const TEST_ALL_FONTS = false; - - const testFunc: TestFunction = (fontName: string) => (assert: Assert) => { - const defaultFontStack = VF.DEFAULT_FONT_STACK; - VF.DEFAULT_FONT_STACK = VexFlowTests.FONT_STACKS[fontName]; - const elementId = VexFlowTests.generateTestID('canvas_' + fontName); - const title = VexFlowTests.generateTestTitle('Canvas ' + fontName, assert, name); - - VexFlowTests.createTest(elementId, title, 'canvas'); - - const testOptions = { - elementId: elementId, - backend: VF.Renderer.Backends.CANVAS, - params: params, - assert: assert, - }; - - func(testOptions, VF.Renderer.getCanvasContext); - VF.DEFAULT_FONT_STACK = defaultFontStack; - }; - - if (TEST_ALL_FONTS) { - VexFlowTests.runTestWithFonts(name, testFunc); - } else { - QUnit.test(name, testFunc('Bravura')); + static runCanvasTest(name: string, testFunc: TestFunction, params: any): void { + if (VexFlowTests.RUN_CANVAS_TESTS) { + // eslint-disable-next-line + VexFlowTests.runWithParams({ ...CANVAS_TEST_CONFIG, name, testFunc, params, helper: () => {} }); } } - /** - * - * @param name - * @param func - * @param params - */ // eslint-disable-next-line - static runSVGTest(name: string, func: Function, params?: any): void { - if (!VexFlowTests.RUN_SVG_TESTS) return; - - const testFunc: TestFunction = (fontName: string) => (assert: Assert) => { - const defaultFontStack = VF.DEFAULT_FONT_STACK; - VF.DEFAULT_FONT_STACK = VexFlowTests.FONT_STACKS[fontName]; - const elementId = VexFlowTests.generateTestID('svg_' + fontName); - const title = VexFlowTests.generateTestTitle('SVG ' + fontName, assert, name); - - VexFlowTests.createTest(elementId, title, 'div'); - - const testOptions = { - elementId: elementId, - backend: VF.Renderer.Backends.SVG, - params: params, - assert: assert, - }; - - func(testOptions, VF.Renderer.getSVGContext); - VF.DEFAULT_FONT_STACK = defaultFontStack; - }; - - VexFlowTests.runTestWithFonts(name, testFunc); + static runSVGTest(name: string, testFunc: TestFunction, params?: any): void { + if (VexFlowTests.RUN_SVG_TESTS) { + // eslint-disable-next-line + VexFlowTests.runWithParams({ ...SVG_TEST_CONFIG, name, testFunc, params, helper: () => {} }); + } } - /** - * @param name - * @param func - * @param params - */ // eslint-disable-next-line - static runNodeTest(name: string, func: Function, params: any): void { - const fs = VF.shims.fs; - - // Allow `name` to be used inside file names. - function sanitizeName(name: string): string { - return name.replace(/[^a-zA-Z0-9]/g, '_'); + static runNodeTest(name: string, testFunc: TestFunction, params: any): void { + if (VexFlowTests.RUN_NODE_TESTS) { + VexFlowTests.runWithParams({ + ...NODE_TEST_CONFIG, + name, + testFunc, + params, + helper: VexFlowTests.runNodeTestHelper, + }); } - - // Use an arrow function sequence (currying) to handle tests for all three fonts. - // This is the same approach as seen above in runSVGTest(...). - const testFunc: TestFunction = (fontName: string) => (assert: Assert) => { - const defaultFontStack = VF.DEFAULT_FONT_STACK; - VF.DEFAULT_FONT_STACK = VexFlowTests.FONT_STACKS[fontName]; - const elementId = VexFlowTests.generateTestID('nodecanvas_'); - const canvas = document.createElement('canvas'); - canvas.setAttribute('id', elementId); - document.body.appendChild(canvas); - - const testOptions = { - elementId: elementId, - backend: VF.Renderer.Backends.CANVAS, - params: params, - assert: assert, - }; - - func(testOptions, VF.Renderer.getCanvasContext); - VF.DEFAULT_FONT_STACK = defaultFontStack; - - if (VF.Renderer.lastContext !== null) { - const moduleName = sanitizeName(QUnit.current_module); - const testName = sanitizeName(QUnit.current_test); - let fileName; - if (fontName === 'Bravura' && VexFlowTests.FONT_STACKS_TO_TEST.length === 1) { - // If we are only testing Bravura, we do not add the font name - // to the output image file's name, which allows visual diffs against - // the previous release: version 3.0.9. In the future, if we decide - // to test all fonts by default, we can remove this check. - fileName = `${VexFlowTests.NODE_IMAGEDIR}/${moduleName}.${testName}.png`; - } else { - fileName = `${VexFlowTests.NODE_IMAGEDIR}/${moduleName}.${testName}.${fontName}.png`; - } - - const imageData = canvas.toDataURL().split(';base64,').pop(); - const image = Buffer.from(imageData as string, 'base64'); - - fs.writeFileSync(fileName, image, { encoding: 'base64' }); - } - }; - - VexFlowTests.runTestWithFonts(name, testFunc); } /** - * Run QUnit.test() for each font that is included in VexFlowTests.FONT_STACKS_TO_TEST. - * @param name - * @param func + * Save the PNG file. + * @param fontName + * @param element */ - static runTestWithFonts(name: string, func: TestFunction): void { - VexFlowTests.FONT_STACKS_TO_TEST.forEach((fontName) => { - QUnit.test(name, func(fontName)); + static runNodeTestHelper(fontName: string, element: HTMLElement): void { + if (VF.Renderer.lastContext !== undefined) { + const moduleName = sanitizeName(QUnit.current_module); + const testName = sanitizeName(QUnit.current_test); + // If we are only testing Bravura, we OMIT the font name from the + // output image file name, which allows visual diffs against + // the previous release: version 3.0.9. In the future, if we decide + // to test all fonts by default, we can remove this check. + const onlyBravura = NODE_TEST_CONFIG.fontStacks.length === 1 && fontName === 'Bravura'; + const fontInfo = onlyBravura ? '' : `.${fontName}`; + const fileName = `${VexFlowTests.NODE_IMAGEDIR}/${moduleName}.${testName}${fontInfo}.png`; + + const imageData = (element as HTMLCanvasElement).toDataURL().split(';base64,').pop(); + const imageBuffer = Buffer.from(imageData as string, 'base64'); + + VF.shims.fs.writeFileSync(fileName, imageBuffer, { encoding: 'base64' }); + } + } + + // Defined in run.js + // static run() { ... } + + /** Run QUnit.test(...) for each font. */ + // eslint-disable-next-line + static runWithParams({ fontStacks, testFunc, name, params, backend, tagName, testType, helper }: any): void { + fontStacks.forEach((fontStackName: string) => { + QUnit.test(name, (assert: Assert) => { + useTempFontStack(fontStackName); + const elementId = VexFlowTests.generateTestID(`${testType.toLowerCase()}_` + fontStackName); + const title = assert.test.module.name + ' / ' + name + ` / ${testType} + ${fontStackName}`; + const element = VexFlowTests.createTest(elementId, title, tagName); + const options: TestOptions = { elementId, params, assert, backend }; + const isSVG = backend === Renderer.Backends.SVG; + const contextBuilder: ContextBuilder = isSVG ? VF.Renderer.getSVGContext : VF.Renderer.getCanvasContext; + testFunc(options, contextBuilder); + restoreOriginalFontStack(); + helper(fontStackName, element); + }); }); } @@ -364,9 +353,11 @@ if (!global.QUnit) { } /** Currently unused. */ +/* global.almostEqual = (value: number, expectedValue: number, errorMargin: number): boolean => { return global.equal(Math.abs(value - expectedValue) < errorMargin, true); }; +*/ global.VF = VF; global.VF.Test = VexFlowTests; From f6c16f5a0f86868b066f62349410b7ed24ac0b2f Mon Sep 17 00:00:00 2001 From: "Ron B. Yeh" Date: Sun, 18 Jul 2021 16:17:42 -0700 Subject: [PATCH 5/7] Add ContextBuilder type to Renderer. --- src/renderer.ts | 3 +++ tests/stavenote_tests.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/renderer.ts b/src/renderer.ts index 8606b302fa..40bf30c147 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -6,6 +6,9 @@ import { SVGContext } from './svgcontext'; import { RenderContext } from './types/common'; import { RuntimeError } from './util'; +// A ContextBuilder is either Renderer.getSVGContext or Renderer.getCanvasContext. +export type ContextBuilder = typeof Renderer.getSVGContext | typeof Renderer.getCanvasContext; + /** * Support Canvas & SVG rendering contexts. */ diff --git a/tests/stavenote_tests.js b/tests/stavenote_tests.js index beb297d7fc..0ca0b63c76 100644 --- a/tests/stavenote_tests.js +++ b/tests/stavenote_tests.js @@ -18,7 +18,7 @@ const StaveNoteTests = (function () { test('Width', StaveNote.width); test('TickContext', StaveNote.tickContext); - VF.Test.runUITests('Interactive Mouseover StaveNote', StaveNote.draw, { + VF.Test.runSVGTest('Interactive Mouseover StaveNote', StaveNote.draw, { clef: 'treble', octaveShift: 0, restKey: 'r/4', From c6f3a3d4719e60da2e478c9b8190e88eda9c0def Mon Sep 17 00:00:00 2001 From: "Ron B. Yeh" Date: Thu, 22 Jul 2021 11:28:12 -0700 Subject: [PATCH 6/7] generate_png_images.js references NODE_FONT_STACKS and vexflow_testoutput. Remove empty helper functions. Use null instead. --- tests/vexflow_test_helpers.ts | 19 +++++++------------ tools/generate_png_images.js | 11 +++++------ 2 files changed, 12 insertions(+), 18 deletions(-) diff --git a/tests/vexflow_test_helpers.ts b/tests/vexflow_test_helpers.ts index 83712c65ed..8c35164bb4 100644 --- a/tests/vexflow_test_helpers.ts +++ b/tests/vexflow_test_helpers.ts @@ -239,29 +239,24 @@ class VexFlowTests { // eslint-disable-next-line static runCanvasTest(name: string, testFunc: TestFunction, params: any): void { if (VexFlowTests.RUN_CANVAS_TESTS) { - // eslint-disable-next-line - VexFlowTests.runWithParams({ ...CANVAS_TEST_CONFIG, name, testFunc, params, helper: () => {} }); + const helper = null; + VexFlowTests.runWithParams({ ...CANVAS_TEST_CONFIG, name, testFunc, params, helper }); } } // eslint-disable-next-line static runSVGTest(name: string, testFunc: TestFunction, params?: any): void { if (VexFlowTests.RUN_SVG_TESTS) { - // eslint-disable-next-line - VexFlowTests.runWithParams({ ...SVG_TEST_CONFIG, name, testFunc, params, helper: () => {} }); + const helper = null; + VexFlowTests.runWithParams({ ...SVG_TEST_CONFIG, name, testFunc, params, helper }); } } // eslint-disable-next-line static runNodeTest(name: string, testFunc: TestFunction, params: any): void { if (VexFlowTests.RUN_NODE_TESTS) { - VexFlowTests.runWithParams({ - ...NODE_TEST_CONFIG, - name, - testFunc, - params, - helper: VexFlowTests.runNodeTestHelper, - }); + const helper = VexFlowTests.runNodeTestHelper; + VexFlowTests.runWithParams({ ...NODE_TEST_CONFIG, name, testFunc, params, helper }); } } @@ -306,7 +301,7 @@ class VexFlowTests { const contextBuilder: ContextBuilder = isSVG ? VF.Renderer.getSVGContext : VF.Renderer.getCanvasContext; testFunc(options, contextBuilder); restoreOriginalFontStack(); - helper(fontStackName, element); + if (helper) helper(fontStackName, element); }); }); } diff --git a/tools/generate_png_images.js b/tools/generate_png_images.js index 4d786bce44..95a212bf3a 100755 --- a/tools/generate_png_images.js +++ b/tools/generate_png_images.js @@ -6,7 +6,7 @@ `tools/visual_regression.sh`. */ const { JSDOM } = require('jsdom'); -const dom = new JSDOM(``); +const dom = new JSDOM(`
`); window = dom.window; document = dom.window.document; @@ -17,7 +17,7 @@ const [scriptDir, imageDir] = process.argv.slice(2, 4); // For example: // node generate_png_images.js SCRIPT_DIR IMAGE_OUTPUT_DIR --fonts=petaluma // node generate_png_images.js SCRIPT_DIR IMAGE_OUTPUT_DIR --fonts=bravura,gonville -const ALL_FONTS = ['Bravura', 'Petaluma', 'Gonville']; +const ALL_FONTS = ['Bravura', 'Gonville', 'Petaluma']; let fontStacksToTest = ALL_FONTS; if (process.argv.length >= 5) { const fontsOption = process.argv[4].toLowerCase(); @@ -27,8 +27,8 @@ if (process.argv.length >= 5) { } } +// TODO: After vexflow-tests.js is fully migrated to TS, we will need to remove vexflow-debug.js from here. global['Vex'] = require(`${scriptDir}/vexflow-debug.js`); - require(`${scriptDir}/vexflow-tests.js`); const VF = Vex.Flow; @@ -37,13 +37,12 @@ VF.shims = { process, }; -// Tell VexFlow that we're outside the browser -- just run -// the Node tests. +// Tell VexFlow that we're outside the browser. Just run the Node tests. VF.Test.RUN_CANVAS_TESTS = false; VF.Test.RUN_SVG_TESTS = false; VF.Test.RUN_NODE_TESTS = true; VF.Test.NODE_IMAGEDIR = imageDir; -VF.Test.FONT_STACKS_TO_TEST = fontStacksToTest; +VF.Test.NODE_FONT_STACKS = fontStacksToTest; // Create the image directory if it doesn't exist. fs.mkdirSync(VF.Test.NODE_IMAGEDIR, { recursive: true }); From 4ca4a7cd73699c69948b740f71b3f970bfd7e59a Mon Sep 17 00:00:00 2001 From: "Ron B. Yeh" Date: Fri, 23 Jul 2021 17:07:05 -0700 Subject: [PATCH 7/7] Fix font loading. --- tests/vexflow_test_helpers.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/vexflow_test_helpers.ts b/tests/vexflow_test_helpers.ts index 8c35164bb4..720617bf94 100644 --- a/tests/vexflow_test_helpers.ts +++ b/tests/vexflow_test_helpers.ts @@ -171,9 +171,9 @@ class VexFlowTests { * */ static FONT_STACKS: Record = { - Bravura: [VF.Fonts.Bravura, VF.Fonts.Gonville, VF.Fonts.Custom], - Gonville: [VF.Fonts.Gonville, VF.Fonts.Bravura, VF.Fonts.Custom], - Petaluma: [VF.Fonts.Petaluma, VF.Fonts.Gonville, VF.Fonts.Custom], + Bravura: [VF.Fonts.Bravura(), VF.Fonts.Gonville(), VF.Fonts.Custom()], + Gonville: [VF.Fonts.Gonville(), VF.Fonts.Bravura(), VF.Fonts.Custom()], + Petaluma: [VF.Fonts.Petaluma(), VF.Fonts.Gonville(), VF.Fonts.Custom()], }; static set NODE_FONT_STACKS(fontStacks: string[]) {