test(loading): add E2E test cases for mobile component (#1591)

* test(loading): add E2E test  for mobile component

* fix(loading): solved global registry api docs SyntaxError

examples/sites/demos/mobile/app/loading/background.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('loading#background')
+
+  const loading = page.locator('#background .tiny-mobile-loading')
+  await expect(loading).toHaveCSS('background-color', 'rgba(25, 25, 25, 0.376)')
+})

examples/sites/demos/mobile/app/loading/base.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('loading#base')
+
+  const loading = page.locator('#base .tiny-mobile-loading')
+  const loadingIcon = loading.locator('.tiny-mobile-loading__icon')
+
+  await expect(loading).toBeVisible()
+  await expect(loading).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.294)')
+  await expect(loadingIcon).toBeVisible()
+  await expect(loadingIcon).toHaveCSS('width', '24px')
+  await expect(loadingIcon).toHaveCSS('height', '24px')
+
+  // 可关闭
+  await page.getByRole('button', { name: '关闭 Loading' }).click()
+  await expect(loading).not.toBeVisible()
+})

examples/sites/demos/mobile/app/loading/custom-class.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('loading#custom-class')
+
+  const loading = page.locator('#custom-class .tiny-mobile-loading')
+  const loadingText = loading.locator('.tiny-mobile-loading__text')
+
+  await expect(loading).toHaveCSS('background-color', 'rgba(0, 0, 0, 0.5)')
+  await expect(loadingText).toBeVisible()
+  await expect(loadingText).toHaveCSS('color', 'rgb(255, 255, 255)')
+})

examples/sites/demos/mobile/app/loading/global-regitstry.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('全局加载', () => {
+  test('指令方式加载', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('loading#global-registry')
+
+    const loading = page.locator('.tiny-mobile-loading')
+
+    await page.getByRole('button', { name: '指令方式加载全屏Loading' }).click()
+    await expect(loading).toBeVisible()
+    await expect(loading).toHaveClass(/is-fullscreen/)
+    await page.waitForTimeout(3000)
+    await expect(loading).not.toBeVisible()
+  })
+
+  test('静态方法加载', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('loading#global-registry')
+
+    const loading = page.locator('.tiny-mobile-loading')
+
+    await page.getByRole('button', { name: '静态方法加载全屏Loading' }).click()
+    await expect(loading).toBeVisible()
+    await page.waitForTimeout(3000)
+    await expect(loading).not.toBeVisible()
+  })
+})

examples/sites/demos/mobile/app/loading/size.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test'
+
+test('尺寸', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('loading#size')
+
+  const loadings = page.locator('#size .tiny-mobile-loading')
+
+  // mini
+  const miniLoading = loadings.first()
+  await expect(miniLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/tiny-mobile-loading-mini/)
+  await expect(miniLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'row')
+  await expect(miniLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '14px')
+  await expect(miniLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '14px')
+
+  // small
+  const smallLoading = loadings.nth(1)
+  await expect(smallLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/tiny-mobile-loading-small/)
+  await expect(smallLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'column')
+  await expect(smallLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '24px')
+  await expect(smallLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '24px')
+
+  // medium
+  const mediumLoading = loadings.nth(2)
+  await expect(mediumLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/.tiny-mobile-loading-medium/)
+  await expect(mediumLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'column')
+  await expect(mediumLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '40px')
+  await expect(mediumLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '40px')
+
+  // large
+  const largeLoading = loadings.nth(3)
+  await expect(largeLoading.locator('.tiny-mobile-loading__body')).toHaveClass(/tiny-mobile-loading-large/)
+  await expect(largeLoading.locator('.tiny-mobile-loading__body')).toHaveCSS('flex-direction', 'column')
+  await expect(largeLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('width', '96px')
+  await expect(largeLoading.locator('.tiny-mobile-loading__icon')).toHaveCSS('height', '96px')
+})

examples/sites/demos/mobile/app/loading/spinner.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('loading#spinner')
+
+  const loading = page.locator('#spinner .tiny-mobile-loading')
+  const loadingText = loading.locator('.tiny-mobile-loading__text')
+  const svg = loading.locator('.tiny-mobile-loading__spinner')
+
+  await expect(loadingText).toContainText('自定义 loading 图标')
+  await expect(svg).toBeVisible()
+})

examples/sites/demos/mobile/app/loading/spinner.vue

@@ -10,7 +10,7 @@ export default {
   mounted() {
     Loading.service({
       spinner: iconLoading(),
-      text: '自定义loading图标',
+      text: '自定义 loading 图标',
       target: document.getElementById('demo-loading'),
       background: '#fff',
       tiny_mode: 'mobile'

examples/sites/demos/mobile/app/loading/tip-text.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('loading#tip-text')
+
+  const loading = page.locator('#tip-text .tiny-mobile-loading')
+  const loadingText = loading.locator('.tiny-mobile-loading__text')
+  await expect(loadingText).toContainText('加载中...')
+})

examples/sites/demos/mobile/app/loading/webdoc/loading.js

@@ -78,7 +78,7 @@ export default {
       codeFiles: ['size.vue']
     },
     {
-      demoId: 'global-registry.',
+      demoId: 'global-registry',
       name: {
         'zh-CN': '全局加载',
         'en-US': 'Global Registry'