Resize
diff --git a/e2e/docs/docs-pages.spec.ts b/e2e/docs/docs-pages.spec.ts
index af5e9f3..7aaaa62 100644
--- a/e2e/docs/docs-pages.spec.ts
+++ b/e2e/docs/docs-pages.spec.ts
@@ -3,7 +3,12 @@ import { expect, test } from '@playwright/test'
const setRangeValue = async (page, testId: string, value: number) => {
await page.getByTestId(testId).evaluate((node, nextValue) => {
const input = node as HTMLInputElement
- input.value = String(nextValue)
+ const descriptor = Object.getOwnPropertyDescriptor(
+ HTMLInputElement.prototype,
+ 'value',
+ )
+
+ descriptor?.set?.call(input, String(nextValue))
input.dispatchEvent(new Event('input', { bubbles: true }))
input.dispatchEvent(new Event('change', { bubbles: true }))
}, value)
@@ -17,12 +22,173 @@ const setCheckbox = async (page, testId: string, checked: boolean) => {
}
}
+const getVisibleByTestId = (page, testId: string) => {
+ return page.locator(`[data-testid="${testId}"]:visible`).first()
+}
+
const getContentHeight = (page, testId: string) => {
- return page.getByTestId(testId).evaluate((node) => {
+ return getVisibleByTestId(page, testId).evaluate((node) => {
return node.getBoundingClientRect().height
})
}
+const hoverVisibleTooltip = async (page, triggerTestId: string) => {
+ await page.getByTestId(triggerTestId).hover()
+
+ const visibleTooltip = page.getByTestId(`${triggerTestId}-content`)
+ await visibleTooltip.waitFor({ state: 'visible' })
+
+ return visibleTooltip
+}
+
+const docsLocales = [
+ {
+ lang: 'en',
+ prefix: '',
+ showMoreTitle: 'ShowMore',
+ middleTitle: 'MiddleTruncate',
+ truncateTitle: 'Truncate',
+ moreLabel: /(?:Expand|Show More)/,
+ lessLabel: /(?:Collapse|Show Less)/,
+ dialogButtonName: 'Expand full content',
+ dialogTitle: 'Here is the full content',
+ tooltipText: /Hover the mouse over the text to view the full text\./,
+ preserveMarkupText:
+ /If you need the collapsed state to keep rendered inline markup/,
+ },
+ {
+ lang: 'zh',
+ prefix: '/zh',
+ showMoreTitle: 'ShowMore',
+ middleTitle: 'MiddleTruncate',
+ truncateTitle: 'Truncate',
+ moreLabel: /(?:展开|Expand|Show More)/,
+ lessLabel: /(?:收起|Collapse|Show Less)/,
+ dialogButtonName: '展开完整内容',
+ dialogTitle: '这里是完整的内容',
+ tooltipText: /将鼠标悬停在这段文字上面以查看全文。/,
+ preserveMarkupText: /如果希望折叠态尽量保留已经渲染出来的内联富文本结构/,
+ },
+] as const
+
+test('docs home switches between English and Chinese', async ({ page }) => {
+ await page.goto('/')
+ await expect(
+ page.getByRole('heading', { name: 'React Truncate' }),
+ ).toBeVisible()
+
+ const languageSelect = page.locator('starlight-lang-select select')
+
+ await languageSelect.selectOption('/zh/')
+ await expect(page).toHaveURL(/\/zh\/$/)
+
+ await languageSelect.selectOption('/')
+ await expect(page).toHaveURL(/\/$/)
+})
+
+for (const locale of docsLocales) {
+ test(`docs show-more basic demo toggles in ${locale.lang}`, async ({
+ page,
+ }) => {
+ await page.goto(`${locale.prefix}/reference/show-more/`)
+ await expect(
+ page.getByRole('heading', { name: locale.showMoreTitle }),
+ ).toBeVisible()
+
+ const basicDemo = page.getByTestId(`docs-basic-show-more-${locale.lang}`)
+
+ await basicDemo.getByRole('link', { name: locale.moreLabel }).click()
+ const collapseLink = basicDemo.getByRole('link', { name: locale.lessLabel })
+
+ await expect(collapseLink).toBeVisible()
+ await collapseLink.click()
+ await expect(
+ basicDemo.getByRole('link', { name: locale.moreLabel }),
+ ).toBeVisible()
+ })
+
+ test(`docs show-more custom button demo toggles in ${locale.lang}`, async ({
+ page,
+ }) => {
+ await page.goto(`${locale.prefix}/reference/show-more/`)
+
+ const customDemo = page.getByTestId(`docs-custom-show-more-${locale.lang}`)
+
+ await customDemo.getByRole('button', { name: locale.moreLabel }).click()
+ await expect(
+ customDemo.getByRole('button', { name: locale.lessLabel }),
+ ).toBeVisible()
+ })
+
+ test(`docs show-more dialog demo opens in ${locale.lang}`, async ({
+ page,
+ }) => {
+ await page.goto(`${locale.prefix}/reference/show-more/`)
+
+ await page.getByRole('button', { name: locale.dialogButtonName }).click()
+
+ const dialog = page.getByTestId(
+ `docs-dialog-show-more-${locale.lang}-content`,
+ )
+ await expect(dialog).toBeVisible()
+ await expect(dialog).toContainText(locale.dialogTitle)
+
+ await page.keyboard.press('Escape')
+ await expect(dialog).toBeHidden()
+ })
+
+ test(`docs show-more tooltip demo reveals full text in ${locale.lang}`, async ({
+ page,
+ }) => {
+ await page.goto(`${locale.prefix}/reference/show-more/`)
+ await expect(page.getByText(locale.tooltipText)).toBeVisible()
+
+ const tooltip = await hoverVisibleTooltip(
+ page,
+ `docs-tooltip-show-more-${locale.lang}`,
+ )
+ await expect(tooltip).toContainText(/Lorem ipsum|从前有座山/)
+ })
+
+ test(`docs middle-truncate live demo responds to controls in ${locale.lang}`, async ({
+ page,
+ }) => {
+ await page.goto(`${locale.prefix}/reference/middle-truncate/`)
+ await expect(
+ page.getByRole('heading', { name: locale.middleTitle }),
+ ).toBeVisible()
+
+ const testIdPrefix = `docs-middle-truncate-demo-${locale.lang}`
+ const content = getVisibleByTestId(page, `${testIdPrefix}-content`)
+ const container = page.getByTestId(`${testIdPrefix}-container`)
+
+ const initialText = await content.innerText()
+ expect(initialText).toContain('…')
+ expect(initialText.endsWith('…')).toBeFalsy()
+
+ await setRangeValue(page, `${testIdPrefix}-width`, 60)
+ await setRangeValue(page, `${testIdPrefix}-end`, 12)
+
+ await expect(page.getByTestId(`${testIdPrefix}-width`)).toHaveValue('60')
+ await expect(page.getByTestId(`${testIdPrefix}-end`)).toHaveValue('12')
+ await expect(container).toHaveAttribute('style', /width: 60%/)
+
+ const adjustedText = await content.innerText()
+ expect(adjustedText).toContain('…')
+ expect(adjustedText.endsWith('…')).toBeFalsy()
+ })
+
+ test(`docs truncate page exposes localized preserveMarkup guidance in ${locale.lang}`, async ({
+ page,
+ }) => {
+ await page.goto(`${locale.prefix}/reference/truncate/`)
+ await expect(
+ page.getByRole('heading', { name: locale.truncateTitle }),
+ ).toBeVisible()
+ await expect(page.getByText(locale.preserveMarkupText)).toBeVisible()
+ })
+}
+
test('docs show-more demo preserves inline markup without extra lines in English', async ({
page,
}) => {
@@ -39,9 +205,9 @@ test('docs show-more demo preserves inline markup without extra lines in English
'docs-show-more-demo-en-content',
)
await expect(
- page
- .getByTestId('docs-show-more-demo-en-content')
- .locator('[data-testid="docs-inline-rich-link-en"]'),
+ getVisibleByTestId(page, 'docs-show-more-demo-en-content').locator(
+ '[data-testid="docs-inline-rich-link-en"]',
+ ),
).toHaveCount(0)
await setCheckbox(page, 'docs-show-more-demo-en-preserve-markup', true)
@@ -54,14 +220,14 @@ test('docs show-more demo preserves inline markup without extra lines in English
expect(markupHeight).toBeLessThanOrEqual(plainHeight)
await expect(
- page
- .getByTestId('docs-show-more-demo-en-content')
- .locator('[data-testid="docs-inline-rich-link-en"]'),
+ getVisibleByTestId(page, 'docs-show-more-demo-en-content').locator(
+ '[data-testid="docs-inline-rich-link-en"]',
+ ),
).toHaveCount(1)
await expect(
- page
- .getByTestId('docs-show-more-demo-en-content')
- .locator('[data-testid="docs-inline-rich-accent-en"]'),
+ getVisibleByTestId(page, 'docs-show-more-demo-en-content').locator(
+ '[data-testid="docs-inline-rich-accent-en"]',
+ ),
).toHaveCount(1)
const demo = page.getByTestId('docs-show-more-demo-en')
@@ -86,9 +252,9 @@ test('docs show-more demo preserves inline markup without extra lines in Chinese
'docs-show-more-demo-zh-content',
)
await expect(
- page
- .getByTestId('docs-show-more-demo-zh-content')
- .locator('[data-testid="docs-inline-rich-link-zh"]'),
+ getVisibleByTestId(page, 'docs-show-more-demo-zh-content').locator(
+ '[data-testid="docs-inline-rich-link-zh"]',
+ ),
).toHaveCount(0)
await setCheckbox(page, 'docs-show-more-demo-zh-preserve-markup', true)
@@ -100,6 +266,17 @@ test('docs show-more demo preserves inline markup without extra lines in Chinese
expect(markupHeight).toBeLessThanOrEqual(plainHeight)
+ await expect(
+ getVisibleByTestId(page, 'docs-show-more-demo-zh-content').locator(
+ '[data-testid="docs-inline-rich-link-zh"]',
+ ),
+ ).toHaveCount(1)
+ await expect(
+ getVisibleByTestId(page, 'docs-show-more-demo-zh-content').locator(
+ '[data-testid="docs-inline-rich-accent-zh"]',
+ ),
+ ).toHaveCount(1)
+
const demo = page.getByTestId('docs-show-more-demo-zh')
await demo.getByRole('link', { name: /(?:展开|Expand)/ }).click()
diff --git a/e2e/global-setup.mjs b/e2e/global-setup.mjs
index a90a2bf..8fb093f 100644
--- a/e2e/global-setup.mjs
+++ b/e2e/global-setup.mjs
@@ -3,7 +3,7 @@ import { readFileSync, rmSync, writeFileSync } from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
-const PORT = 4173
+const PORT = 4176
const PID_FILE = '/tmp/react-truncate-e2e-vite.pid'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
diff --git a/e2e/tests/components.spec.ts b/e2e/tests/components.spec.ts
index c693053..126a1c2 100644
--- a/e2e/tests/components.spec.ts
+++ b/e2e/tests/components.spec.ts
@@ -30,13 +30,31 @@ test('show-more expands and collapses', async ({ page }) => {
showMoreExample.getByRole('link', { name: 'Collapse' }),
).toBeVisible()
- const expandedText = await page.getByTestId('show-more-example').innerText()
+ const expandedText = await showMoreExample.innerText()
expect(expandedText.length).toBeGreaterThan(collapsedText.length)
await showMoreExample.getByRole('link', { name: 'Collapse' }).click()
await expect(page.getByTestId('show-more-state')).toHaveText('collapsed')
})
+test('zh show-more expands and collapses', async ({ page }) => {
+ await page.goto('/')
+
+ await expect(page.getByTestId('zh-show-more-state')).toHaveText('collapsed')
+ const showMoreExample = page.getByTestId('zh-show-more-example')
+ const collapsedText = await showMoreExample.innerText()
+
+ await showMoreExample.getByRole('link', { name: '展开' }).click()
+
+ await expect(page.getByTestId('zh-show-more-state')).toHaveText('expanded')
+ await expect(
+ showMoreExample.getByRole('link', { name: '收起' }),
+ ).toBeVisible()
+
+ const expandedText = await showMoreExample.innerText()
+ expect(expandedText.length).toBeGreaterThan(collapsedText.length)
+})
+
test('middle-truncate preserves suffix', async ({ page }) => {
await page.goto('/')
@@ -49,6 +67,18 @@ test('middle-truncate preserves suffix', async ({ page }) => {
expect(text.endsWith('.pdf')).toBeTruthy()
})
+test('zh middle-truncate preserves suffix', async ({ page }) => {
+ await page.goto('/')
+
+ const middleExample = page.getByTestId('zh-middle-example')
+ await expect(middleExample).toContainText('.pdf')
+
+ const text = await middleExample.innerText()
+
+ expect(text).toContain('…')
+ expect(text.endsWith('.pdf')).toBeTruthy()
+})
+
test('truncate recalculates after resize controls change width', async ({
page,
}) => {
diff --git a/playwright.config.ts b/playwright.config.ts
index ce2588b..639b154 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -5,7 +5,7 @@ export default defineConfig({
globalSetup: './e2e/global-setup.mjs',
globalTeardown: './e2e/global-teardown.mjs',
use: {
- baseURL: 'http://127.0.0.1:4173',
+ baseURL: 'http://127.0.0.1:4176',
trace: 'on-first-retry',
},
})
diff --git a/smoke/consumer/src/App.tsx b/smoke/consumer/src/App.tsx
index 90f0e49..99370d4 100644
--- a/smoke/consumer/src/App.tsx
+++ b/smoke/consumer/src/App.tsx
@@ -5,7 +5,10 @@ const TRUNCATE_TEXT =
'The packed package should still truncate text correctly when consumed by another app.'
const SHOW_MORE_TEXT =
'The packed package should also keep interactive expand and collapse behavior in a consumer project.'
+const ZH_SHOW_MORE_TEXT =
+ '打包后的组件在消费者项目中也应该能正确处理中文内容的展开与收起，并且在没有空格分词的情况下保持稳定的裁剪行为。'
const MIDDLE_TEXT = 'customer-contract-archive-reference-2026.pdf'
+const ZH_MIDDLE_TEXT = '客户合同归档最终审核版本-2026.pdf'
const imported = Boolean(Truncate && ShowMore && MiddleTruncate)
@@ -14,6 +17,9 @@ export const App: React.FC = () => {
const [showMoreState, setShowMoreState] = useState<'collapsed' | 'expanded'>(
'collapsed',
)
+ const [zhShowMoreState, setZhShowMoreState] = useState<
+ 'collapsed' | 'expanded'
+ >('collapsed')
useEffect(() => {
setReady(true)
@@ -56,12 +62,40 @@ export const App: React.FC = () => {
+
+
{zhShowMoreState}
+
+
+ setZhShowMoreState(expanded ? 'expanded' : 'collapsed')
+ }
+ >
+ {ZH_SHOW_MORE_TEXT}
+
+
+
{MIDDLE_TEXT}
+
+
+
+ {ZH_MIDDLE_TEXT}
+
+
)
}
diff --git a/smoke/tests/package-smoke.spec.ts b/smoke/tests/package-smoke.spec.ts
index d85ed45..4b3de52 100644
--- a/smoke/tests/package-smoke.spec.ts
+++ b/smoke/tests/package-smoke.spec.ts
@@ -20,3 +20,48 @@ test('packed package show-more interaction works', async ({ page }) => {
await expect(page.getByTestId('smoke-show-more-state')).toHaveText('expanded')
await expect(page.getByRole('link', { name: 'Collapse' })).toBeVisible()
})
+
+test('packed package zh show-more interaction works', async ({ page }) => {
+ await page.goto('/')
+
+ await expect(page.getByTestId('smoke-zh-show-more-state')).toHaveText(
+ 'collapsed',
+ )
+
+ const example = page.getByTestId('smoke-zh-show-more-example')
+ const collapsedText = await example.innerText()
+
+ await example.getByRole('link', { name: '展开' }).click()
+
+ await expect(page.getByTestId('smoke-zh-show-more-state')).toHaveText(
+ 'expanded',
+ )
+ await expect(example.getByRole('link', { name: '收起' })).toBeVisible()
+
+ const expandedText = await example.innerText()
+ expect(expandedText.length).toBeGreaterThan(collapsedText.length)
+})
+
+test('packed package middle-truncate preserves suffix', async ({ page }) => {
+ await page.goto('/')
+
+ const middleExample = page.getByTestId('smoke-middle-example')
+ await expect(middleExample).toContainText('.pdf')
+
+ const text = await middleExample.innerText()
+
+ expect(text).toContain('…')
+ expect(text.endsWith('.pdf')).toBeTruthy()
+})
+
+test('packed package zh middle-truncate preserves suffix', async ({ page }) => {
+ await page.goto('/')
+
+ const middleExample = page.getByTestId('smoke-zh-middle-example')
+ await expect(middleExample).toContainText('.pdf')
+
+ const text = await middleExample.innerText()
+
+ expect(text).toContain('…')
+ expect(text.endsWith('.pdf')).toBeTruthy()
+})