feat(float-button) : [float-button] add e2e (#1508)

* feat(float-button): [float-button] add e2e

* fix(float-button):[float-button] fix e2e bug

* fix(float-button): [float-button] nothing to do

* fix(float-button): [float-button] reduction file

examples/sites/demos/apis/float-button.js

@@ -1,21 +1,21 @@
 export default {
   mode: ['pc'],
+
   apis: [
     {
-      'name': 'button',
+      'name': 'float-button',
       'type': 'component',
       'props': [
         {
           'name': 'type',
-          'type': 'IButtonType',
+          'type': 'IFloatButtonType',
-          'typeAnchorName': 'IButtonType',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
             'en-US': 'Display different states of buttons, set to text to display as text buttons'
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          'pcDemo': 'basic-usage'
         },
         {
           'name': 'description',
@@ -26,7 +26,7 @@ export default {
             'en-US': 'Set the text displayed by the button'
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          'pcDemo': 'basic-usage'
         },
         {
           'name': 'icon',
@@ -37,7 +37,7 @@ export default {
             'en-US': 'The icon displayed by the button is received as an Icon component'
           },
           mode: ['pc'],
-          pcDemo: 'icon'
+          'pcDemo': 'icon'
         },
         {
           'name': 'reset-time',
@@ -48,7 +48,7 @@ export default {
             'en-US': 'Set the button disable time, in milliseconds, to prevent repeated submission'
           },
           mode: ['pc'],
-          pcDemo: 'reset-time'
+          'pcDemo': 'reset-time'
         },
         {
           'name': 'trigger',
@@ -59,7 +59,7 @@ export default {
             'en-US': 'Set the menu trigger mode.'
           },
           mode: ['pc'],
-          pcDemo: 'trigger'
+          'pcDemo': 'trigger'
         },
         {
           'name': 'open',
@@ -70,7 +70,7 @@ export default {
             'en-US': 'Whether the settings menu opens.'
           },
           mode: ['pc'],
-          pcDemo: 'trigger'
+          'pcDemo': 'trigger'
         },
         {
           'name': 'shape',
@@ -81,7 +81,7 @@ export default {
             'en-US': 'Set Button shape.'
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          'pcDemo': 'basic-usage'
         },
         {
           'name': 'backTop',
@@ -92,7 +92,7 @@ export default {
             'en-US': 'Set whether it is a back-to-top button.'
           },
           mode: ['pc'],
-          pcDemo: 'backTop'
+          'pcDemo': 'backTop'
         },
 
         {
@@ -104,7 +104,7 @@ export default {
             'en-US': 'When backTop is set to true, this property sets the scrolling element.'
           },
           mode: ['pc'],
-          pcDemo: 'backTop'
+          'pcDemo': 'backTop'
         },
         {
           'name': 'top',
@@ -115,7 +115,7 @@ export default {
             'en-US': 'The distance of the button from the top.'
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          'pcDemo': 'basic-usage'
         },
         {
           'name': 'bottom',
@@ -126,7 +126,7 @@ export default {
             'en-US': 'The distance of the button from the bottom.'
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          'pcDemo': 'basic-usage'
         },
         {
           'name': 'left',
@@ -137,7 +137,7 @@ export default {
             'en-US': 'The distance of the button from the left.'
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          'pcDemo': 'basic-usage'
         },
         {
           'name': 'right',
@@ -148,7 +148,7 @@ export default {
             'en-US': 'The distance of the button from the right.'
           },
           mode: ['pc'],
-          pcDemo: 'basic-usage'
+          'pcDemo': 'basic-usage'
         },
         {
           'name': 'href',
@@ -159,7 +159,7 @@ export default {
             'en-US': 'button to jump to the page.'
           },
           mode: ['pc'],
-          pcDemo: 'jump'
+          'pcDemo': 'jump'
         },
         {
           'name': 'target',
@@ -170,7 +170,7 @@ export default {
             'en-US': 'The target attribute equivalent to the A tag, which takes effect when the href exists.'
           },
           mode: ['pc'],
-          pcDemo: 'jump'
+          'pcDemo': 'jump'
         }
       ],
       'events': [
@@ -183,7 +183,7 @@ export default {
             'en-US': 'Sets the callback function triggered when a button is clicked'
           },
           mode: ['pc'],
-          pcDemo: 'click'
+          'pcDemo': 'click'
         }
       ],
       'slots': [
@@ -196,16 +196,16 @@ export default {
             'en-US': 'Default slot, customize what the button is when expanded'
           },
           mode: ['pc'],
-          pcDemo: 'open'
+          'pcDemo': 'open'
         }
       ]
     }
   ],
   types: [
     {
-      name: 'IButtonType',
+      name: 'IFloatButtonType',
       type: 'interface',
-      code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+      code: `type IFloatButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
     }
   ]
 }

examples/sites/demos/pc/app/float-button/backTop.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('float-button#backTop')
+  const parent = await page.locator('.parent')
+  await parent.evaluate((el) => {
+    el.scrollTop = el.scrollHeight
+  })
+  await expect(page.locator('.tiny-float-button')).toBeVisible()
+  await page.locator('.tiny-float-button').click()
+  await page.waitForTimeout(1000)
+  await expect(page.locator('.tiny-float-button')).not.toBeVisible()
+})

examples/sites/demos/pc/app/float-button/basic-usage.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+
+test('测试按钮类型', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#basic-usage')
+  await expect(page.locator('.tiny-float-button').first()).toHaveClass(/tiny-float-button--default/)
+  await expect(page.locator('.tiny-float-button').nth(1)).toHaveClass(
+    /tiny-float-button tiny-float-button--primary is-only-icon is-square/
+  )
+  await expect(page.locator('.tiny-float-button').nth(2)).toHaveClass(
+    /tiny-float-button tiny-float-button--info is-only-icon is-circle/
+  )
+  await expect(page.locator('.tiny-float-button').nth(3)).toHaveClass(
+    /tiny-float-button tiny-float-button--warning is-only-icon is-circle/
+  )
+  await expect(page.locator('.tiny-float-button').nth(4)).toHaveClass(
+    /tiny-float-button tiny-float-button--danger is-only-icon is-circle/
+  )
+})
+
+test('测试是否是圆形按钮', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#basic-usage')
+  await expect(page.locator('.tiny-float-button').first()).toHaveClass(/is-circle/)
+  await expect(page.locator('.tiny-float-button').nth(2)).toHaveClass(/is-circle/)
+  await expect(page.locator('.tiny-float-button').nth(3)).toHaveClass(/is-circle/)
+  await expect(page.locator('.tiny-float-button').nth(4)).toHaveClass(/is-circle/)
+})
+
+test('测试是否是正方形按钮', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#basic-usage')
+  await expect(page.locator('.tiny-float-button').nth(1)).toHaveClass(/is-square/)
+})

examples/sites/demos/pc/app/float-button/icon.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('float-button#icon')
+
+  const demo = page.locator('#icon')
+  const button = demo.locator('.tiny-float-button')
+  await expect(button.first().locator('svg')).not.toBeNull()
+})

examples/sites/demos/pc/app/float-button/jump.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('测试按钮跳转', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#jump')
+  const button = page.locator('.tiny-float-button').first()
+  await button.click()
+})

examples/sites/demos/pc/app/float-button/reset-time.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('测试按钮禁用事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#reset-time')
+
+  const demo = page.locator('#reset-time')
+
+  const defalutDisabled = demo.getByRole('button', { name: '点' })
+
+  // 默认禁用1S
+  await defalutDisabled.click()
+  await expect(page.locator('.tiny-float-button')).toHaveClass(
+    /tiny-float-button tiny-float-button--success is-disabled is-circle/
+  )
+  await page.waitForTimeout(1000)
+  await expect(page.locator('.tiny-float-button')).toHaveClass(/tiny-float-button tiny-float-button--success is-circle/)
+})

examples/sites/demos/pc/app/float-button/trigger.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('测试按钮菜单模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('float-button#trigger')
+  const firstButton = page.locator('.tiny-float-button').first()
+  const secondButton = page.locator('.tiny-float-button').nth(1)
+  const thirdButton = page.locator('.tiny-float-button').nth(2)
+  await firstButton.click()
+  await page.waitForTimeout(1000)
+  expect(firstButton.locator('.tiny-float-button--open')).not.toBeNull()
+  await secondButton.hover()
+  await page.waitForTimeout(1000)
+  expect(secondButton.locator('.tiny-float-button--open')).not.toBeNull()
+  expect(thirdButton.locator('.tiny-float-button--open')).not.toBeNull()
+})