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

Room and user mentions for plain text editor (#10665)

Browse source 
* update useSuggestion

* update useSuggestion-tests

* add processMention tests

* add test

* add getMentionOrCommand tests

* change mock href for codeQL reasons

* fix TS issue in test

* add a big old cypress test

* fix lint error

* update comments

* reorganise functions in order of importance

* rename functions and variables

* add endOffset to return object

* fix failing tests

* update function names and comments

* update comment, remove delay

* update comments and early return

* nest mappedSuggestion inside Suggestion state and update test

* rename suggestion => suggestionData

* update comment

* add argument to findSuggestionInText

* make findSuggestionInText return mappedSuggestion

* fix TS error

* update comments and index check from === -1 to < 0

* tidy logic in increment functions

* rename variable

* Big refactor to address multiple comments, improve behaviour and add tests

* improve comments

* tidy up comment

* extend comment

* combine similar returns

* update comment

* remove single use variable

* fix comments
This commit is contained in:
alunturner 2023-05-11 15:28:42 +01:00 • committed by GitHub
parent 68ff19fb4b
commit 0889dc55da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 506 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

77
cypress/e2e/composer/composer.spec.ts
View file

@ -15,9 +15,11 @@ limitations under the License.
*/
/// <reference types="cypress" />
import { EventType } from "matrix-js-sdk/src/@types/event";
import { HomeserverInstance } from "../../plugins/utils/homeserver";
import { SettingLevel } from "../../../src/settings/SettingLevel";
import { MatrixClient } from "../../global";
describe("Composer", () => {
let homeserver: HomeserverInstance;
@ -181,6 +183,81 @@ describe("Composer", () => {
});
});
describe("Mentions", () => {
// TODO add tests for rich text mode
describe("Plain text mode", () => {
it("autocomplete behaviour tests", () => {
// Setup a private room so we have another user to mention
const otherUserName = "Bob";
let bobClient: MatrixClient;
cy.getBot(homeserver, {
displayName: otherUserName,
}).then((bob) => {
bobClient = bob;
});
// create DM with bob
cy.getClient().then(async (cli) => {
const bobRoom = await cli.createRoom({ is_direct: true });
await cli.invite(bobRoom.room_id, bobClient.getUserId());
await cli.setAccountData("m.direct" as EventType, {
[bobClient.getUserId()]: [bobRoom.room_id],
});
});
cy.viewRoomByName("Bob");
// Select plain text mode after composer is ready
cy.get("div[contenteditable=true]").should("exist");
cy.findByRole("button", { name: "Hide formatting" }).click();
// Typing a single @ does not display the autocomplete menu and contents
cy.findByRole("textbox").type("@");
cy.findByTestId("autocomplete-wrapper").should("be.empty");
// Entering the first letter of the other user's name opens the autocomplete...
cy.findByRole("textbox").type(otherUserName.slice(0, 1));
cy.findByTestId("autocomplete-wrapper")
.should("not.be.empty")
.within(() => {
// ...with the other user name visible, and clicking that username...
cy.findByText(otherUserName).should("exist").click();
});
// ...inserts the username into the composer
cy.findByRole("textbox").within(() => {
// TODO update this test when the mentions are inserted as pills, instead
// of as text
cy.findByText(otherUserName, { exact: false }).should("exist");
});
// Send the message to clear the composer
cy.findByRole("button", { name: "Send message" }).click();
// Typing an @, then other user's name, then trailing space closes the autocomplete
cy.findByRole("textbox").type(`@${otherUserName} `);
cy.findByTestId("autocomplete-wrapper").should("be.empty");
// Send the message to clear the composer
cy.findByRole("button", { name: "Send message" }).click();
// Moving the cursor back to an "incomplete" mention opens the autocomplete
cy.findByRole("textbox").type(`initial text @${otherUserName.slice(0, 1)} abc`);
cy.findByTestId("autocomplete-wrapper").should("be.empty");
// Move the cursor left by 4 to put it to: `@B| abc`, check autocomplete displays
cy.findByRole("textbox").type(`${"{leftArrow}".repeat(4)}`);
cy.findByTestId("autocomplete-wrapper").should("not.be.empty");
// Selecting the autocomplete option using Enter inserts it into the composer
cy.findByRole("textbox").type(`{Enter}`);
cy.findByRole("textbox").within(() => {
// TODO update this test when the mentions are inserted as pills, instead
// of as text
cy.findByText(otherUserName, { exact: false }).should("exist");
});
});
});
});
it("sends a message when you click send or press Enter", () => {
// Type a message
cy.get("div[contenteditable=true]").type("my message 0");