fix(date-picker): [date-picker] fixed the issue that entering date di…

…d not work (opentiny#1386) * fix(date-picker): [date-picker] fixed the issue that entering date did not work * test(date-picker): fix date-picker e2e test error
1379255913 · Feb 8, 2024 · eec945e · eec945e
1 parent 87f1d3c
commit eec945e
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
     }
   }