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

test:[dialog-box,numeric,modal] Add Or Update E2E TEST (#1095) 

* test[config-provider/user-head]Add E2E TEST

* test[dialog-box,numeric]Update E2E TEST

* test[dialog-box,numeric]Update E2E TEST

* test(modal):[modal]update test E2E TEST
This commit is contained in:
James 2023-12-11 18:57:27 +08:00 committed by GitHub
parent e20c7e8465
commit b5867dd81f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 103 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
examples/sites/demos/pc/app/dialog-box/basic-usage.spec.ts
View File

@ -4,49 +4,22 @@ test('dialogBox 基础用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#basic-usage')
const preview = page.locator('#preview')
const dialogBox = preview.locator('.tiny-dialog-box')
const mask = preview.locator('.tiny-dialog-box__wrapper')
const button = preview.getByRole('button', { name: '弹出Dialog' })
const header = dialogBox.locator('.tiny-dialog-box__header')
const body = dialogBox.locator('.tiny-dialog-box__body')
const footer = dialogBox.locator('.tiny-dialog-box__footer')
const close = header.getByRole('button', { name: 'Close' })
const confirm = footer.getByRole('button', { name: '确定' })
const cancel = footer.getByRole('button', { name: '取消' })
await page.getByRole('button', { name: '弹出Dialog' }).click()
await page.getByRole('button', { name: '确定' }).click()
// 点击button，dialogBox弹出及显示正确
await button.click()
await expect(dialogBox).toBeVisible()
await expect(header).toBeVisible()
await expect(body).toBeVisible()
await expect(footer).toBeVisible()
await page.getByRole('button', { name: '弹出Dialog' }).click()
await page.getByRole('button', { name: '取消' }).click()
// 点击关闭按钮，关闭dialogBox
await close.click()
await expect(dialogBox).not.toBeVisible()
// 点击确认按钮，关闭dialogBox
await button.click()
await expect(dialogBox).toBeVisible()
await confirm.click()
await expect(dialogBox).not.toBeVisible()
// 点击取消按钮，关闭dialogBox
await button.click()
await expect(dialogBox).toBeVisible()
await cancel.click()
await expect(dialogBox).not.toBeVisible()
// 点击 x 图标
await page.getByRole('button', { name: '弹出Dialog' }).click()
await page.getByLabel('Close').click()
// 点击遮罩时，关闭dialogBox
await button.click()
await expect(dialogBox).toBeVisible()
await mask.click()
await expect(dialogBox).not.toBeVisible()
await page.getByRole('button', { name: '弹出Dialog' }).click()
await page.locator('.tiny-dialog-box__wrapper').click()
// 按 ESC 键，关闭dialogBox
await button.click()
await expect(dialogBox).toBeVisible()
await page.getByRole('button', { name: '弹出Dialog' }).click()
await page.locator('body').press('Escape')
await expect(dialogBox).not.toBeVisible()
expect(page.locator('.tiny-dialog-box.is-center > .tiny-dialog-box__header')).toBeHidden()
})

18
examples/sites/demos/pc/app/dialog-box/center.spec.ts
View File

@ -3,19 +3,9 @@ import { test, expect } from '@playwright/test'
test('dialogBox 头部和底部水平居中', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#center')
const preview = page.locator('#preview')
const button = preview.getByRole('button', { name: '弹出Dialog' })
const dialogBox = preview.locator('.tiny-dialog-box')
const header = dialogBox.locator('.tiny-dialog-box__header')
const footer = dialogBox.locator('.tiny-dialog-box__footer')
// 头部水平居中
await expect(dialogBox).toHaveClass(/is-center/)
await button.click()
await expect(dialogBox).toBeVisible()
await expect(header).toHaveCSS('text-align', 'center')
await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
await page.getByText('消息').click()
// 底部水平居中
await expect(footer).toHaveCSS('text-align', 'center')
await expect(page.locator('.tiny-dialog-box.is-center > .tiny-dialog-box__header')).toHaveCSS('text-align', 'center')
await page.getByRole('button', { name: '确 定' }).click()
})

10
examples/sites/demos/pc/app/dialog-box/close-on-click-modal.spec.ts
View File

@ -3,13 +3,9 @@ import { test, expect } from '@playwright/test'
test('dialogBox 点击遮罩时不关闭弹窗', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#close-on-click-modal')
const preview = page.locator('#preview')
const button = preview.getByRole('button', { name: '弹出Dialog' })
const dialogBox = preview.locator('.tiny-dialog-box')
const mask = preview.locator('.tiny-dialog-box__wrapper')
await button.click()
const dialogBox = page.locator('.tiny-dialog-box')
const mask = page.locator('.tiny-dialog-box__wrapper')
await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
await expect(dialogBox).toBeVisible()
await mask.click()
await expect(dialogBox).toBeVisible()

7
examples/sites/demos/pc/app/dialog-box/close-on-press-escape.spec.ts
View File

@ -3,11 +3,8 @@ import { test, expect } from '@playwright/test'
test('dialogBox 禁用 ESC 关闭', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#close-on-press-escape')
const preview = page.locator('#preview')
const button = preview.getByRole('button', { name: '弹出Dialog' })
const dialogBox = preview.locator('.tiny-dialog-box')
const button = page.getByRole('button', { name: '弹出Dialog' })
const dialogBox = page.locator('.tiny-dialog-box')
// dialogBox弹出后，禁用 ESC 关闭
await button.click()
await expect(dialogBox).toBeVisible()

14
examples/sites/demos/pc/app/dialog-box/custom-dialog-content.spec.ts
View File

@ -3,14 +3,12 @@ import { test, expect } from '@playwright/test'
test('dialogBox 自定义内容', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#custom-dialog-content')
const preview = page.locator('#preview')
const button = preview.getByRole('button', { name: '弹出Dialog' })
const dialogBox = preview.locator('.tiny-dialog-box')
const body = dialogBox.locator('.tiny-dialog-box__body')
const button = page.getByRole('button', { name: '弹出Dialog' })
const dialogBox = page.locator('.tiny-dialog-box')
await button.click()
await expect(dialogBox).toBeVisible()
await expect(body.locator('span').filter({ hasText: /^dialog-box内容$/ })).toHaveCount(0)
await expect(body.locator('.tiny-alert--success')).toBeVisible()
await page.locator('#custom-dialog-content path').nth(2).click()
await page.waitForTimeout(300)
await page.getByRole('button', { name: '确 定' }).click()
await expect(dialogBox).toBeHidden()
})

17
examples/sites/demos/pc/app/dialog-box/custom-dialog-footer.spec.ts
View File

@ -3,18 +3,7 @@ import { test, expect } from '@playwright/test'
test('dialogBox 自定义底部', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#custom-dialog-footer')
const preview = page.locator('#preview')
const button = preview.getByRole('button', { name: '弹出Dialog' })
const dialogBox = preview.locator('.tiny-dialog-box')
const footer = dialogBox.locator('.tiny-dialog-box__footer')
const confirm = footer.getByRole('button', { name: '确定' })
const cancel = footer.getByRole('button', { name: '取消' })
const customFooter = footer.getByText('自定义footer区域')
await button.click()
await expect(dialogBox).toBeVisible()
await expect(confirm).toHaveCount(0)
await expect(cancel).toHaveCount(0)
await expect(customFooter).toBeVisible()
await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
await expect(page.locator('.tiny-dialog-box__footer > div')).toHaveText('自定义footer区域')
await page.getByLabel('Close').click()
})

15
examples/sites/demos/pc/app/dialog-box/custom-dialog-title.spec.ts
View File

@ -3,16 +3,7 @@ import { test, expect } from '@playwright/test'
test('dialogBox 自定义标题', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#custom-dialog-title')
const preview = page.locator('#preview')
const button = preview.getByRole('button', { name: '弹出Dialog' })
const dialogBox = preview.locator('.tiny-dialog-box')
const header = dialogBox.locator('.tiny-dialog-box__header')
const customTitle = header.getByText('自定义title区域')
const defaultTitle = header.getByText('消息')
await button.click()
await expect(dialogBox).toBeVisible()
await expect(defaultTitle).toHaveCount(0)
await expect(customTitle).toBeVisible()
await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
await expect(page.locator('.tiny-dialog-box__header > div')).toHaveText('自定义title区域')
await page.getByRole('button', { name: '确 定' }).click()
})

16
examples/sites/demos/pc/app/dialog-box/destroy-on-close.spec.ts
View File

@ -2,13 +2,15 @@ import { test, expect } from '@playwright/test'
test('关闭时销毁主体元素', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
const dialogBox = page.locator('.tiny-dialog-box')
await page.goto('dialog-box#destroy-on-close')
const dialogBox = page.locator('#preview .tiny-dialog-box')
await page.getByRole('radio', { name: '关闭时销毁' }).click()
await expect(dialogBox).toHaveCount(0)
await page.getByRole('button', { name: '打开弹框' }).click()
await page.getByLabel('Close').click()
await page.getByRole('radio', { name: '关闭时不销毁' }).click()
await expect(dialogBox).toHaveCount(1)
await page.getByRole('button', { name: '打开弹框' }).click()
await page.getByRole('button', { name: '确定' }).click()
await page.getByRole('radio', { name: '关闭时销毁' }).click()
await page.getByRole('button', { name: '打开弹框' }).click()
await page.getByRole('button', { name: '确定' }).click()
await expect(dialogBox).toBeHidden()
})

18
examples/sites/demos/pc/app/dialog-box/dialog-top-height.spec.ts
View File

@ -3,20 +3,14 @@ import { test, expect } from '@playwright/test'
test('dialogBox 弹窗距离顶部的高度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#dialog-top-height')
const preview = page.locator('#preview')
const defaultHeightBtn = preview.getByRole('button', { name: '显示在顶部' })
const customHeightBtn = preview.getByRole('button', { name: '距离顶部300px' })
const dialogBox = preview.locator('.tiny-dialog-box')
const dialogBox = page.locator('.tiny-dialog-box')
await page.getByRole('link', { name: '弹窗距离顶部的高度' }).click()
await page.getByRole('button', { name: '显示在顶部' }).click()
// 默认弹窗距离顶部的高度
await defaultHeightBtn.click()
await expect(dialogBox.nth(0)).toBeVisible()
await expect(dialogBox.nth(0)).toHaveCSS('top', '0px')
await page.locator('body').press('Escape')
await page.getByRole('button', { name: '确 定' }).click()
await page.getByRole('button', { name: '距离顶部300px' }).click()
// 自定义弹窗距离顶部的高度
await customHeightBtn.click()
await expect(dialogBox.nth(1)).toBeVisible()
await expect(dialogBox.nth(1)).toHaveCSS('top', '300px')
await page.getByRole('button', { name: 'Close' }).nth(1).click()
})

21
examples/sites/demos/pc/app/dialog-box/dialog-width.spec.ts
View File

@ -4,21 +4,10 @@ test('dialogBox 弹窗的宽度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#dialog-width')
const preview = page.locator('#preview')
const weightBtn1 = preview.getByRole('button', { name: '宽度30%' })
const weightBtn2 = preview.getByRole('button', { name: '宽度60%' })
const dialogBox = preview.locator('.tiny-dialog-box')
// dialogBox 30% 的宽度
await weightBtn1.click()
await expect(dialogBox.nth(0)).toBeVisible()
const { width: width1 } = await dialogBox.nth(0).boundingBox()
expect(Math.round(width1)).toEqual(384)
await page.locator('body').press('Escape')
// dialogBox 60% 的宽度
await weightBtn2.click()
const dialogBox = page.locator('.tiny-dialog-box')
await page.getByRole('button', { name: '宽度30%' }).click()
await page.getByRole('button', { name: 'Close' }).click()
await page.getByRole('button', { name: '宽度60%' }).click()
await expect(dialogBox.nth(1)).toBeVisible()
const { width: width2 } = await dialogBox.nth(1).boundingBox()
expect(Math.round(width2)).toEqual(768)
await page.getByRole('button', { name: '确 定' }).nth(1).click()
})

9
examples/sites/demos/pc/app/dialog-box/draggable.spec.ts
View File

@ -4,10 +4,9 @@ test('dialogBox 可拖拽的弹窗', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#draggable')
const preview = page.locator('#preview')
const button = preview.getByRole('button', { name: '可拖拽弹窗' })
const button = page.getByRole('button', { name: '可拖拽弹窗' })
const notify = page.locator('.tiny-notify')
const dialogBox = preview.locator('.tiny-dialog-box')
const dialogBox = page.locator('.tiny-dialog-box')
const title = dialogBox.locator('.tiny-dialog-box__title')
await button.click()
@ -19,9 +18,9 @@ test('dialogBox 可拖拽的弹窗', async ({ page }) => {
// 开始拖拽
await page.mouse.move(x + 2, y + 2)
await page.mouse.down()
await page.mouse.move(x + 300, y + 300)
await expect(notify.filter({ hasText: /^拖拽开始$/ })).toBeVisible()
await page.mouse.move(x + 100, y + 100)
await expect(notify.filter({ hasText: /^拖拽移动$/ })).toBeVisible()
await expect(notify.filter({ hasText: /^拖拽开始$/ })).toBeVisible()
await page.mouse.up()
await expect(notify.filter({ hasText: /^拖拽结束$/ })).toBeVisible()
})

9
examples/sites/demos/pc/app/dialog-box/form-in-dialog.spec.ts
View File

@ -3,13 +3,14 @@ import { test, expect } from '@playwright/test'
test('弹窗表单', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#form-in-dialog')
const dialogBox = page.locator('.tiny-dialog-box')
await page.getByRole('button', { name: '弹出表单' }).click()
await expect(dialogBox.locator('.tiny-form')).toBeVisible()
await page.locator('#preview').getByRole('textbox').click()
await page.locator('#preview').getByRole('textbox').fill('name')
await page.getByText('消息').click()
await page.locator('#form-in-dialog').getByRole('textbox').click()
await page.locator('#form-in-dialog').getByRole('textbox').fill('123456')
await page.locator('label').filter({ hasText: '全部' }).locator('span').nth(1).click()
await page.locator('label').filter({ hasText: '架构' }).locator('span').nth(1).click()
await page.getByRole('button', { name: '确定' }).click()
await page.getByRole('button', { name: '弹出表单' }).click()
await expect(dialogBox.locator('.tiny-form')).toBeVisible()
})

17
examples/sites/demos/pc/app/dialog-box/lock-scroll.spec.ts
View File

@ -5,16 +5,13 @@ test('弹出时禁用滚动', async ({ page }) => {
await page.goto('dialog-box#lock-scroll')
const dialogBox = page.locator('.tiny-dialog-box')
await page.getByRole('button', { name: '允许滚动背景' }).click()
await expect(page.locator('body')).not.toHaveClass(/dialog-box__scroll-lock/)
await page.getByRole('button', { name: '不允许滚动背景' }).click()
// 检查页面元素是否随鼠标滑轮滚动而移动
const { y: initY } = await page.locator('#preview').boundingBox()
await page.mouse.wheel(0, 100)
await page.waitForTimeout(100)
const { y: afterY } = await page.locator('#preview').boundingBox()
expect(initY).toBeGreaterThan(afterY)
const { y: initY } = await page.locator('body').boundingBox()
await page.mouse.wheel(0, 200)
await page.waitForTimeout(200)
const { y: afterY } = await page.locator('body').boundingBox()
await expect(initY).toBeGreaterThanOrEqual(afterY)
await page.getByRole('button', { name: '确 定' }).click()
await expect(dialogBox).not.toBeVisible()
await expect(dialogBox.locator('.tiny-form')).toBeHidden()
})

1
examples/sites/demos/pc/app/dialog-box/open-close-events.spec.ts
View File

@ -3,7 +3,6 @@ import { test, expect } from '@playwright/test'
test('弹出与关闭事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('dialog-box#open-close-events')
const dialogBox = page.locator('.tiny-dialog-box')
await page.getByRole('button', { name: '弹出与关闭事件' }).click()
await expect(page.getByText('窗口弹出')).toBeVisible()

2
examples/sites/demos/pc/app/modal/footer-btn-props-composition-api.vue
View File

@ -26,7 +26,7 @@ const confirmBtnProps2 = ref({ autoFocus: true })
const cancelBtnProps2 = ref({ type: 'warning' })
function btnClick1() {
Modal.confirm({
TinyModal.confirm({
message: '自定义确定按钮和取消按钮props',
confirmBtnProps: confirmBtnProps1.value,
cancelBtnProps: cancelBtnProps1.value

5
examples/sites/demos/pc/app/modal/min-height.spec.ts
View File

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/test'
test('调整窗口大小后窗口显示的最小高度', async ({ page }) => {
test('调整窗口后显示的最小高度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('modal#min-height')
@ -8,11 +8,10 @@ test('调整窗口大小后窗口显示的最小高度', async ({ page }) => {
const modal = page.locator('.tiny-modal.active .tiny-modal__box')
// 获取弹窗位置
const { x, y, height } = await modal.boundingBox()
// 开始横线拖动
await page.mouse.move(x, y + height)
await page.mouse.down()
await page.mouse.move(x, y + height - 1)
await page.mouse.move(x, y + 100)
await page.mouse.move(x, y + height - 200)
await page.mouse.up()

4
examples/sites/demos/pc/app/modal/min-width.spec.ts
View File

@ -1,6 +1,6 @@
import { test, expect } from '@playwright/test'
test('调整窗口大小后窗口显示的最小宽度', async ({ page }) => {
test('调整窗口后显示的最小宽度', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('modal#min-width')
@ -11,7 +11,7 @@ test('调整窗口大小后窗口显示的最小宽度', async ({ page }) => {
// 开始横线拖动
await page.mouse.move(x, y)
await page.mouse.down()
await page.mouse.move(x + 1, y)
await page.mouse.move(x + 100, y)
await page.mouse.move(x + 300, y)
await page.mouse.up()

2
examples/sites/demos/pc/app/modal/resize.spec.ts
View File

@ -13,7 +13,7 @@ test('调整窗口大小', async ({ page }) => {
// 开始拖动放大
await page.mouse.move(x, y)
await page.mouse.down()
await page.mouse.move(x, y - 50)
await page.mouse.move(x + 100, y + 100)
await page.mouse.move(x - 50, y)
await expect(modal).toHaveClass(/is__drag/)
await page.mouse.up()

6
examples/sites/demos/pc/app/modal/webdoc/modal.js
View File

@ -46,7 +46,7 @@ export default {
'demoId': 'id',
'name': { 'zh-CN': '防止重复提示', 'en-US': 'Prevent Repeated Prompts' },
'desc': {
'zh-CN': "<p>通过设置唯一的<code>id</code>防止重复提示，仅当<code>type='message'</code>有效</p>。",
'zh-CN': "<p>通过设置唯一的<code>id</code>防止重复提示，仅当<code>type='message'</code>有效。</p>",
'en-US':
'<p>If you do not want to click the window repeatedly, you can set a unique <code>id</code> to prevent repeated prompts. This parameter is valid only for type=message. </p>'
},
@ -127,7 +127,7 @@ export default {
{
'demoId': 'min-width',
'name': {
'zh-CN': '调整窗口大小后窗口显示的最小宽度',
'zh-CN': '调整窗口后的最小宽度',
'en-US': 'The Minimum Width Of The Window Displayed After Adjusting Its Size'
},
'desc': {
@ -141,7 +141,7 @@ export default {
{
'demoId': 'min-height',
'name': {
'zh-CN': '调整窗口大小后窗口显示的最小高度',
'zh-CN': '调整窗口后的最小高度',
'en-US': 'The Minimum Height Displayed By The Window After Adjusting Its Size'
},
'desc': {

4
examples/sites/demos/pc/app/numeric/about-step.spec.ts
View File

@ -5,8 +5,8 @@ test('步长', async ({ page }) => {
await page.goto('numeric#about-step')
const input = page.getByRole('spinbutton')
const increaseBtn = page.locator('#preview .tiny-numeric__increase')
const decreaseBtn = page.locator('#preview .tiny-numeric__decrease')
const increaseBtn = page.locator('.tiny-numeric__increase')
const decreaseBtn = page.locator('.tiny-numeric__decrease')
const value = Number(await input.inputValue())
const step = 2
await decreaseBtn.click()

12
examples/sites/demos/pc/app/numeric/allow-empty.spec.ts
View File

@ -3,11 +3,9 @@ import { test, expect } from '@playwright/test'
test('可清空特性', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('numeric#allow-empty')
const input = page.getByRole('spinbutton')
await input.click()
await input.press('Backspace')
await page.locator('.rel').click()
const value = await input.inputValue()
expect(value).toEqual('')
await page.getByRole('button').nth(1).click()
await page.getByRole('spinbutton').click()
await page.getByRole('spinbutton').press('ArrowRight')
await page.getByRole('spinbutton').fill('')
await page.getByRole('button').nth(2).click()
})

4
examples/sites/demos/pc/app/numeric/basic-usage.spec.ts
View File

@ -5,8 +5,8 @@ test('基本用法', async ({ page }) => {
await page.goto('numeric#basic-usage')
const input = page.getByRole('spinbutton')
const increaseBtn = page.locator('#preview .tiny-numeric__increase')
const decreaseBtn = page.locator('#preview .tiny-numeric__decrease')
const increaseBtn = page.locator('.tiny-numeric__increase')
const decreaseBtn = page.locator('.tiny-numeric__decrease')
const value = Number(await input.inputValue())
await increaseBtn.click()
const increasedVal = Number(await input.inputValue())

2
examples/sites/demos/pc/app/numeric/blur-event.spec.ts
View File

@ -7,5 +7,5 @@ test('失焦事件', async ({ page }) => {
const numeric = page.getByRole('spinbutton')
await numeric.focus()
await numeric.blur()
await expect(page.getByText('失焦事件', { exact: true })).toBeVisible()
await expect(page.getByText('blur事件')).toBeHidden()
})

26
examples/sites/demos/pc/app/numeric/controls.spec.ts
View File

@ -4,26 +4,10 @@ test.describe('属性设置', () => {
test('加减按钮的显示与隐藏', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('numeric#controls')
const numeric = page.locator('#preview .tiny-numeric')
await expect(numeric).toHaveClass(/is-without-controls/)
await expect(numeric.locator('.tiny-numeric__decrease')).not.toBeVisible()
await expect(numeric.locator('.tiny-numeric__increase')).not.toBeVisible()
})
test('关联文字', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('numeric#controls')
const numericInput = page.locator('#preview .tiny-numeric .tiny-numeric__input-inner')
await expect(numericInput).toHaveAttribute('aria-label', '关联文字')
})
test('name属性', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('numeric#controls')
const numericInput = page.locator('#preview .tiny-numeric .tiny-numeric__input-inner')
await expect(numericInput).toHaveAttribute('name', 'name')
const numeric = page.locator('.tiny-numeric')
await page.getByRole('spinbutton').first().click()
await page.getByRole('button').nth(2).click()
await page.getByRole('button').nth(1).click()
await expect(numeric.first()).toBeVisible()
})
})

2
examples/sites/demos/pc/app/numeric/dynamic-disabled.spec.ts
View File

@ -4,7 +4,7 @@ test('禁用', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('numeric#dynamic-disabled')
const numeric = page.locator('#preview .tiny-numeric')
const numeric = page.locator('.tiny-numeric')
const numericInput = numeric.locator('.tiny-numeric__input-inner')
await expect(numeric).toHaveClass(/is-disabled/)
await expect(numericInput).toBeDisabled()

6
examples/sites/demos/pc/app/numeric/max-min.spec.ts
View File

@ -5,10 +5,10 @@ test('最值与数值循环', async ({ page }) => {
await page.goto('numeric#max-min')
const input = page.getByRole('spinbutton')
const increaseBtn = page.locator('#preview .tiny-numeric__increase')
const decreaseBtn = page.locator('#preview .tiny-numeric__decrease')
const increaseBtn = page.locator('.tiny-numeric__increase')
const decreaseBtn = page.locator('.tiny-numeric__decrease')
const min = 0
const max = 10
const max = 5
await decreaseBtn.click()
const decreasedVal = Number(await input.inputValue())
expect(decreasedVal).toEqual(max)

2
examples/sites/demos/pc/app/numeric/mouse-wheel.spec.ts
View File

@ -9,5 +9,5 @@ test('鼠标滚轮事件', async ({ page }) => {
await numeric.click()
await page.mouse.wheel(0, -100)
const currentVal = Number(await numeric.inputValue())
expect(currentVal).toBeLessThan(initVal)
expect(currentVal).toBeGreaterThanOrEqual(initVal)
})

6
examples/sites/demos/pc/app/numeric/numeric-size.spec.ts
View File

@ -5,21 +5,21 @@ test('尺寸', async ({ page }) => {
await page.goto('numeric#numeric-size')
// large尺寸
const largeNumeric = page.locator('#preview .tiny-numeric').first()
const largeNumeric = page.locator('.tiny-numeric').first()
await expect(largeNumeric).toHaveClass(/tiny-numeric--medium/)
await largeNumeric.getByRole('spinbutton').fill('123')
await largeNumeric.locator('.tiny-numeric__decrease').click()
await largeNumeric.locator('.tiny-numeric__increase').click()
// small尺寸
const smallNumeric = page.locator('#preview .tiny-numeric').nth(1)
const smallNumeric = page.locator('.tiny-numeric').nth(1)
await expect(smallNumeric).toHaveClass(/tiny-numeric--small/)
await smallNumeric.getByRole('spinbutton').fill('111')
await smallNumeric.locator('.tiny-numeric__decrease').click()
await smallNumeric.locator('.tiny-numeric__increase').click()
// mini尺寸
const miniNumeric = page.locator('#preview .tiny-numeric').nth(2)
const miniNumeric = page.locator('.tiny-numeric').nth(2)
await expect(miniNumeric).toHaveClass(/tiny-numeric--mini/)
await miniNumeric.getByRole('spinbutton').fill('100')
await miniNumeric.locator('.tiny-numeric__decrease').click()

8
examples/sites/demos/pc/app/numeric/unit.spec.ts
View File

@ -2,9 +2,7 @@ import { test, expect } from '@playwright/test'
test('unit', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('numeric#calculate-according-to-num-of-goods')
const numeric = page.locator('#preview .tiny-numeric')
const unit = numeric.locator('.tiny-numeric__unit')
await expect(unit).toHaveText('斤')
await page.goto('numeric#unit')
const unit = page.locator('.tiny-numeric__unit')
await expect(unit).toHaveText('kg')
})