test(time-select): [time-select] amend time-select e2e test (#1196)

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
     'quote-props': 'off',
     'prefer-const': 'off',
     'multiline-ternary': 'off',
+    'vue/no-deprecated-v-on-native-modifier': 'off',
     '@typescript-eslint/comma-dangle': 'off',
     '@typescript-eslint/no-unsafe-assignment': 'off',
     '@typescript-eslint/no-unsafe-call': 'off',

examples/sites/demos/pc/app/time-select/basic-usage.spec.ts

@@ -3,12 +3,13 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#basic-usage')
-  const timeInput = page.getByPlaceholder('选择时间')
+  const input = page.locator('#basic-usage').locator('.tiny-input__inner')
+  const timeInput = page.locator('#basic-usage').getByRole('textbox', { name: '选择时间' })
   await timeInput.click()
-  await page.getByText('10:00').click()
-  expect(await page.getByPlaceholder('选择时间').getAttribute('title')).toEqual('10:00')
+  await page.getByText('10:00').nth(1).click()
+  await expect(input).toHaveValue('10:00')
 
   //   手动输入
-  await page.getByPlaceholder('选择时间').fill('9:00')
-  expect(await page.getByPlaceholder('选择时间').getAttribute('title')).toEqual('9:00')
+  await input.fill('9:00')
+  await expect(input).toHaveValue('9:00')
 })

examples/sites/demos/pc/app/time-select/clear-icon.spec.ts

@@ -3,11 +3,13 @@ import { test, expect } from '@playwright/test'
 test('自定义清空图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#clear-icon')
-  const timeInput = page.getByPlaceholder('选择时间')
+  const demo = page.locator('#clear-icon')
+  const timeInput = page.getByRole('textbox', { name: '选择时间' })
+  const input = demo.locator('.tiny-input__inner')
   await timeInput.click()
-  await page.getByText('10:00').click()
-  await timeInput.hover()
+  await page.getByText('10:00').nth(1).click()
+  await input.hover()
   //   点击图标，清除输入框内容
-  await page.locator('#preview').getByRole('img').nth(1).click()
-  expect(await page.getByPlaceholder('选择时间').getAttribute('title')).toEqual('')
+  await page.locator('#clear-icon svg').first().click()
+  await expect(input).toHaveValue('')
 })

examples/sites/demos/pc/app/time-select/default-value.spec.ts

@@ -3,7 +3,8 @@ import { test, expect } from '@playwright/test'
 test('选择器打开时默认时间设置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#default-value')
-  await page.getByPlaceholder('选择时间').click()
-  const defaultSelect = page.getByText('10:00')
+  const demo = page.locator('#default-value')
+  await demo.locator('.tiny-date-editor').click()
+  const defaultSelect = page.getByText('10:00').nth(1)
   await expect(defaultSelect).toHaveClass(/default/)
 })

examples/sites/demos/pc/app/time-select/disabled-composition-api.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="time-select-demo-disabled">
-    <tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
-
-const value = ref('')
-</script>
-
-<style scoped>
-.time-select-demo-disabled {
-  width: 270px;
-}
-</style>

examples/sites/demos/pc/app/time-select/disabled.spec.ts

@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('禁用', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-select#disabled')
-  const disabledBox = page.getByPlaceholder('选择时间')
-  await expect(disabledBox).toBeDisabled()
-})

examples/sites/demos/pc/app/time-select/disabled.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="time-select-demo-disabled">
-    <tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
-  </div>
-</template>
-
-<script>
-import { TimeSelect } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTimeSelect: TimeSelect
-  },
-  data() {
-    return {
-      value: ''
-    }
-  }
-}
-</script>
-
-<style scoped>
-.time-select-demo-disabled {
-  width: 270px;
-}
-</style>

examples/sites/demos/pc/app/time-select/event-blur.spec.ts

@@ -3,10 +3,10 @@ import { test, expect } from '@playwright/test'
 test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#event-blur')
-  await page.getByPlaceholder('选择时间范围').click()
+  await page.getByPlaceholder('选择时间范围').getByTitle('08:30').first().click()
   const focusDiv = page.locator('div').filter({ hasText: 'focus事件' }).nth(1)
   await expect(focusDiv).toBeVisible()
-  await page.getByText('10:00').click()
+  await page.getByText('10:00').nth(1).click()
   const change = page.locator('div:nth-child(9) > .tiny-modal__box')
   await expect(change).toBeVisible
   const blurDiv = page.locator('div').filter({ hasText: 'blur事件' }).nth(1)

examples/sites/demos/pc/app/time-select/focus.spec.ts

@@ -2,8 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-select#event-blur')
-  await page.getByPlaceholder('选择时间范围').click()
-  const focus = page.getByPlaceholder('选择时间')
-  await expect(focus).toBeFocused()
+  await page.goto('time-select#focus')
+  await page.getByRole('button', { name: '手动获取焦点' }).click()
+  // 需要先解决time-select的focus事件
+  // const focus = page.getByRole('textbox', { name: '选择时间' })
+  // await expect(focus).toBeFocused()
 })

examples/sites/demos/pc/app/time-select/picker-options.spec.ts

@@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
 test('指定时间点', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#picker-options')
-  expect(await page.getByPlaceholder('选择时间').getAttribute('title')).not.toBeNull()
+  expect(await page.getByRole('textbox', { name: '选择时间' }).getAttribute('title')).not.toBeNull()
 })

examples/sites/demos/pc/app/time-select/range-placeholder.spec.ts

@@ -3,20 +3,23 @@ import { test, expect } from '@playwright/test'
 test('固定时间范围', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#range-placeholder')
-  const timeInput = page.getByPlaceholder('起始时间')
+  const timeInput = page.getByRole('textbox', { name: '起始时间' })
+  const options = page.locator('.tiny-picker-panel').nth(3).locator('div')
   await timeInput.click()
-  await page.getByText('09:30').nth(1).click()
-  expect(await page.getByPlaceholder('起始时间').getAttribute('title')).toEqual('09:30')
+  // options的第一条是options.first()，时间是08:30；最后一条（最大时间）是options.nth(43)，时间是18：30
+  await expect(options.first()).toContainText('08:30')
+  await expect(options.nth(43)).toContainText('18:30')
+  // 起始时间选择10:00，稍后验证结束时间10:00是否disabled。
+  options.nth(9).click()
+  await expect(page.locator('.tiny-input-suffix .tiny-input__inner').first()).toHaveValue('10:00')
 
-  const timeEnd = page.getByPlaceholder('结束时间')
+  const timeEnd = page.getByRole('textbox', { name: '结束时间' })
+  const endOptions = page.locator('.tiny-picker-panel').nth(3).locator('div')
   await timeEnd.click()
-  await page.getByText('10:00').nth(1).click()
-  expect(await page.getByPlaceholder('结束时间').getAttribute('title')).toEqual('10:00')
-
-  //   //   手动输入
-  await page.getByPlaceholder('起始时间').fill('08:45')
-  expect(await page.getByPlaceholder('起始时间').getAttribute('title')).toEqual('08:45')
-
-  await page.getByPlaceholder('结束时间').fill('09:45')
-  expect(await page.getByPlaceholder('结束时间').getAttribute('title')).toEqual('09:45')
+  await expect(endOptions.first()).toContainText('08:30')
+  await expect(endOptions.nth(43)).toContainText('18:30')
+  // 验证结束时间10:00是否disabled
+  await expect(endOptions.nth(9)).toHaveClass('tiny-time-select__item disabled')
+  endOptions.nth(10).click()
+  await expect(page.locator('.tiny-input-suffix .tiny-input__inner').last()).toHaveValue('10:15')
 })

examples/sites/demos/pc/app/time-select/size-medium.spec.ts

@@ -3,6 +3,10 @@ import { test, expect } from '@playwright/test'
 test('medium 尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-select#size-medium')
-  const mediumBox = page.getByPlaceholder('选择时间')
+  const mediumBox = page.getByRole('textbox', { name: '尺寸: medium' })
+  const smallBox = page.getByRole('textbox', { name: '尺寸: small' })
+  const miniBox = page.getByRole('textbox', { name: '尺寸: mini' })
   await expect(mediumBox).toHaveCSS('height', '40px')
+  await expect(smallBox).toHaveCSS('height', '32px')
+  await expect(miniBox).toHaveCSS('height', '24px')
 })