Merge pull request #552 from matrix-org/rav/event_tile_withmatrixclient

Update EventTile to use WithMatrixClient instead of MatrixClientPeg

src/components/views/rooms/EventTile.js

@@ -21,8 +21,8 @@ var classNames = require("classnames");
 var Modal = require('../../../Modal');
 
 var sdk = require('../../../index');
-var MatrixClientPeg = require('../../../MatrixClientPeg')
 var TextForEvent = require('../../../TextForEvent');
+import WithMatrixClient from '../../../wrappers/WithMatrixClient';
 
 var ContextualMenu = require('../../structures/ContextualMenu');
 var dispatcher = require("../../../dispatcher");
@@ -63,22 +63,13 @@ var MAX_READ_AVATARS = 5;
 // |    '--------------------------------------'              |
 // '----------------------------------------------------------'
 
-module.exports = React.createClass({
+module.exports = WithMatrixClient(React.createClass({
     displayName: 'EventTile',
 
-    statics: {
-        haveTileForEvent: function(e) {
-            if (e.isRedacted()) return false;
-            if (eventTileTypes[e.getType()] == undefined) return false;
-            if (eventTileTypes[e.getType()] == 'messages.TextualEvent') {
-                return TextForEvent.textForEvent(e) !== '';
-            } else {
-                return true;
-            }
-        }
-    },
-
     propTypes: {
+        /* MatrixClient instance for sender verification etc */
+        matrixClient: React.PropTypes.object.isRequired,
+
         /* the MatrixEvent to show */
         mxEvent: React.PropTypes.object.isRequired,
 
@@ -153,7 +144,7 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this._suppressReadReceiptAnimation = false;
-        MatrixClientPeg.get().on("deviceVerificationChanged",
+        this.props.matrixClient.on("deviceVerificationChanged",
                                  this.onDeviceVerificationChanged);
     },
 
@@ -176,11 +167,9 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
-        var client = MatrixClientPeg.get();
+        var client = this.props.matrixClient;
-        if (client) {
+        client.removeListener("deviceVerificationChanged",
-            client.removeListener("deviceVerificationChanged",
+                              this.onDeviceVerificationChanged);
-                                  this.onDeviceVerificationChanged);
-        }
     },
 
     onDeviceVerificationChanged: function(userId, device) {
@@ -193,7 +182,7 @@ module.exports = React.createClass({
         var verified = null;
 
         if (mxEvent.isEncrypted()) {
-            verified = MatrixClientPeg.get().isEventSenderVerified(mxEvent);
+            verified = this.props.matrixClient.isEventSenderVerified(mxEvent);
         }
 
         this.setState({
@@ -246,11 +235,11 @@ module.exports = React.createClass({
     },
 
     shouldHighlight: function() {
-        var actions = MatrixClientPeg.get().getPushActionsForEvent(this.props.mxEvent);
+        var actions = this.props.matrixClient.getPushActionsForEvent(this.props.mxEvent);
         if (!actions || !actions.tweaks) { return false; }
 
         // don't show self-highlights from another of our clients
-        if (this.props.mxEvent.getSender() === MatrixClientPeg.get().credentials.userId)
+        if (this.props.mxEvent.getSender() === this.props.matrixClient.credentials.userId)
         {
             return false;
         }
@@ -387,7 +376,7 @@ module.exports = React.createClass({
             throw new Error("Event type not supported");
         }
 
-        var e2eEnabled = MatrixClientPeg.get().isRoomEncrypted(this.props.mxEvent.getRoomId());
+        var e2eEnabled = this.props.matrixClient.isRoomEncrypted(this.props.mxEvent.getRoomId());
         var isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
 
         var classes = classNames({
@@ -481,7 +470,7 @@ module.exports = React.createClass({
         }
 
         if (this.props.tileShape === "notif") {
-            var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+            var room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
 
             return (
                 <div className={classes}>
@@ -554,4 +543,14 @@ module.exports = React.createClass({
             );
         }
     },
-});
+}));
+
+module.exports.haveTileForEvent = function(e) {
+    if (e.isRedacted()) return false;
+    if (eventTileTypes[e.getType()] == undefined) return false;
+    if (eventTileTypes[e.getType()] == 'messages.TextualEvent') {
+        return TextForEvent.textForEvent(e) !== '';
+    } else {
+        return true;
+    }
+};

test/components/structures/MessagePanel-test.js

@@ -20,30 +20,44 @@ var TestUtils = require('react-addons-test-utils');
 var expect = require('expect');
 
 var sdk = require('matrix-react-sdk');
-var MatrixClientPeg = require('MatrixClientPeg');
 
 var MessagePanel = sdk.getComponent('structures.MessagePanel');
 
 var test_utils = require('test-utils');
 var mockclock = require('mock-clock');
 
+var client;
+
+// wrap MessagePanel with a component which provides the MatrixClient in the context.
+const WrappedMessagePanel = React.createClass({
+    childContextTypes: {
+        matrixClient: React.PropTypes.object,
+    },
+
+    getChildContext: function() {
+        return {
+            matrixClient: client,
+        };
+    },
+
+    render: function() {
+        return <MessagePanel {...this.props} />;
+    },
+});
+
 describe('MessagePanel', function () {
-    var sandbox;
     var clock = mockclock.clock();
     var realSetTimeout = window.setTimeout;
     var events = mkEvents();
 
     beforeEach(function() {
         test_utils.beforeEach(this);
-        sandbox = test_utils.stubClient(sandbox);
+        client = test_utils.createTestClient();
-
-        var client = MatrixClientPeg.get();
         client.credentials = {userId: '@me:here'};
     });
 
     afterEach(function () {
         clock.uninstall();
-        sandbox.restore();
     });
 
     function mkEvents() {
@@ -61,7 +75,7 @@ describe('MessagePanel', function () {
 
     it('should show the events', function() {
         var res = TestUtils.renderIntoDocument(
-                <MessagePanel className="cls" events={events} />
+                <WrappedMessagePanel className="cls" events={events} />
         );
 
         // just check we have the right number of tiles for now
@@ -72,7 +86,7 @@ describe('MessagePanel', function () {
 
     it('should show the read-marker in the right place', function() {
         var res = TestUtils.renderIntoDocument(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
                     readMarkerVisible={true} />
         );
 
@@ -96,7 +110,7 @@ describe('MessagePanel', function () {
 
         // first render with the RM in one place
         var mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 
@@ -112,7 +126,7 @@ describe('MessagePanel', function () {
 
         // now move the RM
         mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[6].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[6].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 
@@ -147,7 +161,7 @@ describe('MessagePanel', function () {
 
         // first render with the RM in one place
         var mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[4].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 
@@ -159,7 +173,7 @@ describe('MessagePanel', function () {
 
         // now move the RM
         mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[6].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[6].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 
@@ -175,7 +189,7 @@ describe('MessagePanel', function () {
 
         // and move the RM again
         mp = ReactDOM.render(
-                <MessagePanel className="cls" events={events} readMarkerEventId={events[8].getId()}
+                <WrappedMessagePanel className="cls" events={events} readMarkerEventId={events[8].getId()}
                     readMarkerVisible={true}
                 />, parentDiv);
 

test/components/structures/TimelinePanel-test.js

@@ -33,6 +33,24 @@ var test_utils = require('test-utils');
 var ROOM_ID = '!room:localhost';
 var USER_ID = '@me:localhost';
 
+// wrap TimelinePanel with a component which provides the MatrixClient in the context.
+const WrappedTimelinePanel = React.createClass({
+    childContextTypes: {
+        matrixClient: React.PropTypes.object,
+    },
+
+    getChildContext: function() {
+        return {
+            matrixClient: peg.get(),
+        };
+    },
+
+    render: function() {
+        return <TimelinePanel ref="panel" {...this.props} />;
+    },
+});
+
+
 describe('TimelinePanel', function() {
     var sandbox;
     var timelineSet;
@@ -105,11 +123,12 @@ describe('TimelinePanel', function() {
         }
 
         var scrollDefer;
-        var panel = ReactDOM.render(
+        var rendered = ReactDOM.render(
-                <TimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
+                <WrappedTimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
                 />,
                 parentDiv,
         );
+        var panel = rendered.refs.panel;
         var scrollingDiv = ReactTestUtils.findRenderedDOMComponentWithClass(
             panel, "gm-scroll-view");
 
@@ -188,10 +207,11 @@ describe('TimelinePanel', function() {
             return q(true);
         });
 
-        var panel = ReactDOM.render(
+        var rendered = ReactDOM.render(
-            <TimelinePanel timelineSet={timelineSet}/>,
+            <WrappedTimelinePanel timelineSet={timelineSet}/>,
             parentDiv
         );
+        var panel = rendered.refs.panel;
 
         var messagePanel = ReactTestUtils.findRenderedComponentWithType(
             panel, sdk.getComponent('structures.MessagePanel'));
@@ -236,14 +256,14 @@ describe('TimelinePanel', function() {
         console.log("added events to timeline");
 
         var scrollDefer;
-        var panel = ReactDOM.render(
+        var rendered = ReactDOM.render(
-            <TimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
+            <WrappedTimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
                 timelineCap={TIMELINE_CAP}
             />,
             parentDiv
         );
         console.log("TimelinePanel rendered");
-
+        var panel = rendered.refs.panel;
         var messagePanel = ReactTestUtils.findRenderedComponentWithType(
             panel, sdk.getComponent('structures.MessagePanel'));
         var scrollingDiv = ReactTestUtils.findRenderedDOMComponentWithClass(

test/test-utils.js

@@ -24,23 +24,49 @@ export function beforeEach(context) {
  * Stub out the MatrixClient, and configure the MatrixClientPeg object to
  * return it when get() is called.
  *
+ * TODO: once the components are updated to get their MatrixClients from
+ * the react context, we can get rid of this and just inject a test client
+ * via the context instead.
+ *
  * @returns {sinon.Sandbox}; remember to call sandbox.restore afterwards.
  */
 export function stubClient() {
     var sandbox = sinon.sandbox.create();
 
-    var client = {
+    var client = createTestClient();
+
+    // stub out the methods in MatrixClientPeg
+    //
+    // 'sandbox.restore()' doesn't work correctly on inherited methods,
+    // so we do this for each method
+    var methods = ['get', 'unset', 'replaceUsingCreds'];
+    for (var i = 0; i < methods.length; i++) {
+        sandbox.stub(peg, methods[i]);
+    }
+    // MatrixClientPeg.get() is called a /lot/, so implement it with our own
+    // fast stub function rather than a sinon stub
+    peg.get = function() { return client; };
+    return sandbox;
+}
+
+/**
+ * Create a stubbed-out MatrixClient
+ *
+ * @returns {object} MatrixClient stub
+ */
+export function createTestClient() {
+    return {
         getHomeserverUrl: sinon.stub(),
         getIdentityServerUrl: sinon.stub(),
 
         getPushActionsForEvent: sinon.stub(),
-        getRoom: sinon.stub().returns(this.mkStubRoom()),
+        getRoom: sinon.stub().returns(mkStubRoom()),
         getRooms: sinon.stub().returns([]),
         loginFlows: sinon.stub(),
         on: sinon.stub(),
         removeListener: sinon.stub(),
         isRoomEncrypted: sinon.stub().returns(false),
-        peekInRoom: sinon.stub().returns(q(this.mkStubRoom())),
+        peekInRoom: sinon.stub().returns(q(mkStubRoom())),
 
         paginateEventTimeline: sinon.stub().returns(q()),
         sendReadReceipt: sinon.stub().returns(q()),
@@ -59,22 +85,8 @@ export function stubClient() {
         sendHtmlMessage: () => q({}),
         getSyncState: () => "SYNCING",
     };
-
-    // stub out the methods in MatrixClientPeg
-    //
-    // 'sandbox.restore()' doesn't work correctly on inherited methods,
-    // so we do this for each method
-    var methods = ['get', 'unset', 'replaceUsingCreds'];
-    for (var i = 0; i < methods.length; i++) {
-        sandbox.stub(peg, methods[i]);
-    }
-    // MatrixClientPeg.get() is called a /lot/, so implement it with our own
-    // fast stub function rather than a sinon stub
-    peg.get = function() { return client; };
-    return sandbox;
 }
 
-
 /**
  * Create an Event.
  * @param {Object} opts Values for the event.