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

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:
李天佑 2023-12-25 02:58:19 -08:00 committed by GitHub
parent 4116bd232d
commit 8c1d8b2214
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 164 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
examples/sites/demos/pc/app/calendar/basic-usage.spec.ts Normal file
View File

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

38
examples/sites/demos/pc/app/calendar/calender-mode.spec.ts Normal file
View File

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

5
examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
View File

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

19
examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts Normal file
View File

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

9
examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
View File

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

10
examples/sites/demos/pc/app/calendar/custom-day-cell.spec.ts Normal file
View File

@ -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(/这是一条错误/)
})

26
examples/sites/demos/pc/app/calendar/dynamic-add-schedule.spec.ts Normal file
View File

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

14
examples/sites/demos/pc/app/calendar/show-selected-date.spec.ts Normal file
View File

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