From 9c5d002eda5f172a999be3b116c0e3095fd499e4 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Fri, 20 May 2016 19:31:30 +0300
Subject: [PATCH] Add basic error message (part of #48)

---
 karma.conf.js                                 |  2 +-
 ...-styles.scss => redoc-initial-styles.scss} | 17 ++++++++++
 lib/components/Redoc/redoc.js                 | 33 ++++++++++++-------
 lib/components/Redoc/redoc.spec.js            | 11 ++++---
 4 files changed, 46 insertions(+), 17 deletions(-)
 rename lib/components/Redoc/{redoc-loading-styles.scss => redoc-initial-styles.scss} (92%)

diff --git a/karma.conf.js b/karma.conf.js
index a9dc7af0..d87d3cb3 100644
--- a/karma.conf.js
+++ b/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/',
diff --git a/lib/components/Redoc/redoc-loading-styles.scss b/lib/components/Redoc/redoc-initial-styles.scss
similarity index 92%
rename from lib/components/Redoc/redoc-loading-styles.scss
rename to lib/components/Redoc/redoc-initial-styles.scss
index a9da11a6..008b946d 100644
--- a/lib/components/Redoc/redoc-loading-styles.scss
+++ b/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;
+}
diff --git a/lib/components/Redoc/redoc.js b/lib/components/Redoc/redoc.js
index b7c43cb4..b30de6f7 100644
--- a/lib/components/Redoc/redoc.js
+++ b/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;
diff --git a/lib/components/Redoc/redoc.spec.js b/lib/components/Redoc/redoc.spec.js
index d4cd8289..12723b6f 100644
--- a/lib/components/Redoc/redoc.spec.js
+++ b/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) => {