aring
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
李天佑 2023-12-21 22:43:44 -08:00 committed by GitHub
parent 95beedfc4d
commit a76aff0b7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 46 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -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',

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

@ -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')
})

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

@ -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('')
})

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

@ -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/)
})

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

@ -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>

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

@ -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()
})

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

@ -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>

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

@ -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)

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

@ -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()
})

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

@ -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()
})

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

@ -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')
})

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

@ -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')
})