test(badge): [badge] update button E2E test (#880)

examples/sites/demos/pc/app/badge/badge-class.spec.ts

@@ -4,8 +4,8 @@ test('测试自定义类名', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#badge-class')
 
-  const preview = page.locator('#preview')
-  const badge = preview.locator('.tiny-badge')
+  const demo = page.locator('#badge-class')
+  const badge = demo.locator('.tiny-badge')
 
   await expect(badge).toHaveClass(/custom-badge-class/)
 })

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

@@ -2,10 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('测试基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('badge#base')
+  await page.goto('badge#basic-usage')
 
-  const preview = page.locator('#preview')
-  const textWrapper = preview.locator('.tiny-badge__wrapper')
+  const demo = page.locator('#basic-usage')
+  const textWrapper = demo.locator('.tiny-badge__wrapper')
   const badge = textWrapper.locator('.tiny-badge')
 
   await expect(textWrapper).toContainText('我的待办')

examples/sites/demos/pc/app/badge/dynamic-hidden.spec.ts

@@ -4,9 +4,9 @@ test('消息已读动态隐藏标记', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#dynamic-hidden')
 
-  const preview = page.locator('#preview')
-  const badge = preview.locator('.tiny-badge')
-  const button = preview.getByRole('button', { name: '读取一条消息' })
+  const demo = page.locator('#dynamic-hidden')
+  const badge = demo.locator('.tiny-badge')
+  const button = demo.getByRole('button', { name: '读取一条消息' })
 
   await expect(badge).toContainText('2')
   await button.click()

examples/sites/demos/pc/app/badge/is-dot.spec.ts

@@ -4,8 +4,8 @@ test('小圆点标记', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#is-dot')
 
-  const preview = page.locator('#preview')
-  const badge = preview.locator('.tiny-badge')
+  const demo = page.locator('#is-dot')
+  const badge = demo.locator('.tiny-badge')
 
   await expect(badge).toHaveClass(/tiny-badge--default/)
   await expect(badge).toHaveCSS('width', '6px')

examples/sites/demos/pc/app/badge/link.spec.ts

@@ -2,10 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('跳转链接', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('badge#target')
+  await page.goto('badge#link')
 
-  const preview = page.locator('#preview')
-  const badge = preview.locator('.tiny-badge')
+  const demo = page.locator('#link')
+  const badge = demo.locator('.tiny-badge')
 
   await expect(badge.first().locator('a')).toBeVisible()
   await expect(badge.first().locator('a')).toContainText('2')

examples/sites/demos/pc/app/badge/max.spec.ts

@@ -4,8 +4,8 @@ test('计数最大值', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#max')
 
-  const preview = page.locator('#preview')
-  const badge = preview.locator('.tiny-badge')
+  const demo = page.locator('#max')
+  const badge = demo.locator('.tiny-badge')
 
   await expect(badge).toContainText('2+')
 })

examples/sites/demos/pc/app/badge/offset.spec.ts

@@ -4,8 +4,8 @@ test('标记的位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#offset')
 
-  const preview = page.locator('#preview')
-  const badge = preview.locator('.tiny-badge')
+  const demo = page.locator('#offset')
+  const badge = demo.locator('.tiny-badge')
 
   await expect(badge.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -10)')
   await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -10)')

examples/sites/demos/pc/app/badge/slot-content.spec.ts

@@ -4,8 +4,8 @@ test('自定义提示内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#slot-content')
 
-  const preview = page.locator('#preview')
-  const badge = preview.locator('.tiny-badge')
+  const demo = page.locator('#slot-content')
+  const badge = demo.locator('.tiny-badge')
 
   await expect(badge).toContainText('自定义')
 })

examples/sites/demos/pc/app/badge/slot-default.spec.ts

@@ -4,9 +4,9 @@ test('自定义标记目标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#slot-default')
 
-  const preview = page.locator('#preview')
-  const badgeWarpper = preview.locator('.tiny-badge__wrapper')
+  const demo = page.locator('#slot-default')
+  const badgeWarpper = demo.locator('.tiny-badge__wrapper')
 
   await expect(badgeWarpper).toContainText('自定义默认插槽')
-  await expect(badgeWarpper.getByText('自定义默认插槽').first()).toHaveCSS('color', 'rgb(255, 0, 0)')
+  await expect(badgeWarpper.getByText('自定义默认插槽').first()).toHaveCSS('color', 'rgb(250, 152, 65)')
 })

examples/sites/demos/pc/app/badge/type.spec.ts

@@ -4,8 +4,8 @@ test('主題样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('badge#type')
 
-  const preview = page.locator('#preview')
-  const badge = preview.locator('.tiny-badge')
+  const demo = page.locator('#type')
+  const badge = demo.locator('.tiny-badge')
   const dangerBadge = badge.nth(1)
   const primaryBadge = badge.nth(2)
   const successBadge = badge.nth(3)

examples/sites/src/views/components/demo.vue

@@ -103,8 +103,7 @@ export default defineComponent({
           const demoName = apiModeFn.getDemoName(`${getWebdocPath(cmpId)}/${fileName}`)
           let code = ''
 
-          // const path = `${staticDemoPath}/${demoName}`
-          const path = isMobileFirst ? `@demos/mobile-first/app/${demoName}` : `${staticDemoPath}/${demoName}`
+          const path = isMobileFirst.value ? `@demos/mobile-first/app/${demoName}` : `${staticDemoPath}/${demoName}`
           code = await fetchDemosFile(path)
             .then((code) => {
               return code