| 1 | import { describe, expect, it } from 'vitest' |
| 2 | import { |
| 3 | applySyncElementToPageHtml, |
| 4 | SYNC_ELEMENT_ATTR |
| 5 | } from '../../../src/main/element-editor/sync-element' |
| 6 | |
| 7 | const pageHtml = (body: string): string => ` |
| 8 | <!doctype html> |
| 9 | <html> |
| 10 | <body data-page-id="page-1"> |
| 11 | <main data-role="content">${body}</main> |
| 12 | </body> |
| 13 | </html> |
| 14 | ` |
| 15 | |
| 16 | describe('applySyncElementToPageHtml', () => { |
| 17 | it('adds a stable sync element id when applying an element for the first time', () => { |
| 18 | const result = applySyncElementToPageHtml({ |
| 19 | html: pageHtml('<h1>Title</h1>'), |
| 20 | sourceHtmlFragment: |
| 21 | '<img src="./assets/logo.png" data-block-id="select-arcsin1-source" style="position:absolute; left:12px; top:20px; width:88px; height:32px;" />', |
| 22 | preserveSourceBlockId: 'select-arcsin1-source' |
| 23 | }) |
| 24 | |
| 25 | expect(result.inserted).toBe(true) |
| 26 | expect(result.syncElementId).toMatch(/^sync-/) |
| 27 | expect(result.html).toContain(`${SYNC_ELEMENT_ATTR}="${result.syncElementId}"`) |
| 28 | expect(result.html).toContain('data-block-id="select-arcsin1-source"') |
| 29 | expect(result.html).toContain('left:12px') |
| 30 | }) |
| 31 | |
| 32 | it('updates an existing synced element while preserving that page block id', () => { |
| 33 | const result = applySyncElementToPageHtml({ |
| 34 | html: pageHtml( |
| 35 | '<img src="./assets/old.png" data-block-id="select-arcsin1-target" data-ppt-sync-element-id="sync-brand" style="position:absolute; left:1px; top:2px;" />' |
| 36 | ), |
| 37 | sourceHtmlFragment: |
| 38 | '<img src="./assets/new.png" data-block-id="select-arcsin1-source" data-ppt-sync-element-id="sync-brand" style="position:absolute; left:40px; top:50px; width:120px;" />' |
| 39 | }) |
| 40 | |
| 41 | expect(result.updated).toBe(true) |
| 42 | expect(result.inserted).toBe(false) |
| 43 | expect(result.syncElementId).toBe('sync-brand') |
| 44 | expect(result.html).toContain('src="./assets/new.png"') |
| 45 | expect(result.html).toContain('data-block-id="select-arcsin1-target"') |
| 46 | expect(result.html).toContain('left:40px') |
| 47 | expect(result.html).not.toContain('./assets/old.png') |
| 48 | }) |
| 49 | }) |
| 50 |