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

test(pager): [pager] update pager E2E test (#938)

This commit is contained in:
gimmyhehe 2023-11-28 15:54:29 +08:00 committed by GitHub
parent 27cc904b69
commit c215d5c57f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 109 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
examples/sites/demos/pc/app/pager/align.spec.ts Normal file
View File

@ -0,0 +1,13 @@
import { test, expect } from '@playwright/test'
test('对齐方式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#align')
const demo = page.locator('#align')
const pager = demo.locator('.tiny-pager')
await expect(pager.first()).toHaveCSS('text-align', 'left')
await expect(pager.nth(1)).toHaveCSS('text-align', 'center')
await expect(pager.nth(2)).toHaveCSS('text-align', 'right')
})

28
examples/sites/demos/pc/app/pager/basic-usage.spec.ts
View File

@ -1,13 +1,13 @@
import { test, expect } from '@playwright/test'
import { test, expect, Locator } from '@playwright/test'
test('测试分页基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#basic-usage')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const getPrev = (parent) => parent.locator('.tiny-pager__btn-prev')
const getNext = (parent) => parent.locator('.tiny-pager__btn-next')
const demo = page.locator('#basic-usage')
const pager = demo.locator('.tiny-pager')
const getPrev = (parent: Locator) => parent.locator('.tiny-pager__btn-prev')
const getNext = (parent: Locator) => parent.locator('.tiny-pager__btn-next')
const isActive = /is-active/
// 第一个分页组件
@ -25,22 +25,4 @@ test('测试分页基本用法', async ({ page }) => {
await expect(firstPager.locator('li').getByText('4')).toHaveClass(isActive)
await expect(firstPrev).not.toBeDisabled()
await expect(firstNext).not.toBeDisabled()
// 第二个分页组件
const secondPrev = getPrev(pager.nth(1))
const secondNext = getNext(pager.nth(1))
const secondPager = pager.nth(1)
await expect(secondPager.locator('li').first()).toHaveClass(isActive)
await expect(secondPager.locator('li').getByText('7')).not.toBeVisible()
await expect(secondPrev).toBeDisabled()
await expect(secondNext).not.toBeDisabled()
await secondPager.locator('li').getByText('10').click()
await expect(secondPager.locator('li').getByText('10')).toHaveClass(isActive)
await expect(secondPager.locator('li').getByText('7')).toBeVisible()
await expect(secondPrev).not.toBeDisabled()
await expect(secondNext).toBeDisabled()
await secondPrev.click()
await expect(secondPager.locator('li').getByText('9')).toHaveClass(isActive)
await expect(secondPrev).not.toBeDisabled()
await expect(secondNext).not.toBeDisabled()
})

6
examples/sites/demos/pc/app/pager/before-page-change.spec.ts
View File

@ -1,11 +1,11 @@
import { test, expect } from '@playwright/test'
test('测试切换分页前时间', async ({ page }) => {
test('分页变更前置处理', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#before-page-change')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#before-page-change')
const pager = demo.locator('.tiny-pager')
const prev = pager.locator('.tiny-pager__btn-prev')
const next = pager.locator('.tiny-pager__btn-next')
const tipModal = page.locator('.tiny-modal__box').filter({ hasText: '消息提示' })

10
examples/sites/demos/pc/app/pager/current-page.spec.ts
View File

@ -1,13 +1,13 @@
import { test, expect } from '@playwright/test'
import { test, expect, Locator } from '@playwright/test'
test('测试设置当前页', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#current-page')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const getPrev = (parent) => parent.locator('.tiny-pager__btn-prev')
const getNext = (parent) => parent.locator('.tiny-pager__btn-next')
const demo = page.locator('#current-page')
const pager = demo.locator('.tiny-pager')
const getPrev = (parent: Locator) => parent.locator('.tiny-pager__btn-prev')
const getNext = (parent: Locator) => parent.locator('.tiny-pager__btn-next')
const isActive = /is-active/
const prev = getPrev(pager.first())
const next = getNext(pager.first())

32
examples/sites/demos/pc/app/pager/custom-layout.spec.ts
View File

@ -4,24 +4,24 @@ test('测试自定义分页布局', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#custom-layout')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const prev = pager.locator('.tiny-pager__btn-prev')
const next = pager.locator('.tiny-pager__btn-next')
const slot = pager.getByText('我是插槽')
const demo = page.locator('#custom-layout')
const pager = demo.locator('.tiny-pager')
const prev = pager.first().locator('.tiny-pager__btn-prev')
const next = pager.first().locator('.tiny-pager__btn-next')
const slot = pager.first().getByText('默认插槽')
await expect(slot).toBeVisible()
const pageSizeBox = await pager.locator('.tiny-pager__page-size').boundingBox()
const slotBox = await slot.boundingBox()
expect(pageSizeBox.x).toBeLessThan(slotBox.x)
const totalBox = await pager.first().locator('.tiny-pager__total').boundingBox()
const pageSizeBox = await pager.first().locator('.tiny-pager__page-size').boundingBox()
const prevBox = await prev.boundingBox()
expect(slotBox.x).toBeLessThan(prevBox.x)
const pagesBox = await pager.locator('.tiny-pager__pages').boundingBox()
expect(prevBox.x).toBeLessThan(pagesBox.x)
const pagesBox = await pager.first().locator('.tiny-pager__pages').boundingBox()
const nextBox = await next.boundingBox()
expect(pagesBox.x).toBeLessThan(nextBox.x)
const gotoBox = await pager.locator('.tiny-pager__goto').boundingBox()
expect(nextBox.x).toBeLessThan(gotoBox.x)
const totalBox = await pager.locator('.tiny-pager__total').boundingBox()
expect(gotoBox.x).toBeLessThan(totalBox.x)
const slotBox = await slot.boundingBox()
const gotoBox = await pager.first().locator('.tiny-pager__goto').boundingBox()
expect(totalBox?.x).toBeLessThan(pageSizeBox?.x || 0)
expect(pageSizeBox?.x).toBeLessThan(prevBox?.x || 0)
expect(prevBox?.x).toBeLessThan(pagesBox?.x || 0)
expect(pagesBox?.x).toBeLessThan(nextBox?.x || 0)
expect(nextBox?.x).toBeLessThan(slotBox?.x || 0)
expect(slotBox?.x).toBeLessThan(gotoBox?.x || 0)
})

4
examples/sites/demos/pc/app/pager/custom-next-prev-text.spec.ts
View File

@ -4,8 +4,8 @@ test('自定义上下页按钮文本', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#custom-next-prev-text')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#custom-next-prev-text')
const pager = demo.locator('.tiny-pager')
const prev = pager.locator('.tiny-pager__btn-prev')
const next = pager.locator('.tiny-pager__btn-next')

4
examples/sites/demos/pc/app/pager/custom-total.spec.ts
View File

@ -4,8 +4,8 @@ test('自定义总条数', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#custom-total')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#custom-total')
const pager = demo.locator('.tiny-pager')
const total = pager.locator('.tiny-pager__total')
await expect(total.first()).toHaveText('总条数：100万+')

9
examples/sites/demos/pc/app/pager/disabled-and-size.spec.ts
View File

@ -1,16 +1,17 @@
import { test, expect } from '@playwright/test'
test('测试禁用状态', async ({ page }) => {
test('禁用和尺寸', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#pager-disabled')
await page.goto('pager#disabled-and-size')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager').first()
const demo = page.locator('#disabled-and-size')
const pager = demo.locator('.tiny-pager').first()
const sizeChange = pager.locator('.tiny-pager__page-size')
const pageItem = pager.locator('.tiny-pager__pages li')
const prev = pager.locator('.tiny-pager__btn-prev')
const next = pager.locator('.tiny-pager__btn-next')
await demo.locator('.tiny-switch').click()
await expect(sizeChange).toHaveCSS('color', 'rgb(138, 142, 153)')
await expect(sizeChange).toHaveCSS('border-top-color', 'rgb(223, 225, 230)')
await expect(prev).toBeDisabled()

6
examples/sites/demos/pc/app/pager/hide-on-single-page.spec.ts
View File

@ -4,14 +4,14 @@ test('只有一页时隐藏分页', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#hide-on-single-page')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#hide-on-single-page')
const pager = demo.locator('.tiny-pager')
const prev = pager.locator('.tiny-pager__btn-prev')
const next = pager.locator('.tiny-pager__btn-next')
await expect(prev).toBeDisabled()
await expect(next).toBeDisabled()
await expect(pager).toBeVisible()
await preview.locator('.tiny-switch').click()
await demo.locator('.tiny-switch').click()
await expect(pager).not.toBeVisible()
})

4
examples/sites/demos/pc/app/pager/page-append-to-body.spec.ts
View File

@ -4,8 +4,8 @@ test('分页下拉框显示位置', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#popper-append-to-body')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#popper-append-to-body')
const pager = demo.locator('.tiny-pager')
const sizeSelect = pager.locator('.tiny-pager__selector')
await pager.locator('.tiny-pager__page-size').click()

4
examples/sites/demos/pc/app/pager/page-count.spec.ts
View File

@ -4,8 +4,8 @@ test('页码按钮数量', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#page-count')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#page-count')
const pager = demo.locator('.tiny-pager')
const pageItem = pager.locator('.tiny-pager__pages li')
await expect(pageItem.last()).toHaveText('200')

8
examples/sites/demos/pc/app/pager/page-size.spec.ts
View File

@ -4,11 +4,11 @@ test('每页显示数量', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#page-size')
const total = 50
const initPageSize = 5
const getPageCount = (pageSize) => String(Math.ceil(total / pageSize))
const preview = page.locator('#preview')
const preview = page.locator('#page-size')
const pager = preview.locator('.tiny-pager')
const total = 100
const initPageSize = 5
const getPageCount = (pageSize: number) => String(Math.ceil(total / pageSize))
const sizeChange = pager.locator('.tiny-pager__page-size')
const sizeSelect = page.locator('.tiny-pager__selector')
const pageItem = pager.locator('.tiny-pager__pages li')

4
examples/sites/demos/pc/app/pager/pager-count.spec.ts
View File

@ -4,8 +4,8 @@ test('页码按钮数量', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#pager-count')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#pager-count')
const pager = demo.locator('.tiny-pager')
const pageItem = pager.locator('.tiny-pager__pages li')
await expect(pageItem).toHaveCount(16)

2
examples/sites/demos/pc/app/pager/pager-event-composition-api.vue
View File

@ -35,7 +35,7 @@ function handleCurrentChange(val) {
function handleSizeChange(val) {
Modal.message({
message: `current-change 事件，当前页: ${val}`
message: `size-change 事件，每页条目数: ${val}`
})
}

37
examples/sites/demos/pc/app/pager/pager-event.spec.ts
View File

@ -1,17 +1,34 @@
import { test, expect } from '@playwright/test'
test('页码发生变化时触发事件', async ({ page }) => {
test('事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#pager-events-current-change')
await page.goto('pager#pager-event')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const pageItem = pager.locator('.tiny-pager__pages li')
const demo = page.locator('#pager-event')
const pager = demo.locator('.tiny-pager')
const modalBox = page.locator('.tiny-modal__box')
await pageItem.last().click()
await expect(modalBox.filter({ hasText: 'current-change 事件，当前页: 10' })).toBeVisible()
await pageItem.first().click()
// 需匹配以1结尾
await expect(modalBox.filter({ hasText: /current-change 事件，当前页: 1$/ })).toBeVisible()
// 当前所在页改变
await pager.first().locator('.tiny-pager__pages li').last().click()
await expect(modalBox.getByText('current-change 事件，当前页: 10')).toBeVisible()
// 每页展示条目数改变
const sizeChange = pager.nth(2).locator('.tiny-pager__sizes')
const sizeSelect = page.locator('.tiny-pager__selector')
await sizeChange.click()
await sizeSelect.nth(3).getByText('20').click()
await expect(modalBox.getByText('size-change 事件，每页条目数: 20')).toBeVisible()
// 上一页、下一页
await pager.nth(3).locator('.tiny-pager__btn-next').click()
await expect(modalBox.getByText('next-click 事件，当前页: 2')).toBeVisible()
await pager.nth(3).locator('.tiny-pager__btn-prev').click()
await expect(modalBox.getByText('prev-click 事件，当前页: 1')).toBeVisible()
// 每页条目数和当前页同时改变
await pager.nth(5).locator('.tiny-pager__sizes').click()
await sizeSelect.nth(3).getByText('20').click()
await expect(modalBox.getByText('模拟后台拉取数据')).toBeVisible()
await expect(modalBox.getByText('模拟后台拉取数据')).toHaveCount(1)
})

2
examples/sites/demos/pc/app/pager/pager-event.vue
View File

@ -39,7 +39,7 @@ export default {
},
handleSizeChange(val) {
Modal.message({
message: `current-change 事件，当前页: ${val}`
message: `size-change 事件，每页条目数: ${val}`
})
},
prevClick(val) {

6
examples/sites/demos/pc/app/pager/pager-in-grid.spec.ts
View File

@ -4,10 +4,10 @@ test('测试表格分页', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#pager-in-grid')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#pager-in-grid')
const pager = demo.locator('.tiny-pager')
const next = pager.locator('.tiny-pager__btn-next')
const firstTableRow = preview.locator('.tiny-grid .tiny-grid-body__row').first()
const firstTableRow = demo.locator('.tiny-grid .tiny-grid-body__row').first()
await next.click()
await expect(firstTableRow).toHaveText(/WSX科技YX公司/)

4
examples/sites/demos/pc/app/pager/pager-mode.spec.ts
View File

@ -4,8 +4,8 @@ test('分页complete模式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#pager-mode')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#pager-mode')
const pager = demo.locator('.tiny-pager')
const prev = pager.locator('.tiny-pager__btn-prev')
const next = pager.locator('.tiny-pager__btn-next')

5
examples/sites/demos/pc/app/pager/popper-class.spec.ts
View File

@ -4,11 +4,12 @@ test('自定义分页下拉框的类名', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#popper-class')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const demo = page.locator('#popper-class')
const pager = demo.locator('.tiny-pager')
const sizeChange = pager.locator('.tiny-pager__page-size')
const sizeSelect = page.locator('.tiny-pager__selector')
await sizeChange.click()
await expect(sizeSelect).toHaveClass(/custom-pager/)
await expect(sizeSelect).toHaveCSS('background-color', 'rgb(230, 247, 255)')
})

10
examples/sites/demos/pc/app/pager/show-total-loading.spec.ts
View File

@ -4,18 +4,18 @@ test('总条数加载中', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#show-total-loading')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const changeBtn = preview.getByRole('button', { name: '改变总页数加载状态' })
const demo = page.locator('#show-total-loading')
const pager = demo.locator('.tiny-pager')
const switchBtn = demo.locator('.tiny-switch')
const total = pager.locator('.tiny-pager__total')
const totalLoading = total.locator('.tiny-loading__spinner')
await expect(total).toHaveText('加载总条数…')
await expect(totalLoading).toBeVisible()
await expect(totalLoading.locator('svg.circular')).toBeVisible()
await changeBtn.click()
await switchBtn.click()
await expect(totalLoading).not.toBeVisible()
await changeBtn.click()
await switchBtn.click()
await expect(totalLoading).toBeVisible()
await expect(totalLoading.locator('svg.circular')).toBeVisible()
})

12
examples/sites/demos/pc/app/pager/webdoc/pager.js
View File

@ -12,7 +12,7 @@ export default {
'codeFiles': ['basic-usage.vue']
},
{
'demoId': 'current-page/v-model:current-page',
'demoId': 'current-page',
'name': { 'zh-CN': '当前所在页', 'en-US': 'Current Page' },
'desc': {
'zh-CN': '<p>通过 <code>current-page</code> 设置初始加载页码数。</p>\n',
@ -31,16 +31,6 @@ export default {
},
'codeFiles': ['page-size.vue']
},
{
'demoId': 'prev-next-click',
'name': { 'zh-CN': '上一页、下一页事件', 'en-US': 'Prev click and next click event' },
'desc': {
'zh-CN': '<p> <code>prev-click</code> 切换至上一页时触发， <code>next-click</code> 切换至下一页时触发。</p>\n',
'en-US':
'<p>Triggered when switching to the previous page, and triggered when switching to the next page.</p>\n'
},
'codeFiles': ['prev-next-click.vue']
},
{
'demoId': 'align',
'name': { 'zh-CN': '对齐方式', 'en-US': 'Align mode' },

4
examples/vue3/package.json
View File

@ -14,7 +14,7 @@
"test:e2e": "playwright test",
"test:unit": "vitest",
"install:browser": "playwright install",
"codegen": "playwright codegen localhost:7130"
"codegen": "playwright codegen localhost:3101"
},
"devDependencies": {
"@opentiny-internal/playwright-config": "workspace:^1.0.1-beta.0",
@ -59,4 +59,4 @@
"@unocss/preset-icons": "^0.48.0",
"@unocss/transformer-directives": "^0.48.0"
}
}
}