Add avatar fallback for typeahead suggestions

app/assets/javascripts/app/views.js

@@ -55,8 +55,7 @@ app.views.Base = Backbone.View.extend({
       .html(this.template(presenter))
       .attr("data-template", _.last(this.templateName.split("/")));
 
-    // add avatar fallback if it can't be loaded
-    this.$el.find(this.avatars.selector).on("error", this.avatars.fallback);
+    this.setupAvatarFallback(this.$el);
 
     // add placeholder support for old browsers
     this.$("input, textarea").placeholder();
@@ -154,6 +153,10 @@ app.views.Base = Backbone.View.extend({
       $(this).attr("src", ImagePaths.get("user/default.png"));
     },
     selector: "img.avatar"
+  },
+
+  setupAvatarFallback: function(el) {
+    el.find(this.avatars.selector).on("error", this.avatars.fallback);
   }
 });
 

app/assets/javascripts/app/views/search_base_view.js

@@ -7,6 +7,7 @@ app.views.SearchBase = app.views.Base.extend({
     if(options.customSearch) { this.setupCustomSearch(); }
     this.setupTypeahead();
     if(options.autoselect) { this.setupAutoselect(); }
+    this.setupTypeaheadAvatarFallback();
   },
 
   bloodhoundTokenizer: function(str) {
@@ -110,6 +111,12 @@ app.views.SearchBase = app.views.Base.extend({
     });
   },
 
+  setupTypeaheadAvatarFallback: function() {
+    this.typeaheadInput.on("typeahead:render", function() {
+      this.setupAvatarFallback(this.$el);
+    }.bind(this));
+  },
+
   ignorePersonForSuggestions: function(person) {
     if(person.handle) { this.ignoreDiasporaIds.push(person.handle); }
   }

spec/javascripts/app/views/search_base_view_spec.js

@@ -57,6 +57,12 @@ describe("app.views.SearchBase", function() {
       this.view = new app.views.SearchBase({el: "#search_people_form", typeaheadInput: $("#q"), autoselect: true});
       expect(app.views.SearchBase.prototype.setupAutoselect).toHaveBeenCalled();
     });
+
+    it("calls setupTypeaheadAvatarFallback", function() {
+      spyOn(app.views.SearchBase.prototype, "setupTypeaheadAvatarFallback");
+      this.view = new app.views.SearchBase({el: "#search_people_form", typeaheadInput: $("#q")});
+      expect(app.views.SearchBase.prototype.setupTypeaheadAvatarFallback).toHaveBeenCalled();
+    });
   });
 
   describe("bloodhoundTokenizer", function() {
@@ -261,6 +267,19 @@ describe("app.views.SearchBase", function() {
     });
   });
 
+  describe("setupTypeaheadAvatarFallback", function() {
+    beforeEach(function() {
+      this.view = new app.views.SearchBase({el: "#search_people_form", typeaheadInput: $("#q")});
+    });
+
+    it("calls setupAvatarFallback when showing the results", function() {
+      spyOn(this.view, "setupAvatarFallback");
+      this.view.setupTypeaheadAvatarFallback();
+      this.search(this.view, "user");
+      expect(this.view.setupAvatarFallback).toHaveBeenCalled();
+    });
+  });
+
   describe("ignorePersonForSuggestions", function() {
     beforeEach(function() {
       this.view = new app.views.SearchBase({el: "#search_people_form", typeaheadInput: $("#q")});

spec/javascripts/app/views_spec.js

@@ -163,5 +163,11 @@ describe("app.views.Base", function(){
       expect(window.autosize).toHaveBeenCalled();
       expect(window.autosize.calls.mostRecent().args[0].is("textarea")).toBe(true);
     });
+
+    it("calls setupAvatarFallback", function() {
+      spyOn(this.view, "setupAvatarFallback");
+      this.view.renderTemplate();
+      expect(this.view.setupAvatarFallback).toHaveBeenCalled();
+    });
   });
 });