|
| 1 | +import { test, expect } from '@playwright/experimental-ct-react' |
| 2 | +import type { Locator } from '@playwright/test' |
| 3 | +import { Root as Inlay } from '../' |
| 4 | + |
| 5 | +// Chromium-only: use CDP to simulate IME composition end-to-end |
| 6 | +const composeWithCDP = async ( |
| 7 | + page: import('@playwright/test').Page, |
| 8 | + text: string |
| 9 | +) => { |
| 10 | + const client = await page.context().newCDPSession(page) |
| 11 | + await client.send('Input.imeSetComposition', { |
| 12 | + text, |
| 13 | + selectionStart: text.length, |
| 14 | + selectionEnd: text.length |
| 15 | + }) |
| 16 | + await client.send('Input.insertText', { text }) |
| 17 | + await client.send('Input.imeSetComposition', { |
| 18 | + text: '', |
| 19 | + selectionStart: 0, |
| 20 | + selectionEnd: 0 |
| 21 | + }) |
| 22 | +} |
| 23 | + |
| 24 | +async function assertSingleTextOrSpanText( |
| 25 | + ed: Locator, |
| 26 | + expected: string |
| 27 | +): Promise<boolean> { |
| 28 | + return ed.evaluate((el: HTMLElement, exp: string) => { |
| 29 | + const kids: ChildNode[] = Array.from(el.childNodes) |
| 30 | + if (kids.length !== 1) return false |
| 31 | + const only: ChildNode = kids[0] |
| 32 | + if (only.nodeType === Node.TEXT_NODE) return el.textContent === exp |
| 33 | + if (only.nodeType === Node.ELEMENT_NODE) { |
| 34 | + const span = only as Element |
| 35 | + if (span.childNodes.length !== 1) return false |
| 36 | + const first = span.firstChild as ChildNode | null |
| 37 | + return ( |
| 38 | + !!first && first.nodeType === Node.TEXT_NODE && el.textContent === exp |
| 39 | + ) |
| 40 | + } |
| 41 | + return false |
| 42 | + }, expected) |
| 43 | +} |
| 44 | + |
| 45 | +test.describe('IME composition via CDP (Chromium)', () => { |
| 46 | + test.skip( |
| 47 | + ({ browserName }) => browserName !== 'chromium', |
| 48 | + 'CDP IME APIs are Chromium-only' |
| 49 | + ) |
| 50 | + |
| 51 | + test('Space commit produces composed text and a trailing space', async ({ |
| 52 | + mount, |
| 53 | + page |
| 54 | + }) => { |
| 55 | + await mount( |
| 56 | + <Inlay defaultValue={''} data-testid="root"> |
| 57 | + {null} |
| 58 | + </Inlay> |
| 59 | + ) |
| 60 | + const ed = page.getByRole('textbox') |
| 61 | + await ed.click() |
| 62 | + |
| 63 | + await composeWithCDP(page, 'にほん') |
| 64 | + await page.keyboard.press('Space') |
| 65 | + |
| 66 | + await expect(ed).toHaveText('にほん ') |
| 67 | + await expect(ed.locator('br')).toHaveCount(0) |
| 68 | + const ok = await assertSingleTextOrSpanText(ed, 'にほん ') |
| 69 | + expect(ok).toBe(true) |
| 70 | + }) |
| 71 | + |
| 72 | + test('Enter commit composes text and does not add a stray newline immediately', async ({ |
| 73 | + mount, |
| 74 | + page |
| 75 | + }) => { |
| 76 | + await mount( |
| 77 | + <Inlay defaultValue={''} data-testid="root"> |
| 78 | + {null} |
| 79 | + </Inlay> |
| 80 | + ) |
| 81 | + const ed = page.getByRole('textbox') |
| 82 | + await ed.click() |
| 83 | + |
| 84 | + await composeWithCDP(page, 'テスト') |
| 85 | + await page.keyboard.press('Enter') |
| 86 | + |
| 87 | + await expect(ed).toHaveText('テスト') |
| 88 | + await expect(ed.locator('br')).toHaveCount(0) |
| 89 | + const ok = await assertSingleTextOrSpanText(ed, 'テスト') |
| 90 | + expect(ok).toBe(true) |
| 91 | + }) |
| 92 | +}) |
0 commit comments