Add error-formatter component to parse and display adapter errors

app/components/error-formatter.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['error-formatter'],
+  messages: Ember.computed('error.errors', function() {
+    return (this.get('error.errors') || []).map((e) => {
+      return `${e.title}: ${e.detail}`;
+    });
+  }),
+  defaultMessage: 'An unexpected error has occured'
+});

app/templates/components/error-formatter.hbs

@@ -0,0 +1,5 @@
+{{#each messages as |message|}}
+  <p class="error">{{message}}</p>
+{{else}}
+  <p class="error">{{defaultMessage}}</p>
+{{/each}}

app/templates/components/signup-form.hbs

@@ -30,6 +30,6 @@
     <input name="signup" type="submit" value='Sign up' {{action 'signUp'}} />
   </div>
   {{#if error}}
-    <div class="error">{{error.message}}</div>
+    {{error-formatter error=error}}
   {{/if}}
-</form>
+</form>

app/templates/project/posts/new.hbs

@@ -1,4 +1,4 @@
 {{post-new-form post=post savePost='savePost'}}
 {{#if error}}
-  <div class="error">{{error.message}}</div>
-{{/if}}
+  {{error-formatter error=error}}
+{{/if}}

app/templates/project/posts/post.hbs

@@ -4,8 +4,8 @@
   {{post-comment-list comments=comments}}
   {{create-comment-form comment=newComment saveComment='saveComment'}}
   {{#if error}}
-    <div class="error">{{error.message}}</div>
+    {{error-formatter error=error}}
   {{/if}}
 </div>
 <div class="post-sidebar">
-</div>
+</div>

tests/acceptance/navigation-test.js

@@ -38,7 +38,7 @@ test("Logged out, can sign in", function(assert) {
   });
 });
 
-test("Logged in, from user menu can visit profile", function(assert) {
+test('Logged in, from user menu can visit profile', function(assert) {
   assert.expect(2);
 
   let user = server.create('user');
@@ -49,20 +49,20 @@ test("Logged in, from user menu can visit profile", function(assert) {
   sluggedRoute.save();
 
   visit('/');
+
   andThen(function() {
     click('.user-menu-select');
   });
   andThen(function() {
-    var url = "/" + user.username;
-    assert.equal(find('.user-dropdown .slugged-route').attr('href'), url, "Menu links to the user's profile");
+    assert.equal(find('.user-dropdown .slugged-route').attr('href'), `/${user.username}`, 'Menu links to the profile settings');
     click('.user-dropdown .slugged-route');
   });
   andThen(function() {
-    assert.equal(find('.user-details').length, 1, "Page contains user details");
+    assert.equal(currentURL(), `/${user.username}`, 'Link took us to user slugged route');
   });
 });
 
-test("Logged in, from user menu can visit profile settings", function(assert) {
+test('Logged in, from user menu can visit profile settings', function(assert) {
   assert.expect(2);
 
   let user = server.create('user');
@@ -77,7 +77,7 @@ test("Logged in, from user menu can visit profile settings", function(assert) {
     click('.user-dropdown .profile');
   });
   andThen(function() {
-    assert.equal(find('.user-settings-form').length, 1, "Page contains user settings form");
+    assert.equal(currentURL(), '/settings/profile', 'Link took us to profile settings');
   });
 });
 

tests/acceptance/post-comments-test.js

@@ -262,7 +262,7 @@ test('When comment creation fails due to non-validation issues, the error is dis
 
   andThen(() => {
     assert.equal(find('.error').length, 1);
-    assert.equal(find('.error').text(), 'Adapter operation failed');
+    assert.equal(find('.error').text().trim(), 'An unknown error: Something happened', 'The  error is rendered');
   });
 });
 

tests/acceptance/post-creation-test.js

@@ -325,6 +325,6 @@ test('When post creation fails due to non-validation issues, the error is displa
 
   andThen(() => {
     assert.equal(find('.error').length, 1);
-    assert.equal(find('.error').text(), 'Adapter operation failed');
+    assert.equal(find('.error').text().trim(), 'An unknown error: Something happened', 'The error is messaged');
   });
 });

tests/acceptance/signup-test.js

@@ -196,6 +196,6 @@ test('Failed signup due to other issues displays error from the response', (asse
 
   andThen(() => {
     assert.equal(find('.error').length, 1);
-    assert.equal(find('.error').text(), 'Adapter operation failed');
+    assert.equal(find('.error').text().trim(), 'An unknown error: Something happened', 'There is an error message');
   });
 });

tests/integration/components/error-formatter-test.js

@@ -0,0 +1,40 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import Ember from 'ember';
+
+moduleForComponent('error-formatter', 'Integration | Component | error formatter', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(1);
+
+  this.render(hbs`{{error-formatter}}`);
+  assert.equal(this.$('.error-formatter').length, 1, "The component's element renders");
+});
+
+let mockResponseWithMultipleErrors = Ember.Object.create({
+  errors: [
+    { title: 'First', detail: 'error' },
+    { title: 'Second', detail: 'error' },
+  ]
+});
+
+test('it displays a message for each error in the response', function (assert) {
+  assert.expect(3);
+
+  this.set('error', mockResponseWithMultipleErrors);
+  this.render(hbs`{{error-formatter error=error}}`);
+  assert.equal(this.$('.error-formatter .error').length, 2, 'Each error message is rendered');
+  assert.equal(this.$('.error-formatter .error:eq(0)').text().trim(), 'First: error', 'First message is rendered');
+  assert.equal(this.$('.error-formatter .error:eq(1)').text().trim(), 'Second: error', 'Second message is rendered');
+});
+
+test('it displays a default message if there are no errors in the response', function (assert) {
+  assert.expect(2);
+
+  this.set('error', {});
+  this.render(hbs`{{error-formatter error=error}}`);
+  assert.equal(this.$('.error-formatter .error').length, 1, 'Each error message is rendered');
+  assert.equal(this.$('.error-formatter .error:eq(0)').text().trim(), 'An unexpected error has occured', 'Default message is rendered');
+});