review fixes wip

Author: BrtqKr

.eslintrc.js

@@ -62,5 +62,6 @@ module.exports = {
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/array-type': ['error', {default: 'array-simple'}],
     '@typescript-eslint/consistent-type-definitions': 'off',
+    'curly': ['error', 'all'],
   },
 };

.github/workflows/e2e-test.yml renamed to .github/workflows/web-e2e-test.yml

@@ -1,8 +1,8 @@
-name: E2E Test
+name: Test web E2E
 on:
   pull_request:
     paths:
-      - .github/workflows/e2e-test.yml
+      - .github/workflows/web-e2e-test.yml
       - src/**
       - WebExample/**
   merge_group:
@@ -12,20 +12,20 @@ on:
     branches:
       - main
     paths:
-      - .github/workflows/e2e-test.yml
+      - .github/workflows/web-e2e-test.yml
       - src/**
       - WebExample/**
 
 jobs:
-  e2e_test:
+  test:
     if: github.repository == 'Expensify/react-native-live-markdown'
     runs-on: ubuntu-latest
     defaults:
       run:
         working-directory: ./WebExample
 
     concurrency:
-      group: e2e-test-${{ github.ref }}
+      group: web-e2e-test-${{ github.ref }}
       cancel-in-progress: true
     steps:
       - name: Check out Git repository
@@ -45,5 +45,5 @@ jobs:
       - name: Install dependencies for browsers
         run: npx playwright install-deps
 
-      - name: Run playwright tests
+      - name: Run Playwright tests
         run: yarn test

WebExample/tests/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
-  'rules': {
+  rules: {
     '@lwc/lwc/no-async-await': 'off',
     'rulesdir/prefer-import-module-contents': 'off',
-  }
-}
+  },
+};

WebExample/tests/input.spec.ts

@@ -6,8 +6,8 @@ test.beforeEach(async ({page}) => {
   await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
 });
 
-test.describe('standard input behaviour', () => {
-  test('standard input results', async ({page}) => {
+test.describe('typing', () => {
+  test('short text', async ({page}) => {
     const inputLocator = await setupInput(page, 'clear');
 
     await inputLocator.pressSequentially(TEST_CONST.EXAMPLE_CONTENT);

WebExample/tests/styles.spec.ts

@@ -1,20 +1,14 @@
 import {test, expect} from '@playwright/test';
 import type {Page} from '@playwright/test';
 import * as TEST_CONST from '../../testConstants';
-import {setupInput} from './utils';
+import {setupInput, getElementStyle} from './utils';
 
 const testMarkdownContentStyle = async ({styleName, style, page}: {styleName: string; style: string; page: Page}) => {
   const inputLocator = await setupInput(page);
 
   const elementHandle = inputLocator.locator('span', {hasText: styleName}).last();
+  const elementStyle = await getElementStyle(elementHandle);
 
-  let elementStyle;
-
-  if (elementHandle) {
-    await elementHandle.waitFor({state: 'attached'});
-
-    elementStyle = await elementHandle.getAttribute('style');
-  }
   expect(elementStyle).toEqual(style);
 };
 
@@ -32,34 +26,34 @@ test.describe('markdown content styling', () => {
     await testMarkdownContentStyle({styleName: 'link', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.link.style, page});
   });
 
-  test('title', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'title', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.title.style, page});
+  test('h1', async ({page}) => {
+    await testMarkdownContentStyle({styleName: 'h1', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.h1.style, page});
   });
 
-  test('code', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'code', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.code.style, page});
+  test('inline code', async ({page}) => {
+    await testMarkdownContentStyle({styleName: 'inlineCode', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.inlineCode.style, page});
   });
 
-  test('codeBlock', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'codeBlock', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.codeBlock.style, page});
+  test('codeblock', async ({page}) => {
+    await testMarkdownContentStyle({styleName: 'codeblock', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.codeblock.style, page});
   });
 
-  test('hereMention', async ({page}) => {
+  test('mention-here', async ({page}) => {
     await testMarkdownContentStyle({styleName: 'here', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.here.style, page});
   });
 
-  test('mentionUser', async ({page}) => {
+  test('mention-user', async ({page}) => {
     await testMarkdownContentStyle({styleName: 'mentionUser', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.mentionUser.style, page});
   });
 
-  test('roomMention', async ({page}) => {
+  test('mention-report', async ({page}) => {
     await testMarkdownContentStyle({styleName: 'roomMention', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.roomMention.style, page});
   });
 
   test('blockquote', async ({page, browserName}) => {
     const blockquoteStyle = TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.blockquote.style;
     // Firefox border properties are serialized slightly differently
-    const browserStyle = browserName === 'firefox' ? blockquoteStyle.replace(' border-left-style: solid', ' border-left: 6px solid gray') : blockquoteStyle;
+    const browserStyle = browserName === 'firefox' ? blockquoteStyle.replace('border-left-style: solid', 'border-left: 6px solid gray') : blockquoteStyle;
 
     await testMarkdownContentStyle({styleName: 'blockquote', style: browserStyle, page});
   });

WebExample/tests/textManipulation.spec.ts

@@ -1,23 +1,23 @@
 import {test, expect} from '@playwright/test';
 import type {Locator, Page} from '@playwright/test';
 import * as TEST_CONST from '../../testConstants';
-import {checkCursorPosition, setupInput} from './utils';
-
-const OPERATION_MODIFIER = process.platform === 'darwin' ? 'Meta' : 'Control';
+import {checkCursorPosition, setupInput, getElementStyle, pressCmd} from './utils';
 
 const pasteContent = async ({text, page, inputLocator}: {text: string; page: Page; inputLocator: Locator}) => {
   await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), text);
   await inputLocator.focus();
-  await inputLocator.press(`${OPERATION_MODIFIER}+v`);
+  await pressCmd({inputLocator, command: 'v'});
 };
 
 test.beforeEach(async ({page, context, browserName}) => {
   await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
-  if (browserName === 'chromium') await context.grantPermissions(['clipboard-write', 'clipboard-read']);
+  if (browserName === 'chromium') {
+    await context.grantPermissions(['clipboard-write', 'clipboard-read']);
+  }
 });
 
 test.describe('paste content', () => {
-  test.skip(({browserName}) => !!process.env.CI && browserName === 'webkit', 'Excluded from webkit CI tests');
+  test.skip(({browserName}) => !!process.env.CI && browserName === 'webkit', 'Excluded from WebKit CI tests');
 
   test('paste', async ({page}) => {
     const PASTE_TEXT = 'bold';
@@ -29,20 +29,16 @@ test.describe('paste content', () => {
     await pasteContent({text: wrappedText, page, inputLocator});
 
     const elementHandle = await inputLocator.locator('span', {hasText: PASTE_TEXT}).last();
-    let elementStyle;
-    if (elementHandle) {
-      await elementHandle.waitFor({state: 'attached'});
+    const elementStyle = await getElementStyle(elementHandle);
 
-      elementStyle = await elementHandle.getAttribute('style');
-    }
     expect(elementStyle).toEqual(boldStyleDefinition.style);
   });
 
   test('paste replace', async ({page}) => {
     const inputLocator = await setupInput(page, 'reset');
 
     await inputLocator.focus();
-    await inputLocator.press(`${OPERATION_MODIFIER}+a`);
+    await pressCmd({inputLocator, command: 'a'});
 
     const newText = '*bold*';
     await pasteContent({text: newText, page, inputLocator});
@@ -51,7 +47,7 @@ test.describe('paste content', () => {
   });
 
   test('paste undo', async ({page, browserName}) => {
-    test.skip(!!process.env.CI && browserName === 'firefox', 'Excluded from firefox CI tests');
+    test.skip(!!process.env.CI && browserName === 'firefox', 'Excluded from Firefox CI tests');
 
     const PASTE_TEXT_FIRST = '*bold*';
     const PASTE_TEXT_SECOND = '@here';
@@ -60,13 +56,13 @@ test.describe('paste content', () => {
 
     await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), PASTE_TEXT_FIRST);
 
-    await inputLocator.press(`${OPERATION_MODIFIER}+v`);
+    await pressCmd({inputLocator, command: 'v'});
     await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
     await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), PASTE_TEXT_SECOND);
-    await inputLocator.press(`${OPERATION_MODIFIER}+v`);
+    await pressCmd({inputLocator, command: 'v'});
     await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
 
-    await inputLocator.press(`${OPERATION_MODIFIER}+z`);
+    await pressCmd({inputLocator, command: 'z'});
 
     expect(await inputLocator.innerText()).toBe(PASTE_TEXT_FIRST);
   });
@@ -78,32 +74,32 @@ test.describe('paste content', () => {
     const inputLocator = await setupInput(page, 'clear');
 
     await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), PASTE_TEXT_FIRST);
-    await inputLocator.press(`${OPERATION_MODIFIER}+v`);
+    await pressCmd({inputLocator, command: 'v'});
     await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
     await page.evaluate(async (pasteText) => navigator.clipboard.writeText(pasteText), PASTE_TEXT_SECOND);
     await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
-    await inputLocator.press(`${OPERATION_MODIFIER}+v`);
+    await pressCmd({inputLocator, command: 'v'});
     await page.waitForTimeout(TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS);
 
-    await inputLocator.press(`${OPERATION_MODIFIER}+z`);
-    await inputLocator.press(`${OPERATION_MODIFIER}+Shift+z`);
+    await pressCmd({inputLocator, command: 'z'});
+    await pressCmd({inputLocator, command: 'Shift+z'});
 
     expect(await inputLocator.innerText()).toBe(`${PASTE_TEXT_FIRST}${PASTE_TEXT_SECOND}`);
   });
 });
 
-test('select', async ({page}) => {
+test('select all', async ({page}) => {
   const inputLocator = await setupInput(page, 'reset');
   await inputLocator.focus();
-  await inputLocator.press(`${OPERATION_MODIFIER}+a`);
+  await pressCmd({inputLocator, command: 'a'});
 
   const cursorPosition = await page.evaluate(checkCursorPosition);
 
   expect(cursorPosition).toBe(TEST_CONST.EXAMPLE_CONTENT.length);
 });
 
 test('cut content changes', async ({page, browserName}) => {
-  test.skip(!!process.env.CI && browserName === 'webkit', 'Excluded from webkit CI tests');
+  test.skip(!!process.env.CI && browserName === 'webkit', 'Excluded from WebKit CI tests');
 
   const INITIAL_CONTENT = 'bold';
   const WRAPPED_CONTENT = TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.bold.wrapContent(INITIAL_CONTENT);
@@ -133,7 +129,7 @@ test('cut content changes', async ({page, browserName}) => {
   }, INITIAL_CONTENT);
 
   await inputLocator.focus();
-  await inputLocator.press(`${OPERATION_MODIFIER}+x`);
+  await pressCmd({inputLocator, command: 'x'});
 
   expect(await rootHandle.innerHTML()).toBe(EXPECTED_CONTENT);
 });

WebExample/tests/utils.ts

@@ -1,25 +1,31 @@
-import type {Page} from '@playwright/test';
+import type {Locator, Page} from '@playwright/test';
 import * as TEST_CONST from '../../testConstants';
 
 const setupInput = async (page: Page, action?: 'clear' | 'reset') => {
   const inputLocator = await page.locator(`div#${TEST_CONST.INPUT_ID}`);
-  if (action) await page.click(`[data-testid="${action}"]`);
+  if (action) {
+    await page.click(`[data-testid="${action}"]`);
+  }
 
   return inputLocator;
 };
 
 const checkCursorPosition = () => {
   const editableDiv = document.querySelector('div[contenteditable="true"]') as HTMLElement;
   const range = window.getSelection()?.getRangeAt(0);
-  if (!range || !editableDiv) return null;
+  if (!range || !editableDiv) {
+    return null;
+  }
   const preCaretRange = range.cloneRange();
   preCaretRange.selectNodeContents(editableDiv);
   preCaretRange.setEnd(range.endContainer, range.endOffset);
   return preCaretRange.toString().length;
 };
 
 const setCursorPosition = ({startNode, endNode}: {startNode?: Element; endNode?: Element | null}) => {
-  if (!startNode?.firstChild || !endNode?.lastChild) return null;
+  if (!startNode?.firstChild || !endNode?.lastChild) {
+    return null;
+  }
 
   const range = new Range();
   range.setStart(startNode.firstChild, 2);
@@ -32,4 +38,21 @@ const setCursorPosition = ({startNode, endNode}: {startNode?: Element; endNode?:
   return selection;
 };
 
-export {setupInput, checkCursorPosition, setCursorPosition};
+const getElementStyle = async (elementHandle: Locator) => {
+  let elementStyle;
+
+  if (elementHandle) {
+    await elementHandle.waitFor({state: 'attached'});
+
+    elementStyle = await elementHandle.getAttribute('style');
+  }
+  return elementStyle;
+};
+
+const pressCmd = async ({inputLocator, command}: {inputLocator: Locator; command: string}) => {
+  const OPERATION_MODIFIER = process.platform === 'darwin' ? 'Meta' : 'Control';
+
+  await inputLocator.press(`${OPERATION_MODIFIER}+${command}`);
+};
+
+export {setupInput, checkCursorPosition, setCursorPosition, getElementStyle, pressCmd};

testConstants.ts

@@ -5,9 +5,9 @@ type MarkdownStyleDefiniton = {wrapContent?: (content: string) => string; style:
 const MARKDOWN_STYLE_DEFINITIONS = {
   bold: {wrapContent: (content: string) => `*${content}*`, style: 'font-weight: bold;'},
   link: {wrapContent: (content: string) => `https://${content}.com`, style: 'color: blue; text-decoration: underline;'},
-  title: {wrapContent: (content: string) => `# ${content}`, style: 'font-size: 25px; font-weight: bold;'},
-  code: {wrapContent: (content: string) => `\`${content}\``, style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;'},
-  codeBlock: {wrapContent: (content: string) => `\`\`\`\n${content}\n\`\`\``, style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;'},
+  h1: {wrapContent: (content: string) => `# ${content}`, style: 'font-size: 25px; font-weight: bold;'},
+  inlineCode: {wrapContent: (content: string) => `\`${content}\``, style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;'},
+  codeblock: {wrapContent: (content: string) => `\`\`\`\n${content}\n\`\`\``, style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;'},
   here: {wrapContent: (content: string) => `@${content}`, style: 'color: green; background-color: lime;'},
   mentionUser: {wrapContent: (content: string) => `@${content}@swmansion.com`, style: 'color: blue; background-color: cyan;'},
   blockquote: {