import { expect, test } from '@playwright/test' test('paste English text, watch a chapter finish processing, then read it verbatim', async ({ page }) => { const user = { id: 42, username: 'fictional-reader', role: 'learner' } const book = { id: 1, title: '虚构样例书', language: 'en' } const chapterTitle = '虚构样例第一章' // Line breaks, a tab and repeated spaces must survive the whole round trip. const pasted = 'First line of the chapter.\n\tIndented line.\nTwo spaces kept.\n\nLast line.\n' const timestamps = { createdAt: '2026-01-01T00:00:00Z', updatedAt: '2026-01-01T00:00:00Z' } // The worker reports the fresh chapter as processing until the worker settles it. let status: 'processing' | 'ready' = 'processing' // The personal record the learner saves during this run, served back on reload. let savedTerm: { id: number; term: string; originalForm: string; definition: string; examples: string[]; status: string; level: number } | null = null const chapterPayload = () => ({ id: 55, bookId: book.id, ordinal: 1, title: chapterTitle, status, charCount: [...pasted].length, errorReason: '', errorMessage: '', jobId: 7, ...timestamps, }) await page.route('**/api/v1/**', async route => { const path = new URL(route.request().url()).pathname const method = route.request().method() let data: unknown = null let statusCode = 200 if (path === '/api/v1/login') { expect(route.request().postDataJSON()).toEqual({ username: user.username, password: 'fictional-password' }) data = { token: 'fictional-session', user } } else if (path === '/api/v1/me') data = user else if (path === '/api/v1/space') data = { ownerId: user.id, language: 'en' } else if (path === '/api/v1/books' && method === 'GET') { data = { items: [{ ...book, chapterCount: 0, pendingCount: 0, processingCount: 0, readyCount: 0, failedCount: 0, ...timestamps }] } } else if (path === '/api/v1/books' && method === 'POST') { const body = route.request().postDataJSON() as { requestId: string; title: string; text: string; language: string } expect(body.requestId).toMatch(/^[0-9a-f-]{36}$/) expect(body).toMatchObject({ title: chapterTitle, text: pasted, language: 'en' }) statusCode = 201 data = { book, chapter: chapterPayload(), job: { id: 7, bookId: book.id, chapterId: 55, status, attempts: 0, errorReason: '', errorMessage: '', ...timestamps }, duplicate: false, } } else if (path === '/api/v1/books/1') data = { book, chapters: [chapterPayload()] } else if (path === '/api/v1/chapters/55') { data = { book, chapter: { ...chapterPayload(), contentSha256: 'fictional-sha256', ...(status === 'ready' ? { originalText: pasted } : {}) }, navigation: { previousChapterId: null, nextChapterId: null }, } } else if (path === '/api/v1/chapters/55/tokens') { let offset = 0 const tokens = (pasted.match(/[A-Za-z]+|\s+|[^A-Za-z\s]+/g) ?? []).map(text => { const start = offset offset += text.length return { text, start, end: offset, startUtf16: start, endUtf16: offset, kind: /^[A-Za-z]+$/.test(text) ? 'word' : /^\s+$/.test(text) ? 'space' : 'punctuation' } }) data = { textSha256: 'fictional-sha256', tokens: tokens.map(token => savedTerm && token.text === 'First' ? { ...token, term: { id: savedTerm.id, status: savedTerm.status, level: savedTerm.level } } : token), } } else if (path === '/api/v1/terms' && method === 'POST') { const body = route.request().postDataJSON() as { chapterId: number; start: number; end: number; definition: string; examples: string[]; status: string } expect(body).toEqual({ chapterId: 55, start: 0, end: 5, definition: '虚构的个人释义', examples: ['A fictional example.'], status: 'new' }) savedTerm = { id: 9, term: 'first', originalForm: 'First', definition: body.definition, examples: body.examples, status: body.status, level: 0 } statusCode = 201 data = { term: savedTerm, created: true } } else if (path === '/api/v1/terms/9') data = { term: savedTerm } else if (path === '/api/v1/lookup') { expect(route.request().postDataJSON()).toEqual({ chapterId: 55, start: 0, end: 5 }) data = { status: 'exact', query: 'first', matchedForm: 'first', candidates: [], phonetic: 'fɜːst', phoneticSource: 'cmudict', resources: [{ name: '简明英汉字典增强版（ECDICT）+ CMUdict 音标', version: 'ecdict-1.0.28+cmudict-0.7b' }, { name: 'Princeton WordNet', version: '3.0' }], resource: { name: 'Princeton WordNet', version: '3.0' }, entries: [ { lemma: 'first', pos: '', definition: '', examples: [], translation: 'a. 第一的, 最早的\nn. 开始, 第一', provider: 'ecdict' }, { lemma: 'first', pos: 'adjective', definition: 'Coming before all others.', examples: ['The first fictional chapter.'], provider: 'wordnet' }, ], } } await route.fulfill({ status: statusCode, json: { code: 200, data } }) }) await page.goto('/') await page.getByLabel('账号').fill(user.username) await page.getByLabel('密码', { exact: true }).fill('fictional-password') await page.getByRole('button', { name: '登录', exact: true }).click() // The library lists the caller's book. await expect(page.getByRole('heading', { name: '我的书库' })).toBeVisible() await expect(page.getByRole('link', { name: book.title })).toBeVisible() // Paste text through the import form. await page.getByRole('button', { name: '导入内容' }).click() await expect(page.getByRole('heading', { name: '导入英文内容' })).toBeVisible() await page.getByLabel('标题').fill(chapterTitle) await page.getByLabel('正文').fill(pasted) await page.getByRole('button', { name: '开始处理' }).click() // The new book opens with the chapter still processing… await expect(page).toHaveURL(/\/books\/1$/) await expect(page.getByText('处理中')).toBeVisible() // …and the browser poll turns it ready without a page reload. status = 'ready' await expect(page.getByText('已就绪')).toBeVisible({ timeout: 15000 }) // Open the chapter and check the pasted text survived verbatim. await page.getByRole('link', { name: chapterTitle }).click() await expect(page).toHaveURL(/\/chapters\/55$/) const readerText = page.locator('.reader-text') await expect(readerText).toBeVisible() expect(await readerText.evaluate(element => element.textContent)).toBe(pasted) expect(await readerText.evaluate(element => getComputedStyle(element).whiteSpace)).toBe('pre-wrap') await expect(page.getByRole('button', { name: '上一章' })).toBeDisabled() await expect(page.getByRole('button', { name: '下一章' })).toBeDisabled() const word = page.locator('.reader-word').first() await expect(word).toHaveAttribute('aria-label', '查询 First') await word.focus() await word.press('Enter') await expect(page.getByText('Coming before all others.')).toBeVisible() // The merged dictionary answers with the IPA phonetic and the Chinese gloss first, then the // English detail from WordNet; both directories are named in the footnote. await expect(page.getByTestId('lookup-phonetic')).toHaveText('/fɜːst/') await expect(page.getByTestId('lookup-translation')).toContainText('第一的') const senses = page.locator('.lookup-senses li') await expect(senses.nth(0)).toHaveAttribute('data-provider', 'ecdict') await expect(senses.nth(1)).toHaveAttribute('data-provider', 'wordnet') await expect(page.locator('.lookup-panel')).toContainText('Princeton WordNet') expect(await readerText.evaluate(element => element.textContent)).toBe(pasted) // The reading and editing surfaces must grow with the window instead of staying at a fixed // 820px column, and no intermediate width may overflow sideways (the blind spot before this). for (const width of [768, 1024, 1280]) { await page.setViewportSize({ width, height: 900 }) await page.waitForTimeout(60) const overflow = await page.evaluate(() => ({ scroll: document.documentElement.scrollWidth, inner: window.innerWidth })) expect(overflow.scroll, `reader must not overflow at ${width}px`).toBeLessThanOrEqual(overflow.inner) } await page.setViewportSize({ width: 1280, height: 900 }) await page.waitForTimeout(60) const wideBody = await page.locator('.reader-body').boundingBox() expect(wideBody!.width, 'the text column follows the window').toBeGreaterThan(820) // Browser narrow viewport check only; this is not real-device acceptance. await page.setViewportSize({ width: 390, height: 844 }) await word.click() await expect(page.getByText('Coming before all others.')).toBeVisible() await expect(page.getByTestId('lookup-phonetic')).toHaveText('/fɜːst/') const panelBounds = await page.locator('.lookup-panel').boundingBox() expect(panelBounds!.y + panelBounds!.height).toBeLessThanOrEqual(845) expect(panelBounds!.height).toBeLessThanOrEqual(844 * 0.46) expect(await page.locator('.lookup-panel').evaluate(element => getComputedStyle(element).position)).toBe('fixed') const wordBounds = await word.boundingBox() expect(wordBounds!.y + wordBounds!.height).toBeLessThanOrEqual(panelBounds!.y) expect(await page.getByLabel('我的释义 新词条').inputValue()).toBe('') // Save a personal record: definition, example and the default status. await page.setViewportSize({ width: 1280, height: 900 }) await page.getByLabel('我的释义 新词条').fill('虚构的个人释义') await page.getByLabel('例句 每行一条，最多 5 条').fill('A fictional example.') await page.getByRole('button', { name: '保存到生词本' }).click() await expect(page.getByText('已保存 · 新词')).toBeVisible() await expect(word).toHaveClass(/is-new/) expect(await readerText.evaluate(element => element.textContent)).toBe(pasted) await page.getByRole('button', { name: '关闭释义' }).press('Escape') await expect(page.locator('.lookup-panel')).toHaveCount(0) await expect(word).toBeFocused() // Returning to the chapter shows the same state and the stored text. await page.reload() const reloadedWord = page.locator('.reader-word').first() await expect(reloadedWord).toHaveAttribute('aria-label', '查询 First，已保存') await expect(reloadedWord).toHaveClass(/is-new/) await reloadedWord.click() await expect(page.getByLabel('我的释义 已保存')).toHaveValue('虚构的个人释义') await expect(page.getByLabel('例句 每行一条，最多 5 条')).toHaveValue('A fictional example.') await expect(page.getByRole('radio', { name: '新词' })).toBeChecked() })