@opentiny/vue-docs 1.0.2 → 1.0.3

package/resources/pc/demo/milestone/show-number.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('http://127.0.0.1:7130/pc/milestone/show-number')
+
+  const button = page.getByRole('button').filter({ hasText: '设置show-number值为false' })
+  const nodes = page.locator('.tiny-milestone__node')
+  const nodeIcons = page.locator('.tiny-milestone__icon')
+  const nodeLines = page.locator('.tiny-milestone__line')
+  const nodeTitles = page.locator('.tiny-milestone__description-name')
+  const nodeDates = page.locator('.tiny-milestone__description-status')
+  const nodeCount = 6
+  const iconClasss = [/is-completed status-completed/, /is-completed status-completed/, /status-doing/, /status-cancel/, /status-back/, /status-end/]
+  const iconStyles = [
+    { 'background-color': 'rgb(255, 255, 255)', 'color': 'rgb(94, 124, 224)', 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(255, 255, 255)', 'color': 'rgb(94, 124, 224)', 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(126, 211, 33)', 'color': 'rgb(255, 255, 255)', 'box-shadow': 'rgba(126, 211, 33, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(217, 217, 217)', 'color': 'rgb(255, 255, 255)', 'box-shadow': 'rgba(217, 217, 217, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(245, 34, 45)', 'color': 'rgb(255, 255, 255)', 'box-shadow': 'rgba(245, 34, 45, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(250, 173, 20)', 'color': 'rgb(255, 255, 255)', 'box-shadow': 'rgba(250, 173, 20, 0.4) 0px 0px 0px 4px' }
+  ]
+  const titles = ['完成状态，状态值:completed', '完成状态，状态值:completed', '未完成状态, 状态值:doing', '未完成状态，状态值:cancel', '未完成状态，状态值:back', '未完成状态，状态值:end']
+
+  await expect(nodes).toHaveCount(nodeCount)
+  await expect(nodeLines).toHaveCount(nodeCount)
+  await expect(nodeIcons).toHaveCount(nodeCount)
+  await expect(nodeTitles).toHaveCount(nodeCount)
+  await expect(nodeDates).toHaveCount(nodeCount)
+  for (let i = 0; i < nodeCount; i++) {
+    await expect(nodes.nth(i)).toHaveCSS('width', '128.484px')
+    await expect(nodes.nth(i)).toHaveCSS('height', '102px')
+    await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
+    await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
+    await expect(nodeTitles.nth(i)).toHaveText(titles[i])
+    await expect(nodeDates.nth(i)).toHaveText(/2018-9/)
+
+    if (i < 5) {
+      await expect(nodeLines.nth(i)).toHaveCSS('width', '128.484px')
+    } else {
+      await expect(nodeLines.nth(i)).toHaveCSS('width', '0px')
+    }
+    if (i < 2) {
+      await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')
+    } else {
+      await expect(nodeIcons.nth(i)).toHaveText(String(i - 1))
+    }
+
+    for (let k in iconStyles[0]) {
+      await expect(nodeIcons.nth(i)).toHaveCSS(k, iconStyles[i][k])
+    }
+  }
+
+  await button.click()
+
+  for (let i = 0; i < nodeCount; i++) {
+    if (i < 2) {
+      await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')
+    } else {
+      await expect(nodeIcons.nth(i)).toHaveText('')
+    }
+  }
+})

package/resources/pc/demo/milestone/solid-style.spec.ts

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test'
+
+test('已完成节点实心显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://127.0.0.1:7130/pc/milestone/solid-style')
+
+  const button = page.getByRole('button').filter({ hasText: '设置solid值为true' })
+  const nodes = page.locator('.tiny-milestone__node')
+  const nodeIcons = page.locator('.tiny-milestone__icon')
+  const nodeLines = page.locator('.tiny-milestone__line')
+  const nodeTitles = page.locator('.tiny-milestone__description-name')
+  const nodeDates = page.locator('.tiny-milestone__description-status')
+  const nodeCount = 6
+  const iconClasss = [/is-completed status-completed/, /is-completed status-completed/, /status-doing/, /status-xxx/, /status-back/, /status-end/]
+  const iconStyles = [
+    { 'background-color': 'rgb(255, 255, 255)', 'color': 'rgb(94, 124, 224)', 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(255, 255, 255)', 'color': 'rgb(94, 124, 224)', 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(126, 211, 33)', 'color': 'rgb(255, 255, 255)', 'box-shadow': 'rgba(126, 211, 33, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(217, 217, 217)', 'color': 'rgb(255, 255, 255)', 'box-shadow': 'rgba(217, 217, 217, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(245, 34, 45)', 'color': 'rgb(255, 255, 255)', 'box-shadow': 'rgba(245, 34, 45, 0.4) 0px 0px 0px 4px' },
+    { 'background-color': 'rgb(250, 173, 20)', 'color': 'rgb(255, 255, 255)', 'box-shadow': 'rgba(250, 173, 20, 0.4) 0px 0px 0px 4px' }
+  ]
+  const titles = ['完成状态，状态值:completed', '完成状态，状态值:completed', '未完成状态, 状态值:doing', '未完成状态，状态值:xxx', '未完成状态，状态值:back', '未完成状态，状态值:end']
+
+  await expect(nodes).toHaveCount(nodeCount)
+  await expect(nodeLines).toHaveCount(nodeCount)
+  await expect(nodeIcons).toHaveCount(nodeCount)
+  await expect(nodeTitles).toHaveCount(nodeCount)
+  await expect(nodeDates).toHaveCount(nodeCount)
+  for (let i = 0; i < nodeCount; i++) {
+    await expect(nodes.nth(i)).toHaveCSS('width', '128.484px')
+    await expect(nodes.nth(i)).toHaveCSS('height', '102px')
+    await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
+    await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
+    await expect(nodeTitles.nth(i)).toHaveText(titles[i])
+    await expect(nodeDates.nth(i)).toHaveText(/2018-9/)
+
+    if (i < 5) {
+      await expect(nodeLines.nth(i)).toHaveCSS('width', '128.484px')
+    } else {
+      await expect(nodeLines.nth(i)).toHaveCSS('width', '0px')
+    }
+    if (i < 2) {
+      await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px')
+    } else {
+      await expect(nodeIcons.nth(i)).toHaveText(String(i - 1))
+    }
+
+    for (let k in iconStyles[0]) {
+      await expect(nodeIcons.nth(i)).toHaveCSS(k, iconStyles[i][k])
+    }
+  }
+
+  await button.click()
+
+  for (let i = 0; i < 2; i++) {
+    await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+  }
+})

package/resources/pc/demo/milestone/start-index.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('序号起始值', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).not.toBeNull())
+  await page.goto('http://127.0.0.1:7130/pc/milestone/start-index')
+
+  const nodeIcons = page.locator('.tiny-milestone__icon')
+  const nodeCount = 6
+
+  await expect(nodeIcons).toHaveCount(nodeCount)
+  for (let i = 0; i < nodeCount; i++) {
+    await expect(nodeIcons.nth(i)).toHaveText(String(i + 1))
+  }
+})

package/resources/pc/demo/modal/base.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/base')
+
+  // 基本提示框
+  const modal = page.locator('.tiny-modal.type__alert')
+  await page.getByRole('button', { name: '基本提示框' }).click()
+  await expect(modal).toBeVisible()
+  await expect(modal).toHaveClass(/is__mask/)
+  await page.getByRole('button', { name: '确认', exact: true }).click()
+  await expect(modal).not.toBeVisible()
+  await page.getByRole('button', { name: '基本提示框' }).click()
+  await page.locator('.tiny-modal__close-btn').click()
+  await expect(modal).not.toBeVisible()
+
+  // 成功提示框
+  await page.getByRole('button', { name: '成功提示框' }).click()
+  await expect(modal).toHaveClass(/status__success/)
+  await expect(modal.locator('.tiny-modal__status-wrapper svg')).toHaveClass(/tiny-modal-svg__success/)
+  await page.getByRole('button', { name: '确认', exact: true }).click()
+  await expect(page.locator('.tiny-modal.type__alert.status__success')).not.toBeVisible()
+
+  // 失败提示框
+  await page.getByRole('button', { name: '失败提示框' }).click()
+  await expect(page.locator('.tiny-modal.type__alert')).toHaveClass(/status__error/)
+  await expect(modal.locator('.tiny-modal__status-wrapper svg')).toHaveClass(/tiny-modal-svg__error/)
+  await page.getByRole('button', { name: '确认', exact: true }).click()
+  await expect(page.locator('.tiny-modal.type__alert.status__error')).not.toBeVisible()
+
+  // 确认提示框
+  await page.getByRole('button', { name: '确认提示框' }).click()
+  await expect(page.locator('.tiny-modal')).toHaveClass(/type__confirm/)
+  await page.getByRole('button', { name: '确认', exact: true }).click()
+  await expect(page.locator('.tiny-modal.type__confirm')).not.toBeVisible()
+  await page.getByRole('button', { name: '确认提示框' }).click()
+  await page.getByRole('button', { name: '取消' }).click()
+  await expect(page.locator('.tiny-modal.type__confirm')).not.toBeVisible()
+  await page.getByRole('button', { name: '确认提示框' }).click()
+  await page.locator('.tiny-modal__close-btn').click()
+  await expect(page.locator('.tiny-modal.type__confirm')).not.toBeVisible()
+})

package/resources/pc/demo/modal/base.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="content">
-    <tiny-button @click="baseClick" :reset-time="0">基本提示框</tiny-button>
-    <tiny-button @click="successClick" :reset-time="0">成功提示框</tiny-button>
-    <tiny-button @click="errorClick" :reset-time="0">失败提示框</tiny-button>
-    <tiny-button @click="confirmClick" :reset-time="0">确认提示框</tiny-button>
+    <tiny-button @click="baseClick" :reset-time="0">
+      基本提示框
+    </tiny-button>
+    <tiny-button @click="successClick" :reset-time="0">
+      成功提示框
+    </tiny-button>
+    <tiny-button @click="errorClick" :reset-time="0">
+      失败提示框
+    </tiny-button>
+    <tiny-button @click="confirmClick" :reset-time="0">
+      确认提示框
+    </tiny-button>
   </div>
 </template>
 
@@ -16,7 +24,8 @@ export default {
   },
   methods: {
     baseClick() {
-      Modal.alert('基本提示框', '标题')
+      const modal = Modal.alert('基本提示框', '标题')
+      setTimeout(() => modal.vm.close(), 3000)
     },
     successClick() {
       Modal.alert({ message: '成功提示框', status: 'success' })

package/resources/pc/demo/modal/cancel-event.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('取消事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/cancel-event')
+
+  const modal = page.locator('.tiny-modal').filter({ hasText: 'test' })
+  await page.getByRole('button', { name: '点击取消按钮时触发事件' }).click()
+  await page.getByRole('button', { name: '取消', exact: true }).click()
+  await expect(modal).not.toBeVisible()
+  await expect(page.locator('.tiny-modal.type__message')).toHaveText('点击取消按钮时触发事件')
+})

package/resources/pc/demo/modal/close-event.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('关闭按钮事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/close-event')
+
+  const modal = page.locator('.tiny-modal').filter({ hasText: 'test' })
+  await page.getByRole('button', { name: '点击关闭按钮时触发事件' }).click()
+  await page.locator('.tiny-modal__close-btn').click()
+  await expect(modal).not.toBeVisible()
+  await expect(page.locator('.tiny-modal.type__message')).toHaveText('点击关闭按钮时触发事件')
+
+})

package/resources/pc/demo/modal/confirm-event.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('确认按钮事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/confirm-event')
+
+  const modal = page.locator('.tiny-modal').filter({ hasText: 'test' })
+  await page.getByRole('button', { name: '点击确定按钮触发事件' }).click()
+  await page.getByRole('button', { name: '确认' }).click()
+  await expect(modal).not.toBeVisible()
+  await expect(page.locator('.tiny-modal.type__message')).toHaveText('点击确定按钮时触发事件')
+})

package/resources/pc/demo/modal/duration.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('自动关闭延时', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/duration')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '默认3000ms后自动关闭提示框' }).click()
+  await expect(modal).toBeVisible()
+  await page.waitForTimeout(3200)
+  const visible1 = await modal.isVisible()
+  expect(visible1).toEqual(false)
+
+  await page.getByRole('button', { name: '500ms后自动关闭提示框' }).click()
+  await expect(modal).toBeVisible()
+  await page.waitForTimeout(700)
+  const visible2 = await modal.isVisible()
+  expect(visible2).toEqual(false)
+
+  await page.getByRole('button', { name: '5000ms后自动关闭提示框' }).click()
+  await expect(modal).toBeVisible()
+  await page.waitForTimeout(5200)
+  const visible3 = await modal.isVisible()
+  expect(visible3).toEqual(false)
+})

package/resources/pc/demo/modal/esc-closable.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('按 Esc 键关闭弹出框', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/esc-closable')
+
+  const modal = page.locator('.tiny-modal.type__alert')
+  await page.getByRole('button', { name: '按 Esc 键可以关闭弹出框' }).click()
+  await page.keyboard.press('Escape')
+  await expect(modal).not.toBeVisible()
+})

package/resources/pc/demo/modal/footer-slot.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('底部插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/footer-slot')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '自定义脚部' }).click()
+  await expect(modal.getByRole('button', { name: '自定义脚部信息' })).toBeVisible()
+  await modal.getByRole('button', { name: '自定义脚部信息' }).click()
+})

package/resources/pc/demo/modal/fullscreen.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('最大化显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/fullscreen')
+
+  const modal = page.locator('.tiny-modal.type__alert')
+  await page.getByRole('button', { name: '最大化显示' }).click()
+  await expect(modal).toHaveClass(/is__maximize/)
+  await page.locator('.tiny-modal__close-btn').click()
+  await expect(modal).not.toBeVisible()
+})

package/resources/pc/demo/modal/grid.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('嵌套grid', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/grid')
+
+  const modal = page.locator('.tiny-modal')
+  const grid = modal.locator('.tiny-grid ')
+  await page.getByRole('button', { name: '默认插槽' }).click()
+  await expect(grid).toBeVisible()
+})

package/resources/pc/demo/modal/hide-event.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('窗口关闭事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/hide-event')
+
+  const modal = page.locator('.tiny-modal').filter({ hasText: 'test' })
+  await page.getByRole('button', { name: '在窗口关闭时会触发事件' }).click()
+  await page.getByRole('button', { name: '确认' }).click()
+  await expect(modal).not.toBeVisible()
+  await page.getByRole('button', { name: '在窗口关闭时会触发事件' }).click()
+  await page.getByRole('button', { name: '取消' }).click()
+  await expect(modal).not.toBeVisible()
+  await page.getByRole('button', { name: '在窗口关闭时会触发事件' }).click()
+  await page.locator('.tiny-modal__close-btn').click()
+  await expect(modal).not.toBeVisible()
+})

package/resources/pc/demo/modal/id.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('防止重复提示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/id')
+
+  await page.getByRole('button', { name: '不允许重复点击' }).click()
+  await page.getByRole('button', { name: '不允许重复点击' }).click()
+  await page.getByRole('button', { name: '不允许重复点击' }).click()
+  await expect(page.locator('.tiny-modal')).toHaveCount(1)
+})

package/resources/pc/demo/modal/is-form-reset.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('关闭弹窗，是否重置表单数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/is-form-reset')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '点击关闭按钮时触发事件' }).click()
+  await page.locator('form input[type="text"]').click()
+  await page.locator('form input[type="text"]').fill('name')
+  await page.locator('input[type="password"]').click()
+  await page.locator('input[type="password"]').fill('123')
+  await page.getByRole('button', { name: '取消' }).click()
+  await page.getByRole('button', { name: '点击关闭按钮时触发事件' }).click()
+  await expect(page.locator('form input[type="text"]')).toHaveValue('name')
+  await expect(page.locator('input[type="password"]')).toHaveValue('123')
+})

package/resources/pc/demo/modal/lock-scroll.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('锁住滚动条', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/lock-scroll')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '不锁住滚动条不要遮罩层' }).click()
+  await expect(modal).not.toHaveClass(/lock__scroll/)
+
+  // 上下滑动模态框内容
+  const { y: initY } = await modal.locator('.tiny-modal__box').boundingBox()
+  await page.mouse.wheel(0, 100)
+  await page.waitForTimeout(100)
+  const { y: afterY } = await modal.locator('.tiny-modal__box').boundingBox()
+  expect(afterY).toBeLessThan(initY)
+})

package/resources/pc/demo/modal/lock-scroll.vue

@@ -11,8 +11,9 @@ export default {
   },
   methods: {
     btnClick() {
+      const str = '不锁住滚动条不要遮罩层。  '
       Modal.alert({
-        message: '不锁住滚动条不要遮罩层',
+        message: str.repeat(100),
         lockScroll: false,
         mask: false
       })

package/resources/pc/demo/modal/lock-view.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test('锁住页面', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/lock-view')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '不锁界面不要遮罩层' }).click()
+  await expect(modal).not.toHaveClass(/lock__view/)
+
+  // 检查页面元素是否随鼠标滑轮滚动而移动
+  const { y: initY } = await page.locator('#preview').boundingBox()
+  await page.mouse.wheel(0, 100)
+  await page.waitForTimeout(100)
+  const { y: afterY } = await page.locator('#preview').boundingBox()
+  expect(initY).toBeGreaterThan(afterY)
+})
+
+test('控制遮罩层显示', async ({ page }) => {
+  await page.goto('http://localhost:7130/pc/modal/lock-view')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '不锁界面不要遮罩层' }).click()
+  await expect(modal).not.toHaveClass(/is__mask/)
+  // 页面上元素可点击
+  await page.getByText('显示遮罩层', { exact: true }).click()
+})

package/resources/pc/demo/modal/mask-closable.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('点击遮罩层关闭窗口', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/mask-closable')
+
+  await page.getByRole('button', { name: '点击遮罩层可以关闭' }).click()
+  await expect(page.locator('.tiny-modal')).toBeVisible()
+  await page.mouse.click(10, 10)
+  await expect(page.locator('.tiny-modal')).not.toBeVisible()
+})

package/resources/pc/demo/modal/message.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义内容', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/message')
+
+  await page.getByRole('button', { name: '自定义提示框的内容' }).click()
+  await expect(page.locator('.tiny-modal__content')).toHaveText('自定义提示框的内容')
+})

package/resources/pc/demo/modal/min-height.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('调整窗口大小后窗口显示的最小高度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/min-height')
+
+  await page.getByRole('button', { name: '提示框最小高度为300' }).click()
+  const modal = page.locator('.tiny-modal__box')
+  // 获取弹窗位置
+  const { x, y, height } = await modal.boundingBox()
+
+  // 开始横线拖动
+  await page.mouse.move(x, y + height)
+  await page.mouse.down()
+  await page.mouse.move(x, y + height + 50)
+  await page.mouse.up()
+
+  // 判断窗口高度是否不小于限定最小高度
+  const { height: finalHeight } = await modal.boundingBox()
+  expect(Math.round(finalHeight)).toBeGreaterThanOrEqual(300)
+})

package/resources/pc/demo/modal/min-width.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('调整窗口大小后窗口显示的最小宽度', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/min-width')
+
+  await page.getByRole('button', { name: '提示框最小宽度为700' }).click()
+  const modal = page.locator('.tiny-modal__box')
+  // 获取弹窗位置
+  const { x, y } = await modal.boundingBox()
+  // 开始横线拖动
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x + 100, y)
+  await page.mouse.up()
+
+  // 判断窗口宽度是否小于限定最小宽度
+  const { width } = await modal.boundingBox()
+  expect(Math.round(width)).not.toBeLessThan(700)
+})

package/resources/pc/demo/modal/resize.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('调整窗口大小', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/resize')
+
+  await page.getByRole('button', { name: '可以拖动调整窗口大小' }).click()
+  const modal = page.locator('.tiny-modal__box')
+
+  // 获取弹窗位置
+  const { x, y, width, height } = await modal.boundingBox()
+
+  // 开始拖动放大
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x, y - 50)
+  await page.mouse.move(x - 50, y)
+  await expect(modal).toHaveClass(/is__drag/)
+  await page.mouse.up()
+
+  // 判断窗口尺寸是否放大
+  const { width: finalWidth, height: finalHeight } = await modal.boundingBox()
+  expect(width).toBeLessThan(finalWidth)
+  expect(height).toBeLessThan(finalHeight)
+})

package/resources/pc/demo/modal/show-event.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('窗口显示事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/show-event')
+
+  const modal = page.locator('.tiny-modal').filter({ hasText: 'test' })
+  await page.getByRole('button', { name: '在窗口显示时触发事件' }).click()
+  await expect(modal).toBeVisible()
+  await expect(page.locator('.tiny-modal.type__message')).toHaveText('在窗口显示时触发事件')
+})

package/resources/pc/demo/modal/showFooter.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('http://localhost:7130/pc/modal/showFooter')
+
+  const modal = page.locator('.tiny-modal__box')
+  await page.getByRole('button', { name: '不显示底部' }).click()
+  await expect(modal.locator('.tiny-modal__footer')).not.toBeVisible()
+})

package/resources/pc/demo/modal/showHeader.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('http://localhost:7130/pc/modal/showHeader')
+
+  const modal = page.locator('.tiny-modal__box')
+  await page.getByRole('button', { name: '不显示头部' }).click()
+  await expect(modal.locator('.tiny-modal__header')).not.toBeVisible()
+})

package/resources/pc/demo/modal/status.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test'
+
+test('消息状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/modal/status')
+
+  const messageInfo = page.locator('.tiny-modal').filter({ hasText: '基本提示图标' })
+  await page.getByRole('button', { name: '基本提示图标' }).click()
+  await expect(messageInfo).toHaveClass(/type__message/)
+  await expect(messageInfo).toHaveClass(/status__info/)
+  await expect(messageInfo.locator('.tiny-modal__status-wrapper .tiny-svg')).toHaveClass(/tiny-modal-svg__info/)
+
+
+  const messageSucc = page.locator('.tiny-modal').filter({ hasText: '成功提示图标' })
+  await page.getByRole('button', { name: '成功提示图标' }).click()
+  await expect(messageSucc).toHaveClass(/status__success/)
+  await expect(messageSucc.locator('.tiny-modal__status-wrapper .tiny-svg')).toHaveClass(/tiny-modal-svg__success/)
+
+  const messageWarn = page.locator('.tiny-modal').filter({ hasText: '警告提示图标' })
+  await page.getByRole('button', { name: '警告提示图标' }).click()
+  await expect(messageWarn).toHaveClass(/status__warning/)
+  await expect(messageWarn.locator('.tiny-modal__status-wrapper .tiny-svg')).toHaveClass(/tiny-modal-svg__warning/)
+
+  const messageError = page.locator('.tiny-modal').filter({ hasText: '错误提示图标' })
+  await page.getByRole('button', { name: '错误提示图标' }).click()
+  await expect(messageError).toHaveClass(/status__error/)
+  await expect(messageError.locator('.tiny-modal__status-wrapper .tiny-svg')).toHaveClass(/tiny-modal-svg__error/)
+
+  const messageHasCloseBtn = page.locator('.tiny-modal').filter({ hasText: '右侧显示关闭按钮' })
+  const closeBtn = messageHasCloseBtn.locator('.tiny-modal__close-btn')
+  await page.getByRole('button', { name: '关闭按钮示例' }).click()
+  await expect(closeBtn).toBeVisible()
+  await closeBtn.click()
+  await expect(messageHasCloseBtn).not.toBeVisible()
+})

package/resources/pc/demo/modal/title.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('http://localhost:7130/pc/modal/title')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '自定义标题' }).click()
+  await expect(modal.locator('.tiny-modal__header')).toHaveText('自定义标题')
+})

package/resources/pc/demo/modal/top.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('http://localhost:7130/pc/modal/top')
+
+  const modal = page.locator('.tiny-modal')
+  await page.getByRole('button', { name: '距离顶部的位置为500' }).click()
+  await expect(modal).toHaveCSS('top', '500px')
+})