@opentiny/vue-docs 2.2.3 → 2.2.4

package/demos/pc/app/wizard/btn-events-composition-api.vue

@@ -11,7 +11,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Wizard as TinyWizard } from '@opentiny/vue'
+import { Wizard as TinyWizard, Modal } from '@opentiny/vue'
 
 const dataSet = ref([
   {
@@ -37,18 +37,18 @@ const dataSet = ref([
 ])
 
 const handlePrev = (datas) => {
-  console.log('handlePrev：上一步，', datas)
+  Modal.message('btn-prev' + JSON.stringify(datas))
 }
 
 const handleNext = (datas) => {
-  console.log('handleNext：下一步，', datas)
+  Modal.message('btn-next' + JSON.stringify(datas))
 }
 
 const handleSave = (datas) => {
-  console.log('handleSave：保存，', datas)
+  Modal.message('btn-save' + JSON.stringify(datas))
 }
 
 const handleSubmit = (datas) => {
-  console.log('handleSubmit：提交，', datas)
+  Modal.message('btn-submit' + JSON.stringify(datas))
 }
 </script>

package/demos/pc/app/wizard/btn-events.spec.ts

@@ -0,0 +1,63 @@
+import { test, expect } from '@playwright/test'
+
+test('按钮事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('wizard#btn-events')
+
+  const stepItems = page.locator('.tiny-wizard__steps-item')
+  const buttons = page.locator('.tiny-wizard__button')
+  const prev = buttons.getByRole('button', { name: '上一步' })
+  const next = buttons.getByRole('button', { name: '下一步' })
+  const save = buttons.getByRole('button', { name: '保存' })
+  const submit = buttons.getByRole('button', { name: '提交' })
+  const charts = stepItems.locator('.tiny-wizard__chart')
+  const prevClasss = [/is-ready/, /is-doing/]
+  const nextClasss = [/is-ready/, /is-ready/, /is-doing/]
+  const modal = page.locator('.tiny-modal')
+
+  await save.click()
+  await expect(modal.nth(1)).toHaveText(/btn-save/)
+  await expect(charts).toHaveCount(5)
+  for (let i = 0; i < 2; i++) {
+    await expect(stepItems.nth(i)).toHaveClass(prevClasss[i])
+    if (i === 1) {
+      const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
+      const { width, height } = await currentNode.boundingBox()
+      await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
+    }
+  }
+
+  await next.click()
+  await expect(modal.nth(2)).toHaveText(/btn-next/)
+  for (let i = 0; i < 3; i++) {
+    await expect(stepItems.nth(i)).toHaveClass(nextClasss[i])
+    if (i === 2) {
+      const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
+      const { width, height } = await currentNode.boundingBox()
+      await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
+    }
+  }
+
+  await prev.click()
+  await expect(modal.nth(3)).toHaveText(/btn-prev/)
+  for (let i = 0; i < 2; i++) {
+    await expect(stepItems.nth(i)).toHaveClass(prevClasss[i])
+    if (i === 1) {
+      const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
+      const { width, height } = await currentNode.boundingBox()
+      await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
+    }
+  }
+  await next.click()
+  await next.click()
+  await next.click()
+  await next.click()
+  await submit.click()
+  await expect(modal.nth(7)).toHaveText(/btn-submit/)
+})

package/demos/pc/app/wizard/btn-events.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="jsx">
-import { Wizard } from '@opentiny/vue'
+import { Wizard, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -44,16 +44,16 @@ export default {
   },
   methods: {
     handlePrev(datas) {
-      console.log('handlePrev：上一步，', datas)
+      Modal.message('btn-prev' + JSON.stringify(datas))
     },
     handleNext(datas) {
-      console.log('handleNext：下一步，', datas)
+      Modal.message('btn-next' + JSON.stringify(datas))
     },
     handleSave(datas) {
-      console.log('handleSave：保存，', datas)
+      Modal.message('btn-save' + JSON.stringify(datas))
     },
     handleSubmit(datas) {
-      console.log('handleSubmit：提交，', datas)
+      Modal.message('btn-submit' + JSON.stringify(datas))
     }
   }
 }

package/demos/pc/app/wizard/page-guide.spec.ts

@@ -21,8 +21,8 @@ test('页向导流程图', async ({ page }) => {
       const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
       const { width, height } = await currentNode.boundingBox()
       await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
-      await expect(width).toBeCloseTo(20)
-      await expect(height).toBeCloseTo(22.67, 2)
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
     }
   }
 
@@ -33,8 +33,8 @@ test('页向导流程图', async ({ page }) => {
       const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
       const { width, height } = await currentNode.boundingBox()
       await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
-      await expect(width).toBeCloseTo(20)
-      await expect(height).toBeCloseTo(22.67, 2)
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
     }
   }
 
@@ -45,8 +45,8 @@ test('页向导流程图', async ({ page }) => {
       const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
       const { width, height } = await currentNode.boundingBox()
       await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
-      await expect(width).toBeCloseTo(20)
-      await expect(height).toBeCloseTo(22.67, 2)
+      await expect(width).toBeGreaterThanOrEqual(20)
+      await expect(height).toBeGreaterThanOrEqual(20)
     }
   }
 })

package/demos/pc/app/wizard/slot-step-button.spec.ts

@@ -12,6 +12,6 @@ test('步骤插槽', async ({ page }) => {
   for (let i = 0; i < 3; i++) {
     await expect(buttons.nth(i)).toHaveText(texts[i])
     await buttons.nth(i).click()
-    await expect(modal.nth(i)).toHaveText(`步骤${i + 1}`)
+    await expect(modal.nth(i + 1)).toHaveText(`步骤${i + 1}`)
   }
 })

package/demos/pc/app/wizard/time-line-flow.spec.ts

@@ -17,12 +17,12 @@ test('时间线流程图', async ({ page }) => {
   const texts = [/提交小红/, /转他人处理小胡/, /主管审批小张/]
   const expandBtns = page.getByRole('listitem').locator('svg')
   const xiaoHongTop = page
-    .getByRole('tooltip', { name: '小红 部门：某部门 邮件：example@example.com 手机：1234567890' })
+    .getByRole('tooltip', { name: '小红 工号：123456890 部门：某部门 邮件：example@example.com 手机：1234567890' })
     .locator('div')
     .filter({ hasText: '小红工号：123456890' })
     .nth(3)
   const xiaoHongBottom = page
-    .getByRole('tooltip', { name: '小红 部门：某部门 邮件：example@example.com 手机：1234567890' })
+    .getByRole('tooltip', { name: '小红 工号：123456890 部门：某部门 邮件：example@example.com 手机：1234567890' })
     .getByText('部门：某部门邮件：example@example.com手机：1234567890')
 
   await expect(nodeLines).toHaveCount(2)
@@ -49,9 +49,9 @@ test('时间线流程图', async ({ page }) => {
     }
   }
 
-  await userNames.first().hover()
-  await expect(xiaoHongTop).toBeVisible()
-  await expect(xiaoHongBottom).toBeVisible()
+  await page.getByRole('link', { name: '小红 123456890' }).hover()
+  await expect(xiaoHongTop).toHaveCount(1)
+  await expect(xiaoHongBottom).toHaveCount(1)
   await expandBtns.nth(0).click()
   await expect(nodeLines).toHaveCount(2)
   await expect(nodeDates).toHaveCount(2)

package/demos/pc/menus.js

@@ -109,7 +109,7 @@ export const cmpMenus = [
         'key': 'rich-text-editor',
         'mark': {
           'type': 'warning',
-          'text': 'Bate'
+          'text': 'Beta'
         }
       },
       { 'nameCn': '搜索', 'name': 'Search', 'key': 'search' },