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

Merge branch 'develop' into sort-imports

Browse source 
Signed-off-by: Aaron Raimist <aaron@raim.ist>
This commit is contained in:
Aaron Raimist 2021-12-09 08:34:20 +00:00
commit 7b94e13a84
642 changed files with 30052 additions and 8035 deletions
Download patch file Download diff file Expand all files Collapse all files

162
test/components/views/elements/InteractiveTooltip-test.ts Normal file
View file

@ -0,0 +1,162 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import '../../../skinned-sdk';
import { Direction, mouseWithinRegion } from "../../../../src/components/views/elements/InteractiveTooltip";
describe("InteractiveTooltip", () => {
describe("mouseWithinRegion", () => {
it("direction=left", () => {
const targetRect = {
width: 20,
height: 20,
top: 300,
right: 370,
bottom: 320,
left: 350,
} as DOMRect;
const contentRect = {
width: 100,
height: 400,
top: 100,
right: 200,
bottom: 500,
left: 100,
} as DOMRect;
// just within top left corner of contentRect
expect(mouseWithinRegion(101, 101, Direction.Left, targetRect, contentRect)).toBe(true);
// just outside top left corner of contentRect, within buffer
expect(mouseWithinRegion(101, 90, Direction.Left, targetRect, contentRect)).toBe(true);
// just within top right corner of targetRect
expect(mouseWithinRegion(369, 301, Direction.Left, targetRect, contentRect)).toBe(true);
// within the top triangular portion of the trapezoid
expect(mouseWithinRegion(300, 200, Direction.Left, targetRect, contentRect)).toBe(true);
// within the bottom triangular portion of the trapezoid
expect(mouseWithinRegion(300, 350, Direction.Left, targetRect, contentRect)).toBe(true);
// outside the top triangular portion of the trapezoid
expect(mouseWithinRegion(300, 140, Direction.Left, targetRect, contentRect)).toBe(false);
// outside the bottom triangular portion of the trapezoid
expect(mouseWithinRegion(300, 460, Direction.Left, targetRect, contentRect)).toBe(false);
});
it("direction=right", () => {
const targetRect = {
width: 20,
height: 20,
top: 300,
right: 370,
bottom: 320,
left: 350,
} as DOMRect;
const contentRect = {
width: 100,
height: 400,
top: 100,
right: 620,
bottom: 500,
left: 520,
} as DOMRect;
// just within top right corner of contentRect
expect(mouseWithinRegion(619, 101, Direction.Right, targetRect, contentRect)).toBe(true);
// just outside top right corner of contentRect, within buffer
expect(mouseWithinRegion(619, 90, Direction.Right, targetRect, contentRect)).toBe(true);
// just within top left corner of targetRect
expect(mouseWithinRegion(351, 301, Direction.Right, targetRect, contentRect)).toBe(true);
// within the top triangular portion of the trapezoid
expect(mouseWithinRegion(420, 200, Direction.Right, targetRect, contentRect)).toBe(true);
// within the bottom triangular portion of the trapezoid
expect(mouseWithinRegion(420, 350, Direction.Right, targetRect, contentRect)).toBe(true);
// outside the top triangular portion of the trapezoid
expect(mouseWithinRegion(420, 140, Direction.Right, targetRect, contentRect)).toBe(false);
// outside the bottom triangular portion of the trapezoid
expect(mouseWithinRegion(420, 460, Direction.Right, targetRect, contentRect)).toBe(false);
});
it("direction=top", () => {
const targetRect = {
width: 20,
height: 20,
top: 300,
right: 370,
bottom: 320,
left: 350,
} as DOMRect;
const contentRect = {
width: 400,
height: 100,
top: 100,
right: 550,
bottom: 200,
left: 150,
} as DOMRect;
// just within top right corner of contentRect
expect(mouseWithinRegion(549, 101, Direction.Top, targetRect, contentRect)).toBe(true);
// just outside top right corner of contentRect, within buffer
expect(mouseWithinRegion(549, 99, Direction.Top, targetRect, contentRect)).toBe(true);
// just within bottom left corner of targetRect
expect(mouseWithinRegion(351, 319, Direction.Top, targetRect, contentRect)).toBe(true);
// within the left triangular portion of the trapezoid
expect(mouseWithinRegion(240, 260, Direction.Top, targetRect, contentRect)).toBe(true);
// within the right triangular portion of the trapezoid
expect(mouseWithinRegion(480, 260, Direction.Top, targetRect, contentRect)).toBe(true);
// outside the left triangular portion of the trapezoid
expect(mouseWithinRegion(220, 260, Direction.Top, targetRect, contentRect)).toBe(false);
// outside the right triangular portion of the trapezoid
expect(mouseWithinRegion(500, 260, Direction.Top, targetRect, contentRect)).toBe(false);
});
it("direction=bottom", () => {
const targetRect = {
width: 20,
height: 20,
top: 300,
right: 370,
bottom: 320,
left: 350,
} as DOMRect;
const contentRect = {
width: 400,
height: 100,
top: 420,
right: 550,
bottom: 520,
left: 150,
} as DOMRect;
// just within bottom left corner of contentRect
expect(mouseWithinRegion(101, 519, Direction.Bottom, targetRect, contentRect)).toBe(true);
// just outside bottom left corner of contentRect, within buffer
expect(mouseWithinRegion(101, 521, Direction.Bottom, targetRect, contentRect)).toBe(true);
// just within top left corner of targetRect
expect(mouseWithinRegion(351, 301, Direction.Bottom, targetRect, contentRect)).toBe(true);
// within the left triangular portion of the trapezoid
expect(mouseWithinRegion(240, 360, Direction.Bottom, targetRect, contentRect)).toBe(true);
// within the right triangular portion of the trapezoid
expect(mouseWithinRegion(480, 360, Direction.Bottom, targetRect, contentRect)).toBe(true);
// outside the left triangular portion of the trapezoid
expect(mouseWithinRegion(220, 360, Direction.Bottom, targetRect, contentRect)).toBe(false);
// outside the right triangular portion of the trapezoid
expect(mouseWithinRegion(500, 360, Direction.Bottom, targetRect, contentRect)).toBe(false);
});
});
});

125
test/components/views/elements/PollCreateDialog-test.tsx Normal file
View file

@ -0,0 +1,125 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
// skinned-sdk should be the first import in most tests
import '../../../skinned-sdk';
import React from "react";
import { mount, ReactWrapper } from "enzyme";
import * as TestUtils from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import { Room } from "matrix-js-sdk/src/models/room";
import _PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
const PollCreateDialog = TestUtils.wrapInMatrixClientContext(_PollCreateDialog);
// Fake date to give a predictable snapshot
const realDateNow = Date.now;
const realDateToISOString = Date.prototype.toISOString;
Date.now = jest.fn(() => 2345678901234);
// eslint-disable-next-line no-extend-native
Date.prototype.toISOString = jest.fn(() => "2021-11-23T14:35:14.240Z");
afterAll(() => {
Date.now = realDateNow;
// eslint-disable-next-line no-extend-native
Date.prototype.toISOString = realDateToISOString;
});
describe("PollCreateDialog", () => {
it("renders a blank poll", () => {
const dialog = mount(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
);
expect(dialog).toMatchSnapshot();
});
it("renders a question and some options", () => {
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, "Option 1", "As many as my neighbour");
changeValue(dialog, "Option 2", "The question is meaningless");
dialog.find("div.mx_PollCreateDialog_addOption").simulate("click");
changeValue(dialog, "Option 3", "Mu");
expect(dialog).toMatchSnapshot();
});
it("doesn't allow submitting until there are options", () => {
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()} />,
);
expect(submitIsDisabled(dialog)).toBe(true);
// When I set some values in the boxes
changeValue(dialog, "Question or topic", "Q");
changeValue(dialog, "Option 1", "A1");
changeValue(dialog, "Option 2", "A2");
// Then I am able to submit
expect(submitIsDisabled(dialog)).toBe(false);
});
it("displays a spinner after submitting", () => {
TestUtils.stubClient();
MatrixClientPeg.get().sendEvent = jest.fn(() => Promise.resolve());
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");
expect(dialog.find("Spinner").length).toBe(0);
dialog.find("button").simulate("click");
expect(dialog.find("Spinner").length).toBe(1);
});
});
function createRoom(): Room {
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 } },
);
}
function submitIsDisabled(wrapper: ReactWrapper) {
return wrapper.find('button[type="submit"]').prop("aria-disabled") === true;
}

2349
test/components/views/elements/__snapshots__/PollCreateDialog-test.tsx.snap Normal file
View file

File diff suppressed because it is too large Load diff