Add rich text editor characterization tests [WPB-22420]

apps/webapp/src/script/components/InputBar/InputBarEditor/RichTextEditor/FormatToolbar/formatBlockCommands.test.tsx

@@ -0,0 +1,141 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ */
+
+import {LexicalComposer} from '@lexical/react/LexicalComposer';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$convertToMarkdownString} from '@lexical/markdown';
+import {$createParagraphNode, $createTextNode, $getRoot, LexicalEditor} from 'lexical';
+import {noop} from 'noop-esm';
+import {act, renderHook} from '@testing-library/react';
+import {type FunctionComponent, type ReactNode} from 'react';
+
+import {editorConfig} from '../editorConfig';
+import {markdownTransformers} from '../utils/markdownTransformers';
+import {useBlockquoteState} from './useBlockquoteState/useBlockquoteState';
+import {useCodeBlockState} from './useCodeBlockState/useCodeBlockState';
+
+type LexicalComposerTestWrapperProps = {
+  readonly children: ReactNode;
+};
+
+type FormatBlockCommands = {
+  readonly editor: LexicalEditor;
+  readonly formatBlockquote: () => void;
+  readonly formatCodeBlock: () => void;
+};
+
+function throwEditorError(error: unknown): never {
+  throw error;
+}
+
+const LexicalComposerTestWrapper: FunctionComponent<LexicalComposerTestWrapperProps> = props => {
+  const {children} = props;
+
+  return <LexicalComposer initialConfig={{...editorConfig, onError: throwEditorError}}>{children}</LexicalComposer>;
+};
+
+function useFormatBlockCommands(): FormatBlockCommands {
+  const [editor] = useLexicalComposerContext();
+  const {formatBlockquote} = useBlockquoteState();
+  const {formatCodeBlock} = useCodeBlockState();
+
+  return {editor, formatBlockquote, formatCodeBlock};
+}
+
+function setSelectedParagraph(editor: LexicalEditor, text: string): void {
+  editor.update(
+    () => {
+      const paragraphNode = $createParagraphNode();
+      const textNode = $createTextNode(text);
+      paragraphNode.append(textNode);
+      $getRoot().clear().append(paragraphNode);
+      textNode.select(0, text.length);
+    },
+    {discrete: true},
+  );
+}
+
+function getMarkdown(editor: LexicalEditor): string {
+  return editor.getEditorState().read(() => {
+    return $convertToMarkdownString(markdownTransformers, undefined, true);
+  });
+}
+
+function flushEditorUpdate(editor: LexicalEditor): void {
+  editor.update(noop, {discrete: true});
+}
+
+describe('FormatToolbar block commands', () => {
+  it('formats a selected paragraph as a blockquote and toggles it back to a paragraph', () => {
+    const {result} = renderHook(useFormatBlockCommands, {wrapper: LexicalComposerTestWrapper});
+    const {editor, formatBlockquote} = result.current;
+
+    act(() => {
+      setSelectedParagraph(editor, 'quoted text');
+    });
+
+    act(() => {
+      formatBlockquote();
+    });
+
+    act(() => {
+      flushEditorUpdate(editor);
+    });
+
+    expect(getMarkdown(editor)).toBe('> quoted text');
+
+    act(() => {
+      formatBlockquote();
+    });
+
+    act(() => {
+      flushEditorUpdate(editor);
+    });
+
+    expect(getMarkdown(editor)).toBe('quoted text');
+  });
+
+  it('formats a selected paragraph as a code block and toggles it back to a paragraph', () => {
+    const {result} = renderHook(useFormatBlockCommands, {wrapper: LexicalComposerTestWrapper});
+    const {editor, formatCodeBlock} = result.current;
+
+    act(() => {
+      setSelectedParagraph(editor, 'const value = 1;');
+    });
+
+    act(() => {
+      formatCodeBlock();
+    });
+
+    act(() => {
+      flushEditorUpdate(editor);
+    });
+
+    expect(getMarkdown(editor)).toBe('```\nconst value = 1;\n```');
+
+    act(() => {
+      formatCodeBlock();
+    });
+
+    act(() => {
+      flushEditorUpdate(editor);
+    });
+
+    expect(getMarkdown(editor)).toBe('const value = 1;');
+  });
+});

apps/webapp/src/script/components/InputBar/InputBarEditor/RichTextEditor/FormatToolbar/inlineFormatCommands.test.ts

@@ -0,0 +1,134 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ */
+
+import {registerRichText} from '@lexical/rich-text';
+import {
+  FORMAT_TEXT_COMMAND,
+  $createParagraphNode,
+  $createTextNode,
+  $getRoot,
+  LexicalEditor,
+  TextFormatType,
+} from 'lexical';
+
+import {
+  createWireLexicalEditorTestHarness,
+  WireLexicalEditorTestHarness,
+} from '../testSupport/createWireLexicalEditorTestHarness';
+
+type InlineFormat = Extract<TextFormatType, 'bold' | 'italic' | 'strikethrough' | 'code'>;
+
+type InlineFormatCharacterizationTestCase = {
+  readonly description: string;
+  readonly format: InlineFormat;
+  readonly expectedMarkdown: string;
+};
+
+type RegisteredRichTextTestFunction = (harness: WireLexicalEditorTestHarness) => void;
+type InlineFormatTestFunction = () => void;
+
+const inlineFormatCharacterizationTestCases: readonly InlineFormatCharacterizationTestCase[] = [
+  {
+    description: 'bold text',
+    format: 'bold',
+    expectedMarkdown: '**formatted text**',
+  },
+  {
+    description: 'italic text',
+    format: 'italic',
+    expectedMarkdown: '*formatted text*',
+  },
+  {
+    description: 'strikethrough text',
+    format: 'strikethrough',
+    expectedMarkdown: '~~formatted text~~',
+  },
+  {
+    description: 'inline code text',
+    format: 'code',
+    expectedMarkdown: '`formatted text`',
+  },
+];
+
+function setSelectedText(editor: LexicalEditor, text: string): void {
+  editor.update(
+    () => {
+      const paragraphNode = $createParagraphNode();
+      const textNode = $createTextNode(text);
+      paragraphNode.append(textNode);
+      $getRoot().clear().append(paragraphNode);
+      textNode.select(0, text.length);
+    },
+    {discrete: true},
+  );
+}
+
+function dispatchFormatCommand(editor: LexicalEditor, format: InlineFormat): boolean {
+  let wasHandled = false;
+
+  editor.update(
+    () => {
+      wasHandled = editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+    },
+    {discrete: true},
+  );
+
+  return wasHandled;
+}
+
+function withRegisteredRichText(testFunction: RegisteredRichTextTestFunction): InlineFormatTestFunction {
+  return () => {
+    const harness = createWireLexicalEditorTestHarness();
+    const unregisterRichText = registerRichText(harness.editor);
+
+    try {
+      testFunction(harness);
+    } finally {
+      unregisterRichText();
+    }
+  };
+}
+
+describe('Wire Lexical inline format commands', () => {
+  for (const characterizationTestCase of inlineFormatCharacterizationTestCases) {
+    it(
+      `formats and unformats ${characterizationTestCase.description}`,
+      withRegisteredRichText(harness => {
+        setSelectedText(harness.editor, 'formatted text');
+
+        expect(dispatchFormatCommand(harness.editor, characterizationTestCase.format)).toBe(true);
+        expect(harness.exportMarkdown()).toBe(characterizationTestCase.expectedMarkdown);
+
+        expect(dispatchFormatCommand(harness.editor, characterizationTestCase.format)).toBe(true);
+        expect(harness.exportMarkdown()).toBe('formatted text');
+      }),
+    );
+  }
+
+  it(
+    'exports combined bold and italic formatting using the current Markdown representation',
+    withRegisteredRichText(harness => {
+      setSelectedText(harness.editor, 'formatted text');
+
+      expect(dispatchFormatCommand(harness.editor, 'bold')).toBe(true);
+      expect(dispatchFormatCommand(harness.editor, 'italic')).toBe(true);
+
+      expect(harness.exportMarkdown()).toBe('***formatted text***');
+    }),
+  );
+});

apps/webapp/src/script/components/InputBar/InputBarEditor/RichTextEditor/FormatToolbar/useHeadingState/headingCommand.test.ts

@@ -0,0 +1,70 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ */
+
+import {$convertToMarkdownString} from '@lexical/markdown';
+import {$createParagraphNode, $createTextNode, $getRoot} from 'lexical';
+
+import {createWireLexicalEditorTestHarness} from '../../testSupport/createWireLexicalEditorTestHarness';
+import {markdownTransformers} from '../../utils/markdownTransformers';
+import {headingCommand} from './headingCommand';
+
+type HeadingCommandResult = {
+  readonly wasHandled: boolean;
+  readonly markdown: string;
+};
+
+function executeHeadingCommand(paragraphText: string, selectParagraphText: boolean): HeadingCommandResult {
+  const harness = createWireLexicalEditorTestHarness();
+  let wasHandled = false;
+
+  harness.editor.update(
+    () => {
+      const paragraphNode = $createParagraphNode();
+      const textNode = $createTextNode(paragraphText);
+      paragraphNode.append(textNode);
+      $getRoot().clear().append(paragraphNode);
+
+      if (selectParagraphText) {
+        textNode.select(0, paragraphText.length);
+      }
+
+      wasHandled = headingCommand();
+    },
+    {discrete: true},
+  );
+
+  const markdown = harness.editor.getEditorState().read(() => {
+    return $convertToMarkdownString(markdownTransformers, undefined, true);
+  });
+
+  return {wasHandled, markdown};
+}
+
+describe('headingCommand', () => {
+  it('converts the selected paragraph to an H1 heading', () => {
+    const actualResult = executeHeadingCommand('Heading text', true);
+
+    expect(actualResult).toEqual({wasHandled: true, markdown: '# Heading text'});
+  });
+
+  it('returns handled without changing a document that has no range selection', () => {
+    const actualResult = executeHeadingCommand('Plain text', false);
+
+    expect(actualResult).toEqual({wasHandled: true, markdown: 'Plain text'});
+  });
+});