From 1279d4a08c9a005cc57e6590818f0c7e4d7596dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E6=80=A1=E6=9E=97?= Date: Fri, 26 Apr 2024 16:02:04 +0800 Subject: [PATCH] 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 --- .../mobile/app/loading/background.spec.ts | 9 +++++ .../demos/mobile/app/loading/base.spec.ts | 19 ++++++++++ .../mobile/app/loading/custom-class.spec.ts | 13 +++++++ .../app/loading/global-regitstry.spec.ts | 28 +++++++++++++++ .../demos/mobile/app/loading/size.spec.ts | 36 +++++++++++++++++++ .../demos/mobile/app/loading/spinner.spec.ts | 13 +++++++ .../demos/mobile/app/loading/spinner.vue | 2 +- .../demos/mobile/app/loading/tip-text.spec.ts | 10 ++++++ .../mobile/app/loading/webdoc/loading.js | 2 +- 9 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 examples/sites/demos/mobile/app/loading/background.spec.ts create mode 100644 examples/sites/demos/mobile/app/loading/base.spec.ts create mode 100644 examples/sites/demos/mobile/app/loading/custom-class.spec.ts create mode 100644 examples/sites/demos/mobile/app/loading/global-regitstry.spec.ts create mode 100644 examples/sites/demos/mobile/app/loading/size.spec.ts create mode 100644 examples/sites/demos/mobile/app/loading/spinner.spec.ts create mode 100644 examples/sites/demos/mobile/app/loading/tip-text.spec.ts diff --git a/examples/sites/demos/mobile/app/loading/background.spec.ts b/examples/sites/demos/mobile/app/loading/background.spec.ts new file mode 100644 index 000000000..c4d525e0c --- /dev/null +++ b/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)') +}) diff --git a/examples/sites/demos/mobile/app/loading/base.spec.ts b/examples/sites/demos/mobile/app/loading/base.spec.ts new file mode 100644 index 000000000..97d858199 --- /dev/null +++ b/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() +}) diff --git a/examples/sites/demos/mobile/app/loading/custom-class.spec.ts b/examples/sites/demos/mobile/app/loading/custom-class.spec.ts new file mode 100644 index 000000000..623e2c370 --- /dev/null +++ b/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)') +}) diff --git a/examples/sites/demos/mobile/app/loading/global-regitstry.spec.ts b/examples/sites/demos/mobile/app/loading/global-regitstry.spec.ts new file mode 100644 index 000000000..5877bd490 --- /dev/null +++ b/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() + }) +}) diff --git a/examples/sites/demos/mobile/app/loading/size.spec.ts b/examples/sites/demos/mobile/app/loading/size.spec.ts new file mode 100644 index 000000000..187a88ca9 --- /dev/null +++ b/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') +}) diff --git a/examples/sites/demos/mobile/app/loading/spinner.spec.ts b/examples/sites/demos/mobile/app/loading/spinner.spec.ts new file mode 100644 index 000000000..7dbabccc5 --- /dev/null +++ b/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() +}) diff --git a/examples/sites/demos/mobile/app/loading/spinner.vue b/examples/sites/demos/mobile/app/loading/spinner.vue index 44f1737af..007383868 100644 --- a/examples/sites/demos/mobile/app/loading/spinner.vue +++ b/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' diff --git a/examples/sites/demos/mobile/app/loading/tip-text.spec.ts b/examples/sites/demos/mobile/app/loading/tip-text.spec.ts new file mode 100644 index 000000000..d72c330de --- /dev/null +++ b/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('加载中...') +}) diff --git a/examples/sites/demos/mobile/app/loading/webdoc/loading.js b/examples/sites/demos/mobile/app/loading/webdoc/loading.js index 185ad7892..7992d515c 100644 --- a/examples/sites/demos/mobile/app/loading/webdoc/loading.js +++ b/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'