opentiny
/
tiny-vue
0
0
Fork 31
Code Issues Pull Requests 8 Packages Projects Releases Wiki Activity

test(radio): [radio] update radio E2E test (#924)

This commit is contained in:
gimmyhehe 2023-11-25 14:18:49 +08:00 committed by GitHub
parent 91da195290
commit aebcd6688b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 85 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
examples/sites/demos/pc/app/form/webdoc/form.js
View File

@ -353,6 +353,17 @@ export default {
},
demoId: 'overflow-title'
},
{
name: 'popper-options',
type: 'Popover.IPopperOption',
typeAnchorName: 'popover#IPopperOption',
'defaultValue': '',
desc: {
'zh-CN': '校验错误提示配置，透传至 Popover 组件',
'en-US': 'Verify error prompt configuration and transparently transmit it to Popover component'
},
demoId: 'popper-options'
},
{
name: 'rules',
type: '{ [prop: string]: IFormRules | IFormRules[] }',

13
examples/sites/demos/pc/app/radio/active-color.spec.ts
View File

@ -1,10 +1,13 @@
import { test, expect } from '@playwright/test'
test('颜色设置', async ({ page }) => {
test('自定义颜色', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#active-color')
const radio = page.locator('.is-active > .tiny-radio-button__inner')
await expect(radio).toHaveCSS('background-color', 'rgb(142, 240, 227)')
await expect(radio).toHaveCSS('border-color', 'rgb(142, 240, 227)')
await expect(radio).toHaveCSS('box-shadow', 'rgb(142, 240, 227) -1px 0px 0px 0px')
const demo = page.locator('#active-color')
const radio = demo.locator('.is-active > .tiny-radio-button__inner')
await expect(radio).toHaveCSS('background-color', 'rgb(250, 152, 65)')
await expect(radio).toHaveCSS('border-color', 'rgb(250, 152, 65)')
await expect(radio).toHaveCSS('box-shadow', 'rgb(250, 152, 65) -1px 0px 0px 0px')
})

17
examples/sites/demos/pc/app/radio/basic-usage.spec.ts
View File

@ -3,9 +3,22 @@ import { test, expect } from '@playwright/test'
test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#basic-usage')
const radio1 = page.locator('.tiny-radio').nth(0)
const radio2 = page.locator('.tiny-radio').nth(1)
const demo = page.locator('#basic-usage')
const radio1 = demo.locator('.tiny-radio').nth(0)
const radio2 = demo.locator('.tiny-radio').nth(1)
await expect(radio1).toBeVisible()
await expect(radio2).toBeVisible()
await expect(radio1).toHaveClass('tiny-radio is-checked')
const afterElement = await page.evaluate(() => {
const radioAfter = document.querySelector('.tiny-radio.is-checked .tiny-radio__inner')
if (radioAfter) {
const { backgroundColor } = window.getComputedStyle(radioAfter, '::after')
return { backgroundColor }
}
return {}
})
expect(afterElement.backgroundColor).toBe('rgb(94, 124, 224)')
})

8
examples/sites/demos/pc/app/radio/default-slot.spec.ts
View File

@ -2,9 +2,11 @@ import { test, expect } from '@playwright/test'
test('默认插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#radio-default')
const radio1 = page.getByRole('radio', { name: '选项内容一选项描述' })
const radio2 = page.getByRole('radio', { name: '选项内容二选项描述' })
await page.goto('radio#default-slot')
const demo = page.locator('#default-slot')
const radio1 = demo.getByRole('radio', { name: '内容一：选项描述' })
const radio2 = demo.getByRole('radio', { name: '内容二：选项描述' })
await expect(radio1).toBeVisible()
await expect(radio2).toBeVisible()
})

4
examples/sites/demos/pc/app/radio/dynamic-disable.spec.ts
View File

@ -3,7 +3,9 @@ import { test, expect } from '@playwright/test'
test('禁用状态', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#dynamic-disable')
const row = page.locator('.is-disabled')
const demo = page.locator('#dynamic-disable')
const row = demo.locator('.is-disabled')
await expect(row.nth(0)).toHaveClass('tiny-radio is-disabled is-checked')
await expect(row.nth(1)).toBeDisabled()

6
examples/sites/demos/pc/app/radio/radio-events.spec.ts
View File

@ -3,11 +3,13 @@ import { test, expect } from '@playwright/test'
test('单选框事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#radio-events')
await page.getByRole('radio', { name: '选项二' }).click()
const demo = page.locator('#radio-events')
await demo.getByRole('radio', { name: '选项二' }).click()
const radio1 = page.locator('div').filter({ hasText: 'change 事件，选中的 Radio label 值为：2' }).nth(1)
await expect(radio1).toBeVisible()
await page.getByRole('radio', { name: '月度' }).first().click()
await demo.getByRole('radio', { name: '月度' }).first().click()
const radio2 = page.locator('div').filter({ hasText: 'change 事件，选中的 Radio label 值为：2' }).nth(1)
await expect(radio2).toBeVisible()
})

17
examples/sites/demos/pc/app/radio/radio-group.spec.ts Normal file
View File

@ -0,0 +1,17 @@
import { test, expect } from '@playwright/test'
test('单选框组', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#radio-group')
const demo = page.locator('#radio-group')
const radioGroup = demo.locator('.tiny-radio-group')
await expect(radioGroup).toHaveCount(2)
await expect(radioGroup.first().getByText('备选项1')).toBeVisible()
await expect(radioGroup.first().getByText('备选项2')).toBeVisible()
await expect(radioGroup.first().getByText('备选项3')).toBeVisible()
await expect(radioGroup.nth(1).getByText('备选项1')).toBeVisible()
await expect(radioGroup.nth(1).getByText('备选项2')).toBeVisible()
await expect(radioGroup.nth(1).getByText('备选项3')).toBeVisible()
})

16
examples/sites/demos/pc/app/radio/radio-size.spec.ts
View File

@ -3,10 +3,14 @@ import { test, expect } from '@playwright/test'
test('尺寸设置', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#radio-size')
const radio1 = page.locator('.tiny-radio-button--medium')
const radio2 = page.locator('.tiny-radio-button--small')
const radio3 = page.locator('.tiny-radio-button--mini ')
await expect(radio1.nth(0)).toBeVisible()
await expect(radio2.nth(0)).toBeVisible()
await expect(radio3.nth(0)).toBeVisible()
const demo = page.locator('#radio-size')
const radioGroup = demo.locator('.tiny-radio-group')
await expect(radioGroup.first()).toHaveCSS('width', '167px')
await expect(radioGroup.first()).toHaveCSS('height', '36px')
await expect(radioGroup.nth(1)).toHaveCSS('width', '135px')
await expect(radioGroup.nth(1)).toHaveCSS('height', '32px')
await expect(radioGroup.nth(2)).toHaveCSS('width', '135px')
await expect(radioGroup.nth(2)).toHaveCSS('height', '28px')
})

11
examples/sites/demos/pc/app/radio/radio-text.spec.ts
View File

@ -3,8 +3,11 @@ import { test, expect } from '@playwright/test'
test('文字内容', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#radio-text')
const radio1 = page.getByText('选项一')
const radio2 = page.getByText('选项二')
await expect(radio1).toBeVisible()
await expect(radio2).toBeVisible()
const demo = page.locator('#radio-text')
const radioItem = demo.locator('.tiny-radio')
await expect(radioItem.first()).toHaveText('选项一')
await expect(radioItem.nth(1)).toHaveText('选项二')
await expect(radioItem.nth(2)).toHaveText('3')
})

6
examples/sites/demos/pc/app/radio/vertical.spec.ts
View File

@ -4,6 +4,8 @@ test('垂直布局', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('radio#vertical')
const radioGroup = page.locator('.list-inline')
await expect(radioGroup).toBeVisible()
await expect(radioGroup).toHaveCSS('flex-direction', 'column')
await expect(radioGroup.first()).toBeVisible()
await expect(radioGroup.first()).toHaveCSS('flex-direction', 'column')
await expect(radioGroup.nth(1)).toBeVisible()
await expect(radioGroup.nth(1)).toHaveCSS('flex-direction', 'column')
})

2
examples/sites/demos/pc/app/radio/webdoc/radio.js
View File

@ -86,7 +86,7 @@ export default {
},
{
'demoId': 'radio-size',
'name': { 'zh-CN': '尺寸设置', 'en-US': 'Size Settings' },
'name': { 'zh-CN': '尺寸', 'en-US': 'Size Settings' },
'desc': {
'zh-CN':
'<p>可对按钮形式的 <code>radio</code> 或带有边框的 <code>radio</code> 设置 <code>size</code> 属性，以改变其尺寸，可选值有： <code>medium</code> 、<code>small</code> 、<code>mini</code> 。</p>\n',