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:
李天佑
GitHub
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>
|
||||
<p>时间：{{ todayValue }}</p>
|
||||
<tiny-calendar>
|
||||
<template #tool="{ slotScope }">
|
||||
<tiny-button @click="toToday(slotScope)">今天</tiny-button>
|
||||
|
|
@ -8,11 +9,15 @@
|
|||
|
||||
<script setup lang="jsx">
|
||||
import { Calendar as TinyCalendar, Button as TinyButton } from '@opentiny/vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
let todayValue = ref('')
|
||||
|
||||
function toToday(scope) {
|
||||
let year = new Date().getFullYear()
|
||||
let month = new Date().getMonth() + 1
|
||||
let day = new Date().getDate()
|
||||
scope.selectedDate = new Date(year + '-' + month + '-' + day).valueOf()
|
||||
todayValue.value = year + '-' + month + '-' + day
|
||||
}
|
||||
</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>
|
||||
<div>
|
||||
<p>时间：{{ todayValue }}</p>
|
||||
<tiny-calendar>
|
||||
<template #tool="{ slotScope }">
|
||||
<tiny-button @click="toToday(slotScope)">今天</tiny-button>
|
||||
</template>
|
||||
</tiny-calendar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
@ -14,12 +17,18 @@ export default {
|
|||
TinyCalendar: Calendar,
|
||||
TinyButton: Button
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
todayValue: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toToday(scope) {
|
||||
let year = new Date().getFullYear()
|
||||
let month = new Date().getMonth() + 1
|
||||
let day = new Date().getDate()
|
||||
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