forked from opentiny/tiny-vue
test(calendar): [calendar] amend e2e test (#1200)
* test(calender): [calender] amend e2e test * test(calendar): [calendar] amend e2e test * test(calendar): [calendar] amend e2e test * test(calendar): [calendar] amend e2e test * test(calendar): [calendar] amend e2e test * test(calendar): [calendar] amend e2e test * test(calendar): [calendar] amend e2e test * test(calendar): [calendar] amend e2e test * test(calendar): [calendar] amend e2e test * test(calendar): [calendar] amend e2e test * test(calendar): [calendar] amend e2e test
This commit is contained in:
parent
4116bd232d
commit
8c1d8b2214
|
@ -0,0 +1,38 @@
|
||||||
|
import { test, expect } from '@playwright/test'
|
||||||
|
|
||||||
|
test('基本用法', async ({ page }) => {
|
||||||
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||||
|
await page.goto('calendar#basic-usage')
|
||||||
|
const pcDemo = page.locator('.pc-demo')
|
||||||
|
const nowDate = new Date().getDate()
|
||||||
|
const nowMonth = new Date().getMonth() + 1
|
||||||
|
const selectedDay = page.getByRole('cell', { name: '14' }).locator('div').first()
|
||||||
|
const selectedMonth = page.getByRole('cell', { name: '7 月' }).locator('div').first()
|
||||||
|
// 校验日期,查看页面显示是否是月
|
||||||
|
await pcDemo.getByRole('listitem').filter({ hasText: '月' }).nth(2).click()
|
||||||
|
await expect(pcDemo.locator('.tiny-calendar > div').last()).toHaveClass(/month/)
|
||||||
|
// 校验日期选择,选中的样式有selected
|
||||||
|
await selectedDay.click()
|
||||||
|
await expect(selectedDay).toHaveClass(/selected/)
|
||||||
|
// 校验今天按钮,选中的样式有selected today
|
||||||
|
await pcDemo.getByRole('button', { name: '今天' }).click()
|
||||||
|
await expect(
|
||||||
|
pcDemo
|
||||||
|
.getByRole('cell', { name: `${nowDate}` })
|
||||||
|
.locator('div')
|
||||||
|
.first()
|
||||||
|
).toHaveClass(/selected/)
|
||||||
|
|
||||||
|
// 校验年里的月份代码逻辑一致
|
||||||
|
await pcDemo.getByRole('listitem').filter({ hasText: '年' }).nth(2).click()
|
||||||
|
await expect(pcDemo.locator('.tiny-calendar > div').last()).toHaveClass(/year/)
|
||||||
|
await selectedMonth.click()
|
||||||
|
await expect(selectedMonth).toHaveClass(/selected/)
|
||||||
|
await pcDemo.getByRole('button', { name: '本月' }).click()
|
||||||
|
await expect(
|
||||||
|
pcDemo
|
||||||
|
.getByRole('cell', { name: `${nowMonth}` + ' 月' })
|
||||||
|
.locator('div')
|
||||||
|
.first()
|
||||||
|
).toHaveClass(/selected/)
|
||||||
|
})
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { test, expect } from '@playwright/test'
|
||||||
|
|
||||||
|
test('显示模式', async ({ page }) => {
|
||||||
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||||
|
await page.goto('calendar#calendar-mode')
|
||||||
|
const pcDemo = page.locator('.pc-demo')
|
||||||
|
const nowDate = new Date().getDate()
|
||||||
|
const nowMonth = new Date().getMonth() + 1
|
||||||
|
const selectedDay = page.getByRole('cell', { name: '14' }).locator('div').first()
|
||||||
|
const selectedMonth = page.getByRole('cell', { name: '7 月' }).locator('div').first()
|
||||||
|
// 校验日期,查看页面显示是否是月
|
||||||
|
await pcDemo.getByRole('listitem').filter({ hasText: '月' }).nth(2).click()
|
||||||
|
await expect(pcDemo.locator('.tiny-calendar > div').last()).toHaveClass(/month/)
|
||||||
|
// 校验日期选择,选中的样式有selected
|
||||||
|
await selectedDay.click()
|
||||||
|
await expect(selectedDay).toHaveClass(/selected/)
|
||||||
|
// 校验今天按钮,选中的样式有selected today
|
||||||
|
await pcDemo.getByRole('button', { name: '今天' }).click()
|
||||||
|
await expect(
|
||||||
|
pcDemo
|
||||||
|
.getByRole('cell', { name: `${nowDate}` })
|
||||||
|
.locator('div')
|
||||||
|
.first()
|
||||||
|
).toHaveClass(/selected/)
|
||||||
|
|
||||||
|
// 校验年里的月份代码逻辑一致
|
||||||
|
await pcDemo.getByRole('listitem').filter({ hasText: '年' }).nth(2).click()
|
||||||
|
await expect(pcDemo.locator('.tiny-calendar > div').last()).toHaveClass(/year/)
|
||||||
|
await selectedMonth.click()
|
||||||
|
await expect(selectedMonth).toHaveClass(/selected/)
|
||||||
|
await pcDemo.getByRole('button', { name: '本月' }).click()
|
||||||
|
await expect(
|
||||||
|
pcDemo
|
||||||
|
.getByRole('cell', { name: `${nowMonth}` + ' 月' })
|
||||||
|
.locator('div')
|
||||||
|
.first()
|
||||||
|
).toHaveClass(/selected/)
|
||||||
|
})
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<p>时间:{{ todayValue }}</p>
|
||||||
<tiny-calendar>
|
<tiny-calendar>
|
||||||
<template #tool="{ slotScope }">
|
<template #tool="{ slotScope }">
|
||||||
<tiny-button @click="toToday(slotScope)">今天</tiny-button>
|
<tiny-button @click="toToday(slotScope)">今天</tiny-button>
|
||||||
|
@ -8,11 +9,15 @@
|
||||||
|
|
||||||
<script setup lang="jsx">
|
<script setup lang="jsx">
|
||||||
import { Calendar as TinyCalendar, Button as TinyButton } from '@opentiny/vue'
|
import { Calendar as TinyCalendar, Button as TinyButton } from '@opentiny/vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
let todayValue = ref('')
|
||||||
|
|
||||||
function toToday(scope) {
|
function toToday(scope) {
|
||||||
let year = new Date().getFullYear()
|
let year = new Date().getFullYear()
|
||||||
let month = new Date().getMonth() + 1
|
let month = new Date().getMonth() + 1
|
||||||
let day = new Date().getDate()
|
let day = new Date().getDate()
|
||||||
scope.selectedDate = new Date(year + '-' + month + '-' + day).valueOf()
|
scope.selectedDate = new Date(year + '-' + month + '-' + day).valueOf()
|
||||||
|
todayValue.value = year + '-' + month + '-' + day
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { test, expect } from '@playwright/test'
|
||||||
|
|
||||||
|
test('自定义工具栏', async ({ page }) => {
|
||||||
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||||
|
await page.goto('calendar#custom-calendar-toolbar')
|
||||||
|
const pcDemo = page.locator('.pc-demo')
|
||||||
|
const year = new Date().getFullYear()
|
||||||
|
const month = new Date().getMonth() + 1
|
||||||
|
const day = new Date().getDate()
|
||||||
|
const nowDate = year + '-' + month + '-' + day
|
||||||
|
const selectedDay = page.getByRole('cell', { name: '14' }).locator('div').first()
|
||||||
|
const time = pcDemo.getByText('时间:')
|
||||||
|
// 校验选中功能
|
||||||
|
await selectedDay.click()
|
||||||
|
await expect(selectedDay).toHaveClass(/selected/)
|
||||||
|
// 校验插槽日期按钮是否生效
|
||||||
|
await pcDemo.getByRole('button', { name: '今天' }).click()
|
||||||
|
await expect(time).toHaveText('时间:' + nowDate)
|
||||||
|
})
|
|
@ -1,9 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<tiny-calendar>
|
<div>
|
||||||
<template #tool="{ slotScope }">
|
<p>时间:{{ todayValue }}</p>
|
||||||
<tiny-button @click="toToday(slotScope)">今天</tiny-button>
|
<tiny-calendar>
|
||||||
</template>
|
<template #tool="{ slotScope }">
|
||||||
</tiny-calendar>
|
<tiny-button @click="toToday(slotScope)">今天</tiny-button>
|
||||||
|
</template>
|
||||||
|
</tiny-calendar>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="jsx">
|
<script lang="jsx">
|
||||||
|
@ -14,12 +17,18 @@ export default {
|
||||||
TinyCalendar: Calendar,
|
TinyCalendar: Calendar,
|
||||||
TinyButton: Button
|
TinyButton: Button
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
todayValue: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toToday(scope) {
|
toToday(scope) {
|
||||||
let year = new Date().getFullYear()
|
let year = new Date().getFullYear()
|
||||||
let month = new Date().getMonth() + 1
|
let month = new Date().getMonth() + 1
|
||||||
let day = new Date().getDate()
|
let day = new Date().getDate()
|
||||||
scope.selectedDate = new Date(year + '-' + month + '-' + day).valueOf()
|
scope.selectedDate = new Date(year + '-' + month + '-' + day).valueOf()
|
||||||
|
this.todayValue = year + '-' + month + '-' + day
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { test, expect } from '@playwright/test'
|
||||||
|
|
||||||
|
test('自定义日期单元格', async ({ page }) => {
|
||||||
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||||
|
await page.goto('calendar#custom-day-cell')
|
||||||
|
const pcDemo = page.locator('.pc-demo')
|
||||||
|
await expect(pcDemo).toHaveText(/通知事项/)
|
||||||
|
await expect(pcDemo).toHaveText(/这是一条警告/)
|
||||||
|
await expect(pcDemo).toHaveText(/这是一条错误/)
|
||||||
|
})
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { test, expect } from '@playwright/test'
|
||||||
|
|
||||||
|
test('添加日程事件', async ({ page }) => {
|
||||||
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||||
|
await page.goto('calendar#dynamic-add-schedule')
|
||||||
|
const selectedDay4 = page.getByText('通知事项通知事项A', { exact: true })
|
||||||
|
const dayFun4 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '请注意该通知事项A' })
|
||||||
|
|
||||||
|
const selectedDay13 = page.getByRole('listitem').filter({ hasText: '这是一条警告' })
|
||||||
|
const dayFun13 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '这是一条警告消息这是一条警告' })
|
||||||
|
|
||||||
|
const selectedDay14 = page.getByRole('listitem').filter({ hasText: '这是一条错误' })
|
||||||
|
const datFun14 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '这是一条错误,还有错误' })
|
||||||
|
|
||||||
|
await selectedDay4.hover()
|
||||||
|
await page.waitForTimeout(200)
|
||||||
|
await expect(dayFun4).toBeVisible()
|
||||||
|
|
||||||
|
await selectedDay13.hover()
|
||||||
|
await page.waitForTimeout(200)
|
||||||
|
await expect(dayFun13).toBeVisible()
|
||||||
|
|
||||||
|
await selectedDay14.hover()
|
||||||
|
await page.waitForTimeout(200)
|
||||||
|
await expect(datFun14).toBeVisible()
|
||||||
|
})
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { test, expect } from '@playwright/test'
|
||||||
|
|
||||||
|
test('基本用法', async ({ page }) => {
|
||||||
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||||
|
await page.goto('calendar#show-selected-date')
|
||||||
|
const pcDemo = page.locator('.pc-demo')
|
||||||
|
const selectedDay = page.getByRole('cell', { name: '15' })
|
||||||
|
const showText = pcDemo.locator('.tiny-calendar__selected')
|
||||||
|
const year = new Date().getFullYear()
|
||||||
|
const month = new Date().getMonth() + 1
|
||||||
|
const selectedTime = year + '-' + month + '-' + '15'
|
||||||
|
await selectedDay.click()
|
||||||
|
await expect(showText).toHaveText('You selected date: ' + selectedTime)
|
||||||
|
})
|
Loading…
Reference in New Issue