feat(core): CHECKOUT-2739 Add ScriptLoader responsible for loading JS files asynchronously

Author: davidchin

src/create-script-loader.ts

@@ -0,0 +1,5 @@
+import ScriptLoader from './script-loader';
+
+export default function createScriptLoader(): ScriptLoader {
+    return new ScriptLoader(document);
+}

src/index.ts

@@ -0,0 +1,2 @@
+export { default as ScriptLoader } from './script-loader';
+export { default as createScriptLoader } from './create-script-loader';

src/script-loader.spec.ts

@@ -0,0 +1,46 @@
+import ScriptLoader from './script-loader';
+
+describe('ScriptLoader', () => {
+    let loader: ScriptLoader;
+    let script: HTMLScriptElement;
+
+    beforeEach(() => {
+        script = document.createElement('script');
+
+        jest.spyOn(document, 'createElement').mockImplementation(() => script);
+        jest.spyOn(document.body, 'appendChild').mockImplementation((element) =>
+            element.onreadystatechange(new Event('readystatechange'))
+        );
+
+        loader = new ScriptLoader(document);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it('attaches script tag to document', async () => {
+        await loader.loadScript('https://code.jquery.com/jquery-3.2.1.min.js');
+
+        expect(document.body.appendChild).toHaveBeenCalledWith(script);
+        expect(script.src).toEqual('https://code.jquery.com/jquery-3.2.1.min.js');
+    });
+
+    it('resolves promise if script is loaded', async () => {
+        const output = await loader.loadScript('https://code.jquery.com/jquery-3.2.1.min.js');
+
+        expect(output).toBeInstanceOf(Event);
+    });
+
+    it('rejects promise if script is not loaded', async () => {
+        jest.spyOn(document.body, 'appendChild').mockImplementation(
+            (element) => element.onerror(new Event('error'))
+        );
+
+        try {
+            await loader.loadScript('https://code.jquery.com/jquery-3.2.1.min.js');
+        } catch (output) {
+            expect(output).toBeInstanceOf(Event);
+        }
+    });
+});

src/script-loader.ts

@@ -0,0 +1,24 @@
+export default class ScriptLoader {
+    constructor(
+        private _document: Document
+    ) {}
+
+    loadScript(src: string): Promise<Event> {
+        return new Promise((resolve, reject) => {
+            const script = this._document.createElement('script') as LegacyHTMLScriptElement;
+
+            script.onload = (event) => resolve(event);
+            script.onreadystatechange = (event) => resolve(event);
+            script.onerror = (event) => reject(event);
+            script.async = true;
+            script.src = src;
+
+            this._document.body.appendChild(script);
+        });
+    }
+}
+
+interface LegacyHTMLScriptElement extends HTMLScriptElement {
+    // `onreadystatechange` is needed to support legacy IE
+    onreadystatechange: (this: HTMLElement, event: Event) => any;
+}