feat(common): CHECKOUT-4400 Add StylesheetLoader for loading stylesheets

Author: davidchin

src/create-stylesheet-loader.ts

@@ -0,0 +1,5 @@
+import StylesheetLoader from './stylesheet-loader';
+
+export default function createStylesheetLoader(): StylesheetLoader {
+    return new StylesheetLoader();
+}

src/get-stylesheet-loader.spec.ts

@@ -0,0 +1,15 @@
+import getStylesheetLoader from './get-stylesheet-loader';
+import StylesheetLoader from './stylesheet-loader';
+
+describe('getStylesheetLoader()', () => {
+    it('returns same `StylesheetLoader` instance', () => {
+        const loader = getStylesheetLoader();
+        const loader2 = getStylesheetLoader();
+
+        expect(loader)
+            .toBe(loader2);
+
+        expect(loader)
+            .toBeInstanceOf(StylesheetLoader);
+    });
+});

src/get-stylesheet-loader.ts

@@ -0,0 +1,12 @@
+import createStylesheetLoader from './create-stylesheet-loader';
+import StylesheetLoader from './stylesheet-loader';
+
+let instance: StylesheetLoader;
+
+export default function getStylesheetLoader(): StylesheetLoader {
+    if (!instance) {
+        instance = createStylesheetLoader();
+    }
+
+    return instance;
+}

src/index.ts

@@ -1,3 +1,7 @@
 export { default as ScriptLoader } from './script-loader';
 export { default as createScriptLoader } from './create-script-loader';
 export { default as getScriptLoader } from './get-script-loader';
+
+export { default as StylesheetLoader } from './stylesheet-loader';
+export { default as createStylesheetLoader } from './create-stylesheet-loader';
+export { default as getStylesheetLoader } from './get-stylesheet-loader';

src/stylesheet-loader.spec.ts

@@ -0,0 +1,86 @@
+import StylesheetLoader from './stylesheet-loader';
+
+describe('StylesheetLoader', () => {
+    let loader: StylesheetLoader;
+    let stylesheet: HTMLLinkElement;
+
+    beforeEach(() => {
+        stylesheet = document.createElement('link');
+
+        jest.spyOn(document, 'createElement')
+            .mockImplementation(() => stylesheet);
+
+        loader = new StylesheetLoader();
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    describe('when stylesheet loads successfully', () => {
+        beforeEach(() => {
+            jest.spyOn(document.head, 'appendChild')
+                .mockImplementation(element =>
+                    setTimeout(() => element.onload(new Event('load')), 0)
+                );
+        });
+
+        it('attaches link tag to document', async () => {
+            await loader.loadStylesheet('https://foo.bar/hello-world.css');
+
+            expect(document.head.appendChild)
+                .toHaveBeenCalledWith(stylesheet);
+
+            expect(stylesheet.href)
+                .toEqual('https://foo.bar/hello-world.css');
+        });
+
+        it('resolves promise if stylesheet is loaded', async () => {
+            const output = await loader.loadStylesheet('https://foo.bar/hello-world.css');
+
+            expect(output)
+                .toBeInstanceOf(Event);
+        });
+
+        it('does not load same stylesheet twice', async () => {
+            await loader.loadStylesheet('https://foo.bar/hello-world.css');
+            await loader.loadStylesheet('https://foo.bar/hello-world.css');
+
+            expect(document.head.appendChild)
+                .toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe('when stylesheet fails to load', () => {
+        beforeEach(() => {
+            jest.spyOn(document.head, 'appendChild')
+                .mockImplementation(element =>
+                    setTimeout(() => element.onerror(new Event('error')), 0)
+                );
+        });
+
+        it('rejects promise if stylesheet is not loaded', async () => {
+            await loader.loadStylesheet('https://foo.bar/hello-world.css')
+                .catch(error =>
+                    expect(error)
+                        .toBeTruthy()
+                );
+        });
+
+        it('loads the script again', async () => {
+            const errorHandler = jest.fn();
+
+            await loader.loadStylesheet('https://foo.bar/hello-world.css')
+                .catch(errorHandler);
+
+            await loader.loadStylesheet('https://foo.bar/hello-world.css')
+                .catch(errorHandler);
+
+            expect(document.head.appendChild)
+                .toHaveBeenCalledTimes(2);
+
+            expect(errorHandler)
+                .toHaveBeenCalledTimes(2);
+        });
+    });
+});

src/stylesheet-loader.ts

@@ -0,0 +1,36 @@
+export interface LoadStylesheetOptions {
+    prepend: boolean;
+}
+
+export default class StylesheetLoader {
+    private _stylesheets: { [key: string]: Promise<Event> } = {};
+
+    loadStylesheet(src: string, options?: LoadStylesheetOptions): Promise<Event> {
+        if (!this._stylesheets[src]) {
+            this._stylesheets[src] = new Promise((resolve, reject) => {
+                const stylesheet = document.createElement('link');
+                const { prepend = false } = options || {};
+
+                stylesheet.onload = event => resolve(event);
+                stylesheet.onerror = event => {
+                    delete this._stylesheets[src];
+                    reject(event);
+                };
+                stylesheet.rel = 'stylesheet';
+                stylesheet.href = src;
+
+                if (prepend && document.head.children[0]) {
+                    document.head.insertBefore(stylesheet, document.head.children[0]);
+                } else {
+                    document.head.appendChild(stylesheet);
+                }
+            });
+        }
+
+        return this._stylesheets[src];
+    }
+
+    loadStylesheets(urls: string[], options?: LoadStylesheetOptions): Promise<Event[]> {
+        return Promise.all(urls.map(url => this.loadStylesheet(url, options)));
+    }
+}