PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
Update EventTile to use WithMatrixClient instead of MatrixClientPeg
This commit is contained in:
David Baker 2016-11-15 11:25:48 +00:00 committed by GitHub
commit ec999f6fa1
4 changed files with 108 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/components/views/rooms/EventTile.js
View file

@ -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();
if (client) {
client.removeListener("deviceVerificationChanged",
this.onDeviceVerificationChanged);
}
var client = this.props.matrixClient;
client.removeListener("deviceVerificationChanged",
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;
}
};

40
test/components/structures/MessagePanel-test.js
View file

@ -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);
var client = MatrixClientPeg.get();
client = test_utils.createTestClient();
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);

34
test/components/structures/TimelinePanel-test.js
View file

@ -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(
<TimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
var rendered = ReactDOM.render(
<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(
<TimelinePanel timelineSet={timelineSet}/>,
var rendered = ReactDOM.render(
<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(
<TimelinePanel timelineSet={timelineSet} onScroll={() => {scrollDefer.resolve()}}
var rendered = ReactDOM.render(
<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(

46
test/test-utils.js
View file

@ -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.