Add basic error message (part of #48)

This commit is contained in:
Roman Hotsiy 2016-05-20 19:31:30 +03:00
parent 1d0579f114
commit 9c5d002eda
4 changed files with 46 additions and 17 deletions

View File

@ -63,7 +63,7 @@ module.exports = function (config) {
proxies: { proxies: {
'/tests/': '/base/tests/', '/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/', '/lib/': '/base/lib/',
'/jspm_packages/': '/base/jspm_packages/', '/jspm_packages/': '/base/jspm_packages/',
'/node_modules/': '/base/node_modules/', '/node_modules/': '/base/node_modules/',

View File

@ -48,3 +48,20 @@ redoc.loading:after {
redoc.loading-remove:before, redoc.loading-remove:after { redoc.loading-remove:before, redoc.loading-remove:after {
opacity: 0; 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;
}

View File

@ -15,7 +15,7 @@ import SchemaManager from '../../utils/SchemaManager';
import { OptionsService, RedocEventsService } from '../../services/index'; import { OptionsService, RedocEventsService } from '../../services/index';
import detectScollParent from 'scrollparent'; import detectScollParent from 'scrollparent';
import './redoc-loading-styles.css!css'; import './redoc-initial-styles.css!css';
var dom = new BrowserDomAdapter(); var dom = new BrowserDomAdapter();
var _modeLocked = false; var _modeLocked = false;
@ -86,17 +86,15 @@ export class Redoc extends BaseComponent {
} }
return bootstrap(Redoc, providers); return bootstrap(Redoc, providers);
}) })
.then( .then(appRef => {
(appRef) => {
Redoc.hideLoadingAnimation(); Redoc.hideLoadingAnimation();
Redoc.appRef = appRef; Redoc.appRef = appRef;
console.log('ReDoc bootstrapped!'); console.log('ReDoc bootstrapped!');
}, }, err => {
error => { console.log(err);
console.log(error); Redoc.hideLoadingAnimation();
throw error; Redoc.displayError(err);
} });
);
} }
static autoInit() { 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() { static destroy() {
let el = dom.query('redoc'); let el = dom.query('redoc');
let elClone; let elClone;

View File

@ -72,12 +72,15 @@ describe('Redoc components', () => {
res.should.be.instanceof(Promise); 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(); let res = Redoc.init();
res.then(() => { done.fail('Should not been called'); }, () => { return res.then(() => {
done(); expect(Redoc.hideLoadingAnimation).toHaveBeenCalled();
}); expect(Redoc.displayError).toHaveBeenCalled();
}); });
}));
//skip because of PhantomJS crashes on this testcase //skip because of PhantomJS crashes on this testcase
xit('should init redoc', (done) => { xit('should init redoc', (done) => {