OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Inject MatrixClient into React context in tests 

Now that EventTile expects MatrixClient in the context, we had better provide
it.
pull/21833/head
Richard van der Hoff 2016-11-14 18:20:15 +00:00
parent 0e8a49ebb7
commit 22757cfcd3
3 changed files with 83 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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.