forked from opentiny/tiny-vue
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
This commit is contained in:
parent
b4c1be5062
commit
1279d4a08c
|
@ -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)')
|
||||||
|
})
|
|
@ -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()
|
||||||
|
})
|
|
@ -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)')
|
||||||
|
})
|
|
@ -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()
|
||||||
|
})
|
||||||
|
})
|
|
@ -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')
|
||||||
|
})
|
|
@ -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()
|
||||||
|
})
|
|
@ -10,7 +10,7 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
Loading.service({
|
Loading.service({
|
||||||
spinner: iconLoading(),
|
spinner: iconLoading(),
|
||||||
text: '自定义loading图标',
|
text: '自定义 loading 图标',
|
||||||
target: document.getElementById('demo-loading'),
|
target: document.getElementById('demo-loading'),
|
||||||
background: '#fff',
|
background: '#fff',
|
||||||
tiny_mode: 'mobile'
|
tiny_mode: 'mobile'
|
||||||
|
|
|
@ -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('加载中...')
|
||||||
|
})
|
|
@ -78,7 +78,7 @@ export default {
|
||||||
codeFiles: ['size.vue']
|
codeFiles: ['size.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
demoId: 'global-registry.',
|
demoId: 'global-registry',
|
||||||
name: {
|
name: {
|
||||||
'zh-CN': '全局加载',
|
'zh-CN': '全局加载',
|
||||||
'en-US': 'Global Registry'
|
'en-US': 'Global Registry'
|
||||||
|
|
Loading…
Reference in New Issue