imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

test typescriptification - EventListSummary (#8493)

Browse source 
* test/components/views/elements/EventListSummary-test.js -> tsx

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add user mocks util

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-05-04 16:37:41 +02:00 • committed by GitHub
parent 995d008aca
commit ce3bc9dc07
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 115 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

225
test/components/views/elements/EventListSummary-test.js → test/components/views/elements/EventListSummary-test.tsx
View file

@ -1,16 +1,21 @@
import React from 'react'; import React from 'react';
import ReactTestUtils from 'react-dom/test-utils'; import { mount, ReactWrapper } from 'enzyme';
import ShallowRenderer from "react-test-renderer/shallow"; import { MatrixEvent, RoomMember } from 'matrix-js-sdk/src/matrix';
import * as testUtils from '../../../test-utils'; import {
import _EventListSummary from "../../../../src/components/views/elements/EventListSummary"; getMockClientWithEventEmitter,
mkMembership,
// Give ELS a matrixClient in its child context mockClientMethodsUser,
const EventListSummary = testUtils.wrapInMatrixClientContext(_EventListSummary); unmockClientPeg,
} from '../../../test-utils';
import EventListSummary from "../../../../src/components/views/elements/EventListSummary";
import { Layout } from '../../../../src/settings/enums/Layout';
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
describe('EventListSummary', function() { describe('EventListSummary', function() {
const roomId = '!room:server.org';
// Generate dummy event tiles for use in simulating an expanded MELS // Generate dummy event tiles for use in simulating an expanded MELS
const generateTiles = (events) => { const generateTiles = (events: MatrixEvent[]) => {
return events.map((e) => { return events.map((e) => {
return ( return (
<div key={e.getId()} className="event_tile"> <div key={e.getId()} className="event_tile">
@ -35,22 +40,28 @@ describe('EventListSummary', function() {
* Optional. Defaults to `parameters.userId`. * Optional. Defaults to `parameters.userId`.
* @returns {MatrixEvent} the event created. * @returns {MatrixEvent} the event created.
*/ */
const generateMembershipEvent = (eventId, parameters) => { interface MembershipEventParams {
const e = testUtils.mkMembership({ senderId?: string;
userId: string;
membership: string;
prevMembership?: string;
}
const generateMembershipEvent = (
eventId: string, { senderId, userId, membership, prevMembership }: MembershipEventParams,
): MatrixEvent => {
const member = new RoomMember(roomId, userId);
// Use localpart as display name;
member.name = userId.match(/@([^:]*):/)[1];
jest.spyOn(member, 'getAvatarUrl').mockReturnValue('avatar.jpeg');
jest.spyOn(member, 'getMxcAvatarUrl').mockReturnValue('mxc://avatar.url/image.png');
const e = mkMembership({
event: true, event: true,
user: parameters.senderId || parameters.userId, room: roomId,
skey: parameters.userId, user: senderId || userId,
mship: parameters.membership, skey: userId,
prevMship: parameters.prevMembership, mship: membership,
target: { prevMship: prevMembership,
// Use localpart as display name target: member,
name: parameters.userId.match(/@([^:]*):/)[1],
userId: parameters.userId,
getAvatarUrl: () => {
return "avatar.jpeg";
},
getMxcAvatarUrl: () => 'mxc://avatar.url/image.png',
},
}); });
// Override random event ID to allow for equality tests against tiles from // Override random event ID to allow for equality tests against tiles from
// generateTiles // generateTiles
@ -59,7 +70,7 @@ describe('EventListSummary', function() {
}; };
// Generate mock MatrixEvents from the array of parameters // Generate mock MatrixEvents from the array of parameters
const generateEvents = (parameters) => { const generateEvents = (parameters: MembershipEventParams[]) => {
const res = []; const res = [];
for (let i = 0; i < parameters.length; i++) { for (let i = 0; i < parameters.length; i++) {
res.push(generateMembershipEvent(`event${i}`, parameters[i])); res.push(generateMembershipEvent(`event${i}`, parameters[i]));
@ -83,8 +94,28 @@ describe('EventListSummary', function() {
return eventsForUsers; return eventsForUsers;
}; };
const mockClient = getMockClientWithEventEmitter({
...mockClientMethodsUser(),
});
const defaultProps = {
layout: Layout.Bubble,
events: [],
children: [],
};
const renderComponent = (props = {}): ReactWrapper => {
return mount(<MatrixClientContext.Provider value={mockClient}>
<EventListSummary {...defaultProps} {...props} />
</MatrixClientContext.Provider>,
);
};
beforeEach(function() { beforeEach(function() {
testUtils.stubClient(); jest.clearAllMocks();
});
afterAll(() => {
unmockClientPeg();
}); });
it('renders expanded events if there are less than props.threshold', function() { it('renders expanded events if there are less than props.threshold', function() {
@ -99,12 +130,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const renderer = new ShallowRenderer(); const wrapper = renderComponent(props); // matrix cli context wrapper
renderer.render(<EventListSummary {...props} />);
const wrapper = renderer.getRenderOutput(); // matrix cli context wrapper
const result = wrapper.props.children;
expect(result.props.children).toEqual([ expect(wrapper.find('GenericEventListSummary').props().children).toEqual([
<div className="event_tile" key="event0">Expanded membership</div>, <div className="event_tile" key="event0">Expanded membership</div>,
]); ]);
}); });
@ -122,12 +150,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const renderer = new ShallowRenderer(); const wrapper = renderComponent(props); // matrix cli context wrapper
renderer.render(<EventListSummary {...props} />);
const wrapper = renderer.getRenderOutput(); // matrix cli context wrapper
const result = wrapper.props.children;
expect(result.props.children).toEqual([ expect(wrapper.find('GenericEventListSummary').props().children).toEqual([
<div className="event_tile" key="event0">Expanded membership</div>, <div className="event_tile" key="event0">Expanded membership</div>,
<div className="event_tile" key="event1">Expanded membership</div>, <div className="event_tile" key="event1">Expanded membership</div>,
]); ]);
@ -147,13 +172,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe("user_1 joined and left and joined"); expect(summaryText).toBe("user_1 joined and left and joined");
}); });
@ -183,13 +204,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe("user_1 joined and left 7 times"); expect(summaryText).toBe("user_1 joined and left 7 times");
}); });
@ -231,13 +248,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_1 was unbanned, joined and left 7 times and was invited", "user_1 was unbanned, joined and left 7 times and was invited",
@ -283,13 +296,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_1 was unbanned, joined and left 2 times, was banned, " + "user_1 was unbanned, joined and left 2 times, was banned, " +
@ -342,13 +351,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_1 and one other were unbanned, joined and left 2 times and were banned", "user_1 and one other were unbanned, joined and left 2 times and were banned",
@ -380,13 +385,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_0 and 19 others were unbanned, joined and left 2 times and were banned", "user_0 and 19 others were unbanned, joined and left 2 times and were banned",
@ -430,13 +431,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_2 was unbanned and joined and left 2 times, user_1 was unbanned, " + "user_2 was unbanned and joined and left 2 times, user_1 was unbanned, " +
@ -504,13 +501,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_1 was invited, was banned, joined, rejected their invitation, left, " + "user_1 was invited, was banned, joined, rejected their invitation, left, " +
@ -551,13 +544,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_1 and one other rejected their invitations and " + "user_1 and one other rejected their invitations and " +
@ -586,13 +575,9 @@ describe('EventListSummary', function() {
threshold: 1, // threshold = 1 to force collapse threshold: 1, // threshold = 1 to force collapse
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_1 rejected their invitation 2 times", "user_1 rejected their invitation 2 times",
@ -614,13 +599,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_1 and user_2 joined 2 times", "user_1 and user_2 joined 2 times",
@ -641,13 +622,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_1, user_2 and one other joined", "user_1, user_2 and one other joined",
@ -666,13 +643,9 @@ describe('EventListSummary', function() {
threshold: 3, threshold: 3,
}; };
const instance = ReactTestUtils.renderIntoDocument( const wrapper = renderComponent(props);
<EventListSummary {...props} />, const summary = wrapper.find(".mx_GenericEventListSummary_summary");
); const summaryText = summary.text();
const summary = ReactTestUtils.findRenderedDOMComponentWithClass(
instance, "mx_GenericEventListSummary_summary",
);
const summaryText = summary.textContent;
expect(summaryText).toBe( expect(summaryText).toBe(
"user_0, user_1 and 18 others joined", "user_0, user_1 and 18 others joined",

2
test/components/views/right_panel/UserInfo-test.tsx
View file

@ -57,7 +57,7 @@ describe('<UserInfo />', () => {
isRoomEncrypted: jest.fn().mockReturnValue(false), isRoomEncrypted: jest.fn().mockReturnValue(false),
doesServerSupportUnstableFeature: jest.fn().mockReturnValue(false), doesServerSupportUnstableFeature: jest.fn().mockReturnValue(false),
mxcUrlToHttp: jest.fn().mockReturnValue('mock-mxcUrlToHttp'), mxcUrlToHttp: jest.fn().mockReturnValue('mock-mxcUrlToHttp'),
removeListerner: jest.fn(), removeListener: jest.fn(),
currentState: { currentState: {
on: jest.fn(), on: jest.fn(),
}, },

15
test/test-utils/client.ts
View file

@ -53,3 +53,18 @@ export const getMockClientWithEventEmitter = (
return mock; return mock;
}; };
export const unmockClientPeg = () => jest.spyOn(MatrixClientPeg, 'get').mockRestore();
/**
* Returns basic mocked client methods related to the current user
* ```
* const mockClient = getMockClientWithEventEmitter({
...mockClientMethodsUser('@mytestuser:domain'),
});
* ```
*/
export const mockClientMethodsUser = (userId = '@alice:domain') => ({
getUserId: jest.fn().mockReturnValue(userId),
isGuest: jest.fn().mockReturnValue(false),
mxcUrlToHttp: jest.fn().mockReturnValue('mock-mxcUrlToHttp'),
});