ccc1999
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(test): [milestone] Fix e2e test cases (#1612)

This commit is contained in:
chenxi-20 2024-05-09 17:32:56 +08:00 committed by GitHub
parent faf857c229
commit df0f9f2431
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
examples/sites/demos/pc/app/milestone/basic-usage.spec.ts
View File

@ -4,6 +4,7 @@ test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
await page.goto('milestone#basic-usage')
const milestone = page.locator('.tiny-milestone')
const nodes = page.locator('.tiny-milestone__node')
const nodeIcons = page.locator('.tiny-milestone__icon')
const nodeLines = page.locator('.tiny-milestone__line')
@ -62,10 +63,13 @@ test('基本用法', async ({ page }) => {
await expect(nodeIcons).toHaveCount(nodeCount)
await expect(nodeTitles).toHaveCount(nodeCount)
await expect(nodeDates).toHaveCount(nodeCount)
const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
const nodeWidth = Math.floor(totalWidth / nodeCount)
const nodeHeight = totalHeight - 38
for (let i = 0; i < nodeCount; i++) {
const { width, height } = await nodes.nth(i).boundingBox()
await expect(width).toBeGreaterThanOrEqual(118)
await expect(height).toBeGreaterThanOrEqual(88)
await expect(width).toBeGreaterThanOrEqual(nodeWidth)
await expect(height).toEqual(nodeHeight)
await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
await expect(nodeTitles.nth(i)).toHaveText(titles[i])
@ -73,7 +77,7 @@ test('基本用法', async ({ page }) => {
if (i < 5) {
const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
await expect(lineWidth).toBeGreaterThanOrEqual(118)
await expect(lineWidth).toBeGreaterThanOrEqual(nodeWidth)
} else {
const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
await expect(lineWidth).toBeGreaterThanOrEqual(0)

17
examples/sites/demos/pc/app/milestone/flag-before.spec.ts
View File

@ -7,20 +7,24 @@ test('旗子数据来源', async ({ page }) => {
const flags = page.locator('.tiny-milestone__flag-content')
const flagLines = page.locator('.tiny-milestone__flag-line')
const flagLineDots = flagLines.locator('.tiny-milestone__dot')
const nodes = page.locator('.tiny-milestone__icon.tiny-milestone__icon-custom')
const flagCount = 4
const flagAfterContents = [/引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/, /test6/]
const flagBeforeContents = [/test1已完成/, /引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/]
const button = page.getByRole('button').filter({ hasText: '设置flag-before值为true' })
const afterX = [370.47, 606.02, 648.84, 884.41]
const BeforeX = [370.47, 498.95, 734.5, 777.33]
const flagAfterLineColors = ['rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)', 'rgb(94, 124, 224)']
const flagBeforeLineColors = ['rgb(94, 124, 224)', 'rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)']
for (let i = 0; i < flagCount; i++) {
const { x, y, width, height } = await flags.nth(i).boundingBox()
const { y: lineY, height: lineHeight } = await flagLines.nth(i).boundingBox()
let index = i
if (i === 1 || i === 3) {
index = i + 1
}
const { x: nodeX } = await nodes.nth(index).boundingBox()
await expect(x).toBeGreaterThanOrEqual(afterX[i])
await expect(x).toBeGreaterThanOrEqual(nodeX)
await expect(lineY - lineHeight).toBeGreaterThanOrEqual(y)
await expect(width).toEqual(58)
await expect(height).toBeGreaterThanOrEqual(34)
@ -36,8 +40,13 @@ test('旗子数据来源', async ({ page }) => {
for (let i = 0; i < flagCount; i++) {
const { x, y, width, height } = await flags.nth(i).boundingBox()
const { y: lineY, height: lineHeight } = await flagLines.nth(i).boundingBox()
let index = i
if (i === 2) {
index = i + 1
}
const { x: nodeX } = await nodes.nth(index).boundingBox()
await expect(x).toBeGreaterThanOrEqual(BeforeX[i], 2)
await expect(x).toBeGreaterThanOrEqual(nodeX, 2)
await expect(lineY - lineHeight).toBeGreaterThanOrEqual(y)
await expect(width).toEqual(58)
await expect(height).toBeGreaterThanOrEqual(34)

11
examples/sites/demos/pc/app/milestone/show-number.spec.ts
View File

@ -5,6 +5,7 @@ test('序号显示', async ({ page }) => {
await page.goto('milestone#show-number')
const button = page.getByRole('button').filter({ hasText: '设置 show-number 值为 false' })
const milestone = page.locator('.tiny-milestone')
const nodes = page.locator('.tiny-milestone__node')
const nodeIcons = page.locator('.tiny-milestone__icon')
const nodeLines = page.locator('.tiny-milestone__line')
@ -65,10 +66,14 @@ test('序号显示', async ({ page }) => {
await expect(nodeIcons).toHaveCount(nodeCount)
await expect(nodeTitles).toHaveCount(nodeCount)
await expect(nodeDates).toHaveCount(nodeCount)
const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
const nodeWidth = Math.floor(totalWidth / nodeCount)
const nodeHeight = totalHeight - 38
for (let i = 0; i < nodeCount; i++) {
const { width, height } = await nodes.nth(i).boundingBox()
await expect(width).toBeGreaterThanOrEqual(118)
await expect(height).toBeGreaterThanOrEqual(88)
await expect(width).toBeGreaterThanOrEqual(nodeWidth)
await expect(height).toEqual(nodeHeight)
await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
await expect(nodeTitles.nth(i)).toHaveText(titles[i])
@ -76,7 +81,7 @@ test('序号显示', async ({ page }) => {
if (i < 5) {
const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
await expect(lineWidth).toBeGreaterThanOrEqual(118)
await expect(lineWidth).toBeGreaterThanOrEqual(nodeWidth)
} else {
const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
await expect(lineWidth).toBeGreaterThanOrEqual(0)

10
examples/sites/demos/pc/app/milestone/solid-style.spec.ts
View File

@ -5,6 +5,7 @@ test('实心显示', async ({ page }) => {
await page.goto('milestone#solid-style')
const button = page.getByRole('button').filter({ hasText: '设置 solid 值为 true' })
const milestone = page.locator('.tiny-milestone')
const nodes = page.locator('.tiny-milestone__node')
const nodeIcons = page.locator('.tiny-milestone__icon')
const nodeLines = page.locator('.tiny-milestone__line')
@ -65,10 +66,13 @@ test('实心显示', async ({ page }) => {
await expect(nodeIcons).toHaveCount(nodeCount)
await expect(nodeTitles).toHaveCount(nodeCount)
await expect(nodeDates).toHaveCount(nodeCount)
const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
const nodeWidth = Math.floor(totalWidth / nodeCount)
const nodeHeight = totalHeight - 38
for (let i = 0; i < nodeCount; i++) {
const { width, height } = await nodes.nth(i).boundingBox()
await expect(width).toBeGreaterThanOrEqual(118)
await expect(height).toBeGreaterThanOrEqual(88)
await expect(width).toBeGreaterThanOrEqual(nodeWidth)
await expect(height).toEqual(nodeHeight)
await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
await expect(nodeTitles.nth(i)).toHaveText(titles[i])
@ -76,7 +80,7 @@ test('实心显示', async ({ page }) => {
if (i < 5) {
const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
await expect(lineWidth).toBeGreaterThanOrEqual(118)
await expect(lineWidth).toBeGreaterThanOrEqual(nodeWidth)
} else {
const { width: lineWidth } = await nodeLines.nth(i).boundingBox()
await expect(lineWidth).toBeGreaterThanOrEqual(0)