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

Commands for plain text editor (#10567)

Browse source 
* add the handlers for when autocomplete is open plus rough / handling

* hack in using the wysiwyg autocomplete

* switch to using onSelect for the behaviour

* expand comment

* add a handle command function to replace text

* add event firing step

* fix TS errors for RefObject

* extract common functionality to new util

* use util for plain text mode

* use util for rich text mode

* remove unused imports

* make util able to handle either type of keyboard event

* fix TS error for mxClient

* lift all new code into main component prior to extracting to custom hook

* shift logic into custom hook

* rename ref to editorRef for clarity

* remove comment

* try to add cypress test for behaviour

* remove unused imports

* fix various lint/TS errors for CI

* update cypress test

* add test for pressing escape to close autocomplete

* expand cypress tests

* add typing while autocomplete open test

* refactor to single piece of state and update comments

* update comment

* extract functions for testing

* add first tests

* improve tests

* remove console log

* call useSuggestion hook from different location

* update useSuggestion hook tests

* improve cypress tests

* remove unused import

* fix selector in cypress test

* add another set of util tests

* remove .only

* remove .only

* remove import

* improve cypress tests

* remove .only

* add comment

* improve comments

* tidy up tests

* consolidate all cypress tests to one

* add early return

* fix typo, add documentation

* add early return, tidy up comments

* change function expression to function declaration

* add documentation

* fix broken test

* add check to cypress tests

* update types

* update comment

* update comments

* shift ref declaration inside the hook

* remove unused import

* update cypress test and add comments

* update usePlainTextListener comments

* apply suggested changes to useSuggestion

* update tests

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
alunturner 2023-04-27 08:37:47 +01:00 • committed by GitHub
parent 0a22ed90ef
commit ca25c8f430
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 626 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -117,6 +117,70 @@ describe("Composer", () => {
cy.viewRoomByName("Composing Room");
});
describe("Commands", () => {
// TODO add tests for rich text mode
describe("Plain text mode", () => {
it("autocomplete behaviour tests", () => {
// 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 / displays the autocomplete menu and contents
cy.findByRole("textbox").type("/");
// Check that the autocomplete options are visible and there are more than 0 items
cy.findByTestId("autocomplete-wrapper").should("not.be.empty");
// Entering `//` or `/ ` hides the autocomplete contents
// Add an extra slash for `//`
cy.findByRole("textbox").type("/");
cy.findByTestId("autocomplete-wrapper").should("be.empty");
// Remove the extra slash to go back to `/`
cy.findByRole("textbox").type("{Backspace}");
cy.findByTestId("autocomplete-wrapper").should("not.be.empty");
// Add a trailing space for `/ `
cy.findByRole("textbox").type(" ");
cy.findByTestId("autocomplete-wrapper").should("be.empty");
// Typing a command that takes no arguments (/devtools) and selecting by click works
cy.findByRole("textbox").type("{Backspace}dev");
cy.findByTestId("autocomplete-wrapper").within(() => {
cy.findByText("/devtools").click();
});
// Check it has closed the autocomplete and put the text into the composer
cy.findByTestId("autocomplete-wrapper").should("not.be.visible");
cy.findByRole("textbox").within(() => {
cy.findByText("/devtools").should("exist");
});
// Send the message and check the devtools dialog appeared, then close it
cy.findByRole("button", { name: "Send message" }).click();
cy.findByRole("dialog").within(() => {
cy.findByText("Developer Tools").should("exist");
});
cy.findByRole("button", { name: "Close dialog" }).click();
// Typing a command that takes arguments (/spoiler) and selecting with enter works
cy.findByRole("textbox").type("/spoil");
cy.findByTestId("autocomplete-wrapper").within(() => {
cy.findByText("/spoiler").should("exist");
});
cy.findByRole("textbox").type("{Enter}");
// Check it has closed the autocomplete and put the text into the composer
cy.findByTestId("autocomplete-wrapper").should("not.be.visible");
cy.findByRole("textbox").within(() => {
cy.findByText("/spoiler").should("exist");
});
// Enter some more text, then send the message
cy.findByRole("textbox").type("this is the spoiler text ");
cy.findByRole("button", { name: "Send message" }).click();
// Check that a spoiler item has appeared in the timeline and contains the spoiler command text
cy.get("span.mx_EventTile_spoiler").should("exist");
cy.findByText("this is the spoiler text").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");