add test

Author: SzymczakJ

WebExample/__tests__/textManipulation.spec.ts

@@ -2,7 +2,7 @@ import {test, expect} from '@playwright/test';
 import type {Locator, Page} from '@playwright/test';
 // eslint-disable-next-line import/no-relative-packages
 import * as TEST_CONST from '../../example/src/testConstants';
-import {getCursorPosition, setupInput, getElementStyle, pressCmd, getElementValue} from './utils';
+import {getCursorPosition, setupInput, getElementStyle, pressCmd, getElementValue, setSelection, changeMarkdownStyle} from './utils';
 
 const pasteContent = async ({text, page, inputLocator}: {text: string; page: Page; inputLocator: Locator}) => {
   await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), text);
@@ -98,6 +98,17 @@ test('select all', async ({page}) => {
   expect(cursorPosition.end).toBe(TEST_CONST.EXAMPLE_CONTENT.length);
 });
 
+test("don't remove selection when changing markdown style", async ({page}) => {
+  const inputLocator = await setupInput(page, 'reset');
+
+  setSelection(page);
+  changeMarkdownStyle(page);
+
+  const cursorPosition = await getCursorPosition(inputLocator);
+
+  expect(cursorPosition.end).toBe(TEST_CONST.SELECTION_END);
+});
+
 test('cut content changes', async ({page, browserName}) => {
   test.skip(!!process.env.CI && browserName === 'webkit', 'Excluded from WebKit CI tests');
 

WebExample/__tests__/utils.ts

@@ -11,6 +11,14 @@ const setupInput = async (page: Page, action?: 'clear' | 'reset') => {
   return inputLocator;
 };
 
+const changeMarkdownStyle = async (page: Page) => {
+  await page.click(`[data-testid="${TEST_CONST.TOGGLE_LINK_COLOR}"]`);
+};
+
+const setSelection = async (page: Page) => {
+  await page.click(`[data-testid="${TEST_CONST.CHANGE_SELECTION}"]`);
+};
+
 const getCursorPosition = async (elementHandle: Locator) => {
   const inputSelectionHandle = await elementHandle.evaluateHandle(
     (
@@ -65,4 +73,4 @@ const getElementValue = async (elementHandle: Locator) => {
   return value;
 };
 
-export {setupInput, getCursorPosition, setCursorPosition, getElementStyle, pressCmd, getElementValue};
+export {setupInput, getCursorPosition, setCursorPosition, getElementStyle, pressCmd, getElementValue, changeMarkdownStyle, setSelection};

example/src/App.tsx

@@ -92,6 +92,7 @@ export default function App() {
         onPress={() => setTextColorState(prev => !prev)}
       />
       <Button
+        testID="toggle-link-color"
         title="Toggle link color"
         onPress={() => setLinkColorState(prev => !prev)}
       />
@@ -113,6 +114,7 @@ export default function App() {
         }}
       />
       <Button
+        testID="change-selection"
         title="Change selection"
         onPress={() => {
           if (!ref.current) {

example/src/testConstants.ts

@@ -15,6 +15,17 @@ const EXAMPLE_CONTENT = [
 ].join('\n');
 
 const INPUT_ID = 'MarkdownInput_Example';
+const TOGGLE_LINK_COLOR = 'toggle-link-color';
+const CHANGE_SELECTION = 'change-selection';
+const SELECTION_END = 20;
 const INPUT_HISTORY_DEBOUNCE_TIME_MS = 150;
 
-export {LOCAL_URL, EXAMPLE_CONTENT, INPUT_ID, INPUT_HISTORY_DEBOUNCE_TIME_MS};
+export {
+  LOCAL_URL,
+  EXAMPLE_CONTENT,
+  INPUT_ID,
+  INPUT_HISTORY_DEBOUNCE_TIME_MS,
+  TOGGLE_LINK_COLOR,
+  CHANGE_SELECTION,
+  SELECTION_END,
+};