/* Copyright 2023 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 React from "react"; import { Suggestion, findSuggestionInText, getMappedSuggestion, processCommand, processEmojiReplacement, processMention, processSelectionChange, } from "../../../../../../src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion"; function createMockPlainTextSuggestionPattern(props: Partial = {}): Suggestion { return { mappedSuggestion: { keyChar: "/", type: "command", text: "some text", ...props.mappedSuggestion }, node: document.createTextNode(""), startOffset: 0, endOffset: 0, ...props, }; } function createMockCustomSuggestionPattern(props: Partial = {}): Suggestion { return { mappedSuggestion: { keyChar: "", type: "custom", text: "🙂", ...props.mappedSuggestion }, node: document.createTextNode(":)"), startOffset: 0, endOffset: 2, ...props, }; } describe("processCommand", () => { it("does not change parent hook state if suggestion is null", () => { // create a mockSuggestion using the text node above const mockSetSuggestion = jest.fn(); const mockSetText = jest.fn(); // call the function with a null suggestion processCommand("should not be seen", null, mockSetSuggestion, mockSetText); // check that the parent state setter has not been called expect(mockSetText).not.toHaveBeenCalled(); }); it("can change the parent hook state when required", () => { // create a div and append a text node to it with some initial text const editorDiv = document.createElement("div"); const initialText = "text"; const textNode = document.createTextNode(initialText); editorDiv.appendChild(textNode); // create a mockSuggestion using the text node above const mockSuggestion = createMockPlainTextSuggestionPattern({ node: textNode }); const mockSetSuggestion = jest.fn(); const mockSetText = jest.fn(); const replacementText = "/replacement text"; processCommand(replacementText, mockSuggestion, mockSetSuggestion, mockSetText); // check that the text has changed and includes a trailing space expect(mockSetText).toHaveBeenCalledWith(`${replacementText} `); }); }); describe("processEmojiReplacement", () => { it("does not change parent hook state if suggestion is null", () => { // create a mockSuggestion using the text node above const mockSetSuggestion = jest.fn(); const mockSetText = jest.fn(); // call the function with a null suggestion processEmojiReplacement(null, mockSetSuggestion, mockSetText); // check that the parent state setter has not been called expect(mockSetText).not.toHaveBeenCalled(); }); it("can change the parent hook state when required", () => { // create a div and append a text node to it with some initial text const editorDiv = document.createElement("div"); const initialText = ":)"; const textNode = document.createTextNode(initialText); editorDiv.appendChild(textNode); // create a mockSuggestion using the text node above const mockSuggestion = createMockCustomSuggestionPattern({ node: textNode }); const mockSetSuggestion = jest.fn(); const mockSetText = jest.fn(); const replacementText = "🙂"; processEmojiReplacement(mockSuggestion, mockSetSuggestion, mockSetText); // check that the text has changed and includes a trailing space expect(mockSetText).toHaveBeenCalledWith(replacementText); }); }); describe("processMention", () => { // TODO refactor and expand tests when mentions become tags it("returns early when suggestion is null", () => { const mockSetSuggestion = jest.fn(); const mockSetText = jest.fn(); processMention("href", "displayName", new Map(), null, mockSetSuggestion, mockSetText); expect(mockSetSuggestion).not.toHaveBeenCalled(); expect(mockSetText).not.toHaveBeenCalled(); }); it("can insert a mention into a text node", () => { // make a text node and an editor div, set the cursor inside the text node and then // append node to editor, then editor to document const textNode = document.createTextNode("@a"); const mockEditor = document.createElement("div"); mockEditor.appendChild(textNode); document.body.appendChild(mockEditor); document.getSelection()?.setBaseAndExtent(textNode, 1, textNode, 1); // call the util function const href = "href"; const displayName = "displayName"; const mockSetSuggestionData = jest.fn(); const mockSetText = jest.fn(); processMention( href, displayName, new Map([["style", "test"]]), { node: textNode, startOffset: 0, endOffset: 2 } as unknown as Suggestion, mockSetSuggestionData, mockSetText, ); // check that the editor has a single child expect(mockEditor.children).toHaveLength(1); const linkElement = mockEditor.firstElementChild as HTMLElement; // and that the child is an tag with the expected attributes and content expect(linkElement).toBeInstanceOf(HTMLAnchorElement); expect(linkElement).toHaveAttribute(href, href); expect(linkElement).toHaveAttribute("contenteditable", "false"); expect(linkElement).toHaveAttribute("style", "test"); expect(linkElement.textContent).toBe(displayName); expect(mockSetText).toHaveBeenCalledWith(); expect(mockSetSuggestionData).toHaveBeenCalledWith(null); }); }); describe("processSelectionChange", () => { function createMockEditorRef(element: HTMLDivElement | null = null): React.RefObject { return { current: element } as React.RefObject; } function appendEditorWithTextNodeContaining(initialText = ""): [HTMLDivElement, Node] { // create the elements/nodes const mockEditor = document.createElement("div"); const textNode = document.createTextNode(initialText); // append text node to the editor, editor to the document body mockEditor.appendChild(textNode); document.body.appendChild(mockEditor); return [mockEditor, textNode]; } const mockSetSuggestion = jest.fn(); beforeEach(() => { mockSetSuggestion.mockClear(); }); it("returns early if current editorRef is null", () => { const mockEditorRef = createMockEditorRef(null); // we monitor for the call to document.createNodeIterator to indicate an early return const nodeIteratorSpy = jest.spyOn(document, "createNodeIterator"); processSelectionChange(mockEditorRef, jest.fn()); expect(nodeIteratorSpy).not.toHaveBeenCalled(); // tidy up to avoid potential impacts on other tests nodeIteratorSpy.mockRestore(); }); it("calls setSuggestion with null if selection is not a cursor", () => { const [mockEditor, textNode] = appendEditorWithTextNodeContaining("content"); const mockEditorRef = createMockEditorRef(mockEditor); // create a selection in the text node that has different start and end locations ie it // is not a cursor document.getSelection()?.setBaseAndExtent(textNode, 0, textNode, 4); // process the selection and check that we do not attempt to set the suggestion processSelectionChange(mockEditorRef, mockSetSuggestion); expect(mockSetSuggestion).toHaveBeenCalledWith(null); }); it("calls setSuggestion with null if selection cursor is not inside a text node", () => { const [mockEditor] = appendEditorWithTextNodeContaining("content"); const mockEditorRef = createMockEditorRef(mockEditor); // create a selection that points at the editor element, not the text node it contains document.getSelection()?.setBaseAndExtent(mockEditor, 0, mockEditor, 0); // process the selection and check that we do not attempt to set the suggestion processSelectionChange(mockEditorRef, mockSetSuggestion); expect(mockSetSuggestion).toHaveBeenCalledWith(null); }); it("calls setSuggestion with null if we have an existing suggestion but no command match", () => { const [mockEditor, textNode] = appendEditorWithTextNodeContaining("content"); const mockEditorRef = createMockEditorRef(mockEditor); // create a selection in the text node that has identical start and end locations, ie it is a cursor document.getSelection()?.setBaseAndExtent(textNode, 0, textNode, 0); // the call to process the selection will have an existing suggestion in state due to the second // argument being non-null, expect that we clear this suggestion now that the text is not a command processSelectionChange(mockEditorRef, mockSetSuggestion); expect(mockSetSuggestion).toHaveBeenCalledWith(null); }); it("calls setSuggestion with the expected arguments when text node is valid command", () => { const commandText = "/potentialCommand"; const [mockEditor, textNode] = appendEditorWithTextNodeContaining(commandText); const mockEditorRef = createMockEditorRef(mockEditor); // create a selection in the text node that has identical start and end locations, ie it is a cursor document.getSelection()?.setBaseAndExtent(textNode, 3, textNode, 3); // process the change and check the suggestion that is set looks as we expect it to processSelectionChange(mockEditorRef, mockSetSuggestion); expect(mockSetSuggestion).toHaveBeenCalledWith({ mappedSuggestion: { keyChar: "/", type: "command", text: "potentialCommand", }, node: textNode, startOffset: 0, endOffset: commandText.length, }); }); it("does not treat a command outside the first text node to be a suggestion", () => { const [mockEditor] = appendEditorWithTextNodeContaining("some text in first node"); const [, commandTextNode] = appendEditorWithTextNodeContaining("/potentialCommand"); const mockEditorRef = createMockEditorRef(mockEditor); // create a selection in the text node that has identical start and end locations, ie it is a cursor document.getSelection()?.setBaseAndExtent(commandTextNode, 3, commandTextNode, 3); // process the change and check the suggestion that is set looks as we expect it to processSelectionChange(mockEditorRef, mockSetSuggestion); expect(mockSetSuggestion).toHaveBeenCalledWith(null); }); }); describe("findSuggestionInText", () => { const command = "/someCommand"; const userMention = "@userMention"; const roomMention = "#roomMention"; const mentionTestCases = [userMention, roomMention]; const allTestCases = [command, userMention, roomMention]; it("returns null if content does not contain any mention or command characters", () => { expect(findSuggestionInText("hello", 1, true)).toBeNull(); }); it("returns null if content contains a command but is not the first text node", () => { expect(findSuggestionInText(command, 1, false)).toBeNull(); }); it("returns null if the offset is outside the content length", () => { expect(findSuggestionInText("hi", 30, true)).toBeNull(); expect(findSuggestionInText("hi", -10, true)).toBeNull(); }); it.each(allTestCases)("returns an object when the whole input is special case: %s", (text) => { const expected = { mappedSuggestion: getMappedSuggestion(text), startOffset: 0, endOffset: text.length, }; // test for cursor immediately before and after special character, before end, at end expect(findSuggestionInText(text, 0, true)).toEqual(expected); expect(findSuggestionInText(text, 1, true)).toEqual(expected); expect(findSuggestionInText(text, text.length - 2, true)).toEqual(expected); expect(findSuggestionInText(text, text.length, true)).toEqual(expected); }); it("returns null when a command is followed by other text", () => { const followingText = " followed by something"; // check for cursor inside and outside the command expect(findSuggestionInText(command + followingText, command.length - 2, true)).toBeNull(); expect(findSuggestionInText(command + followingText, command.length + 2, true)).toBeNull(); }); it.each(mentionTestCases)("returns an object when a %s is followed by other text", (mention) => { const followingText = " followed by something else"; expect(findSuggestionInText(mention + followingText, mention.length - 2, true)).toEqual({ mappedSuggestion: getMappedSuggestion(mention), startOffset: 0, endOffset: mention.length, }); }); it("returns null if there is a command surrounded by text", () => { const precedingText = "text before the command "; const followingText = " text after the command"; expect( findSuggestionInText(precedingText + command + followingText, precedingText.length + 4, true), ).toBeNull(); }); it.each(mentionTestCases)("returns an object if %s is surrounded by text", (mention) => { const precedingText = "I want to mention "; const followingText = " in my message"; const textInput = precedingText + mention + followingText; const expected = { mappedSuggestion: getMappedSuggestion(mention), startOffset: precedingText.length, endOffset: precedingText.length + mention.length, }; // when the cursor is immediately before the special character expect(findSuggestionInText(textInput, precedingText.length, true)).toEqual(expected); // when the cursor is inside the mention expect(findSuggestionInText(textInput, precedingText.length + 3, true)).toEqual(expected); // when the cursor is right at the end of the mention expect(findSuggestionInText(textInput, precedingText.length + mention.length, true)).toEqual(expected); }); it("returns null for text content with an email address", () => { const emailInput = "send to user@test.com"; expect(findSuggestionInText(emailInput, 15, true)).toBeNull(); }); it("returns null for double slashed command", () => { const doubleSlashCommand = "//not a command"; expect(findSuggestionInText(doubleSlashCommand, 4, true)).toBeNull(); }); it("returns null for slash separated text", () => { const slashSeparatedInput = "please to this/that/the other"; expect(findSuggestionInText(slashSeparatedInput, 21, true)).toBeNull(); }); it("returns an object for a mention that contains punctuation", () => { const mentionWithPunctuation = "@userX14#5a_-"; const precedingText = "mention "; const mentionInput = precedingText + mentionWithPunctuation; expect(findSuggestionInText(mentionInput, 12, true)).toEqual({ mappedSuggestion: getMappedSuggestion(mentionWithPunctuation), startOffset: precedingText.length, endOffset: precedingText.length + mentionWithPunctuation.length, }); }); it("returns null when user inputs any whitespace after the special character", () => { const mentionWithSpaceAfter = "@ somebody"; expect(findSuggestionInText(mentionWithSpaceAfter, 2, true)).toBeNull(); }); it("returns an object for an emoji suggestion", () => { const emoiticon = ":)"; const precedingText = "hello "; const mentionInput = precedingText + emoiticon; expect(findSuggestionInText(mentionInput, precedingText.length, true, true)).toEqual({ mappedSuggestion: getMappedSuggestion(emoiticon, true), startOffset: precedingText.length, endOffset: precedingText.length + emoiticon.length, }); }); }); describe("getMappedSuggestion", () => { it("returns null when the first character is not / # @", () => { expect(getMappedSuggestion("Zzz")).toBe(null); }); it("returns the expected mapped suggestion when first character is # or @", () => { expect(getMappedSuggestion("@user-mention")).toEqual({ type: "mention", keyChar: "@", text: "user-mention", }); expect(getMappedSuggestion("#room-mention")).toEqual({ type: "mention", keyChar: "#", text: "room-mention", }); }); it("returns the expected mapped suggestion when first character is /", () => { expect(getMappedSuggestion("/command")).toEqual({ type: "command", keyChar: "/", text: "command", }); }); it("returns the expected mapped suggestion when the text is a plain text emoiticon", () => { expect(getMappedSuggestion(":)", true)).toEqual({ type: "custom", keyChar: "", text: "🙂", }); }); });