From eec945ee916eee3c9ff796df5ded9cbc30e65a7c Mon Sep 17 00:00:00 2001 From: Kagol Date: Thu, 8 Feb 2024 14:10:14 +0800 Subject: [PATCH] fix(date-picker): [date-picker] fixed the issue that entering date did not work (#1386) * fix(date-picker): [date-picker] fixed the issue that entering date did not work * test(date-picker): fix date-picker e2e test error --- .../pc/app/date-picker/basic-usage.spec.ts | 39 ++++++++----------- .../demos/pc/app/date-picker/clear.spec.ts | 18 ++++++--- .../pc/app/date-picker/date-range.spec.ts | 9 ++++- .../demos/pc/app/date-picker/events.spec.ts | 14 +++++-- .../demos/pc/app/date-picker/format.spec.ts | 4 +- .../pc/app/date-picker/shortcuts.spec.ts | 3 +- packages/renderless/src/picker/index.ts | 24 +++++++----- 7 files changed, 64 insertions(+), 47 deletions(-) diff --git a/examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts b/examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts index e324c5035..0315aa25c 100644 --- a/examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts @@ -4,78 +4,73 @@ test('[DatePicker] 测试日期选择和清除', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('date-picker#basic-usage') - const dateInput = page.getByRole('textbox', { name: '2023-05-20' }) - const dateInput2 = page.getByRole('textbox', { name: '2023-05-21' }) + const dateInput = page.getByPlaceholder('请选择日期').nth(1) await page.getByPlaceholder('请选择日期').nth(1).fill('2023-05-20') await page.getByPlaceholder('请选择日期').nth(1).press('Enter') - await expect(dateInput).toBeVisible() + await expect(dateInput).toHaveValue('2023-05-20') // 测试日期选择 await dateInput.click() await page.getByRole('cell', { name: '21' }).getByText('21').click() - await expect(dateInput2).toBeVisible() + await expect(dateInput).toHaveValue('2023-05-21') }) test('[DatePicker] 测试上一月/下一月/前一年/后一年', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('date-picker#basic-usage') - const dateInputNextMonth = page.getByRole('textbox', { name: '2023-06-04' }) - const dateInputNextYear = page.getByRole('textbox', { name: '2024-06-10' }) - const dateInputPreMonth = page.getByRole('textbox', { name: '2023-05-14' }) - const dateInputPreYear = page.getByRole('textbox', { name: '2023-06-11' }) + const dateInput = page.getByPlaceholder('请选择日期').nth(1) // 先输入一个日期，确保后续选中的月份、年份正确 await page.getByPlaceholder('请选择日期').nth(1).fill('2023-05-20') await page.getByPlaceholder('请选择日期').nth(1).press('Enter') // 下一月/后一年 - await page.getByRole('textbox', { name: '2023-05-20' }).click() + await dateInput.click() await page.getByRole('button', { name: '下个月' }).click() await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click() - await expect(dateInputNextMonth).toBeVisible() + await expect(dateInput).toHaveValue('2023-06-04') - await dateInputNextMonth.click() + await dateInput.click() await page.getByRole('button', { name: '后一年' }).click() await page.getByRole('cell', { name: '10' }).getByText('10').click() - await expect(dateInputNextYear).toBeVisible() + await expect(dateInput).toHaveValue('2024-06-10') // 前一年/上一月 - await dateInputNextYear.click() + await dateInput.click() await page.getByRole('button', { name: '前一年' }).click() await page.getByRole('cell', { name: '11' }).getByText('11').click() - await expect(dateInputPreYear).toBeVisible() + await expect(dateInput).toHaveValue('2023-06-11') - await dateInputPreYear.click() + await dateInput.click() await page.getByRole('button', { name: '上个月' }).click() await page.getByRole('cell', { name: '14' }).getByText('14').click() - await expect(dateInputPreMonth).toBeVisible() + await expect(dateInput).toHaveValue('2023-05-14') }) test('[DatePicker] 测试月份/年份选择', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('date-picker#basic-usage') - const dateInputMonth = page.getByRole('textbox', { name: '2023-06-04' }) - const dateInputYear = page.getByRole('textbox', { name: '2024-02-07' }) + const dateInput = page.getByPlaceholder('请选择日期').nth(1) // 先输入一个日期，确保后续选中的月份、年份正确 await page.getByPlaceholder('请选择日期').nth(1).fill('2023-04-20') await page.getByPlaceholder('请选择日期').nth(1).press('Enter') // 选择月份 - await page.getByRole('textbox', { name: '2023-04-20' }).click() + await dateInput.click() await page.getByRole('button', { name: '4 月' }).click() await page.getByText('六月').click() await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click() - await expect(dateInputMonth).toBeVisible() + await expect(dateInput).toHaveValue('2023-06-04') // 选择年份 - await dateInputMonth.click() + await dateInput.click() await page.getByRole('button', { name: '2023 年' }).click() await page.getByRole('cell', { name: '2024' }).getByText('2024').click() await page.getByText('二月', { exact: true }).click() await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('7').click() - await expect(dateInputYear).toBeVisible() + await expect(dateInput).toHaveValue('2024-02-07') }) diff --git a/examples/sites/demos/pc/app/date-picker/clear.spec.ts b/examples/sites/demos/pc/app/date-picker/clear.spec.ts index 7158f7570..297dacfb5 100644 --- a/examples/sites/demos/pc/app/date-picker/clear.spec.ts +++ b/examples/sites/demos/pc/app/date-picker/clear.spec.ts @@ -4,15 +4,18 @@ test('[DatePicker] 测试清除输入', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('date-picker#clear') - const datePickerDefaultClearIcon = page.getByRole('textbox', { name: '2023-05-24' }).first() - const datePickerHideClearIcon = page.getByRole('textbox', { name: '2023-05-24' }).nth(1) - const datePickerCustomClearIcon = page.getByRole('textbox', { name: '2023-05-24' }).nth(2) + const datePickerDefaultClearIcon = page.getByRole('textbox').nth(1) + const datePickerHideClearIcon = page.getByRole('textbox').nth(2) + const datePickerCustomClearIcon = page.getByRole('textbox').nth(3) const clearIcon = page.locator('.tiny-date-editor .tiny-input__icon-container .baseClearicon') // 默认显示清除按钮 await datePickerDefaultClearIcon.hover() await expect(clearIcon).toBeVisible() - await expect(clearIcon.locator('path')).toHaveAttribute('d', 'M12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12zm4.8-8.4L13.2 12l3.6-3.6c.3-.3.3-.9 0-1.2-.3-.3-.9-.3-1.2 0L12 10.8 8.4 7.2c-.3-.3-.9-.3-1.2 0s-.3.9 0 1.2l3.6 3.6-3.6 3.6c-.3.3-.3.9 0 1.2.2.1.4.2.6.2s.4-.1.6-.2l3.6-3.6 3.6 3.6c.2.2.4.2.6.2.2 0 .4-.1.6-.2.3-.4.3-.9 0-1.2z') + await expect(clearIcon.locator('path')).toHaveAttribute( + 'd', + 'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z' + ) // 隐藏清除按钮 await datePickerHideClearIcon.hover() @@ -21,10 +24,13 @@ test('[DatePicker] 测试清除输入', async ({ page }) => { // 自定义清除图标 await datePickerCustomClearIcon.hover() await expect(clearIcon).toBeVisible() - await expect(clearIcon.locator('path')).toHaveAttribute('d', 'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z') + await expect(clearIcon.locator('path')).toHaveAttribute( + 'd', + 'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z' + ) // 测试清除功能 await expect(datePickerCustomClearIcon).toHaveValue('2023-05-24') await page.locator('.tiny-input__icon-container > svg > .st0').click() - await expect(datePickerCustomClearIcon).not.toBeVisible() + await expect(datePickerCustomClearIcon).toHaveValue('') }) diff --git a/examples/sites/demos/pc/app/date-picker/date-range.spec.ts b/examples/sites/demos/pc/app/date-picker/date-range.spec.ts index 7ded8efee..633e70ecc 100644 --- a/examples/sites/demos/pc/app/date-picker/date-range.spec.ts +++ b/examples/sites/demos/pc/app/date-picker/date-range.spec.ts @@ -34,9 +34,14 @@ test('测试日期范围选择', async ({ page }) => { await page.locator('li:nth-child(2) > span').first().click() await page.getByRole('button', { name: '确定' }).first().click() await page.getByRole('textbox', { name: '结束时间' }).click() - await page.locator('span:nth-child(3) > span:nth-child(2) > .tiny-time-panel > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(3) > span').first().click() + await page + .locator( + 'span:nth-child(3) > span:nth-child(2) > .tiny-time-panel > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(3) > span' + ) + .first() + .click() await page.getByRole('button', { name: '确定' }).first().click() - await page.getByRole('button', { name: '确定' }).click() + await page.locator('.tiny-picker-panel__footer').getByRole('button', { name: '确定' }).click() await expect(startDateTime).toHaveValue('2023-06-04 01:00:00') await expect(endDateTime).toHaveValue('2023-07-10 02:00:00') diff --git a/examples/sites/demos/pc/app/date-picker/events.spec.ts b/examples/sites/demos/pc/app/date-picker/events.spec.ts index 244d6672a..4ca92269a 100644 --- a/examples/sites/demos/pc/app/date-picker/events.spec.ts +++ b/examples/sites/demos/pc/app/date-picker/events.spec.ts @@ -14,7 +14,11 @@ test('[DatePicker] 测试事件', async ({ page }) => { await dateInputBlur.fill('2023-05-20') await dateInputBlur.press('Enter') - await page.getByRole('textbox', { name: '2023-05-20' }).click() + await page + .locator('div') + .filter({ hasText: /^blur:$/ }) + .getByRole('textbox') + .click() await page.getByRole('cell', { name: '15' }).getByText('15').click() const blurEventMessageDom = page.locator('div').filter({ hasText: '触发 blur 事件' }).nth(1) await expect(blurEventMessageDom).toBeVisible() @@ -24,13 +28,17 @@ test('[DatePicker] 测试事件', async ({ page }) => { await dateInputChange.fill('2023-05-20') await dateInputChange.press('Enter') - await page.getByRole('textbox', { name: '2023-05-20' }).click() + await page + .locator('div') + .filter({ hasText: /^change:$/ }) + .getByRole('textbox') + .click() await page.getByRole('cell', { name: '15' }).getByText('15').click() const changeEventMessageDom = page.locator('div').filter({ hasText: '触发 change 事件，组件绑定值为：' }).nth(1) await expect(changeEventMessageDom).toBeVisible() // onPick 事件 - await page.locator('#events').getByRole('textbox').nth(3).click() + await page.locator('div').filter({ hasText: /^-$/ }).click() await page.getByRole('cell', { name: '10' }).getByText('10').first().click() const onPickEventMessageDom = page.locator('div').filter({ hasText: '触发 onPick 事件，开始日期为：' }).nth(1) await expect(onPickEventMessageDom).toBeVisible() diff --git a/examples/sites/demos/pc/app/date-picker/format.spec.ts b/examples/sites/demos/pc/app/date-picker/format.spec.ts index b03915ce9..7fedd6351 100644 --- a/examples/sites/demos/pc/app/date-picker/format.spec.ts +++ b/examples/sites/demos/pc/app/date-picker/format.spec.ts @@ -10,10 +10,10 @@ test('[DatePicker] 测试日期格式化', async ({ page }) => { await expect(page.getByRole('textbox', { name: '2023 年 05 月 20 日' }).first()).toBeVisible() // time-format: 时间输入框中显示的格式 - await page.getByRole('textbox', { name: '2023 年 05 月 20 日 00 时 00 分 00 秒' }).click() + await page.locator('.tiny-date-editor input').nth(1).click() await page.getByRole('row', { name: '21 22 23 24 25 26 27' }).getByText('24').click() await page.getByRole('button', { name: '确定' }).click() - await expect(page.getByRole('textbox', { name: '2023 年 05 月 24 日 00 时 00 分 00 秒' })).toBeVisible() + await expect(page.locator('.tiny-date-editor input').nth(1)).toHaveValue('2023 年 05 月 24 日 08 时 00 分 00 秒') // value-format: 选中值的格式 await page.locator('.tiny-date-editor input').nth(2).click() diff --git a/examples/sites/demos/pc/app/date-picker/shortcuts.spec.ts b/examples/sites/demos/pc/app/date-picker/shortcuts.spec.ts index 147a6f52b..255193e70 100644 --- a/examples/sites/demos/pc/app/date-picker/shortcuts.spec.ts +++ b/examples/sites/demos/pc/app/date-picker/shortcuts.spec.ts @@ -7,11 +7,10 @@ test('[DatePicker] 测试选择快捷选项日期：今天/昨天/一周前', as // 日期选择：今天/昨天/一周前 const datePickerDom = page.getByRole('textbox', { name: '请选择日期' }) await datePickerDom.click() - await expect(datePickerDom).toBeVisible() await page.getByRole('button', { name: '今天' }).click() await page.locator('.tiny-date-editor input').first().click() await page.getByRole('button', { name: '昨天' }).click() await page.locator('.tiny-date-editor input').first().click() await page.getByRole('button', { name: '一周前' }).click() - await expect(datePickerDom).not.toBeVisible() + await expect(datePickerDom).not.toHaveValue('') }) diff --git a/packages/renderless/src/picker/index.ts b/packages/renderless/src/picker/index.ts index 98d3692cf..01a8a7286 100644 --- a/packages/renderless/src/picker/index.ts +++ b/packages/renderless/src/picker/index.ts @@ -528,16 +528,18 @@ export const handleChange = } } -export const handleStartInput = (state, props, api) => (event) => { - const value = props.autoFormat - ? api.formatInputValue({ event, prevValue: state.displayValue[0] }) - : event.target.value - if (state.userInput) { - state.userInput = [value, state.userInput[1]] - } else { - state.userInput = [value, null] +export const handleStartInput = + ({ state, props, api }) => + (event) => { + const value = props.autoFormat + ? api.formatInputValue({ event, prevValue: state.displayValue[0] }) + : event.target.value + if (state.userInput) { + state.userInput = [value, state.userInput[1]] + } else { + state.userInput = [value, null] + } } -} export const handleEndInput = ({ state, props, api }) => @@ -1252,13 +1254,15 @@ const moveStart = (inputElem, moveStartIndex) => { } } +// 这个是 input 组件的 input 事件，应该只有一个 event 参数，input 组件的具体值从 event.target.value 中获取。 export const handleInput = ({ state, props, api }) => - (val, event) => { + (event) => { if (props.autoFormat) { const value = api.formatInputValue({ event, prevValue: state.displayValue }) state.userInput = value } else { + const val = event.target.value state.userInput = val } }