Bug 872395 - [SMS] Contact search results should include "type | number"

apps/sms/index.html

@@ -193,7 +193,7 @@ <h1 id="messages-edit-mode" data-l10n-id="editMode">Edit mode</h1>
         </aside>
         <p class="name">${nameHTML}</p>
         <p>
-          ${type} ${numberHTML} ${carrier}
+          ${type} ${numberHTML}
         </p>
       </a>
       -->

apps/sms/js/thread_ui.js

@@ -1381,13 +1381,13 @@ var ThreadUI = global.ThreadUI = {
       var current = tels[i];
       var number = current.value;
       var title = details.title || number;
+      var type = current.type ? (current.type + ' |') : '';
 
       var contactLi = document.createElement('li');
       var data = {
         name: Utils.escapeHTML(title),
         number: Utils.escapeHTML(number),
-        type: current.type || '',
-        carrier: current.carrier || '',
+        type: type,
         srcAttr: details.photoURL ?
           'src="' + Utils.escapeHTML(details.photoURL) + '"' : '',
         nameHTML: '',

apps/sms/test/unit/mock_utils.js

@@ -17,6 +17,7 @@ var MockUtils = {
   typeFromMimeType: Utils.typeFromMimeType,
   escapeHTML: Utils.escapeHTML,
   escapeRegex: Utils.escapeRegex,
+  getContactDetails: Utils.getContactDetails,
   Message: {
     format: function(str) { return str; }
   }

apps/sms/test/unit/thread_ui_test.js

@@ -1340,6 +1340,56 @@ suite('thread_ui.js >', function() {
     });
   });
 
+  suite('Render Contact', function() {
+
+    test('Rendered Contact "givenName familyName"', function() {
+      var ul = document.createElement('ul');
+      var contact = new MockContact();
+      var html;
+
+      ThreadUI.renderContact(contact, 'foo', ul);
+      html = ul.firstElementChild.innerHTML;
+      assert.ok(html.contains('Pepito Grillo'));
+    });
+
+    test('Rendered Contact highlighted "givenName familyName"', function() {
+      var ul = document.createElement('ul');
+      var contact = new MockContact();
+      var html;
+
+      ThreadUI.renderContact(contact, 'Pepito Grillo', ul);
+      html = ul.firstElementChild.innerHTML;
+
+      assert.ok(
+        html.contains('<span class="highlight">Pepito</span>')
+      );
+      assert.ok(
+        html.contains('<span class="highlight">Grillo</span>')
+      );
+    });
+
+    test('Rendered Contact "type | number"', function() {
+      var ul = document.createElement('ul');
+      var contact = new MockContact();
+      var html;
+
+      ThreadUI.renderContact(contact, 'foo', ul);
+      html = ul.firstElementChild.innerHTML;
+      assert.ok(html.contains('Mobile | +346578888888'));
+    });
+
+    test('Rendered Contact highlighted "type | number"', function() {
+      var ul = document.createElement('ul');
+      var contact = new MockContact();
+      var html;
+
+      ThreadUI.renderContact(contact, '346578888888', ul);
+      html = ul.firstElementChild.innerHTML;
+      assert.ok(
+        html.contains('Mobile | +<span class="highlight">346578888888</span>')
+      );
+    });
+  });
 
   suite('Header Actions', function() {
     setup(function() {