genesys-spark 4.0.0-beta.51 → 4.0.0-beta.52

package/README.md

@@ -2,26 +2,42 @@
 
 This package is the default way to use Spark. It provides access to Spark's lazy-loading custom elements via a single shared CDN, as well as utilities for non-rendering UI tasks.
 
-## Installation
+## Getting Started
+
+### Installation
 
 Use your package manager of choice to install the package in your project.
 
 `npm install genesys-spark`
 
-## Setup
+### Localization
+
+To ensure components are localized correctly, use the [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) to set the language of
+your page. Components will respect the language of their closest ancestor with
+a recognized `lang` attribute.
+
+### Loading the components
 
-When initializing your app/page, call `registerSparkCompnents`, which will inject
+When initializing your app/page, call `registerSparkComponents`, which will inject
 the script and style tags into your page that define the main Spark custom elements:
 
 ```js
 import { registerSparkComponents } from 'genesys-spark';
 
 // It's not _required_ to await component loading, but it can help prevent a flash
-// of unstyled content
+// of unstyled content.
 await registerSparkComponents();
 ```
 
-## Loading Mechanism
+### Font Loading
+
+While `registerSparkComponents()` will add the required webfonts to your page if
+they are not already present, it is recommended that you link stylesheets to load
+the Urbanist and Noto Sans fonts in your document prior to starting your app. This
+will improve loading performance and prevent a jarring font transition when the
+required fonts load. 
+
+## Asset loading details
 
 By adding a script tag to the document, we ensure that the components are always
 loaded from the same location. This keeps the bundle size of the consuming application

package/dist/hosts.d.ts

@@ -6,3 +6,4 @@ declare global {
  * Will use the domain of the current window if it matches a Genesys domain.
  */
 export declare function getAssetsOrigin(): string;
+export declare function getFontOrigin(): string;

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 /**
- * Loads the spark webcomponents from a shared CDN
+ * Loads the spark web components, as well as required CSS and fonts from a
+ * shared CDN. Performance can be optimized by pre-loading fonts in static HTML.
+ *
  * @returns a promise that succeeds if the component script and styles
- * load successfully.
+ * load successfully. It is not recommended to wait on this promise or to stop
+ * application bootstrap if it rejects. Its primary use should be for logging
+ * unexpected failures.
  */
 export declare function registerSparkComponents(): Promise<void>;

package/dist/index.js

@@ -23,29 +23,57 @@ var DOMAIN_LIST = [
  * Will use the domain of the current window if it matches a Genesys domain.
  */
 function getAssetsOrigin() {
+    var matchedDomain = getRegionDomain();
+    return "https://app.".concat(matchedDomain || DEFAULT_DOMAIN);
+}
+function getFontOrigin() {
+    return getAssetsOrigin();
+}
+function getRegionDomain() {
     var pageHost = window.location.hostname;
-    var matchedDomain = DOMAIN_LIST.find(function (regionDomain) {
+    return DOMAIN_LIST.find(function (regionDomain) {
         return pageHost.endsWith(regionDomain);
     });
-    return "https://app.".concat(matchedDomain || DEFAULT_DOMAIN);
 }
 
-var ASSET_PREFIX = "/spark-components/build-assets/4.0.0-beta.51-74/genesys-webcomponents/";
-var SCRIPT_PATH = "genesys-webcomponents.esm.js";
-var STYLE_PATH = "genesys-webcomponents.css";
-var SCRIPT_SRC = "".concat(getAssetsOrigin()).concat(ASSET_PREFIX).concat(SCRIPT_PATH);
-var STYLE_HREF = "".concat(getAssetsOrigin()).concat(ASSET_PREFIX).concat(STYLE_PATH);
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /**
- * Loads the spark webcomponents from a shared CDN
- * @returns a promise that succeeds if the component script and styles
- * load successfully.
+ * Add a script tag to the document if it is not already present.
+ * @param scriptSrc The src attribute of the script
+ * @returns a promise that resolves if the script loads or is already present
  */
-function registerSparkComponents() {
-    return Promise.all([
-        checkAndLoadScript(SCRIPT_SRC),
-        checkAndLoadStyle(STYLE_HREF)
-    ]).then();
-}
 function checkAndLoadScript(scriptSrc) {
     var existingTag = document.querySelector("script[src=\"".concat(scriptSrc, "\"]"));
     if (existingTag) {
@@ -67,6 +95,11 @@ function checkAndLoadScript(scriptSrc) {
         return result;
     }
 }
+/**
+ * Add a stylesheet link tag to the document if it is not already present.
+ * @param styleHref The href attribute of the stylesheet
+ * @returns a promise that resolves if the style loads or is already present
+ */
 function checkAndLoadStyle(styleHref) {
     var existingTag = document.querySelector("link[href=\"".concat(styleHref, "\"]"));
     if (existingTag) {
@@ -88,6 +121,66 @@ function checkAndLoadStyle(styleHref) {
         return result;
     }
 }
+/**
+ * Given an object that maps font-family identifiers to CSS urls e.g:
+ * {
+ *   "Urbanist": "/urbanist.css",
+ *   "Noto Sans": "/noto-sans.css"
+ * }
+ * This function checks for loaded fonts with those identifiers. If a font is
+ * not found, the corresponding stylesheet is added to the document.
+ * @param fonts An object mapping font-family identifiers to CSS file urls
+ * @returns A promise that resolves once the script tags has finished loading.
+ * It does not fail if the script tags fail to load because we don't want to fail
+ * the whole component loading process in that situation.
+ */
+function checkAndLoadFonts(fonts) {
+    var fontsToLoad = __assign({}, fonts); //clone our input so we can safely mutate it.
+    document.fonts.forEach(function (fontFace) {
+        // If the family is defined with quotes in CSS (e.g. `font-family: "Noto Sans"), 
+        // those quotes may be preserved JS, depending on the browser.
+        var normalizedFamily = fontFace.family.replace(/"/g, "");
+        if (fontsToLoad[normalizedFamily]) {
+            // remove the font from the set to load
+            delete fontsToLoad[normalizedFamily];
+        }
+    });
+    return Promise.all(Object.values(fontsToLoad).map(function (href) {
+        return checkAndLoadStyle(href)["catch"](function () {
+            // Don't fail loading process for fonts, since the components
+            // should still be reasonably usable.
+            console.info("genesys-spark: couldn't load font style ".concat(href));
+        });
+    })).then(function () { }); // flatten the promise array
+}
+
+var ASSET_PREFIX = "/spark-components/build-assets/4.0.0-beta.52-77/genesys-webcomponents/";
+var SCRIPT_PATH = "genesys-webcomponents.esm.js";
+var STYLE_PATH = "genesys-webcomponents.css";
+var assetsOrigin = getAssetsOrigin();
+var SCRIPT_SRC = "".concat(assetsOrigin).concat(ASSET_PREFIX).concat(SCRIPT_PATH);
+var STYLE_HREF = "".concat(assetsOrigin).concat(ASSET_PREFIX).concat(STYLE_PATH);
+var fontOrigin = getFontOrigin();
+var FONTS = {
+    "Urbanist": "".concat(fontOrigin, "/webfonts/urbanist.css"),
+    "Noto Sans": "".concat(fontOrigin, "/webfonts/noto-sans.css")
+};
+/**
+ * Loads the spark web components, as well as required CSS and fonts from a
+ * shared CDN. Performance can be optimized by pre-loading fonts in static HTML.
+ *
+ * @returns a promise that succeeds if the component script and styles
+ * load successfully. It is not recommended to wait on this promise or to stop
+ * application bootstrap if it rejects. Its primary use should be for logging
+ * unexpected failures.
+ */
+function registerSparkComponents() {
+    return Promise.all([
+        checkAndLoadScript(SCRIPT_SRC),
+        checkAndLoadStyle(STYLE_HREF),
+        checkAndLoadFonts(FONTS)
+    ]).then();
+}
 // TODO: Build out utility functions where components aren't the right solution
 // export function formatDate(...)
 

package/dist/loading.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Add a script tag to the document if it is not already present.
+ * @param scriptSrc The src attribute of the script
+ * @returns a promise that resolves if the script loads or is already present
+ */
+export declare function checkAndLoadScript(scriptSrc: string): Promise<void>;
+/**
+ * Add a stylesheet link tag to the document if it is not already present.
+ * @param styleHref The href attribute of the stylesheet
+ * @returns a promise that resolves if the style loads or is already present
+ */
+export declare function checkAndLoadStyle(styleHref: string): Promise<void>;
+/**
+ * Given an object that maps font-family identifiers to CSS urls e.g:
+ * {
+ *   "Urbanist": "/urbanist.css",
+ *   "Noto Sans": "/noto-sans.css"
+ * }
+ * This function checks for loaded fonts with those identifiers. If a font is
+ * not found, the corresponding stylesheet is added to the document.
+ * @param fonts An object mapping font-family identifiers to CSS file urls
+ * @returns A promise that resolves once the script tags has finished loading.
+ * It does not fail if the script tags fail to load because we don't want to fail
+ * the whole component loading process in that situation.
+ */
+export declare function checkAndLoadFonts(fonts: {
+    [key: string]: string;
+}): Promise<void>;

package/jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genesys-spark",
-  "version": "4.0.0-beta.51",
+  "version": "4.0.0-beta.52",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -9,7 +9,8 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c --watch",
-    "test": "echo \"No test specified\"",
+    "test": "jest",
+    "test.watch": "jest --watch",
     "version-sync": "npm version --no-git-tag-version --allow-same-version"
   },
   "dependencies": {
@@ -18,6 +19,9 @@
     "rollup": "^3.29.4"
   },
   "devDependencies": {
-    "@tsconfig/strictest": "^2.0.2"
+    "@tsconfig/strictest": "^2.0.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.1.1"
   }
 }

package/rollup.config.js

@@ -16,6 +16,6 @@ export default {
 			},
 			preventAssignment: true
 		}),
-		typescript()
+		typescript({noEmitOnError: false})
 	]
 };

package/src/hosts.ts

@@ -37,10 +37,21 @@ export function getAssetsOrigin(): string {
       return "http://localhost:3333";
     }
 
+    const matchedDomain = getRegionDomain();
+    return `https://app.${matchedDomain || DEFAULT_DOMAIN}`;
+  }
+
+  export function getFontOrigin(): string {
+    if (IS_DEV_MODE == true) {
+      // Fonts aren't locally hosted during dev mode
+      return "http://app.inindca.com"
+    }
+    return getAssetsOrigin();
+  }
+
+  function getRegionDomain() {
     const pageHost = window.location.hostname;
-    const matchedDomain = DOMAIN_LIST.find(regionDomain =>
+    return DOMAIN_LIST.find(regionDomain =>
       pageHost.endsWith(regionDomain)
     );
-  
-    return `https://app.${matchedDomain || DEFAULT_DOMAIN}`;
   }

package/src/index.ts

@@ -1,65 +1,38 @@
-import { getAssetsOrigin } from "./hosts";
+import { getAssetsOrigin, getFontOrigin } from "./hosts";
+import { checkAndLoadScript, checkAndLoadStyle, checkAndLoadFonts } from "./loading";
 
 const ASSET_PREFIX = "__ASSET_PREFIX__";
 const SCRIPT_PATH = "genesys-webcomponents.esm.js";
 const STYLE_PATH = "genesys-webcomponents.css";
 
-const SCRIPT_SRC = `${getAssetsOrigin()}${ASSET_PREFIX}${SCRIPT_PATH}`;
-const STYLE_HREF = `${getAssetsOrigin()}${ASSET_PREFIX}${STYLE_PATH}`;
+const assetsOrigin = getAssetsOrigin(); 
+const SCRIPT_SRC = `${assetsOrigin}${ASSET_PREFIX}${SCRIPT_PATH}`;
+const STYLE_HREF = `${assetsOrigin}${ASSET_PREFIX}${STYLE_PATH}`;
+const fontOrigin = getFontOrigin();
+const FONTS = {
+    "Urbanist": `${fontOrigin}/webfonts/urbanist.css`,
+    "Noto Sans": `${fontOrigin}/webfonts/noto-sans.css`
+}
 
 
 /**
- * Loads the spark webcomponents from a shared CDN
+ * Loads the spark web components, as well as required CSS and fonts from a 
+ * shared CDN. Performance can be optimized by pre-loading fonts in static HTML.
+ *  
  * @returns a promise that succeeds if the component script and styles
- * load successfully.
+ * load successfully. It is not recommended to wait on this promise or to stop
+ * application bootstrap if it rejects. Its primary use should be for logging 
+ * unexpected failures.
  */
 export function registerSparkComponents() : Promise<void> {
     return Promise.all([
         checkAndLoadScript(SCRIPT_SRC),
-        checkAndLoadStyle(STYLE_HREF)
+        checkAndLoadStyle(STYLE_HREF),
+        checkAndLoadFonts(FONTS)
     ]).then()
 }
 
-function checkAndLoadScript(scriptSrc: string): Promise<void> {
-    const existingTag = document.querySelector(`script[src="${scriptSrc}"]`);
-    if (existingTag) {
-        return Promise.resolve();
-    } else {
-        const scriptTag = document.createElement('script');
-        scriptTag.setAttribute("type", "module");
-        scriptTag.setAttribute("src", scriptSrc);
-        const result = new Promise<void>((resolve, reject) => {
-            scriptTag.addEventListener('load', () => {
-                resolve();
-            })
-            scriptTag.addEventListener('error', () => {
-                reject(`Spark script failed to load: ${scriptSrc}`);
-            })
-        });  
-        document.head.appendChild(scriptTag);
-        return result;
-    }
-}
 
-function checkAndLoadStyle(styleHref: string): Promise<void> {
-    const existingTag = document.querySelector(`link[href="${styleHref}"]`);
-    if (existingTag) {
-        return Promise.resolve();
-    } else {
-        const styleTag = document.createElement('link');
-        styleTag.setAttribute("href", styleHref);
-        styleTag.setAttribute("rel", "stylesheet");
-        const result = new Promise<void>((resolve, reject) => {
-            styleTag.addEventListener('load', () => {
-                resolve();
-            })
-            styleTag.addEventListener('error', () => {
-                reject(`Spark styles failed to load: ${styleHref}`);
-            })
-        });  
-        document.head.appendChild(styleTag);
-        return result;
-    }
-}
 // TODO: Build out utility functions where components aren't the right solution
-// export function formatDate(...)
+// export function formatDate(...)
+

package/src/loading.ts

@@ -0,0 +1,88 @@
+/**
+ * Add a script tag to the document if it is not already present.
+ * @param scriptSrc The src attribute of the script
+ * @returns a promise that resolves if the script loads or is already present
+ */
+export function checkAndLoadScript(scriptSrc: string): Promise<void> {
+    const existingTag = document.querySelector(`script[src="${scriptSrc}"]`);
+    if (existingTag) {
+        return Promise.resolve();
+    } else {
+        const scriptTag = document.createElement('script');
+        scriptTag.setAttribute("type", "module");
+        scriptTag.setAttribute("src", scriptSrc);
+        const result = new Promise<void>((resolve, reject) => {
+            scriptTag.addEventListener('load', () => {
+                resolve();
+            })
+            scriptTag.addEventListener('error', () => {
+                reject(`Spark script failed to load: ${scriptSrc}`);
+            })
+        });  
+        document.head.appendChild(scriptTag);
+        return result;
+    }
+}
+
+/**
+ * Add a stylesheet link tag to the document if it is not already present.
+ * @param styleHref The href attribute of the stylesheet
+ * @returns a promise that resolves if the style loads or is already present
+ */
+export function checkAndLoadStyle(styleHref: string): Promise<void> {
+    const existingTag = document.querySelector(`link[href="${styleHref}"]`);
+    if (existingTag) {
+        return Promise.resolve();
+    } else {
+        const styleTag = document.createElement('link');
+        styleTag.setAttribute("href", styleHref);
+        styleTag.setAttribute("rel", "stylesheet");
+        const result = new Promise<void>((resolve, reject) => {
+            styleTag.addEventListener('load', () => {
+                resolve();
+            })
+            styleTag.addEventListener('error', () => {
+                reject(`Spark styles failed to load: ${styleHref}`);
+            })
+        });  
+        document.head.appendChild(styleTag);
+        return result;
+    }
+}
+
+/**
+ * Given an object that maps font-family identifiers to CSS urls e.g: 
+ * {
+ *   "Urbanist": "/urbanist.css",
+ *   "Noto Sans": "/noto-sans.css"
+ * }
+ * This function checks for loaded fonts with those identifiers. If a font is
+ * not found, the corresponding stylesheet is added to the document.
+ * @param fonts An object mapping font-family identifiers to CSS file urls
+ * @returns A promise that resolves once the script tags has finished loading.
+ * It does not fail if the script tags fail to load because we don't want to fail
+ * the whole component loading process in that situation.
+ */
+export function checkAndLoadFonts(fonts: {[key: string]: string}): Promise<void> {
+    const fontsToLoad = {...fonts}; //clone our input so we can safely mutate it.
+    
+    document.fonts.forEach((fontFace) => {
+        // If the family is defined with quotes in CSS (e.g. `font-family: "Noto Sans"), 
+        // those quotes may be preserved JS, depending on the browser.
+        const normalizedFamily = fontFace.family.replace(/"/g, "");
+        if(fontsToLoad[normalizedFamily]) {
+            // remove the font from the set to load
+            delete fontsToLoad[normalizedFamily];
+        }
+    });
+
+    return Promise.all(
+        Object.values(fontsToLoad).map((href) => {
+            return checkAndLoadStyle(href).catch(() => {
+                // Don't fail loading process for fonts, since the components
+                // should still be reasonably usable.
+                console.info(`genesys-spark: couldn't load font style ${href}`)
+            });
+        })
+    ).then(() => {}) // flatten the promise array
+}

package/test/loading.spec.ts

@@ -0,0 +1,146 @@
+import { checkAndLoadFonts, checkAndLoadScript, checkAndLoadStyle } from '../src/loading';
+
+const SCRIPT_URL = 'https://localhost/script.js';
+const STYLE_URL = 'https://localhost/style.css';
+const FONTS = {
+  "Font1": `font1.css`,
+  "Font2": `font2.css`
+}
+
+describe('The loading module', () => {
+  afterEach(() => {
+    document.head.innerHTML = '';
+    document.body.innerHTML = '';
+  });
+
+  describe('checkAndLoadScript', () => {
+    test('will create a new script tag and wait for it to load', async () => {
+      const promise = checkAndLoadScript(SCRIPT_URL);
+      const tag = document.querySelector(`script[src="${SCRIPT_URL}"]`);
+
+      expect(tag).not.toBeNull(); // The tag was created
+      tag?.dispatchEvent(new Event('load')); // The promise will resolve
+
+      expect(promise).resolves.toBe(undefined);
+    });
+    test('will fail if the script fails to load', async () => {
+      const promise = checkAndLoadScript(SCRIPT_URL);
+      const tag = document.querySelector(`script[src="${SCRIPT_URL}"]`);
+
+      expect(tag).not.toBeNull(); // The tag was created
+      tag?.dispatchEvent(new Event('error')); // The promise will reject
+
+      expect(promise).rejects.toContain(SCRIPT_URL);
+    });
+    test('will not create a tag if one already exists', async () => {
+      const script = document.createElement('script');
+      script.setAttribute('src', SCRIPT_URL);
+      document.body.appendChild(script);
+
+      await checkAndLoadScript(SCRIPT_URL); // Should resolve immediately
+      const tags = document.querySelectorAll(`script[src="${SCRIPT_URL}"]`);
+      expect(tags.length).toBe(1); // A second tag was not created
+    });
+  });
+  describe('checkAndLoadStyle', () => {
+    test('will create a new link tag and wait for it to load', async () => {
+      const promise = checkAndLoadStyle(STYLE_URL);
+      const tag = document.querySelector(
+        `link[href="${STYLE_URL}"][rel="stylesheet"]`
+      );
+
+      expect(tag).not.toBeNull(); // The tag was created
+      tag?.dispatchEvent(new Event('load')); // The promise will resolve
+
+      expect(promise).resolves.toBe(undefined);
+    });
+    test('will fail if the style fails to load', async () => {
+      const promise = checkAndLoadStyle(STYLE_URL);
+      const tag = document.querySelector(
+        `link[href="${STYLE_URL}"][rel="stylesheet"]`
+      );
+
+      expect(tag).not.toBeNull(); // The tag was created
+      tag?.dispatchEvent(new Event('error')); // The promise will reject
+
+      expect(promise).rejects.toContain(STYLE_URL);
+    });
+    test('will not create a tag if one already exists', async () => {
+      const link = document.createElement('link');
+      link.setAttribute('href', STYLE_URL);
+      link.setAttribute('rel', 'stylesheet');
+      document.body.appendChild(link);
+
+      await checkAndLoadStyle(STYLE_URL); // Should resolve immediately
+      const tags = document.querySelectorAll(`link[href="${STYLE_URL}"]`);
+      expect(tags.length).toBe(1); // A second tag was not created
+    });
+  });
+  describe("checkAndLoadFonts", () => {
+    let documentFonts : Array<any> = [];
+
+    beforeEach(() => {
+      documentFonts = [];
+      //@ts-ignore - needed to be able to stub out font API
+      document.fonts = documentFonts;
+    })
+
+    test('Will load missing fonts', async () => {
+      const promise = checkAndLoadFonts(FONTS);
+      const tag1 = document.querySelector(`link[href="font1.css"]`);
+      const tag2 = document.querySelector(`link[href="font2.css"]`);
+
+      expect(tag1).not.toBeNull();
+      expect(tag2).not.toBeNull();
+
+      tag1?.dispatchEvent(new Event("load"));
+      tag2?.dispatchEvent(new Event("load"));
+
+      expect(promise).resolves.toBe(undefined);
+    });
+
+    test('Will not load fonts that are already loaded', async () => {
+      documentFonts.push({family: "Font2"});
+
+      const promise = checkAndLoadFonts(FONTS);
+      const tag1 = document.querySelector(`link[href="font1.css"]`);
+      const tag2 = document.querySelector(`link[href="font2.css"]`);
+
+      expect(tag1).not.toBeNull();
+      expect(tag2).toBeNull();
+
+      tag1?.dispatchEvent(new Event("load"));
+
+      expect(promise).resolves.toBe(undefined);
+    })
+
+    test('Ignores quotes on the family when checking for loaded fonts', async () => {
+      documentFonts.push({family: '"Font2"'});
+
+      const promise = checkAndLoadFonts(FONTS);
+      const tag1 = document.querySelector(`link[href="font1.css"]`);
+      const tag2 = document.querySelector(`link[href="font2.css"]`);
+
+      expect(tag1).not.toBeNull();
+      expect(tag2).toBeNull();
+
+      tag1?.dispatchEvent(new Event("load"));
+
+      expect(promise).resolves.toBe(undefined);
+    })
+
+    test('Still resolves even if fonts fail to load', async () => {
+      const promise = checkAndLoadFonts(FONTS);
+      const tag1 = document.querySelector(`link[href="font1.css"]`);
+      const tag2 = document.querySelector(`link[href="font2.css"]`);
+
+      expect(tag1).not.toBeNull();
+      expect(tag2).not.toBeNull();
+
+      tag1?.dispatchEvent(new Event("error"));
+      tag2?.dispatchEvent(new Event("error"));
+
+      expect(promise).resolves.toBe(undefined);
+    });
+  });
+});