react-native-live-markdown/WebExample/__tests__/styles.spec.ts at 4976c3c824758e6fbdd5cc806d2083d68fb2df15 · Expensify/react-native-live-markdown · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import {test} from '@playwright/test';
// eslint-disable-next-line import/no-relative-packages
import * as TEST_CONST from '../../example/src/testConstants';
import {testMarkdownContentStyle} from './utils';

test.beforeEach(async ({page}) => {
  await page.goto(TEST_CONST.LOCAL_URL, {waitUntil: 'load'});
  await page.click('[data-testid="reset"]');
});

test.describe('markdown content styling', () => {
  test('bold', async ({page}) => {
    await testMarkdownContentStyle({testContent: 'world', style: 'font-weight: bold;', page});
  });

  test('link', async ({page}) => {
    await testMarkdownContentStyle({testContent: 'https://expensify.com', style: 'color: blue; text-decoration: underline;', page});
  });

  test('h1', async ({page}) => {
    await testMarkdownContentStyle({testContent: 'header1', style: 'font-size: 25px; line-height: 50px; font-weight: bold;', page});
  });

  test('inline code', async ({page}) => {
    await testMarkdownContentStyle({
      testContent: 'inline code',
      style:
        'font-family: monospace; font-size: 20px; color: black; background-color: lightgray; border-color: gray; border-width: 1px; border-radius: 4px; border-style: solid; padding: 0px; line-height: 1.5;',
      page,
    });
  });

  test('codeblock', async ({page}) => {
    await testMarkdownContentStyle({
      testContent: 'codeblock',
      style:
        'font-family: monospace; font-size: 20px; color: black; background-color: lightgray; border-color: gray; border-width: 1px; border-radius: 4px; border-style: solid; padding: 2px;',
      page,
    });
  });

  test('mention-here', async ({page}) => {
    await testMarkdownContentStyle({testContent: 'here', style: 'color: green; background-color: lime;', page});
  });

  test('mention-user', async ({page}) => {
    await testMarkdownContentStyle({testContent: 'someone@swmansion.com', style: 'color: blue; background-color: cyan;', page});
  });

  test('mention-report', async ({page}) => {
    await testMarkdownContentStyle({testContent: 'mention-report', style: 'color: red; background-color: pink;', page});
  });

  test('blockquote', async ({page, browserName}) => {
    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; overflow-wrap: anywhere;';

    // 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({testContent: 'blockquote', style: browserStyle, page});
  });
});