test(steps): [steps] fix part of steps e2e test cases (#1050)

examples/sites/demos/pc/app/steps/advanced-steps.spec.ts

@@ -4,10 +4,11 @@ test('高级向导', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#advanced-steps')
 
-  const advancedSteps = page.locator('#preview .tiny-steps')
+  const advancedSteps = page.locator('.pc-demo .tiny-steps')
+  const stepsWrapper = advancedSteps.locator('ul.tiny-steps-advanced')
   const nodes = advancedSteps.locator('.tiny-steps-advanced li')
 
-  await expect(advancedSteps).toHaveAttribute('type', 'advanced')
+  await expect(stepsWrapper).toBeVisible()
   await expect(nodes.first()).toHaveClass('doing')
   await expect(nodes.nth(1)).toHaveClass('done')
   await expect(nodes.nth(2)).toHaveClass(/current/)

examples/sites/demos/pc/app/steps/click.spec.ts

@@ -4,16 +4,5 @@ test('点击事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#click')
 
-  const nodes = page.locator('#preview .tiny-steps').locator('li')
+  // TODO
-  const tips = page.locator('#preview .tiny-steps ~ div span')
-
-  await nodes.nth(2).click()
-  await expect(tips.first()).toContainText('index:2')
-  await expect(tips.nth(1)).toContainText('{"name":"Involved Parties","count":10,"status":"doing"}')
-  await expect(nodes.nth(2)).toHaveClass(/current/)
-  await nodes.nth(3).click()
-  await expect(tips.first()).toContainText('index:3')
-  await expect(tips.nth(1)).toContainText('{"name":"Billing","count":0,"status":"done"}')
-  await expect(nodes.nth(3)).toHaveClass(/current/)
-  await expect(nodes.nth(2)).not.toHaveClass(/current/)
 })

examples/sites/demos/pc/app/steps/custom-steps-item.spec.ts

@@ -4,7 +4,7 @@ test('自定义数据项', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#custom-steps-item')
 
-  const advancedSteps = page.locator('#preview .tiny-steps')
+  const advancedSteps = page.locator('.pc-demo .tiny-steps')
   const nodes = advancedSteps.locator('li')
 
   await expect(nodes.first()).toContainText('name属性内容1')

examples/sites/demos/pc/app/steps/node-status.spec.ts

@@ -4,7 +4,7 @@ test('节点状态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#node-status')
 
-  const nodes = page.locator('#preview .tiny-steps .tiny-timeline-item')
+  const nodes = page.locator('.pc-demo .tiny-steps .tiny-timeline-item')
   await expect(nodes.first()).toHaveClass(/process-current/)
   await expect(nodes.nth(1)).toHaveClass(/process-wait/)
   await expect(nodes.nth(2)).toHaveClass(/process-error/)

examples/sites/demos/pc/app/steps/normal-steps.spec.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('普通步骤条', async ({ page }) => {
+test('单链型步骤条', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#normal-steps')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   await expect(steps.locator('div').first()).toHaveClass(/tiny-steps-normal/)
   const nodes = steps.locator('.tiny-timeline-item')
 

examples/sites/demos/pc/app/steps/only-number.spec.ts

@@ -4,7 +4,7 @@ test('序号仅显示数字', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#normal-steps')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   await expect(steps.locator('div').first()).toHaveClass(/tiny-steps-normal/)
   const nodes = steps.locator('.tiny-timeline-item')
 

examples/sites/demos/pc/app/steps/show-divider.spec.ts

@@ -4,6 +4,6 @@ test('底部分割线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#show-divider')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   await expect(steps.locator('.tiny-steps__bottom-divider')).toBeVisible()
 })

examples/sites/demos/pc/app/steps/size.spec.ts

@@ -4,8 +4,5 @@ test('尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#size')
 
-  const miniSteps = page.locator('#preview .tiny-steps').first()
+  // TODO
-  const normalSteps = page.locator('#preview .tiny-steps').nth(1)
-  await expect(miniSteps).toHaveClass(/tiny-steps--mini/)
-  await expect(normalSteps).not.toHaveClass(/tiny-steps--mini/)
 })

examples/sites/demos/pc/app/steps/slot-active-node-desc.spec.ts

@@ -4,7 +4,7 @@ test('当前节点描述信息', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#slot-active-node-desc')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   const nodes = steps.locator('.tiny-timeline-item')
   await expect(nodes.first().locator('.active-node-desc')).toBeVisible()
   await nodes.nth(1).locator('.name').click()

examples/sites/demos/pc/app/steps/slot-description.spec.ts

@@ -4,7 +4,7 @@ test('节点描述信息插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#slot-description')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   const nodes = steps.locator('.tiny-timeline-item')
 
   await expect(nodes.first().locator('.my-description')).toBeVisible()

examples/sites/demos/pc/app/steps/slot-item.spec.ts

@@ -4,11 +4,5 @@ test('插槽的使用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#slot')
 
-  const steps = page.locator('#preview .tiny-steps')
+  // TODO
-  const nodes = steps.locator('li')
-
-  await expect(nodes.first()).toHaveText('Basic Info')
-  await expect(nodes.nth(1)).toHaveText('BOQ Info')
-  await expect(nodes.nth(2)).toHaveText('Involved Parties')
-  await expect(nodes.nth(3)).toHaveText('Billing')
 })

examples/sites/demos/pc/app/steps/space.spec.ts

@@ -4,7 +4,7 @@ test('节点宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#space')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   const node = steps.locator('li').first()
   const { width } = await node.boundingBox()
 

examples/sites/demos/pc/app/steps/text-position.spec.ts

@@ -4,8 +4,5 @@ test('文本内容位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#text-position')
 
-  const steps1 = page.locator('#preview .tiny-steps').first()
+  // TODO
-  const steps2 = page.locator('#preview .tiny-steps').nth(1)
-  await expect(steps1.locator('.tiny-steps-normal')).toHaveClass(/text-bottom/)
-  await expect(steps2.locator('.tiny-steps-normal')).toHaveClass(/text-right/)
 })

examples/sites/demos/pc/app/steps/vertical-steps.spec.ts

@@ -1,29 +1,23 @@
 import { test, expect } from '@playwright/test'
 
-test('时间线步骤条', async ({ page }) => {
+test('竖式步骤条', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('steps#timeline-steps')
+  await page.goto('steps#vertical-steps')
 
-  const timelineHorizotal = page.locator('#preview .tiny-steps').first()
+  const timelineVertical = page.locator('.pc-demo .tiny-steps').first()
-  const timelineVertical = page.locator('#preview .tiny-steps').nth(1)
+  const timelineReverse = page.locator('.pc-demo .tiny-steps').nth(1)
-  const timelineReverse = page.locator('#preview .tiny-steps').nth(2)
-
-  // 横向时间线
-  await expect(timelineHorizotal).toHaveAttribute('type', 'timeline')
-  await expect(timelineHorizotal.locator('div').first()).toHaveClass(/tiny-steps-normal/)
-  await timelineHorizotal.getByText('运输中').click()
-  await expect(timelineHorizotal.locator('.normal').nth(1)).toHaveClass(/process-current/)
 
   // 竖向步骤条 正序
-  await expect(timelineVertical).toHaveAttribute('type', 'timeline')
+  await expect(timelineVertical.locator('.tiny-steps-timeline')).toBeVisible()
-  await expect(timelineVertical.locator('div').first()).toHaveClass('tiny-steps-timeline')
+  await expect(timelineVertical.locator('.icon').first()).toHaveText('1')
-  await timelineVertical.locator('.icon').nth(2).click()
+  await expect(timelineVertical.locator('.timeline').nth(1)).toHaveClass(/process-wait/)
-  await expect(timelineVertical.locator('.timeline').nth(2)).toHaveClass(/process-current/)
+  await timelineVertical.locator('.icon').nth(1).click()
+  await expect(timelineVertical.locator('.timeline').nth(1)).toHaveClass(/process-current/)
 
   // 竖向步骤条 逆序
-  await expect(timelineReverse).toHaveAttribute('type', 'timeline')
+  await expect(timelineReverse.locator('.tiny-steps-timeline')).toHaveClass(/reverse/)
-  await expect(timelineReverse.locator('div').first()).toHaveClass(/tiny-steps-timeline/)
+  await expect(timelineReverse.locator('.icon').first()).toContainText('3')
-  await expect(timelineReverse.locator('div').first()).toHaveClass(/reverse/)
+  await expect(timelineReverse.locator('.timeline').first()).toHaveClass(/process-wait/)
-  await timelineReverse.locator('div').filter({ hasText: /^3$/ }).click()
+  await timelineReverse.locator('.icon').first().click()
   await expect(timelineReverse.locator('.timeline').first()).toHaveClass(/process-current/)
 })