Add basic error message (part of #48)

karma.conf.js

@@ -63,7 +63,7 @@ module.exports = function (config) {
 
         proxies: {
             '/tests/': '/base/tests/',
-            '/lib/components/Redoc/redoc-loading-styles.css': '/base/.tmp/lib/components/Redoc/redoc-loading-styles.css',
+            '/lib/components/Redoc/redoc-initial-styles.css': '/base/.tmp/lib/components/Redoc/redoc-initial-styles.css',
             '/lib/': '/base/lib/',
             '/jspm_packages/': '/base/jspm_packages/',
             '/node_modules/': '/base/node_modules/',

lib/components/Redoc/redoc-initial-styles.scss

@@ -48,3 +48,20 @@ redoc.loading:after {
 redoc.loading-remove:before, redoc.loading-remove:after {
   opacity: 0;
 }
+
+.redoc-error {
+  padding: 20px;
+  text-align: center;
+  color: #cc0000;
+
+  > h2 {
+    color: #cc0000;
+    font-size: 40px;
+  }
+}
+
+.redoc-error-details {
+  max-width: 750px;
+  margin: 0 auto;
+  font-size: 18px;
+}

lib/components/Redoc/redoc.js

@@ -15,7 +15,7 @@ import SchemaManager from '../../utils/SchemaManager';
 import { OptionsService, RedocEventsService } from '../../services/index';
 
 import detectScollParent from 'scrollparent';
-import './redoc-loading-styles.css!css';
+import './redoc-initial-styles.css!css';
 
 var dom = new BrowserDomAdapter();
 var _modeLocked = false;
@@ -86,17 +86,15 @@ export class Redoc extends BaseComponent {
       }
       return bootstrap(Redoc, providers);
     })
-    .then(
-      (appRef) => {
-        Redoc.hideLoadingAnimation();
-        Redoc.appRef = appRef;
-        console.log('ReDoc bootstrapped!');
-      },
-      error => {
-        console.log(error);
-        throw error;
-      }
-    );
+    .then(appRef => {
+      Redoc.hideLoadingAnimation();
+      Redoc.appRef = appRef;
+      console.log('ReDoc bootstrapped!');
+    }, err => {
+      console.log(err);
+      Redoc.hideLoadingAnimation();
+      Redoc.displayError(err);
+    });
   }
 
   static autoInit() {
@@ -109,6 +107,17 @@ export class Redoc extends BaseComponent {
     }
   }
 
+  static displayError(err) {
+    console.log(err);
+    let redocEl = dom.query('redoc');
+    let heading = 'Oops... ReDoc failed to render this spec';
+    let details = err.message;
+    let erroHtml = `<div class="redoc-error">
+      <h1>${heading}</h1>
+      <div class='redoc-error-details'>${details}</div>`;
+    redocEl.innerHTML = erroHtml;
+  }
+
   static destroy() {
     let el = dom.query('redoc');
     let elClone;

lib/components/Redoc/redoc.spec.js

@@ -72,12 +72,15 @@ describe('Redoc components', () => {
       res.should.be.instanceof(Promise);
     });
 
-    it('should reject promise for not specifed url', (done) => {
+    it('should hide loading animation and display message in case of error', async(() => {
+      spyOn(Redoc, 'hideLoadingAnimation').and.callThrough();
+      spyOn(Redoc, 'displayError').and.callThrough();
       let res = Redoc.init();
-      res.then(() => { done.fail('Should not been called'); }, () => {
-        done();
+      return res.then(() => {
+        expect(Redoc.hideLoadingAnimation).toHaveBeenCalled();
+        expect(Redoc.displayError).toHaveBeenCalled();
       });
-    });
+    }));
 
     //skip because of PhantomJS crashes on this testcase
     xit('should init redoc', (done) => {