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

Apply prettier formatting

Browse source
This commit is contained in:
Michael Weimann 2022-12-12 12:24:14 +01:00
parent 1cac306093
commit 526645c791
No known key found for this signature in database
GPG key ID: 53F535A266BB9584
1576 changed files with 65385 additions and 62478 deletions
Download patch file Download diff file Expand all files Collapse all files

84
test/components/views/elements/AccessibleButton-test.tsx
View file

@ -14,22 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';
import { mount } from "enzyme";
import { act } from "react-dom/test-utils";
import AccessibleButton from '../../../../src/components/views/elements/AccessibleButton';
import { Key } from '../../../../src/Keyboard';
import { mockPlatformPeg, unmockPlatformPeg } from '../../../test-utils';
import AccessibleButton from "../../../../src/components/views/elements/AccessibleButton";
import { Key } from "../../../../src/Keyboard";
import { mockPlatformPeg, unmockPlatformPeg } from "../../../test-utils";
describe('<AccessibleButton />', () => {
describe("<AccessibleButton />", () => {
const defaultProps = {
onClick: jest.fn(),
children: 'i am a button',
children: "i am a button",
};
const getComponent = (props = {}) =>
mount(<AccessibleButton {...defaultProps} {...props} />);
const getComponent = (props = {}) => mount(<AccessibleButton {...defaultProps} {...props} />);
beforeEach(() => {
mockPlatformPeg();
@ -39,66 +38,67 @@ describe('<AccessibleButton />', () => {
unmockPlatformPeg();
});
const makeKeyboardEvent = (key: string) => ({
key,
stopPropagation: jest.fn(),
preventDefault: jest.fn(),
}) as unknown as KeyboardEvent;
const makeKeyboardEvent = (key: string) =>
({
key,
stopPropagation: jest.fn(),
preventDefault: jest.fn(),
} as unknown as KeyboardEvent);
it('renders div with role button by default', () => {
it("renders div with role button by default", () => {
const component = getComponent();
expect(component).toMatchSnapshot();
});
it('renders a button element', () => {
const component = getComponent({ element: 'button' });
it("renders a button element", () => {
const component = getComponent({ element: "button" });
expect(component).toMatchSnapshot();
});
it('renders with correct classes when button has kind', () => {
it("renders with correct classes when button has kind", () => {
const component = getComponent({
kind: 'primary',
kind: "primary",
});
expect(component).toMatchSnapshot();
});
it('disables button correctly', () => {
it("disables button correctly", () => {
const onClick = jest.fn();
const component = getComponent({
onClick,
disabled: true,
});
expect(component.find('.mx_AccessibleButton').props().disabled).toBeTruthy();
expect(component.find('.mx_AccessibleButton').props()['aria-disabled']).toBeTruthy();
expect(component.find(".mx_AccessibleButton").props().disabled).toBeTruthy();
expect(component.find(".mx_AccessibleButton").props()["aria-disabled"]).toBeTruthy();
act(() => {
component.simulate('click');
component.simulate("click");
});
expect(onClick).not.toHaveBeenCalled();
act(() => {
const keydownEvent = makeKeyboardEvent(Key.ENTER);
component.simulate('keydown', keydownEvent);
component.simulate("keydown", keydownEvent);
});
expect(onClick).not.toHaveBeenCalled();
});
it('calls onClick handler on button click', () => {
it("calls onClick handler on button click", () => {
const onClick = jest.fn();
const component = getComponent({
onClick,
});
act(() => {
component.simulate('click');
component.simulate("click");
});
expect(onClick).toHaveBeenCalled();
});
it('calls onClick handler on button mousedown when triggerOnMousedown is passed', () => {
it("calls onClick handler on button mousedown when triggerOnMousedown is passed", () => {
const onClick = jest.fn();
const component = getComponent({
onClick,
@ -106,14 +106,14 @@ describe('<AccessibleButton />', () => {
});
act(() => {
component.simulate('mousedown');
component.simulate("mousedown");
});
expect(onClick).toHaveBeenCalled();
});
describe('handling keyboard events', () => {
it('calls onClick handler on enter keydown', () => {
describe("handling keyboard events", () => {
it("calls onClick handler on enter keydown", () => {
const onClick = jest.fn();
const component = getComponent({
onClick,
@ -121,13 +121,13 @@ describe('<AccessibleButton />', () => {
const keyboardEvent = makeKeyboardEvent(Key.ENTER);
act(() => {
component.simulate('keydown', keyboardEvent);
component.simulate("keydown", keyboardEvent);
});
expect(onClick).toHaveBeenCalled();
act(() => {
component.simulate('keyup', keyboardEvent);
component.simulate("keyup", keyboardEvent);
});
// handler only called once on keydown
@ -137,7 +137,7 @@ describe('<AccessibleButton />', () => {
expect(keyboardEvent.preventDefault).toHaveBeenCalledTimes(2);
});
it('calls onClick handler on space keyup', () => {
it("calls onClick handler on space keyup", () => {
const onClick = jest.fn();
const component = getComponent({
onClick,
@ -145,13 +145,13 @@ describe('<AccessibleButton />', () => {
const keyboardEvent = makeKeyboardEvent(Key.SPACE);
act(() => {
component.simulate('keydown', keyboardEvent);
component.simulate("keydown", keyboardEvent);
});
expect(onClick).not.toHaveBeenCalled();
act(() => {
component.simulate('keyup', keyboardEvent);
component.simulate("keyup", keyboardEvent);
});
// handler only called once on keyup
@ -161,7 +161,7 @@ describe('<AccessibleButton />', () => {
expect(keyboardEvent.preventDefault).toHaveBeenCalledTimes(2);
});
it('calls onKeydown/onKeyUp handlers for keys other than space and enter', () => {
it("calls onKeydown/onKeyUp handlers for keys other than space and enter", () => {
const onClick = jest.fn();
const onKeyDown = jest.fn();
const onKeyUp = jest.fn();
@ -173,8 +173,8 @@ describe('<AccessibleButton />', () => {
const keyboardEvent = makeKeyboardEvent(Key.K);
act(() => {
component.simulate('keydown', keyboardEvent);
component.simulate('keyup', keyboardEvent);
component.simulate("keydown", keyboardEvent);
component.simulate("keyup", keyboardEvent);
});
expect(onClick).not.toHaveBeenCalled();
@ -184,7 +184,7 @@ describe('<AccessibleButton />', () => {
expect(keyboardEvent.preventDefault).not.toHaveBeenCalled();
});
it('does nothing on non space/enter key presses when no onKeydown/onKeyUp handlers provided', () => {
it("does nothing on non space/enter key presses when no onKeydown/onKeyUp handlers provided", () => {
const onClick = jest.fn();
const component = getComponent({
onClick,
@ -192,8 +192,8 @@ describe('<AccessibleButton />', () => {
const keyboardEvent = makeKeyboardEvent(Key.K);
act(() => {
component.simulate('keydown', keyboardEvent);
component.simulate('keyup', keyboardEvent);
component.simulate("keydown", keyboardEvent);
component.simulate("keyup", keyboardEvent);
});
// no onClick call, no problems

162
test/components/views/elements/AppTile-test.tsx
View file

@ -52,17 +52,15 @@ describe("AppTile", () => {
let app1: IApp;
let app2: IApp;
const waitForRps = (roomId: string) => new Promise<void>(resolve => {
const update = () => {
if (
RightPanelStore.instance.currentCardForRoom(roomId).phase !==
RightPanelPhases.Widget
) return;
RightPanelStore.instance.off(UPDATE_EVENT, update);
resolve();
};
RightPanelStore.instance.on(UPDATE_EVENT, update);
});
const waitForRps = (roomId: string) =>
new Promise<void>((resolve) => {
const update = () => {
if (RightPanelStore.instance.currentCardForRoom(roomId).phase !== RightPanelPhases.Widget) return;
RightPanelStore.instance.off(UPDATE_EVENT, update);
resolve();
};
RightPanelStore.instance.on(UPDATE_EVENT, update);
});
beforeAll(async () => {
stubClient();
@ -75,7 +73,7 @@ describe("AppTile", () => {
r1 = new Room("r1", cli, "@name:example.com");
r2 = new Room("r2", cli, "@name:example.com");
jest.spyOn(cli, "getRoom").mockImplementation(roomId => {
jest.spyOn(cli, "getRoom").mockImplementation((roomId) => {
if (roomId === "r1") return r1;
if (roomId === "r2") return r2;
return null;
@ -105,7 +103,7 @@ describe("AppTile", () => {
creatorUserId: cli.getUserId(),
avatar_url: undefined,
};
jest.spyOn(WidgetStore.instance, "getApps").mockImplementation(roomId => {
jest.spyOn(WidgetStore.instance, "getApps").mockImplementation((roomId) => {
if (roomId === "r1") return [app1];
if (roomId === "r2") return [app2];
});
@ -130,12 +128,14 @@ describe("AppTile", () => {
if (name !== "RightPanel.phases") return realGetValue(name, roomId);
if (roomId === "r1") {
return {
history: [{
phase: RightPanelPhases.Widget,
state: {
widgetId: "1",
history: [
{
phase: RightPanelPhases.Widget,
state: {
widgetId: "1",
},
},
}],
],
isOpen: true,
};
}
@ -143,12 +143,11 @@ describe("AppTile", () => {
});
// Run initial render with room 1, and also running lifecycle methods
const renderer = TestRenderer.create(<MatrixClientContext.Provider value={cli}>
<RightPanel
room={r1}
resizeNotifier={resizeNotifier}
/>
</MatrixClientContext.Provider>);
const renderer = TestRenderer.create(
<MatrixClientContext.Provider value={cli}>
<RightPanel room={r1} resizeNotifier={resizeNotifier} />
</MatrixClientContext.Provider>,
);
// Wait for RPS room 1 updates to fire
const rpsUpdated = waitForRps("r1");
dis.dispatch({
@ -169,12 +168,11 @@ describe("AppTile", () => {
action: Action.ViewRoom,
room_id: "r2",
});
renderer.update(<MatrixClientContext.Provider value={cli}>
<RightPanel
room={r2}
resizeNotifier={resizeNotifier}
/>
</MatrixClientContext.Provider>);
renderer.update(
<MatrixClientContext.Provider value={cli}>
<RightPanel room={r2} resizeNotifier={resizeNotifier} />
</MatrixClientContext.Provider>,
);
expect(endWidgetActions.mock.calls.length).toBe(1);
expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(false);
@ -185,16 +183,18 @@ describe("AppTile", () => {
it("distinguishes widgets with the same ID in different rooms", async () => {
// Set up right panel state
const realGetValue = SettingsStore.getValue;
jest.spyOn(SettingsStore, 'getValue').mockImplementation((name, roomId) => {
jest.spyOn(SettingsStore, "getValue").mockImplementation((name, roomId) => {
if (name === "RightPanel.phases") {
if (roomId === "r1") {
return {
history: [{
phase: RightPanelPhases.Widget,
state: {
widgetId: "1",
history: [
{
phase: RightPanelPhases.Widget,
state: {
widgetId: "1",
},
},
}],
],
isOpen: true,
};
}
@ -204,12 +204,11 @@ describe("AppTile", () => {
});
// Run initial render with room 1, and also running lifecycle methods
const renderer = TestRenderer.create(<MatrixClientContext.Provider value={cli}>
<RightPanel
room={r1}
resizeNotifier={resizeNotifier}
/>
</MatrixClientContext.Provider>);
const renderer = TestRenderer.create(
<MatrixClientContext.Provider value={cli}>
<RightPanel room={r1} resizeNotifier={resizeNotifier} />
</MatrixClientContext.Provider>,
);
// Wait for RPS room 1 updates to fire
const rpsUpdated1 = waitForRps("r1");
dis.dispatch({
@ -225,12 +224,14 @@ describe("AppTile", () => {
if (name === "RightPanel.phases") {
if (roomId === "r2") {
return {
history: [{
phase: RightPanelPhases.Widget,
state: {
widgetId: "1",
history: [
{
phase: RightPanelPhases.Widget,
state: {
widgetId: "1",
},
},
}],
],
isOpen: true,
};
}
@ -245,12 +246,11 @@ describe("AppTile", () => {
action: Action.ViewRoom,
room_id: "r2",
});
renderer.update(<MatrixClientContext.Provider value={cli}>
<RightPanel
room={r2}
resizeNotifier={resizeNotifier}
/>
</MatrixClientContext.Provider>);
renderer.update(
<MatrixClientContext.Provider value={cli}>
<RightPanel room={r2} resizeNotifier={resizeNotifier} />
</MatrixClientContext.Provider>,
);
await rpsUpdated2;
expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(false);
@ -279,13 +279,11 @@ describe("AppTile", () => {
});
// Run initial render with room 1, and also running lifecycle methods
const renderer = TestRenderer.create(<MatrixClientContext.Provider value={cli}>
<AppsDrawer
userId={cli.getUserId()}
room={r1}
resizeNotifier={resizeNotifier}
/>
</MatrixClientContext.Provider>);
const renderer = TestRenderer.create(
<MatrixClientContext.Provider value={cli}>
<AppsDrawer userId={cli.getUserId()} room={r1} resizeNotifier={resizeNotifier} />
</MatrixClientContext.Provider>,
);
expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
@ -319,38 +317,34 @@ describe("AppTile", () => {
let moveToContainerSpy;
beforeEach(() => {
wrapper = mount((
wrapper = mount(
<MatrixClientContext.Provider value={cli}>
<AppTile
key={app1.id}
app={app1}
room={r1}
/>
</MatrixClientContext.Provider>
));
<AppTile key={app1.id} app={app1} room={r1} />
</MatrixClientContext.Provider>,
);
moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, 'moveToContainer');
moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
});
it("requiresClient should be true", () => {
expect(wrapper.state('requiresClient')).toBe(true);
expect(wrapper.state("requiresClient")).toBe(true);
});
it("clicking 'minimise' should send the widget to the right", () => {
const minimiseButton = wrapper.find('.mx_AppTileMenuBar_iconButton_minimise');
minimiseButton.first().simulate('click');
const minimiseButton = wrapper.find(".mx_AppTileMenuBar_iconButton_minimise");
minimiseButton.first().simulate("click");
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Right);
});
it("clicking 'maximise' should send the widget to the center", () => {
const minimiseButton = wrapper.find('.mx_AppTileMenuBar_iconButton_maximise');
minimiseButton.first().simulate('click');
const minimiseButton = wrapper.find(".mx_AppTileMenuBar_iconButton_maximise");
minimiseButton.first().simulate("click");
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Center);
});
describe("for a maximised (centered) widget", () => {
beforeEach(() => {
jest.spyOn(WidgetLayoutStore.instance, 'isInContainer').mockImplementation(
jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockImplementation(
(room: Optional<Room>, widget: IApp, container: Container) => {
return room === r1 && widget === app1 && container === Container.Center;
},
@ -358,8 +352,8 @@ describe("AppTile", () => {
});
it("clicking 'un-maximise' should send the widget to the top", () => {
const unMaximiseButton = wrapper.find('.mx_AppTileMenuBar_iconButton_collapse');
unMaximiseButton.first().simulate('click');
const unMaximiseButton = wrapper.find(".mx_AppTileMenuBar_iconButton_collapse");
unMaximiseButton.first().simulate("click");
expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, Container.Top);
});
});
@ -378,19 +372,15 @@ describe("AppTile", () => {
const mockWidget = new ElementWidget(app1);
WidgetMessagingStore.instance.storeMessaging(mockWidget, r1.roomId, api);
wrapper = mount((
wrapper = mount(
<MatrixClientContext.Provider value={cli}>
<AppTile
key={app1.id}
app={app1}
room={r1}
/>
</MatrixClientContext.Provider>
));
<AppTile key={app1.id} app={app1} room={r1} />
</MatrixClientContext.Provider>,
);
});
it("requiresClient should be false", () => {
expect(wrapper.state('requiresClient')).toBe(false);
expect(wrapper.state("requiresClient")).toBe(false);
});
});
});

126
test/components/views/elements/EventListSummary-test.tsx
View file

@ -14,23 +14,23 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from 'enzyme';
import { MatrixEvent, RoomMember } from 'matrix-js-sdk/src/matrix';
import { mount, ReactWrapper } from "enzyme";
import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
import {
getMockClientWithEventEmitter,
mkMembership,
mockClientMethodsUser,
unmockClientPeg,
} from '../../../test-utils';
} from "../../../test-utils";
import EventListSummary from "../../../../src/components/views/elements/EventListSummary";
import { Layout } from '../../../../src/settings/enums/Layout';
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
import { Layout } from "../../../../src/settings/enums/Layout";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
describe('EventListSummary', function() {
const roomId = '!room:server.org';
describe("EventListSummary", function () {
const roomId = "!room:server.org";
// Generate dummy event tiles for use in simulating an expanded MELS
const generateTiles = (events: MatrixEvent[]) => {
return events.map((e) => {
@ -64,13 +64,14 @@ describe('EventListSummary', function() {
prevMembership?: string;
}
const generateMembershipEvent = (
eventId: string, { senderId, userId, membership, prevMembership }: MembershipEventParams,
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');
jest.spyOn(member, "getAvatarUrl").mockReturnValue("avatar.jpeg");
jest.spyOn(member, "getMxcAvatarUrl").mockReturnValue("mxc://avatar.url/image.png");
const e = mkMembership({
event: true,
room: roomId,
@ -102,7 +103,7 @@ describe('EventListSummary', function() {
let eventsForUsers = [];
let userId = "";
for (let i = 0; i < n; i++) {
userId = userIdTemplate.replace('$', i);
userId = userIdTemplate.replace("$", i);
events.forEach((e) => {
e.userId = userId;
});
@ -121,13 +122,14 @@ describe('EventListSummary', function() {
children: [],
};
const renderComponent = (props = {}): ReactWrapper => {
return mount(<MatrixClientContext.Provider value={mockClient}>
<EventListSummary {...defaultProps} {...props} />
</MatrixClientContext.Provider>,
return mount(
<MatrixClientContext.Provider value={mockClient}>
<EventListSummary {...defaultProps} {...props} />
</MatrixClientContext.Provider>,
);
};
beforeEach(function() {
beforeEach(function () {
jest.clearAllMocks();
});
@ -135,10 +137,8 @@ describe('EventListSummary', function() {
unmockClientPeg();
});
it('renders expanded events if there are less than props.threshold', function() {
const events = generateEvents([
{ userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
]);
it("renders expanded events if there are less than props.threshold", function () {
const events = generateEvents([{ userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" }]);
const props = {
events: events,
children: generateTiles(events),
@ -149,12 +149,14 @@ describe('EventListSummary', function() {
const wrapper = renderComponent(props); // matrix cli context wrapper
expect(wrapper.find('GenericEventListSummary').props().children).toEqual([
<div className="event_tile" key="event0">Expanded membership</div>,
expect(wrapper.find("GenericEventListSummary").props().children).toEqual([
<div className="event_tile" key="event0">
Expanded membership
</div>,
]);
});
it('renders expanded events if there are less than props.threshold', function() {
it("renders expanded events if there are less than props.threshold", function () {
const events = generateEvents([
{ userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
{ userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
@ -169,13 +171,17 @@ describe('EventListSummary', function() {
const wrapper = renderComponent(props); // matrix cli context wrapper
expect(wrapper.find('GenericEventListSummary').props().children).toEqual([
<div className="event_tile" key="event0">Expanded membership</div>,
<div className="event_tile" key="event1">Expanded membership</div>,
expect(wrapper.find("GenericEventListSummary").props().children).toEqual([
<div className="event_tile" key="event0">
Expanded membership
</div>,
<div className="event_tile" key="event1">
Expanded membership
</div>,
]);
});
it('renders collapsed events if events.length = props.threshold', function() {
it("renders collapsed events if events.length = props.threshold", function () {
const events = generateEvents([
{ userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
{ userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
@ -196,7 +202,7 @@ describe('EventListSummary', function() {
expect(summaryText).toBe("user_1 joined and left and joined");
});
it('truncates long join,leave repetitions', function() {
it("truncates long join,leave repetitions", function () {
const events = generateEvents([
{ userId: "@user_1:some.domain", prevMembership: "leave", membership: "join" },
{ userId: "@user_1:some.domain", prevMembership: "join", membership: "leave" },
@ -228,7 +234,7 @@ describe('EventListSummary', function() {
expect(summaryText).toBe("user_1 joined and left 7 times");
});
it('truncates long join,leave repetitions between other events', function() {
it("truncates long join,leave repetitions between other events", function () {
const events = generateEvents([
{
userId: "@user_1:some.domain",
@ -269,12 +275,10 @@ describe('EventListSummary', function() {
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
const summaryText = summary.text();
expect(summaryText).toBe(
"user_1 was unbanned, joined and left 7 times and was invited",
);
expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited");
});
it('truncates multiple sequences of repetitions with other events between', function() {
it("truncates multiple sequences of repetitions with other events between", function () {
const events = generateEvents([
{
userId: "@user_1:some.domain",
@ -318,12 +322,11 @@ describe('EventListSummary', function() {
const summaryText = summary.text();
expect(summaryText).toBe(
"user_1 was unbanned, joined and left 2 times, was banned, " +
"joined and left 3 times and was invited",
"user_1 was unbanned, joined and left 2 times, was banned, " + "joined and left 3 times and was invited",
);
});
it('handles multiple users following the same sequence of memberships', function() {
it("handles multiple users following the same sequence of memberships", function () {
const events = generateEvents([
// user_1
{
@ -372,12 +375,10 @@ describe('EventListSummary', function() {
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
const summaryText = summary.text();
expect(summaryText).toBe(
"user_1 and one other were unbanned, joined and left 2 times and were banned",
);
expect(summaryText).toBe("user_1 and one other were unbanned, joined and left 2 times and were banned");
});
it('handles many users following the same sequence of memberships', function() {
it("handles many users following the same sequence of memberships", function () {
const events = generateEventsForUsers("@user_$:some.domain", 20, [
{
prevMembership: "ban",
@ -406,12 +407,10 @@ describe('EventListSummary', function() {
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
const summaryText = summary.text();
expect(summaryText).toBe(
"user_0 and 19 others were unbanned, joined and left 2 times and were banned",
);
expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned");
});
it('correctly orders sequences of transitions by the order of their first event', function() {
it("correctly orders sequences of transitions by the order of their first event", function () {
const events = generateEvents([
{
userId: "@user_2:some.domain",
@ -454,11 +453,11 @@ describe('EventListSummary', function() {
expect(summaryText).toBe(
"user_2 was unbanned and joined and left 2 times, user_1 was unbanned, " +
"joined and left 2 times and was banned",
"joined and left 2 times and was banned",
);
});
it('correctly identifies transitions', function() {
it("correctly identifies transitions", function () {
const events = generateEvents([
// invited
{ userId: "@user_1:some.domain", membership: "invite" },
@ -524,11 +523,11 @@ describe('EventListSummary', function() {
expect(summaryText).toBe(
"user_1 was invited, was banned, joined, rejected their invitation, left, " +
"had their invitation withdrawn, was unbanned, was removed, left and was removed",
"had their invitation withdrawn, was unbanned, was removed, left and was removed",
);
});
it('handles invitation plurals correctly when there are multiple users', function() {
it("handles invitation plurals correctly when there are multiple users", function () {
const events = generateEvents([
{
userId: "@user_1:some.domain",
@ -566,12 +565,11 @@ describe('EventListSummary', function() {
const summaryText = summary.text();
expect(summaryText).toBe(
"user_1 and one other rejected their invitations and " +
"had their invitations withdrawn",
"user_1 and one other rejected their invitations and " + "had their invitations withdrawn",
);
});
it('handles invitation plurals correctly when there are multiple invites', function() {
it("handles invitation plurals correctly when there are multiple invites", function () {
const events = generateEvents([
{
userId: "@user_1:some.domain",
@ -596,12 +594,10 @@ describe('EventListSummary', function() {
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
const summaryText = summary.text();
expect(summaryText).toBe(
"user_1 rejected their invitation 2 times",
);
expect(summaryText).toBe("user_1 rejected their invitation 2 times");
});
it('handles a summary length = 2, with no "others"', function() {
it('handles a summary length = 2, with no "others"', function () {
const events = generateEvents([
{ userId: "@user_1:some.domain", membership: "join" },
{ userId: "@user_1:some.domain", membership: "join" },
@ -620,12 +616,10 @@ describe('EventListSummary', function() {
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
const summaryText = summary.text();
expect(summaryText).toBe(
"user_1 and user_2 joined 2 times",
);
expect(summaryText).toBe("user_1 and user_2 joined 2 times");
});
it('handles a summary length = 2, with 1 "other"', function() {
it('handles a summary length = 2, with 1 "other"', function () {
const events = generateEvents([
{ userId: "@user_1:some.domain", membership: "join" },
{ userId: "@user_2:some.domain", membership: "join" },
@ -643,15 +637,11 @@ describe('EventListSummary', function() {
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
const summaryText = summary.text();
expect(summaryText).toBe(
"user_1, user_2 and one other joined",
);
expect(summaryText).toBe("user_1, user_2 and one other joined");
});
it('handles a summary length = 2, with many "others"', function() {
const events = generateEventsForUsers("@user_$:some.domain", 20, [
{ membership: "join" },
]);
it('handles a summary length = 2, with many "others"', function () {
const events = generateEventsForUsers("@user_$:some.domain", 20, [{ membership: "join" }]);
const props = {
events: events,
children: generateTiles(events),
@ -664,8 +654,6 @@ describe('EventListSummary', function() {
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
const summaryText = summary.text();
expect(summaryText).toBe(
"user_0, user_1 and 18 others joined",
);
expect(summaryText).toBe("user_0, user_1 and 18 others joined");
});
});

40
test/components/views/elements/ExternalLink-test.tsx
View file

@ -12,39 +12,45 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { renderIntoDocument } from 'react-dom/test-utils';
import React from "react";
import { renderIntoDocument } from "react-dom/test-utils";
import ExternalLink from '../../../../src/components/views/elements/ExternalLink';
import ExternalLink from "../../../../src/components/views/elements/ExternalLink";
describe('<ExternalLink />', () => {
describe("<ExternalLink />", () => {
const defaultProps = {
"href": 'test.com',
"href": "test.com",
"onClick": jest.fn(),
"className": 'myCustomClass',
'data-test-id': 'test',
"className": "myCustomClass",
"data-test-id": "test",
};
const getComponent = (props = {}) => {
const wrapper = renderIntoDocument<HTMLDivElement>(
<div><ExternalLink {...defaultProps} {...props} /></div>,
<div>
<ExternalLink {...defaultProps} {...props} />
</div>,
) as HTMLDivElement;
return wrapper.children[0];
};
it('renders link correctly', () => {
const children = <span>react element <b>children</b></span>;
expect(getComponent({ children, target: '_self', rel: 'noopener' })).toMatchSnapshot();
it("renders link correctly", () => {
const children = (
<span>
react element <b>children</b>
</span>
);
expect(getComponent({ children, target: "_self", rel: "noopener" })).toMatchSnapshot();
});
it('defaults target and rel', () => {
const children = 'test';
it("defaults target and rel", () => {
const children = "test";
const component = getComponent({ children });
expect(component.getAttribute('rel')).toEqual('noreferrer noopener');
expect(component.getAttribute('target')).toEqual('_blank');
expect(component.getAttribute("rel")).toEqual("noreferrer noopener");
expect(component.getAttribute("target")).toEqual("_blank");
});
it('renders plain text link correctly', () => {
const children = 'test';
it("renders plain text link correctly", () => {
const children = "test";
expect(getComponent({ children })).toMatchSnapshot();
});
});

52
test/components/views/elements/FilterDropdown-test.tsx
View file

@ -14,55 +14,55 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { act, fireEvent, render } from '@testing-library/react';
import React from 'react';
import { act, fireEvent, render } from "@testing-library/react";
import React from "react";
import { FilterDropdown } from '../../../../src/components/views/elements/FilterDropdown';
import { flushPromises, mockPlatformPeg } from '../../../test-utils';
import { FilterDropdown } from "../../../../src/components/views/elements/FilterDropdown";
import { flushPromises, mockPlatformPeg } from "../../../test-utils";
mockPlatformPeg();
describe('<FilterDropdown />', () => {
describe("<FilterDropdown />", () => {
const options = [
{ id: 'one', label: 'Option one' },
{ id: 'two', label: 'Option two', description: 'with description' },
{ id: "one", label: "Option one" },
{ id: "two", label: "Option two", description: "with description" },
];
const defaultProps = {
className: 'test',
value: 'one',
className: "test",
value: "one",
options,
id: 'test',
label: 'test label',
id: "test",
label: "test label",
onOptionChange: jest.fn(),
};
const getComponent = (props = {}): JSX.Element =>
(<FilterDropdown {...defaultProps} {...props} />);
const getComponent = (props = {}): JSX.Element => <FilterDropdown {...defaultProps} {...props} />;
const openDropdown = async (container: HTMLElement): Promise<void> => await act(async () => {
const button = container.querySelector('[role="button"]');
expect(button).toBeTruthy();
fireEvent.click(button as Element);
await flushPromises();
});
const openDropdown = async (container: HTMLElement): Promise<void> =>
await act(async () => {
const button = container.querySelector('[role="button"]');
expect(button).toBeTruthy();
fireEvent.click(button as Element);
await flushPromises();
});
it('renders selected option', () => {
it("renders selected option", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders when selected option is not in options', () => {
const { container } = render(getComponent({ value: 'oops' }));
it("renders when selected option is not in options", () => {
const { container } = render(getComponent({ value: "oops" }));
expect(container).toMatchSnapshot();
});
it('renders selected option with selectedLabel', () => {
const { container } = render(getComponent({ selectedLabel: 'Show' }));
it("renders selected option with selectedLabel", () => {
const { container } = render(getComponent({ selectedLabel: "Show" }));
expect(container).toMatchSnapshot();
});
it('renders dropdown options in menu', async () => {
it("renders dropdown options in menu", async () => {
const { container } = render(getComponent());
await openDropdown(container);
expect(container.querySelector('.mx_Dropdown_menu')).toMatchSnapshot();
expect(container.querySelector(".mx_Dropdown_menu")).toMatchSnapshot();
});
});

64
test/components/views/elements/LabelledCheckbox-test.tsx
View file

@ -14,24 +14,21 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount } from 'enzyme';
import { mount } from "enzyme";
import { act } from "react-dom/test-utils";
import LabelledCheckbox from "../../../../src/components/views/elements/LabelledCheckbox";
// Fake random strings to give a predictable snapshot for checkbox IDs
jest.mock(
'matrix-js-sdk/src/randomstring',
() => {
return {
randomString: () => "abdefghi",
};
},
);
jest.mock("matrix-js-sdk/src/randomstring", () => {
return {
randomString: () => "abdefghi",
};
});
describe('<LabelledCheckbox />', () => {
describe("<LabelledCheckbox />", () => {
type CompProps = React.ComponentProps<typeof LabelledCheckbox>;
const getComponent = (props: CompProps) => mount(<LabelledCheckbox {...props} />);
type CompClass = ReturnType<typeof getComponent>;
@ -42,29 +39,26 @@ describe('<LabelledCheckbox />', () => {
const isChecked = (checkbox: ReturnType<typeof getCheckbox>) => checkbox.is(`[checked=true]`);
const isDisabled = (checkbox: ReturnType<typeof getCheckbox>) => checkbox.is(`[disabled=true]`);
const getText = (span: ReturnType<typeof getLabel>) => span.length > 0 ? span.at(0).text() : null;
const getText = (span: ReturnType<typeof getLabel>) => (span.length > 0 ? span.at(0).text() : null);
test.each([null, "this is a byline"])(
"should render with byline of %p",
(byline) => {
const props: CompProps = {
label: "Hello world",
value: true,
byline: byline,
onChange: jest.fn(),
};
const component = getComponent(props);
const checkbox = getCheckbox(component);
test.each([null, "this is a byline"])("should render with byline of %p", (byline) => {
const props: CompProps = {
label: "Hello world",
value: true,
byline: byline,
onChange: jest.fn(),
};
const component = getComponent(props);
const checkbox = getCheckbox(component);
expect(component).toMatchSnapshot();
expect(isChecked(checkbox)).toBe(true);
expect(isDisabled(checkbox)).toBe(false);
expect(getText(getLabel(component))).toBe(props.label);
expect(getText(getByline(component))).toBe(byline);
},
);
expect(component).toMatchSnapshot();
expect(isChecked(checkbox)).toBe(true);
expect(isDisabled(checkbox)).toBe(false);
expect(getText(getLabel(component))).toBe(props.label);
expect(getText(getByline(component))).toBe(byline);
});
it('should support unchecked by default', () => {
it("should support unchecked by default", () => {
const props: CompProps = {
label: "Hello world",
value: false,
@ -75,7 +69,7 @@ describe('<LabelledCheckbox />', () => {
expect(isChecked(getCheckbox(component))).toBe(false);
});
it('should be possible to disable the checkbox', () => {
it("should be possible to disable the checkbox", () => {
const props: CompProps = {
label: "Hello world",
value: false,
@ -87,7 +81,7 @@ describe('<LabelledCheckbox />', () => {
expect(isDisabled(getCheckbox(component))).toBe(true);
});
it('should emit onChange calls', () => {
it("should emit onChange calls", () => {
const props: CompProps = {
label: "Hello world",
value: false,
@ -98,13 +92,13 @@ describe('<LabelledCheckbox />', () => {
expect(props.onChange).not.toHaveBeenCalled();
act(() => {
getCheckbox(component).simulate('change');
getCheckbox(component).simulate("change");
});
expect(props.onChange).toHaveBeenCalledTimes(1);
});
it('should react to value and disabled prop changes', () => {
it("should react to value and disabled prop changes", () => {
const props: CompProps = {
label: "Hello world",
value: false,

43
test/components/views/elements/LearnMore-test.tsx
View file

@ -14,44 +14,41 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import LearnMore from '../../../../src/components/views/elements/LearnMore';
import Modal from '../../../../src/Modal';
import InfoDialog from '../../../../src/components/views/dialogs/InfoDialog';
import LearnMore from "../../../../src/components/views/elements/LearnMore";
import Modal from "../../../../src/Modal";
import InfoDialog from "../../../../src/components/views/dialogs/InfoDialog";
describe('<LearnMore />', () => {
describe("<LearnMore />", () => {
const defaultProps = {
title: 'Test',
description: 'test test test',
['data-testid']: 'testid',
title: "Test",
description: "test test test",
["data-testid"]: "testid",
};
const getComponent = (props = {}) =>
(<LearnMore {...defaultProps} {...props} />);
const getComponent = (props = {}) => <LearnMore {...defaultProps} {...props} />;
const modalSpy = jest.spyOn(Modal, 'createDialog').mockReturnValue(undefined);
const modalSpy = jest.spyOn(Modal, "createDialog").mockReturnValue(undefined);
beforeEach(() => {
jest.clearAllMocks();
});
it('renders button', () => {
it("renders button", () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('opens modal on click', async () => {
it("opens modal on click", async () => {
const { getByTestId } = render(getComponent());
fireEvent.click(getByTestId('testid'));
fireEvent.click(getByTestId("testid"));
expect(modalSpy).toHaveBeenCalledWith(
InfoDialog,
{
button: 'Got it',
description: defaultProps.description,
hasCloseButton: true,
title: defaultProps.title,
});
expect(modalSpy).toHaveBeenCalledWith(InfoDialog, {
button: "Got it",
description: defaultProps.description,
hasCloseButton: true,
title: defaultProps.title,
});
});
});

48
test/components/views/elements/Linkify-test.tsx
View file

@ -19,34 +19,28 @@ import { Linkify } from "../../../../src/components/views/elements/Linkify";
describe("Linkify", () => {
it("linkifies the context", () => {
const { container } = render(<Linkify>
https://perdu.com
</Linkify>);
const { container } = render(<Linkify>https://perdu.com</Linkify>);
expect(container.innerHTML).toBe(
"<div><a href=\"https://perdu.com\" class=\"linkified\" target=\"_blank\" rel=\"noreferrer noopener\">"+
"https://perdu.com" +
"</a></div>",
'<div><a href="https://perdu.com" class="linkified" target="_blank" rel="noreferrer noopener">' +
"https://perdu.com" +
"</a></div>",
);
});
it("correctly linkifies a room alias", () => {
const { container } = render(<Linkify>
#element-web:matrix.org
</Linkify>);
const { container } = render(<Linkify>#element-web:matrix.org</Linkify>);
expect(container.innerHTML).toBe(
"<div>" +
"<a href=\"https://matrix.to/#/#element-web:matrix.org\" class=\"linkified\" rel=\"noreferrer noopener\">" +
"#element-web:matrix.org" +
"</a></div>",
'<a href="https://matrix.to/#/#element-web:matrix.org" class="linkified" rel="noreferrer noopener">' +
"#element-web:matrix.org" +
"</a></div>",
);
});
it("changes the root tag name", () => {
const TAG_NAME = "p";
const { container } = render(<Linkify as={TAG_NAME}>
Hello world!
</Linkify>);
const { container } = render(<Linkify as={TAG_NAME}>Hello world!</Linkify>);
expect(container.querySelectorAll("p")).toHaveLength(1);
});
@ -60,31 +54,29 @@ describe("Linkify", () => {
// upon clicking the element, change the content, and expect
// linkify to update
return <div onClick={onClick}>
<Linkify>
{ n % 2 === 0
? "https://perdu.com"
: "https://matrix.org" }
</Linkify>
</div>;
return (
<div onClick={onClick}>
<Linkify>{n % 2 === 0 ? "https://perdu.com" : "https://matrix.org"}</Linkify>
</div>
);
}
const { container } = render(<DummyTest />);
expect(container.innerHTML).toBe(
"<div><div>" +
"<a href=\"https://perdu.com\" class=\"linkified\" target=\"_blank\" rel=\"noreferrer noopener\">" +
"https://perdu.com" +
"</a></div></div>",
'<a href="https://perdu.com" class="linkified" target="_blank" rel="noreferrer noopener">' +
"https://perdu.com" +
"</a></div></div>",
);
fireEvent.click(container.querySelector("div"));
expect(container.innerHTML).toBe(
"<div><div>" +
"<a href=\"https://matrix.org\" class=\"linkified\" target=\"_blank\" rel=\"noreferrer noopener\">" +
"https://matrix.org" +
"</a></div></div>",
'<a href="https://matrix.org" class="linkified" target="_blank" rel="noreferrer noopener">' +
"https://matrix.org" +
"</a></div></div>",
);
});
});

264
test/components/views/elements/PollCreateDialog-test.tsx
View file

@ -24,16 +24,13 @@ import {
M_POLL_START,
M_TEXT,
PollStartEvent,
} from 'matrix-events-sdk';
import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
} from "matrix-events-sdk";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import {
findById,
getMockClientWithEventEmitter,
} from '../../../test-utils';
import { findById, getMockClientWithEventEmitter } from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
// Fake date to give a predictable snapshot
const realDateNow = Date.now;
@ -50,7 +47,7 @@ afterAll(() => {
describe("PollCreateDialog", () => {
const mockClient = getMockClientWithEventEmitter({
sendEvent: jest.fn().mockResolvedValue({ event_id: '1' }),
sendEvent: jest.fn().mockResolvedValue({ event_id: "1" }),
});
beforeEach(() => {
@ -58,48 +55,35 @@ describe("PollCreateDialog", () => {
});
it("renders a blank poll", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
{
wrappingComponent: MatrixClientContext.Provider,
wrappingComponentProps: { value: mockClient },
},
);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />, {
wrappingComponent: MatrixClientContext.Provider,
wrappingComponentProps: { value: mockClient },
});
expect(dialog.html()).toMatchSnapshot();
});
it("autofocuses the poll topic on mount", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
expect(findById(dialog, 'poll-topic-input').at(0).props().autoFocus).toEqual(true);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(true);
});
it("autofocuses the new poll option field after clicking add option button", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
expect(findById(dialog, 'poll-topic-input').at(0).props().autoFocus).toEqual(true);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(true);
dialog.find("div.mx_PollCreateDialog_addOption").simulate("click");
expect(findById(dialog, 'poll-topic-input').at(0).props().autoFocus).toEqual(false);
expect(findById(dialog, 'pollcreate_option_1').at(0).props().autoFocus).toEqual(false);
expect(findById(dialog, 'pollcreate_option_2').at(0).props().autoFocus).toEqual(true);
expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(false);
expect(findById(dialog, "pollcreate_option_1").at(0).props().autoFocus).toEqual(false);
expect(findById(dialog, "pollcreate_option_2").at(0).props().autoFocus).toEqual(true);
});
it("renders a question and some options", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expect(submitIsDisabled(dialog)).toBe(true);
// When I set some values in the boxes
changeValue(
dialog,
"Question or topic",
"How many turnips is the optimal number?",
);
changeValue(dialog, "Question or topic", "How many turnips is the optimal number?");
changeValue(dialog, "Option 1", "As many as my neighbour");
changeValue(dialog, "Option 2", "The question is meaningless");
dialog.find("div.mx_PollCreateDialog_addOption").simulate("click");
@ -109,19 +93,11 @@ describe("PollCreateDialog", () => {
it("renders info from a previous event", () => {
const previousEvent: MatrixEvent = new MatrixEvent(
PollStartEvent.from(
"Poll Q",
["Answer 1", "Answer 2"],
M_POLL_KIND_DISCLOSED,
).serialize(),
PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_DISCLOSED).serialize(),
);
const dialog = mount(
<PollCreateDialog
room={createRoom()}
onFinished={jest.fn()}
editingMxEvent={previousEvent}
/>,
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
);
expect(submitIsDisabled(dialog)).toBe(false);
@ -129,17 +105,13 @@ describe("PollCreateDialog", () => {
});
it("doesn't allow submitting until there are options", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expect(submitIsDisabled(dialog)).toBe(true);
});
it("does allow submitting when there are options and a question", () => {
// Given a dialog with no info in (which I am unable to submit)
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expect(submitIsDisabled(dialog)).toBe(true);
// When I set some values in the boxes
@ -152,74 +124,42 @@ describe("PollCreateDialog", () => {
});
it("shows the open poll description at first", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
expect(
dialog.find('select').prop("value"),
).toEqual(M_POLL_KIND_DISCLOSED.name);
expect(
dialog.find('p').text(),
).toEqual("Voters see results as soon as they have voted");
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_DISCLOSED.name);
expect(dialog.find("p").text()).toEqual("Voters see results as soon as they have voted");
});
it("shows the closed poll description if we choose it", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
expect(
dialog.find('select').prop("value"),
).toEqual(M_POLL_KIND_UNDISCLOSED.name);
expect(
dialog.find('p').text(),
).toEqual("Results are only revealed when you end the poll");
expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_UNDISCLOSED.name);
expect(dialog.find("p").text()).toEqual("Results are only revealed when you end the poll");
});
it("shows the open poll description if we choose it", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
changeKind(dialog, M_POLL_KIND_DISCLOSED.name);
expect(
dialog.find('select').prop("value"),
).toEqual(M_POLL_KIND_DISCLOSED.name);
expect(
dialog.find('p').text(),
).toEqual("Voters see results as soon as they have voted");
expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_DISCLOSED.name);
expect(dialog.find("p").text()).toEqual("Voters see results as soon as they have voted");
});
it("shows the closed poll description when editing a closed poll", () => {
const previousEvent: MatrixEvent = new MatrixEvent(
PollStartEvent.from(
"Poll Q",
["Answer 1", "Answer 2"],
M_POLL_KIND_UNDISCLOSED,
).serialize(),
PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_UNDISCLOSED).serialize(),
);
previousEvent.event.event_id = "$prevEventId";
const dialog = mount(
<PollCreateDialog
room={createRoom()}
onFinished={jest.fn()}
editingMxEvent={previousEvent}
/>,
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
);
expect(
dialog.find('select').prop("value"),
).toEqual(M_POLL_KIND_UNDISCLOSED.name);
expect(
dialog.find('p').text(),
).toEqual("Results are only revealed when you end the poll");
expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_UNDISCLOSED.name);
expect(dialog.find("p").text()).toEqual("Results are only revealed when you end the poll");
});
it("displays a spinner after submitting", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
changeValue(dialog, "Question or topic", "Q");
changeValue(dialog, "Option 1", "A1");
changeValue(dialog, "Option 2", "A2");
@ -230,9 +170,7 @@ describe("PollCreateDialog", () => {
});
it("sends a poll create event when submitted", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
changeValue(dialog, "Question or topic", "Q");
changeValue(dialog, "Option 1", "A1");
changeValue(dialog, "Option 2", "A2");
@ -240,50 +178,40 @@ describe("PollCreateDialog", () => {
dialog.find("button").simulate("click");
const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
expect(M_POLL_START.matches(eventType)).toBeTruthy();
expect(sentEventContent).toEqual(
{
[M_TEXT.name]: "Q\n1. A1\n2. A2",
[M_POLL_START.name]: {
"answers": [
{
"id": expect.any(String),
[M_TEXT.name]: "A1",
},
{
"id": expect.any(String),
[M_TEXT.name]: "A2",
},
],
"kind": M_POLL_KIND_DISCLOSED.name,
"max_selections": 1,
"question": {
"body": "Q",
"format": undefined,
"formatted_body": undefined,
"msgtype": "m.text",
[M_TEXT.name]: "Q",
expect(sentEventContent).toEqual({
[M_TEXT.name]: "Q\n1. A1\n2. A2",
[M_POLL_START.name]: {
answers: [
{
id: expect.any(String),
[M_TEXT.name]: "A1",
},
{
id: expect.any(String),
[M_TEXT.name]: "A2",
},
],
kind: M_POLL_KIND_DISCLOSED.name,
max_selections: 1,
question: {
body: "Q",
format: undefined,
formatted_body: undefined,
msgtype: "m.text",
[M_TEXT.name]: "Q",
},
},
);
});
});
it("sends a poll edit event when editing", () => {
const previousEvent: MatrixEvent = new MatrixEvent(
PollStartEvent.from(
"Poll Q",
["Answer 1", "Answer 2"],
M_POLL_KIND_DISCLOSED,
).serialize(),
PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_DISCLOSED).serialize(),
);
previousEvent.event.event_id = "$prevEventId";
const dialog = mount(
<PollCreateDialog
room={createRoom()}
onFinished={jest.fn()}
editingMxEvent={previousEvent}
/>,
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
);
changeValue(dialog, "Question or topic", "Poll Q updated");
@ -293,65 +221,51 @@ describe("PollCreateDialog", () => {
const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
expect(M_POLL_START.matches(eventType)).toBeTruthy();
expect(sentEventContent).toEqual(
{
"m.new_content": {
[M_TEXT.name]: "Poll Q updated\n1. Answer 1\n2. Answer 2 updated",
[M_POLL_START.name]: {
"answers": [
{
"id": expect.any(String),
[M_TEXT.name]: "Answer 1",
},
{
"id": expect.any(String),
[M_TEXT.name]: "Answer 2 updated",
},
],
"kind": M_POLL_KIND_UNDISCLOSED.name,
"max_selections": 1,
"question": {
"body": "Poll Q updated",
"format": undefined,
"formatted_body": undefined,
"msgtype": "m.text",
[M_TEXT.name]: "Poll Q updated",
expect(sentEventContent).toEqual({
"m.new_content": {
[M_TEXT.name]: "Poll Q updated\n1. Answer 1\n2. Answer 2 updated",
[M_POLL_START.name]: {
answers: [
{
id: expect.any(String),
[M_TEXT.name]: "Answer 1",
},
{
id: expect.any(String),
[M_TEXT.name]: "Answer 2 updated",
},
],
kind: M_POLL_KIND_UNDISCLOSED.name,
max_selections: 1,
question: {
body: "Poll Q updated",
format: undefined,
formatted_body: undefined,
msgtype: "m.text",
[M_TEXT.name]: "Poll Q updated",
},
},
"m.relates_to": {
"event_id": previousEvent.getId(),
"rel_type": "m.replace",
},
},
);
"m.relates_to": {
event_id: previousEvent.getId(),
rel_type: "m.replace",
},
});
});
});
function createRoom(): Room {
return new Room(
"roomid",
MatrixClientPeg.get(),
"@name:example.com",
{},
);
return new Room("roomid", MatrixClientPeg.get(), "@name:example.com", {});
}
function changeValue(wrapper: ReactWrapper, labelText: string, value: string) {
wrapper.find(`input[label="${labelText}"]`).simulate(
"change",
{ target: { value: value } },
);
wrapper.find(`input[label="${labelText}"]`).simulate("change", { target: { value: value } });
}
function changeKind(wrapper: ReactWrapper, value: string) {
wrapper.find("select").simulate(
"change",
{ target: { value: value } },
);
wrapper.find("select").simulate("change", { target: { value: value } });
}
function submitIsDisabled(wrapper: ReactWrapper) {
return wrapper.find('button[type="submit"]').prop("aria-disabled") === true;
}

4
test/components/views/elements/PowerSelector-test.tsx
View file

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
import { fireEvent, render, screen } from "@testing-library/react";
import PowerSelector from "../../../../src/components/views/elements/PowerSelector";
describe('<PowerSelector />', () => {
describe("<PowerSelector />", () => {
it("should reset back to custom value when custom input is blurred blank", async () => {
const fn = jest.fn();
render(<PowerSelector value={25} maxValue={100} usersDefault={0} onChange={fn} />);

8
test/components/views/elements/ProgressBar-test.tsx
View file

@ -28,7 +28,9 @@ describe("<ProgressBar/>", () => {
expect(progress.value).toBe(0);
// Await the animation to conclude to our initial value of 50
act(() => { jest.runAllTimers(); });
act(() => {
jest.runAllTimers();
});
expect(progress.position).toBe(0.5);
// Move the needle to 80%
@ -36,7 +38,9 @@ describe("<ProgressBar/>", () => {
expect(progress.position).toBe(0.5);
// Let the animaiton run a tiny bit, assert it has moved from where it was to where it needs to go
act(() => { jest.advanceTimersByTime(150); });
act(() => {
jest.advanceTimersByTime(150);
});
expect(progress.position).toBeGreaterThan(0.5);
expect(progress.position).toBeLessThan(0.8);
});

4
test/components/views/elements/QRCode-test.tsx
View file

@ -24,13 +24,13 @@ describe("<QRCode />", () => {
it("renders a QR with defaults", async () => {
const { container, getAllByAltText } = render(<QRCode data="asd" />);
await waitFor(() => getAllByAltText('QR Code').length === 1);
await waitFor(() => getAllByAltText("QR Code").length === 1);
expect(container).toMatchSnapshot();
});
it("renders a QR with high error correction level", async () => {
const { container, getAllByAltText } = render(<QRCode data="asd" errorCorrectionLevel="high" />);
await waitFor(() => getAllByAltText('QR Code').length === 1);
await waitFor(() => getAllByAltText("QR Code").length === 1);
expect(container).toMatchSnapshot();
});
});

61
test/components/views/elements/ReplyChain-test.tsx
View file

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import * as testUtils from '../../../test-utils';
import * as testUtils from "../../../test-utils";
import { getParentEventId } from "../../../../src/utils/Reply";
describe("ReplyChain", () => {
describe('getParentEventId', () => {
it('retrieves relation reply from unedited event', () => {
describe("getParentEventId", () => {
it("retrieves relation reply from unedited event", () => {
const originalEventWithRelation = testUtils.mkEvent({
event: true,
type: "m.room.message",
@ -28,7 +28,7 @@ describe("ReplyChain", () => {
"body": "> Reply to this message\n\n foo",
"m.relates_to": {
"m.in_reply_to": {
"event_id": "$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
event_id: "$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
},
},
},
@ -36,11 +36,12 @@ describe("ReplyChain", () => {
room: "room_id",
});
expect(getParentEventId(originalEventWithRelation))
.toStrictEqual('$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og');
expect(getParentEventId(originalEventWithRelation)).toStrictEqual(
"$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
);
});
it('retrieves relation reply from original event when edited', () => {
it("retrieves relation reply from original event when edited", () => {
const originalEventWithRelation = testUtils.mkEvent({
event: true,
type: "m.room.message",
@ -49,7 +50,7 @@ describe("ReplyChain", () => {
"body": "> Reply to this message\n\n foo",
"m.relates_to": {
"m.in_reply_to": {
"event_id": "$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
event_id: "$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
},
},
},
@ -64,12 +65,12 @@ describe("ReplyChain", () => {
"msgtype": "m.text",
"body": "> Reply to this message\n\n * foo bar",
"m.new_content": {
"msgtype": "m.text",
"body": "foo bar",
msgtype: "m.text",
body: "foo bar",
},
"m.relates_to": {
"rel_type": "m.replace",
"event_id": originalEventWithRelation.getId(),
rel_type: "m.replace",
event_id: originalEventWithRelation.getId(),
},
},
user: "some_other_user",
@ -80,11 +81,12 @@ describe("ReplyChain", () => {
originalEventWithRelation.makeReplaced(editEvent);
// The relation should be pulled from the original event
expect(getParentEventId(originalEventWithRelation))
.toStrictEqual('$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og');
expect(getParentEventId(originalEventWithRelation)).toStrictEqual(
"$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
);
});
it('retrieves relation reply from edit event when provided', () => {
it("retrieves relation reply from edit event when provided", () => {
const originalEvent = testUtils.mkEvent({
event: true,
type: "m.room.message",
@ -107,13 +109,13 @@ describe("ReplyChain", () => {
"body": "foo bar",
"m.relates_to": {
"m.in_reply_to": {
"event_id": "$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
event_id: "$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og",
},
},
},
"m.relates_to": {
"rel_type": "m.replace",
"event_id": originalEvent.getId(),
rel_type: "m.replace",
event_id: originalEvent.getId(),
},
},
user: "some_other_user",
@ -124,11 +126,10 @@ describe("ReplyChain", () => {
originalEvent.makeReplaced(editEvent);
// The relation should be pulled from the edit event
expect(getParentEventId(originalEvent))
.toStrictEqual('$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og');
expect(getParentEventId(originalEvent)).toStrictEqual("$qkjmFBTEc0VvfVyzq1CJuh1QZi_xDIgNEFjZ4Pq34og");
});
it('prefers relation reply from edit event over original event', () => {
it("prefers relation reply from edit event over original event", () => {
const originalEventWithRelation = testUtils.mkEvent({
event: true,
type: "m.room.message",
@ -137,7 +138,7 @@ describe("ReplyChain", () => {
"body": "> Reply to this message\n\n foo",
"m.relates_to": {
"m.in_reply_to": {
"event_id": "$111",
event_id: "$111",
},
},
},
@ -156,13 +157,13 @@ describe("ReplyChain", () => {
"body": "foo bar",
"m.relates_to": {
"m.in_reply_to": {
"event_id": "$999",
event_id: "$999",
},
},
},
"m.relates_to": {
"rel_type": "m.replace",
"event_id": originalEventWithRelation.getId(),
rel_type: "m.replace",
event_id: originalEventWithRelation.getId(),
},
},
user: "some_other_user",
@ -173,10 +174,10 @@ describe("ReplyChain", () => {
originalEventWithRelation.makeReplaced(editEvent);
// The relation should be pulled from the edit event
expect(getParentEventId(originalEventWithRelation)).toStrictEqual('$999');
expect(getParentEventId(originalEventWithRelation)).toStrictEqual("$999");
});
it('able to clear relation reply from original event by providing empty relation field', () => {
it("able to clear relation reply from original event by providing empty relation field", () => {
const originalEventWithRelation = testUtils.mkEvent({
event: true,
type: "m.room.message",
@ -185,7 +186,7 @@ describe("ReplyChain", () => {
"body": "> Reply to this message\n\n foo",
"m.relates_to": {
"m.in_reply_to": {
"event_id": "$111",
event_id: "$111",
},
},
},
@ -206,8 +207,8 @@ describe("ReplyChain", () => {
"m.relates_to": {},
},
"m.relates_to": {
"rel_type": "m.replace",
"event_id": originalEventWithRelation.getId(),
rel_type: "m.replace",
event_id: originalEventWithRelation.getId(),
},
},
user: "some_other_user",

47
test/components/views/elements/StyledRadioGroup-test.tsx
View file

@ -14,47 +14,47 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import StyledRadioGroup from "../../../../src/components/views/elements/StyledRadioGroup";
describe('<StyledRadioGroup />', () => {
describe("<StyledRadioGroup />", () => {
const optionA = {
value: 'Anteater',
value: "Anteater",
label: <span>Anteater label</span>,
description: 'anteater description',
className: 'a-class',
description: "anteater description",
className: "a-class",
};
const optionB = {
value: 'Badger',
value: "Badger",
label: <span>Badger label</span>,
};
const optionC = {
value: 'Canary',
value: "Canary",
label: <span>Canary label</span>,
description: <span>Canary description</span>,
};
const defaultDefinitions = [optionA, optionB, optionC];
const defaultProps = {
name: 'test',
className: 'test-class',
name: "test",
className: "test-class",
definitions: defaultDefinitions,
onChange: jest.fn(),
};
const getComponent = (props = {}) => render(<StyledRadioGroup {...defaultProps} {...props} />);
const getInputByValue = (component, value) => component.container.querySelector(`input[value="${value}"]`);
const getCheckedInput = component => component.container.querySelector('input[checked]');
const getCheckedInput = (component) => component.container.querySelector("input[checked]");
it('renders radios correctly when no value is provided', () => {
it("renders radios correctly when no value is provided", () => {
const component = getComponent();
expect(component.asFragment()).toMatchSnapshot();
expect(getCheckedInput(component)).toBeFalsy();
});
it('selects correct button when value is provided', () => {
it("selects correct button when value is provided", () => {
const component = getComponent({
value: optionC.value,
});
@ -62,14 +62,11 @@ describe('<StyledRadioGroup />', () => {
expect(getCheckedInput(component).value).toEqual(optionC.value);
});
it('selects correct buttons when definitions have checked prop', () => {
const definitions = [
{ ...optionA, checked: true },
optionB,
{ ...optionC, checked: false },
];
it("selects correct buttons when definitions have checked prop", () => {
const definitions = [{ ...optionA, checked: true }, optionB, { ...optionC, checked: false }];
const component = getComponent({
value: optionC.value, definitions,
value: optionC.value,
definitions,
});
expect(getInputByValue(component, optionA.value)).toBeChecked();
@ -78,26 +75,22 @@ describe('<StyledRadioGroup />', () => {
expect(getInputByValue(component, optionC.value)).not.toBeChecked();
});
it('disables individual buttons based on definition.disabled', () => {
const definitions = [
optionA,
{ ...optionB, disabled: true },
{ ...optionC, disabled: true },
];
it("disables individual buttons based on definition.disabled", () => {
const definitions = [optionA, { ...optionB, disabled: true }, { ...optionC, disabled: true }];
const component = getComponent({ definitions });
expect(getInputByValue(component, optionA.value)).not.toBeDisabled();
expect(getInputByValue(component, optionB.value)).toBeDisabled();
expect(getInputByValue(component, optionC.value)).toBeDisabled();
});
it('disables all buttons with disabled prop', () => {
it("disables all buttons with disabled prop", () => {
const component = getComponent({ disabled: true });
expect(getInputByValue(component, optionA.value)).toBeDisabled();
expect(getInputByValue(component, optionB.value)).toBeDisabled();
expect(getInputByValue(component, optionC.value)).toBeDisabled();
});
it('calls onChange on click', () => {
it("calls onChange on click", () => {
const onChange = jest.fn();
const component = getComponent({
value: optionC.value,

37
test/components/views/elements/TooltipTarget-test.tsx
View file

@ -15,29 +15,26 @@ limitations under the License.
*/
import React from "react";
import {
renderIntoDocument,
Simulate,
} from 'react-dom/test-utils';
import { renderIntoDocument, Simulate } from "react-dom/test-utils";
import { act } from "react-dom/test-utils";
import { Alignment } from '../../../../src/components/views/elements/Tooltip';
import { Alignment } from "../../../../src/components/views/elements/Tooltip";
import TooltipTarget from "../../../../src/components/views/elements/TooltipTarget";
describe('<TooltipTarget />', () => {
describe("<TooltipTarget />", () => {
const defaultProps = {
"tooltipTargetClassName": 'test tooltipTargetClassName',
"className": 'test className',
"tooltipClassName": 'test tooltipClassName',
"label": 'test label',
"tooltipTargetClassName": "test tooltipTargetClassName",
"className": "test className",
"tooltipClassName": "test tooltipClassName",
"label": "test label",
"alignment": Alignment.Left,
"id": 'test id',
'data-test-id': 'test',
"id": "test id",
"data-test-id": "test",
};
afterEach(() => {
// clean up renderer tooltips
const wrapper = document.querySelector('.mx_Tooltip_wrapper');
const wrapper = document.querySelector(".mx_Tooltip_wrapper");
while (wrapper?.firstChild) {
wrapper.removeChild(wrapper.lastChild);
}
@ -45,19 +42,19 @@ describe('<TooltipTarget />', () => {
const getComponent = (props = {}) => {
const wrapper = renderIntoDocument<HTMLSpanElement>(
// wrap in element so renderIntoDocument can render functional component
// wrap in element so renderIntoDocument can render functional component
<span>
<TooltipTarget {...defaultProps} {...props}>
<span>child</span>
</TooltipTarget>
</span>,
) as HTMLSpanElement;
return wrapper.querySelector('[data-test-id=test]');
return wrapper.querySelector("[data-test-id=test]");
};
const getVisibleTooltip = () => document.querySelector('.mx_Tooltip.mx_Tooltip_visible');
const getVisibleTooltip = () => document.querySelector(".mx_Tooltip.mx_Tooltip_visible");
it('renders container', () => {
it("renders container", () => {
const component = getComponent();
expect(component).toMatchSnapshot();
expect(getVisibleTooltip()).toBeFalsy();
@ -72,7 +69,7 @@ describe('<TooltipTarget />', () => {
expect(getVisibleTooltip()).toMatchSnapshot();
});
it('hides tooltip on mouseleave', () => {
it("hides tooltip on mouseleave", () => {
const wrapper = getComponent();
act(() => {
Simulate.mouseOver(wrapper);
@ -84,7 +81,7 @@ describe('<TooltipTarget />', () => {
expect(getVisibleTooltip()).toBeFalsy();
});
it('displays tooltip on focus', () => {
it("displays tooltip on focus", () => {
const wrapper = getComponent();
act(() => {
Simulate.focus(wrapper);
@ -92,7 +89,7 @@ describe('<TooltipTarget />', () => {
expect(getVisibleTooltip()).toBeTruthy();
});
it('hides tooltip on blur', async () => {
it("hides tooltip on blur", async () => {
const wrapper = getComponent();
act(() => {
Simulate.focus(wrapper);