|
| 1 | +import { test, expect, type Locator, type Page } from '@playwright/test'; |
| 2 | + |
| 3 | +test.setTimeout(90_000); |
| 4 | + |
| 5 | +const sel = { |
| 6 | + root: '[data-testid="test-enriched-text-root"]', |
| 7 | + htmlInput: '[data-testid="test-enriched-text-html-input"]', |
| 8 | + setValueButton: '[data-testid="test-enriched-text-set-value-button"]', |
| 9 | + valueOutput: '[data-testid="test-enriched-text-value-output"]', |
| 10 | + display: '[data-testid="test-enriched-text-display"]', |
| 11 | + displayInner: '[data-testid="test-enriched-text-display"] .et-view', |
| 12 | +} as const; |
| 13 | + |
| 14 | +function displayLocator(page: Page): Locator { |
| 15 | + return page.locator(sel.display); |
| 16 | +} |
| 17 | + |
| 18 | +async function gotoTestEnrichedText(page: Page): Promise<void> { |
| 19 | + await page.goto('/test-enriched-text'); |
| 20 | + await page.waitForSelector(sel.displayInner); |
| 21 | +} |
| 22 | + |
| 23 | +async function setEnrichedTextValue(page: Page, html: string): Promise<void> { |
| 24 | + await page.fill(sel.htmlInput, html); |
| 25 | + await page.click(sel.setValueButton); |
| 26 | + // The display mirrors the value through the output node; wait until applied. |
| 27 | + await expect |
| 28 | + .poll(async () => (await page.locator(sel.valueOutput).textContent()) ?? '') |
| 29 | + .toBe(html); |
| 30 | +} |
| 31 | + |
| 32 | +test.describe('EnrichedText display visual regression', () => { |
| 33 | + const cases: { name: string; snapshot: string; html: string }[] = [ |
| 34 | + { |
| 35 | + name: 'rich text: heading, bold, italic and link', |
| 36 | + snapshot: 'enriched-text-rich-text.png', |
| 37 | + html: [ |
| 38 | + '<html>', |
| 39 | + '<h3>Heading</h3>', |
| 40 | + '<p>Some <b>bold</b> and <i>italic</i> text.</p>', |
| 41 | + '<p>A <a href="https://example.com">link</a> here.</p>', |
| 42 | + '</html>', |
| 43 | + ].join(''), |
| 44 | + }, |
| 45 | + { |
| 46 | + name: 'unordered list', |
| 47 | + snapshot: 'enriched-text-unordered-list.png', |
| 48 | + html: '<html><ul><li>Alpha</li><li>Beta</li><li>Gamma</li></ul></html>', |
| 49 | + }, |
| 50 | + { |
| 51 | + name: 'unordered list with empty items', |
| 52 | + snapshot: 'enriched-text-unordered-list-empty-items.png', |
| 53 | + html: '<html><ul><li>Alpha</li><li></li><li>Gamma</li></ul></html>', |
| 54 | + }, |
| 55 | + { |
| 56 | + name: 'ordered list', |
| 57 | + snapshot: 'enriched-text-ordered-list.png', |
| 58 | + html: '<html><ol><li>One</li><li>Two</li><li>Three</li></ol></html>', |
| 59 | + }, |
| 60 | + { |
| 61 | + name: 'ordered list with empty items', |
| 62 | + snapshot: 'enriched-text-ordered-list-empty-items.png', |
| 63 | + html: '<html><ol><li>One</li><li></li><li>Three</li></ol></html>', |
| 64 | + }, |
| 65 | + { |
| 66 | + name: 'checkbox list all unchecked', |
| 67 | + snapshot: 'enriched-text-checkbox-list-unchecked.png', |
| 68 | + html: '<html><ul data-type="checkbox"><li>one</li><li>two</li></ul></html>', |
| 69 | + }, |
| 70 | + { |
| 71 | + name: 'checkbox list with checked item', |
| 72 | + snapshot: 'enriched-text-checkbox-list-checked.png', |
| 73 | + html: '<html><ul data-type="checkbox"><li checked>one</li><li>two</li></ul></html>', |
| 74 | + }, |
| 75 | + { |
| 76 | + name: 'checkbox list with empty items', |
| 77 | + snapshot: 'enriched-text-checkbox-list-empty-items.png', |
| 78 | + html: '<html><ul data-type="checkbox"><li checked>one</li><li></li><li>three</li></ul></html>', |
| 79 | + }, |
| 80 | + { |
| 81 | + name: 'blockquote and codeblock', |
| 82 | + snapshot: 'enriched-text-blockquote-codeblock.png', |
| 83 | + html: [ |
| 84 | + '<html>', |
| 85 | + '<blockquote><p>Quoted line</p></blockquote>', |
| 86 | + '<codeblock><p>const a = 1;</p></codeblock>', |
| 87 | + '</html>', |
| 88 | + ].join(''), |
| 89 | + }, |
| 90 | + ]; |
| 91 | + |
| 92 | + for (const c of cases) { |
| 93 | + test(c.name, async ({ page }) => { |
| 94 | + await gotoTestEnrichedText(page); |
| 95 | + await setEnrichedTextValue(page, c.html); |
| 96 | + |
| 97 | + await expect(displayLocator(page)).toHaveScreenshot(c.snapshot); |
| 98 | + }); |
| 99 | + } |
| 100 | +}); |
0 commit comments