From 3536d91c9cf7cc4e11664c25778ecaa656aadb37 Mon Sep 17 00:00:00 2001
From: Austin Burdine <acburdine@gmail.com>
Date: Fri, 3 Mar 2017 10:13:22 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20make=20lazyLoader=20return=20a?=
 =?UTF-8?q?=20promise=20for=20loadStyle=20method?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

no issue
- cleans up the interface to maintain consistency between loadScript and
loadStyle
- update gh-cm-editor component to await result of loadStyle
---
 ghost/admin/app/components/gh-cm-editor.js       |  8 ++++++--
 ghost/admin/app/services/lazy-loader.js          | 16 ++++++++++------
 .../integration/services/lazy-loader-test.js     | 15 +++++++--------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/ghost/admin/app/components/gh-cm-editor.js b/ghost/admin/app/components/gh-cm-editor.js
index cd01b37de8..d38c0e04d7 100644
--- a/ghost/admin/app/components/gh-cm-editor.js
+++ b/ghost/admin/app/components/gh-cm-editor.js
@@ -2,6 +2,7 @@
 import Component from 'ember-component';
 import run, {bind, scheduleOnce} from 'ember-runloop';
 import injectService from 'ember-service/inject';
+import RSVP from 'rsvp';
 
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
 import {InvokeActionMixin} from 'ember-invoke-action';
@@ -25,9 +26,12 @@ const CmEditorComponent =  Component.extend(InvokeActionMixin, {
     didInsertElement() {
         this._super(...arguments);
 
-        this.get('lazyLoader').loadStyle('codemirror', 'assets/codemirror/codemirror.css');
+        let loader = this.get('lazyLoader');
 
-        this.get('lazyLoader').loadScript('codemirror', 'assets/codemirror/codemirror.js').then(() => {
+        RSVP.all([
+            loader.loadStyle('codemirror', 'assets/codemirror/codemirror.css'),
+            loader.loadScript('codemirror', 'assets/codemirror/codemirror.js')
+        ]).then(() => {
             scheduleOnce('afterRender', this, function () {
                 this._initCodeMirror();
             });
diff --git a/ghost/admin/app/services/lazy-loader.js b/ghost/admin/app/services/lazy-loader.js
index 7431a3e6d1..b853296273 100644
--- a/ghost/admin/app/services/lazy-loader.js
+++ b/ghost/admin/app/services/lazy-loader.js
@@ -40,14 +40,18 @@ export default Service.extend({
     },
 
     loadStyle(key, url) {
-        if (this.get('testing')) {
+        if (this.get('testing') || $(`#${key}-styles`).length) {
             return RSVP.resolve();
         }
 
-        if (!$(`#${key}-styles`).length) {
-            let $style = $(`<link rel="stylesheet" id="${key}-styles" />`);
-            $style.attr('href', `${this.get('ghostPaths.adminRoot')}${url}`);
-            $('head').append($style);
-        }
+        return new RSVP.Promise((resolve, reject) => {
+            let link = document.createElement('link');
+            link.id = `${key}-styles`;
+            link.rel = 'stylesheet';
+            link.href = `${this.get('ghostPaths.adminRoot')}${url}`;
+            link.onload = resolve;
+            link.onerror = reject;
+            $('head').append($(link));
+        });
     }
 });
diff --git a/ghost/admin/tests/integration/services/lazy-loader-test.js b/ghost/admin/tests/integration/services/lazy-loader-test.js
index 46a2d3d839..d4009f6edc 100644
--- a/ghost/admin/tests/integration/services/lazy-loader-test.js
+++ b/ghost/admin/tests/integration/services/lazy-loader-test.js
@@ -20,7 +20,7 @@ describe('Integration: Service: lazy-loader', function() {
         server.shutdown();
     });
 
-    it('loads a script correctly and only once', function (done) {
+    it('loads a script correctly and only once', function () {
         let subject = this.subject({
             ghostPaths,
             scriptPromises: {},
@@ -33,7 +33,7 @@ describe('Integration: Service: lazy-loader', function() {
             return [200, {'Content-Type': 'text/javascript'}, 'window.testLoadScript = \'testvalue\''];
         });
 
-        subject.loadScript('test-script', 'test.js').then(() => {
+        return subject.loadScript('test-script', 'test.js').then(() => {
             expect(subject.get('scriptPromises.test-script')).to.exist;
             expect(window.testLoadScript).to.equal('testvalue');
             expect(server.handlers[0].numberOfCalls).to.equal(1);
@@ -41,8 +41,6 @@ describe('Integration: Service: lazy-loader', function() {
             return subject.loadScript('test-script', 'test.js');
         }).then(() => {
             expect(server.handlers[0].numberOfCalls).to.equal(1);
-
-            done();
         });
     });
 
@@ -52,9 +50,10 @@ describe('Integration: Service: lazy-loader', function() {
             testing: false
         });
 
-        subject.loadStyle('testing', 'style.css');
-
-        expect($('#testing-styles').length).to.equal(1);
-        expect($('#testing-styles').attr('href')).to.equal('/assets/style.css');
+        return subject.loadStyle('testing', 'style.css').catch(() => {
+            // we add a catch handler here because `/assets/style.css` doesn't exist
+            expect($('#testing-styles').length).to.equal(1);
+            expect($('#testing-styles').attr('href')).to.equal('/assets/style.css');
+        });
     });
 });