🎨 make lazyLoader return a promise for loadStyle method

no issue
- cleans up the interface to maintain consistency between loadScript and
loadStyle
- update gh-cm-editor component to await result of loadStyle

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();
             });

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));
+        });
     }
 });

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,16 +33,14 @@ 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);
 
             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');
+        });
     });
 });