diff --git a/WebExample/__tests__/input.spec.ts b/WebExample/__tests__/input.spec.ts index 00b07cf7..c33b208f 100644 --- 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 index 8840d099..44e65e94 100644 --- 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: 'someone@swmansion.com', 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 index 3e4507f6..aa2b9203 100644 --- 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 index 94d3dcd1..2f5918d7 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -149,7 +149,10 @@ export default function App() {