From 8c1d8b2214cb391e15fa3c73dbed5c151869e80a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=A4=A9=E4=BD=91?=
 <66231260+You-Hw-Y@users.noreply.github.com>
Date: Mon, 25 Dec 2023 02:58:19 -0800
Subject: [PATCH] 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
---
 .../demos/pc/app/calendar/basic-usage.spec.ts | 38 +++++++++++++++++++
 .../pc/app/calendar/calender-mode.spec.ts     | 38 +++++++++++++++++++
 ...ustom-calendar-toolbar-composition-api.vue |  5 +++
 .../calendar/custom-calendar-toolbar.spec.ts  | 19 ++++++++++
 .../app/calendar/custom-calendar-toolbar.vue  | 19 +++++++---
 .../pc/app/calendar/custom-day-cell.spec.ts   | 10 +++++
 .../app/calendar/dynamic-add-schedule.spec.ts | 26 +++++++++++++
 .../app/calendar/show-selected-date.spec.ts   | 14 +++++++
 8 files changed, 164 insertions(+), 5 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/calendar/basic-usage.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar/calender-mode.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar/custom-day-cell.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar/dynamic-add-schedule.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar/show-selected-date.spec.ts

diff --git a/examples/sites/demos/pc/app/calendar/basic-usage.spec.ts b/examples/sites/demos/pc/app/calendar/basic-usage.spec.ts
new file mode 100644
index 000000000..5e68d9626
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar/basic-usage.spec.ts
@@ -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/)
+})
diff --git a/examples/sites/demos/pc/app/calendar/calender-mode.spec.ts b/examples/sites/demos/pc/app/calendar/calender-mode.spec.ts
new file mode 100644
index 000000000..e066f1561
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar/calender-mode.spec.ts
@@ -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/)
+})
diff --git a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
index dccf58e9a..7ce557b92 100644
--- a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar-composition-api.vue
@@ -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>
diff --git a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts
new file mode 100644
index 000000000..25c6d1f8e
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.spec.ts
@@ -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)
+})
diff --git a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
index c80cca97e..09e180d30 100644
--- a/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
+++ b/examples/sites/demos/pc/app/calendar/custom-calendar-toolbar.vue
@@ -1,9 +1,12 @@
 <template>
-  <tiny-calendar>
-    <template #tool="{ slotScope }">
-      <tiny-button @click="toToday(slotScope)">今天</tiny-button>
-    </template>
-  </tiny-calendar>
+  <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
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/calendar/custom-day-cell.spec.ts b/examples/sites/demos/pc/app/calendar/custom-day-cell.spec.ts
new file mode 100644
index 000000000..b4624a376
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar/custom-day-cell.spec.ts
@@ -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(/这是一条错误/)
+})
diff --git a/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.spec.ts b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.spec.ts
new file mode 100644
index 000000000..f41c5abbe
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar/dynamic-add-schedule.spec.ts
@@ -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()
+})
diff --git a/examples/sites/demos/pc/app/calendar/show-selected-date.spec.ts b/examples/sites/demos/pc/app/calendar/show-selected-date.spec.ts
new file mode 100644
index 000000000..09b1cc8dd
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar/show-selected-date.spec.ts
@@ -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)
+})