Add Playwright tests #337
Add Playwright tests #337
Conversation
|
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
| if (startNode?.firstChild && endNode?.lastChild) { | ||
| const range = new Range(); | ||
| range.setStart(startNode.firstChild, 2); | ||
| range.setEnd(endNode.lastChild, endNode.lastChild.textContent?.length ?? 0); | ||
|
|
||
| const selection = window.getSelection(); | ||
| selection?.removeAllRanges(); | ||
| selection?.addRange(range); | ||
| } |
There was a problem hiding this comment.
Setting cursor position can also be moved to utils
There was a problem hiding this comment.
we probably won't be able to use it in here, because this would be only a part of the function used inside of page.evaluate and we aren't able to pass functions to the interior, as a param. I'll add this to the utils anyway, in case you're ever in need of using it somewhere else.
|
I have read the CLA Document and I hereby sign the CLA |
.github/workflows/e2e-test.yml
Outdated
| @@ -0,0 +1,49 @@ | |||
| name: E2E Test | |||
There was a problem hiding this comment.
| name: E2E Test | |
| name: Test web E2E |
.github/workflows/e2e-test.yml
Outdated
| on: | ||
| pull_request: | ||
| paths: | ||
| - .github/workflows/e2e-test.yml |
There was a problem hiding this comment.
Let's rename the file and change this line
| - .github/workflows/e2e-test.yml | |
| - .github/workflows/web-e2e-test.yml |
.github/workflows/e2e-test.yml
Outdated
| branches: | ||
| - main | ||
| paths: | ||
| - .github/workflows/e2e-test.yml |
.github/workflows/e2e-test.yml
Outdated
| - WebExample/** | ||
|
|
||
| jobs: | ||
| e2e_test: |
There was a problem hiding this comment.
| e2e_test: | |
| test: |
.github/workflows/e2e-test.yml
Outdated
| working-directory: ./WebExample | ||
|
|
||
| concurrency: | ||
| group: e2e-test-${{ github.ref }} |
WebExample/tests/styles.spec.ts
Outdated
|
|
||
| test.describe('markdown content styling', () => { | ||
| test('bold', async ({page}) => { | ||
| await testMarkdownContentStyle({styleName: 'bold', style: TEST_CONST.MARKDOWN_STYLE_DEFINITIONS.bold.style, page}); |
There was a problem hiding this comment.
I'm not a huge fan of TEST_CONST.MARKDOWN_STYLE_DEFINITIONS. There's nothing wrong with tests containing string literals in multiple copies.
This test should contain "Hello *world*!" string as well as fontWeight: 'bold' somewhere inside.
There was a problem hiding this comment.
in terms of "Hello *world*!" - sure, but I think having styles defined in a constant is the right way to handle this, If you try checking style definition in multiple cases and/or you are using this styling in a library itself, this might get desynchronized, if someone decides to change it at some point
| }); | ||
| }); | ||
|
|
||
| test('select', async ({page}) => { |
There was a problem hiding this comment.
| test('select', async ({page}) => { | |
| test('select all', async ({page}) => { |
src/web/InputHistory.ts
Outdated
| @@ -16,7 +18,7 @@ export default class InputHistory { | |||
|
|
|||
| debounceTime: number; | |||
|
|
|||
| constructor(depth: number, debounceTime = 150) { | |||
| constructor(depth: number, debounceTime = TEST_CONST.INPUT_HISTORY_DEBOUNCE_TIME_MS) { | |||
There was a problem hiding this comment.
Source code files shouldn't rely on test configs.
There was a problem hiding this comment.
initially, those were constants for general use, and the value for this constant was taken from this place. Michał suggested renaming those constants as test constants, so I can either make them standard constants as intended or revert this change and affect test reliability - someone might change it in the future and we might get different results because tests won't have debounce updated.
testConstants.ts
Outdated
| 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;'}, | ||
| 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>; |
testConstants.ts
Outdated
| const EXAMPLE_CONTENT = Object.entries(MARKDOWN_STYLE_DEFINITIONS) | ||
| .map(([styleName, style]) => style.wrapContent(styleName)) | ||
| .join('\n'); |
There was a problem hiding this comment.
please replace this with a regular JS string (or a concatenated array)
Details
We wanted to reduce number of regressions occurring after the contributions, so I've done a setup for playwright e2e tests for web.
This PR includes:
Related Issues
Expensify/App#44028
Manual Tests
Linked PRs