remove constants

Expensify · May 14, 2024 · 72e700f · 72e700f
1 parent a0a1bf2
commit 72e700f
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 45 deletions.
diff --git a/WebExample/__tests__/input.spec.ts b/WebExample/__tests__/input.spec.ts
@@ -10,6 +10,7 @@ test.describe('typing', () => {
   test('short text', async ({page}) => {
     const inputLocator = await setupInput(page, 'clear');
 
+    await inputLocator.focus();
     await inputLocator.pressSequentially(TEST_CONST.EXAMPLE_CONTENT);
     const value = await inputLocator.innerText();
     expect(value).toEqual(TEST_CONST.EXAMPLE_CONTENT);

diff --git a/WebExample/__tests__/styles.spec.ts b/WebExample/__tests__/styles.spec.ts
@@ -3,10 +3,10 @@ import type {Page} from '@playwright/test';
 import * as TEST_CONST from '../../testConstants';
 import {setupInput, getElementStyle} from './utils';
 
-const testMarkdownContentStyle = async ({styleName, style, page}: {styleName: string; style: string; page: Page}) => {
+const testMarkdownContentStyle = async ({testContent, style, page}: {testContent: string; style: string; page: Page}) => {
   const inputLocator = await setupInput(page);
 
-  const elementHandle = inputLocator.locator('span', {hasText: styleName}).last();
+  const elementHandle = inputLocator.locator('span', {hasText: testContent}).last();
   const elementStyle = await getElementStyle(elementHandle);
 
   expect(elementStyle).toEqual(style);
@@ -19,42 +19,44 @@ test.beforeEach(async ({page}) => {
 
 test.describe('markdown content styling', () => {
   test('bold', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'bold', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.bold.style, page});
+    await testMarkdownContentStyle({testContent: 'world', style: 'font-weight: bold;', page});
   });
 
   test('link', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'link', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.link.style, page});
+    await testMarkdownContentStyle({testContent: 'https://expensify.com', style: 'color: blue; text-decoration: underline;', page});
   });
 
   test('h1', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'h1', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.h1.style, page});
+    await testMarkdownContentStyle({testContent: 'header1', style: 'font-size: 25px; font-weight: bold;', page});
   });
 
   test('inline code', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'inlineCode', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.inlineCode.style, page});
+    await testMarkdownContentStyle({testContent: 'inline code', style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;', page});
   });
 
   test('codeblock', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'codeblock', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.codeblock.style, page});
+    await testMarkdownContentStyle({testContent: 'codeblock', style: 'font-family: monospace; font-size: 20px; color: black; background-color: lightgray;', page});
   });
 
   test('mention-here', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'here', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.here.style, page});
+    await testMarkdownContentStyle({testContent: 'here', style: 'color: green; background-color: lime;', page});
   });
 
   test('mention-user', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'mentionUser', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.mentionUser.style, page});
+    await testMarkdownContentStyle({testContent: '[email protected]', style: 'color: blue; background-color: cyan;', page});
   });
 
   test('mention-report', async ({page}) => {
-    await testMarkdownContentStyle({styleName: 'roomMention', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.roomMention.style, page});
+    await testMarkdownContentStyle({testContent: 'mention-report', style: 'color: red; background-color: pink;', page});
   });
 
   test('blockquote', async ({page, browserName}) => {
-    const blockquoteStyle = TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.blockquote.style;
+    const blockquoteStyle =
+      'border-color: gray; border-width: 6px; margin-left: 6px; padding-left: 6px; border-left-style: solid; display: inline-block; max-width: 100%; box-sizing: border-box;';
+
     // Firefox border properties are serialized slightly differently
     const browserStyle = browserName === 'firefox' ? blockquoteStyle.replace('border-left-style: solid', 'border-left: 6px solid gray') : blockquoteStyle;
 
-    await testMarkdownContentStyle({styleName: 'blockquote', style: browserStyle, page});
+    await testMarkdownContentStyle({testContent: 'blockquote', style: browserStyle, page});
   });
 });
diff --git a/WebExample/__tests__/textManipulation.spec.ts b/WebExample/__tests__/textManipulation.spec.ts
@@ -21,17 +21,17 @@ test.describe('paste content', () => {
 
   test('paste', async ({page}) => {
     const PASTE_TEXT = 'bold';
-    const boldStyleDefinition = TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.bold;
+    const BOLD_STYLE = 'font-weight: bold;';
 
     const inputLocator = await setupInput(page, 'clear');
 
-    const wrappedText = boldStyleDefinition.wrapContent(PASTE_TEXT);
+    const wrappedText = '*bold*';
     await pasteContent({text: wrappedText, page, inputLocator});
 
     const elementHandle = await inputLocator.locator('span', {hasText: PASTE_TEXT}).last();
     const elementStyle = await getElementStyle(elementHandle);
 
-    expect(elementStyle).toEqual(boldStyleDefinition.style);
+    expect(elementStyle).toEqual(BOLD_STYLE);
   });
 
   test('paste replace', async ({page}) => {
@@ -102,8 +102,8 @@ test('cut content changes', async ({page, browserName}) => {
   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);
-  const EXPECTED_CONTENT = TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.bold.wrapContent(INITIAL_CONTENT).slice(0, 3);
+  const WRAPPED_CONTENT = `*${INITIAL_CONTENT}*`;
+  const EXPECTED_CONTENT = WRAPPED_CONTENT.slice(0, 3);
 
   const inputLocator = await setupInput(page, 'clear');
   await pasteContent({text: WRAPPED_CONTENT, page, inputLocator});

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -149,7 +149,10 @@ export default function App() {
       <Button
         testID="clear"
         title="Clear"
-        onPress={() => setValue('')}
+        onPress={() => {
+          console.log('TEST');
+          setValue('');
+        }}
       />
       <Button
         title="Change style"

diff --git a/src/web/InputHistory.ts b/src/web/InputHistory.ts
@@ -1,5 +1,3 @@
-import * as TEST_CONST from '../../testConstants';
-
 type HistoryItem = {
   text: string;
   cursorPosition: number | null;
@@ -18,7 +16,7 @@ export default class InputHistory {
 
   debounceTime: number;
 
-  constructor(depth: number, debounceTime = TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS) {
+  constructor(depth: number, debounceTime = 150) {
     this.depth = depth;
     this.history = [];
     this.historyIndex = 0;

diff --git a/testConstants.ts b/testConstants.ts
@@ -1,30 +1,18 @@
 const LOCAL_URL = 'http://localhost:19006/';
 
-type MarkdownStyleDefiniton = {wrapContent?: (content: string) => string; style: string};
-
-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;'},
-  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: {
-    wrapContent: (content: string) => `> ${content}`,
-    style: 'border-color: gray; border-width: 6px; margin-left: 6px; padding-left: 6px; border-left-style: solid; display: inline-block; max-width: 100%; box-sizing: border-box;',
-  },
-  roomMention: {
-    wrapContent: (content: string) => `#${content}`,
-    style: 'color: red; background-color: pink;',
-  },
-} as const satisfies Record<string, MarkdownStyleDefiniton>;
-
-const EXAMPLE_CONTENT = Object.entries(MARKDOWN_STYLE_DEFINITIONS)
-  .map(([styleName, style]) => style.wrapContent(styleName))
-  .join('\n');
+const EXAMPLE_CONTENT = [
+  'Hello, *world*!',
+  'https://expensify.com',
+  '# header1',
+  '> blockquote',
+  '`inline code`',
+  '```\ncodeblock\n```',
+  '@here',
+  '@[email protected]',
+  '#mention-report',
+].join('\n');
 
 const INPUT_ID = 'MarkdownInput_Example';
 const INPUT_HISTORY_DEBOUNCE_TIME_MS = 150;
 
-export {LOCAL_URL, EXAMPLE_CONTENT, MARKDOWN_STYLE_DEFINITIONS, INPUT_ID, INPUT_HISTORY_DEBOUNCE_TIME_MS};
+export {LOCAL_URL, EXAMPLE_CONTENT, INPUT_ID, INPUT_HISTORY_DEBOUNCE_TIME_MS};