Finish new Message component, integrate into application

Also:
- New schema version 8 with video/image thumbnails, screenshots, sizes
- Upgrade messages not at current schema version when loading messages
  to show in conversation
- New MessageDetail react component
- New ConversationHeader react component

test/views/attachment_view_test.js

@@ -5,6 +5,22 @@
 'use strict';
 
 describe('AttachmentView', () => {
+  var convo, message;
+
+  before(async () => {
+    await clearDatabase();
+    convo = new Whisper.Conversation({ id: 'foo' });
+    message = convo.messageCollection.add({
+      conversationId: convo.id,
+      body: 'hello world',
+      type: 'outgoing',
+      source: '+14158675309',
+      received_at: Date.now(),
+    });
+
+    await storage.put('number_id', '+18088888888.1');
+  });
+
   describe('with arbitrary files', () => {
     it('should render a file view', () => {
       const attachment = {

test/views/message_view_test.js

@@ -1,90 +0,0 @@
-describe('MessageView', function() {
-  var convo, message;
-
-  before(async () => {
-    await clearDatabase();
-    convo = new Whisper.Conversation({ id: 'foo' });
-    message = convo.messageCollection.add({
-      conversationId: convo.id,
-      body: 'hello world',
-      type: 'outgoing',
-      source: '+14158675309',
-      received_at: Date.now(),
-    });
-
-    await storage.put('number_id', '+18088888888.1');
-  });
-
-  it('should display the message text', function() {
-    var view = new Whisper.MessageView({ model: message }).render();
-    assert.match(view.$el.text(), /hello world/);
-  });
-
-  it('should auto-update the message text', function() {
-    var view = new Whisper.MessageView({ model: message }).render();
-    message.set('body', 'goodbye world');
-    assert.match(view.$el.html(), /goodbye world/);
-  });
-
-  it('should have a nice timestamp', function() {
-    var view = new Whisper.MessageView({ model: message });
-    message.set({ sent_at: Date.now() - 5000 });
-    view.render();
-    assert.match(view.$el.html(), /now/);
-
-    message.set({ sent_at: Date.now() - 60000 });
-    view.render();
-    assert.match(view.$el.html(), /min/);
-
-    message.set({ sent_at: Date.now() - 3600000 });
-    view.render();
-    assert.match(view.$el.html(), /hour/);
-  });
-  it('should not imply messages are from the future', function() {
-    var view = new Whisper.MessageView({ model: message });
-    message.set({ sent_at: Date.now() + 60000 });
-    view.render();
-    assert.match(view.$el.html(), /now/);
-  });
-
-  it('should go away when the model is destroyed', function() {
-    var view = new Whisper.MessageView({ model: message });
-    var div = $('<div>').append(view.$el);
-    message.destroy();
-    assert.strictEqual(div.find(view.$el).length, 0);
-  });
-
-  it('allows links', function() {
-    var url = 'http://example.com';
-    message.set('body', url);
-    var view = new Whisper.MessageView({ model: message });
-    view.render();
-    var link = view.$el.find('.body a');
-    assert.strictEqual(link.length, 1);
-    assert.strictEqual(link.text(), url);
-    assert.strictEqual(link.attr('href'), url);
-  });
-
-  it('disallows xss', function() {
-    var xss = '<script>alert("pwnd")</script>';
-    message.set('body', xss);
-    var view = new Whisper.MessageView({ model: message });
-    view.render();
-    assert.include(view.$el.text(), xss); // should appear as escaped text
-    assert.strictEqual(view.$el.find('script').length, 0); // should not appear as html
-  });
-
-  it('supports emoji', function() {
-    message.set('body', 'I \u2764\uFE0F emoji!');
-    var view = new Whisper.MessageView({ model: message });
-    view.render();
-    var img = view.$el.find('.content img');
-    assert.strictEqual(img.length, 1);
-    assert.strictEqual(
-      img.attr('src'),
-      'node_modules/emoji-datasource-apple/img/apple/64/2764-fe0f.png'
-    );
-    assert.strictEqual(img.attr('title'), ':heart:');
-    assert.strictEqual(img.attr('class'), 'emoji');
-  });
-});

test/views/scroll_down_button_view_test.js

@@ -10,7 +10,6 @@ describe('ScrollDownButtonView', function() {
     var view = new Whisper.ScrollDownButtonView({ count: 1 });
     view.render();
     assert.equal(view.count, 1);
-    assert.match(view.$el.html(), /new-messages/);
     assert.match(view.$el.html(), /New message below/);
   });
 
@@ -19,7 +18,6 @@ describe('ScrollDownButtonView', function() {
     view.render();
     assert.equal(view.count, 2);
 
-    assert.match(view.$el.html(), /new-messages/);
     assert.match(view.$el.html(), /New messages below/);
   });
 
@@ -27,9 +25,9 @@ describe('ScrollDownButtonView', function() {
     var view = new Whisper.ScrollDownButtonView();
     view.render();
     assert.equal(view.count, 0);
-    assert.notMatch(view.$el.html(), /new-messages/);
+    assert.notMatch(view.$el.html(), /New message below/);
     view.increment(1);
     assert.equal(view.count, 1);
-    assert.match(view.$el.html(), /new-messages/);
+    assert.match(view.$el.html(), /New message below/);
   });
 });