Fix getting value in e2e tests

Expensify · Jul 4, 2024 · b5515cf · b5515cf
1 parent a52e3f5
commit b5515cf
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/WebExample/__tests__/input.spec.ts b/WebExample/__tests__/input.spec.ts
@@ -1,6 +1,6 @@
 import {test, expect} from '@playwright/test';
 import * as TEST_CONST from '../../example/src/testConstants';
-import {checkCursorPosition, setupInput} from './utils';
+import {checkCursorPosition, getElementValue, setupInput} from './utils';
 
 test.beforeEach(async ({page}) => {
   await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
@@ -12,7 +12,8 @@ test.describe('typing', () => {
 
     await inputLocator.focus();
     await inputLocator.pressSequentially(TEST_CONST.EXAMPLE_CONTENT);
-    const value = await inputLocator.innerText();
+
+    const value = await getElementValue(inputLocator);
     expect(value).toEqual(TEST_CONST.EXAMPLE_CONTENT);
   });
 

diff --git a/WebExample/__tests__/utils.ts b/WebExample/__tests__/utils.ts
@@ -1,5 +1,7 @@
 import type {Locator, Page} from '@playwright/test';
 import * as TEST_CONST from '../../example/src/testConstants';
+import type {MarkdownTextInputElement} from '../../src/MarkdownTextInput.web';
+import {getCurrentCursorPosition} from '../../src/web/utils/cursorUtils';
 
 const setupInput = async (page: Page, action?: 'clear' | 'reset') => {
   const inputLocator = await page.locator(`div#${TEST_CONST.INPUT_ID}`);
@@ -11,15 +13,9 @@ const setupInput = async (page: Page, action?: 'clear' | 'reset') => {
 };
 
 const checkCursorPosition = () => {
-  const editableDiv = document.querySelector('div[contenteditable="true"]') as HTMLElement;
-  const range = window.getSelection()?.getRangeAt(0);
-  if (!range || !editableDiv) {
-    return null;
-  }
-  const preCaretRange = range.cloneRange();
-  preCaretRange.selectNodeContents(editableDiv);
-  preCaretRange.setEnd(range.endContainer, range.endOffset);
-  return preCaretRange.toString().length;
+  const editableDiv = document.querySelector('div[contenteditable="true"]') as MarkdownTextInputElement;
+
+  return getCurrentCursorPosition(editableDiv);
 };
 
 const setCursorPosition = ({startNode, endNode}: {startNode?: Element; endNode?: Element | null}) => {
@@ -55,4 +51,10 @@ const pressCmd = async ({inputLocator, command}: {inputLocator: Locator; command
   await inputLocator.press(`${OPERATION_MODIFIER}+${command}`);
 };
 
-export {setupInput, checkCursorPosition, setCursorPosition, getElementStyle, pressCmd};
+const getElementValue = async (elementHandle: Locator) => {
+  const customVariableValue = await elementHandle.evaluateHandle((div: MarkdownTextInputElement) => div.value);
+  const value = await customVariableValue.jsonValue();
+  return value;
+};
+
+export {setupInput, checkCursorPosition, setCursorPosition, getElementStyle, pressCmd, getElementValue};