Add font loading tests

package.json

@@ -99,6 +99,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.3.3",
     "rollup-plugin-esbuild": "^4.10.1",
+    "tree-kill": "^1.2.2",
     "ts-jest": "^29.0.3",
     "typescript": "^4.0.0"
   },
@@ -109,6 +110,10 @@
     "preset": "ts-jest",
     "runner": "@kayahr/jest-electron-runner",
     "testEnvironment": "@kayahr/jest-electron-runner/environment",
-    "testMatch": ["<rootDir>/test/*.test.ts"]
+    "globalSetup": "<rootDir>/test/jest-global-setup.ts",
+    "globalTeardown": "<rootDir>/test/jest-global-teardown.ts",
+    "testMatch": [
+      "<rootDir>/test/*.test.ts"
+    ]
   }
 }

src/HTMLTextStyle.ts

@@ -103,7 +103,10 @@ class HTMLTextStyle extends TextStyle
                 font.refs--;
                 if (font.refs === 0)
                 {
-                    document.fonts.delete(font.fontFace);
+                    if (font.fontFace)
+                    {
+                        document.fonts.delete(font.fontFace);
+                    }
                     delete HTMLTextStyle.availableFonts[font.originalUrl];
                 }
             });
@@ -151,6 +154,7 @@ class HTMLTextStyle extends TextStyle
                     dataSrc,
                     refs: 1,
                     originalUrl: url,
+                    fontFace: null,
                 }, options) as IHTMLFont;
 
                 availableFonts[url] = font;
@@ -169,6 +173,7 @@ class HTMLTextStyle extends TextStyle
                 await fontFace.load();
                 document.fonts.add(fontFace);
                 await document.fonts.ready;
+
                 this.styleID++;
             });
     }

test/HTMLTextStyle.test.ts

@@ -20,6 +20,13 @@ describe('HTMLTextStyle', () => {
     describe('from', () => {
         it('should import from TextStyle', () => {
             expect(HTMLTextStyle.from(new TextStyle())).toBeTruthy();
+        });
+        it('should import from TextStyle and disconnect', () => {
+            const original = new TextStyle();
+            const style = HTMLTextStyle.from(original);
+            original.fontSize = 12;
+            expect(original.fontSize).toBe(12);
+            expect(style.fontSize).toBe(HTMLTextStyle.defaultOptions.fontSize);
         })
     });
 
@@ -68,6 +75,15 @@ describe('HTMLTextStyle', () => {
             style.addOverride('color: red');
             expect(style.toCSS(1)).toMatchSnapshot();
         });
+
+        it('should respect scale', () => {
+            const style = new HTMLTextStyle({
+                lineHeight: 50,
+                wordWrap: true,
+                wordWrapWidth: 200,
+            });
+            expect(style.toCSS(2)).toMatchSnapshot();
+        });
     });
 
     describe('toGlobalCSS', () => {
@@ -82,4 +98,71 @@ describe('HTMLTextStyle', () => {
             expect(style.toGlobalCSS()).toMatchSnapshot();
         });
     });
+
+    describe('loadFont', () => {
+        it('should load a font', async () => {
+            const style = new HTMLTextStyle();
+            const id = style.styleID;
+            const url = 'http://localhost:8080/resources/Herborn.ttf';
+
+            await style.loadFont(url);
+
+            expect(HTMLTextStyle.availableFonts[url]).toBeTruthy();
+            expect(Object.keys(HTMLTextStyle.availableFonts).length).toBe(1);
+            expect(style.styleID).toBe(id + 2); // 1 for font, 1 for install
+            expect(style.toGlobalCSS()).toContain('font-family: "Herborn"');
+
+            style.cleanFonts();
+
+            expect(Object.keys(HTMLTextStyle.availableFonts).length).toBe(0);
+            expect(style.styleID).toBe(id + 3);
+        });
+
+        it('should allow for family, style, weight overrides', async () => {
+            const style = new HTMLTextStyle();
+            const url = 'http://localhost:8080/resources/Herborn.ttf';
+
+            await style.loadFont(url, {
+                family: 'MyFont',
+                style: 'italic',
+                weight: 'bold',
+            });
+
+            const font = HTMLTextStyle.availableFonts[url];
+
+            expect(font.family).toBe('MyFont');
+            expect(font.style).toBe('italic');
+            expect(font.weight).toBe('bold');
+
+            style.cleanFonts();
+        });
+
+        it('should load a font with ref-counting', async () => {
+            const style1 = new HTMLTextStyle();
+            const style2 = new HTMLTextStyle();
+            const style3 = new HTMLTextStyle();
+            const url = 'http://localhost:8080/resources/Herborn.ttf';
+
+            await style1.loadFont(url);
+            await style2.loadFont(url);
+            await style3.loadFont(url);
+
+            expect(HTMLTextStyle.availableFonts[url].refs).toBe(3);
+            expect(Object.keys(HTMLTextStyle.availableFonts).length).toBe(1);
+
+            style1.cleanFonts();
+
+            expect(HTMLTextStyle.availableFonts[url].refs).toBe(2);
+            expect(Object.keys(HTMLTextStyle.availableFonts).length).toBe(1);
+
+            style2.cleanFonts();
+            expect(HTMLTextStyle.availableFonts[url].refs).toBe(1);
+            expect(Object.keys(HTMLTextStyle.availableFonts).length).toBe(1);
+
+            style3.cleanFonts();
+
+            expect(HTMLTextStyle.availableFonts[url]).toBeFalsy();
+            expect(Object.keys(HTMLTextStyle.availableFonts).length).toBe(0);
+        });
+    });
 });

test/__snapshots__/HTMLTextStyle.test.ts.snap

@@ -4,6 +4,8 @@ exports[`HTMLTextStyle toCSS should converto CSS 1`] = `"display: inline-block;c
 
 exports[`HTMLTextStyle toCSS should insert overrides 1`] = `"display: inline-block;color: black;font-size: 26px;font-family: Arial;font-weight: normal;font-style: normal;font-variant: normal;letter-spacing: 0px;text-align: left;padding: 0px;white-space: normal;color: red"`;
 
+exports[`HTMLTextStyle toCSS should respect scale 1`] = `"display: inline-block;color: black;font-size: 52px;font-family: Arial;font-weight: normal;font-style: normal;font-variant: normal;letter-spacing: 0px;text-align: left;padding: 0px;white-space: normal;line-height: 100px;word-wrap: break-word;max-width: 400px"`;
+
 exports[`HTMLTextStyle toGlobalCSS should converto CSS 1`] = `""`;
 
 exports[`HTMLTextStyle toGlobalCSS should converto CSS 2`] = `"p { color: red; }"`;

test/jest-global-setup.ts

@@ -0,0 +1,33 @@
+import { spawn } from 'child_process';
+import { join } from 'path';
+
+export default async function ()
+{
+    const httpServerProcess = spawn(
+        'http-server',
+        ['-c-1', `${join(process.cwd(), './test')}`],
+        {
+            // See https://nodejs.org/api/child_process.html#spawning-bat-and-cmd-files-on-windows
+            shell: process.platform === 'win32',
+        },
+    );
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    globalThis.__SERVER__ = httpServerProcess;
+
+    // give the server time to start
+    await new Promise<void>((resolve) =>
+    {
+        let data = '';
+
+        httpServerProcess.stdout.on('data', (chunk) =>
+        {
+            data += chunk;
+            if (data.includes('Hit CTRL-C to stop the server'))
+            {
+                resolve();
+            }
+        });
+    });
+};

test/jest-global-teardown.ts

@@ -0,0 +1,20 @@
+import type { ChildProcess } from 'child_process';
+import kill from 'tree-kill';
+
+export default async function ()
+{
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const httpServerProcess = (globalThis.__SERVER__ as ChildProcess | undefined);
+
+    if (httpServerProcess)
+    {
+        const processClose = new Promise<void>((resolve) =>
+        {
+            httpServerProcess.on('close', resolve);
+        });
+
+        kill(httpServerProcess.pid);
+        await processClose;
+    }
+};