fix(news): display no news message on api unavailability

Display a message that no news are available if the api endpoint is not
available instead of failing the navigation and breaking the complete
page. Important for recents news on index page and news list and for
selected news.

Add test for news service.

---

 src/services/news/news-service.js             |   6 +-
 src/view-models/contents/index.js             |  10 +-
 src/view-models/news/index.js                 |   7 +-
 src/view-models/news/view.js                  |   2 +
 src/views/news/view.html                      |   8 +-
 test/unit/configuration/app.spec.js           | 132 -------------------
 test/unit/configuration/router-config.spec.js | 132 +++++++++++++++++++
 test/unit/modules/news.spec.js                |   2 +-
 test/unit/services/news.spec.js               |  83 ++++++++++++
 9 files changed, 242 insertions(+), 140 deletions(-)

Author: MarcScheib

src/services/news/news-service.js

@@ -9,11 +9,13 @@ export class NewsService {
 
   getRecent() {
     return this.httpClient.fetch('/news')
-      .then(response => response.json());
+      .then(response => response.json())
+      .catch(error => Promise.reject(error));
   }
 
   get(id) {
     return this.httpClient.fetch('/news/' + id)
-      .then(response => response.json());
+      .then(response => response.json())
+      .catch(error => Promise.reject(error));
   }
 }

src/view-models/contents/index.js

@@ -3,14 +3,18 @@ import {NewsService} from '../../services/news/news-service';
 
 @inject(NewsService)
 export class Index {
-  news = [];
-
   constructor(newsService) {
     this.newsService = newsService;
+    this.news = [];
   }
 
   activate() {
     return this.newsService.getRecent()
-      .then(news => this.news = news);
+      .then(news => {
+        this.news = news;
+      })
+      .catch(() => {
+        this.news = [];
+      });
   }
 }

src/view-models/news/index.js

@@ -10,6 +10,11 @@ export class Index {
 
   activate() {
     return this.newsService.getRecent()
-      .then(news => this.news = news);
+      .then(news => {
+        this.news = news;
+      })
+      .catch(() => {
+        this.news = [];
+      });
   }
 }

src/view-models/news/view.js

@@ -12,6 +12,8 @@ export class View {
       .then(news => {
         this.news = news;
         routeConfig.navModel.setTitle(news.title);
+      })
+      .catch(() => {
       });
   }
 }

src/views/news/view.html

@@ -2,7 +2,7 @@
   <section class="au-animate">
     <div class="row">
       <div class="col-lg-12">
-        <div class="card card-default card-block">
+        <div class="card card-default card-block" if.bind="news">
           <h4 class="card-title">${news.title}<br>
             <small>on
               <time>${news.created_at}</time>
@@ -14,6 +14,12 @@ <h4 class="card-title">${news.title}<br>
             posted by <a href="#/profiles/view/${news.user_id}">${news.user.username}</a>
           </p>
         </div>
+
+        <div class="card card-default card-block" if.bind="!news">
+          <p class="card-text">
+            The selected news entry is not available.
+          </p>
+        </div>
       </div>
     </div>
   </section>

test/unit/configuration/app.spec.js test/unit/configuration/router-config.spec.js

@@ -41,7 +41,7 @@ describe('the News Index module', () => {
 });
 
 describe('the News View module', () => {
-  it('sets fetch response to news', (done) => {
+  it('sets fetch response to selected news', (done) => {
     var newsService = new NewsServiceStub();
     var sut = new View(newsService);
 

test/unit/modules/news.spec.js

@@ -0,0 +1,83 @@
+import {NewsService} from '../../../src/services/news/news-service';
+
+var mockedRequest = {
+  json: function() {
+    return {news: 'test'};
+  }
+};
+
+class HttpServiceStub {
+  reject = false;
+
+  fetch(resource) {
+    this.resource = resource;
+
+    return new Promise((resolve, reject) => {
+      if (this.reject == false) {
+        resolve(mockedRequest);
+      } else {
+        reject();
+      }
+    });
+  }
+}
+
+describe('the News service', () => {
+  var mockedHttpService;
+  var sut;
+
+  beforeEach(() => {
+    mockedHttpService = new HttpServiceStub();
+    sut = new NewsService(mockedHttpService);
+  });
+
+  it('contains a http service property', () => {
+    expect(sut.httpClient).toBeDefined();
+  });
+
+  it('returns recent news', (done) => {
+    mockedHttpService.reject = false;
+    sut.getRecent()
+      .then(resp => {
+        expect(mockedHttpService.resource).toEqual('/news');
+        expect(resp).toEqual({news: 'test'});
+        done();
+      })
+      .catch(result => {
+        expect(result).not.toBe(result);
+        done();
+      });
+  });
+
+  it('returns the selected news', (done) => {
+    mockedHttpService.reject = false;
+    sut.get(1)
+      .then(resp => {
+        expect(mockedHttpService.resource).toEqual('/news/1');
+        expect(resp).toEqual({news: 'test'});
+        done();
+      })
+      .catch(result => {
+        expect(result).not.toBe(result);
+        done();
+      });
+  });
+
+  it('rejects recent news on failure', (done) => {
+    mockedHttpService.reject = true;
+    sut.getRecent()
+      .catch(result => {
+        expect(mockedHttpService.resource).toEqual('/news');
+        done();
+      });
+  });
+
+  it('rejects selected news on failure', (done) => {
+    mockedHttpService.reject = true;
+    sut.get(1)
+      .catch(result => {
+        expect(mockedHttpService.resource).toEqual('/news/1');
+        done();
+      });
+  });
+});