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

test(wizard): [wizard] update wizard E2E test (#990)

This commit is contained in:
chenxi-20 2023-12-03 10:38:51 +08:00 committed by GitHub
parent 2219dedee2
commit 586590b524
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 85 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
examples/sites/demos/pc/app/wizard/btn-events-composition-api.vue
View File

@ -11,7 +11,7 @@
<script setup lang="jsx">
import { ref } from 'vue'
import { Wizard as TinyWizard } from '@opentiny/vue'
import { Wizard as TinyWizard, Modal } from '@opentiny/vue'
const dataSet = ref([
{
@ -37,18 +37,18 @@ const dataSet = ref([
])
const handlePrev = (datas) => {
console.log('handlePrev：上一步，', datas)
Modal.message('btn-prev' + JSON.stringify(datas))
}
const handleNext = (datas) => {
console.log('handleNext：下一步，', datas)
Modal.message('btn-next' + JSON.stringify(datas))
}
const handleSave = (datas) => {
console.log('handleSave：保存，', datas)
Modal.message('btn-save' + JSON.stringify(datas))
}
const handleSubmit = (datas) => {
console.log('handleSubmit：提交，', datas)
Modal.message('btn-submit' + JSON.stringify(datas))
}
</script>

63
examples/sites/demos/pc/app/wizard/btn-events.spec.ts Normal file
View File

@ -0,0 +1,63 @@
import { test, expect } from '@playwright/test'
test('按钮事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
await page.goto('wizard#btn-events')
const stepItems = page.locator('.tiny-wizard__steps-item')
const buttons = page.locator('.tiny-wizard__button')
const prev = buttons.getByRole('button', { name: '上一步' })
const next = buttons.getByRole('button', { name: '下一步' })
const save = buttons.getByRole('button', { name: '保存' })
const submit = buttons.getByRole('button', { name: '提交' })
const charts = stepItems.locator('.tiny-wizard__chart')
const prevClasss = [/is-ready/, /is-doing/]
const nextClasss = [/is-ready/, /is-ready/, /is-doing/]
const modal = page.locator('.tiny-modal')
await save.click()
await expect(modal.nth(1)).toHaveText(/btn-save/)
await expect(charts).toHaveCount(5)
for (let i = 0; i < 2; i++) {
await expect(stepItems.nth(i)).toHaveClass(prevClasss[i])
if (i === 1) {
const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
const { width, height } = await currentNode.boundingBox()
await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
await expect(width).toBeGreaterThanOrEqual(20)
await expect(height).toBeGreaterThanOrEqual(20)
}
}
await next.click()
await expect(modal.nth(2)).toHaveText(/btn-next/)
for (let i = 0; i < 3; i++) {
await expect(stepItems.nth(i)).toHaveClass(nextClasss[i])
if (i === 2) {
const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
const { width, height } = await currentNode.boundingBox()
await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
await expect(width).toBeGreaterThanOrEqual(20)
await expect(height).toBeGreaterThanOrEqual(20)
}
}
await prev.click()
await expect(modal.nth(3)).toHaveText(/btn-prev/)
for (let i = 0; i < 2; i++) {
await expect(stepItems.nth(i)).toHaveClass(prevClasss[i])
if (i === 1) {
const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
const { width, height } = await currentNode.boundingBox()
await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
await expect(width).toBeGreaterThanOrEqual(20)
await expect(height).toBeGreaterThanOrEqual(20)
}
}
await next.click()
await next.click()
await next.click()
await next.click()
await submit.click()
await expect(modal.nth(7)).toHaveText(/btn-submit/)
})

10
examples/sites/demos/pc/app/wizard/btn-events.vue
View File

@ -10,7 +10,7 @@
</template>
<script lang="jsx">
import { Wizard } from '@opentiny/vue'
import { Wizard, Modal } from '@opentiny/vue'
export default {
components: {
@ -44,16 +44,16 @@ export default {
},
methods: {
handlePrev(datas) {
console.log('handlePrev：上一步，', datas)
Modal.message('btn-prev' + JSON.stringify(datas))
},
handleNext(datas) {
console.log('handleNext：下一步，', datas)
Modal.message('btn-next' + JSON.stringify(datas))
},
handleSave(datas) {
console.log('handleSave：保存，', datas)
Modal.message('btn-save' + JSON.stringify(datas))
},
handleSubmit(datas) {
console.log('handleSubmit：提交，', datas)
Modal.message('btn-submit' + JSON.stringify(datas))
}
}
}

12
examples/sites/demos/pc/app/wizard/page-guide.spec.ts
View File

@ -21,8 +21,8 @@ test('页向导流程图', async ({ page }) => {
const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
const { width, height } = await currentNode.boundingBox()
await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
await expect(width).toBeCloseTo(20)
await expect(height).toBeCloseTo(22.67, 2)
await expect(width).toBeGreaterThanOrEqual(20)
await expect(height).toBeGreaterThanOrEqual(20)
}
}
@ -33,8 +33,8 @@ test('页向导流程图', async ({ page }) => {
const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
const { width, height } = await currentNode.boundingBox()
await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
await expect(width).toBeCloseTo(20)
await expect(height).toBeCloseTo(22.67, 2)
await expect(width).toBeGreaterThanOrEqual(20)
await expect(height).toBeGreaterThanOrEqual(20)
}
}
@ -45,8 +45,8 @@ test('页向导流程图', async ({ page }) => {
const currentNode = stepItems.nth(i).locator('.tiny-wizard__chart > span').nth(1)
const { width, height } = await currentNode.boundingBox()
await expect(currentNode).toHaveClass('tiny-wizard__chart-svg')
await expect(width).toBeCloseTo(20)
await expect(height).toBeCloseTo(22.67, 2)
await expect(width).toBeGreaterThanOrEqual(20)
await expect(height).toBeGreaterThanOrEqual(20)
}
}
})

2
examples/sites/demos/pc/app/wizard/slot-step-button.spec.ts
View File

@ -12,6 +12,6 @@ test('步骤插槽', async ({ page }) => {
for (let i = 0; i < 3; i++) {
await expect(buttons.nth(i)).toHaveText(texts[i])
await buttons.nth(i).click()
await expect(modal.nth(i)).toHaveText(`步骤${i + 1}`)
await expect(modal.nth(i + 1)).toHaveText(`步骤${i + 1}`)
}
})

10
examples/sites/demos/pc/app/wizard/time-line-flow.spec.ts
View File

@ -17,12 +17,12 @@ test('时间线流程图', async ({ page }) => {
const texts = [/提交小红/, /转他人处理小胡/, /主管审批小张/]
const expandBtns = page.getByRole('listitem').locator('svg')
const xiaoHongTop = page
.getByRole('tooltip', { name: '小红 部门：某部门 邮件：example@example.com 手机：1234567890' })
.getByRole('tooltip', { name: '小红 工号：123456890 部门：某部门 邮件：example@example.com 手机：1234567890' })
.locator('div')
.filter({ hasText: '小红工号：123456890' })
.nth(3)
const xiaoHongBottom = page
.getByRole('tooltip', { name: '小红 部门：某部门 邮件：example@example.com 手机：1234567890' })
.getByRole('tooltip', { name: '小红 工号：123456890 部门：某部门 邮件：example@example.com 手机：1234567890' })
.getByText('部门：某部门邮件：example@example.com手机：1234567890')
await expect(nodeLines).toHaveCount(2)
@ -49,9 +49,9 @@ test('时间线流程图', async ({ page }) => {
}
}
await userNames.first().hover()
await expect(xiaoHongTop).toBeVisible()
await expect(xiaoHongBottom).toBeVisible()
await page.getByRole('link', { name: '小红 123456890' }).hover()
await expect(xiaoHongTop).toHaveCount(1)
await expect(xiaoHongBottom).toHaveCount(1)
await expandBtns.nth(0).click()
await expect(nodeLines).toHaveCount(2)
await expect(nodeDates).toHaveCount(2)