| 1 | /** |
| 2 | * @vitest-environment happy-dom |
| 3 | */ |
| 4 | import React, { act } from 'react' |
| 5 | import { afterEach, describe, expect, it, vi } from 'vitest' |
| 6 | import { createRoot, type Root } from 'react-dom/client' |
| 7 | import { HtmlEditorTextInspector } from '../../../src/renderer/src/components/html-editor/HtmlEditorInspectorPanel' |
| 8 | import { EMPTY_ELEMENT_DRAFT } from '../../../src/renderer/src/components/session-detail/element-inspector/elementEditUtils' |
| 9 | import { TooltipProvider } from '../../../src/renderer/src/components/ui/Tooltip' |
| 10 | |
| 11 | vi.mock('../../../src/renderer/src/i18n', () => ({ |
| 12 | useT: () => (key: string) => key |
| 13 | })) |
| 14 | |
| 15 | vi.mock('../../../src/renderer/src/components/ui/RichTextBox', () => ({ |
| 16 | RichTextBox: () => null |
| 17 | })) |
| 18 | |
| 19 | describe('HtmlEditorTextInspector', () => { |
| 20 | afterEach(() => { |
| 21 | document.body.innerHTML = '' |
| 22 | }) |
| 23 | |
| 24 | it('keeps the rich text editor focused while applying text alignment', async () => { |
| 25 | const onDraftChange = vi.fn() |
| 26 | const container = document.createElement('div') |
| 27 | document.body.appendChild(container) |
| 28 | const root: Root = createRoot(container) |
| 29 | const draft = { ...EMPTY_ELEMENT_DRAFT, text: 'Aligned text', html: 'Aligned text' } |
| 30 | |
| 31 | try { |
| 32 | await act(async () => { |
| 33 | root.render( |
| 34 | React.createElement( |
| 35 | TooltipProvider, |
| 36 | { delayDuration: 0 }, |
| 37 | React.createElement(HtmlEditorTextInspector, { draft, onDraftChange }) |
| 38 | ) |
| 39 | ) |
| 40 | }) |
| 41 | |
| 42 | const centerButton = container.querySelector<HTMLButtonElement>( |
| 43 | '[aria-label="sessionDetail.alignCenter"]' |
| 44 | ) |
| 45 | expect(centerButton).toBeTruthy() |
| 46 | |
| 47 | const pointerDown = new Event('pointerdown', { bubbles: true, cancelable: true }) |
| 48 | centerButton?.dispatchEvent(pointerDown) |
| 49 | expect(pointerDown.defaultPrevented).toBe(true) |
| 50 | |
| 51 | await act(async () => { |
| 52 | centerButton?.click() |
| 53 | }) |
| 54 | |
| 55 | expect(onDraftChange).toHaveBeenCalledWith( |
| 56 | { ...draft, textAlign: 'center' }, |
| 57 | { commit: true, fields: ['textAlign'] } |
| 58 | ) |
| 59 | } finally { |
| 60 | await act(async () => { |
| 61 | root.unmount() |
| 62 | }) |
| 63 | container.remove() |
| 64 | } |
| 65 | }) |
| 66 | }) |
| 67 |