From aebcd6688b51bc87a1053a8bb3208d2c881b9587 Mon Sep 17 00:00:00 2001 From: gimmyhehe <975402925@qq.com> Date: Sat, 25 Nov 2023 14:18:49 +0800 Subject: [PATCH] test(radio): [radio] update radio E2E test (#924) --- examples/sites/demos/pc/app/form/webdoc/form.js | 11 +++++++++++ .../demos/pc/app/radio/active-color.spec.ts | 13 ++++++++----- .../demos/pc/app/radio/basic-usage.spec.ts | 17 +++++++++++++++-- .../demos/pc/app/radio/default-slot.spec.ts | 8 +++++--- .../demos/pc/app/radio/dynamic-disable.spec.ts | 4 +++- .../demos/pc/app/radio/radio-events.spec.ts | 6 ++++-- .../demos/pc/app/radio/radio-group.spec.ts | 17 +++++++++++++++++ .../sites/demos/pc/app/radio/radio-size.spec.ts | 16 ++++++++++------ .../sites/demos/pc/app/radio/radio-text.spec.ts | 11 +++++++---- .../sites/demos/pc/app/radio/vertical.spec.ts | 6 ++++-- .../sites/demos/pc/app/radio/webdoc/radio.js | 2 +- 11 files changed, 85 insertions(+), 26 deletions(-) create mode 100644 examples/sites/demos/pc/app/radio/radio-group.spec.ts diff --git a/examples/sites/demos/pc/app/form/webdoc/form.js b/examples/sites/demos/pc/app/form/webdoc/form.js index a8a7b5304..ab8df3e80 100644 --- a/examples/sites/demos/pc/app/form/webdoc/form.js +++ b/examples/sites/demos/pc/app/form/webdoc/form.js @@ -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[] }', diff --git a/examples/sites/demos/pc/app/radio/active-color.spec.ts b/examples/sites/demos/pc/app/radio/active-color.spec.ts index 98d56cc7a..1c5cd168a 100644 --- a/examples/sites/demos/pc/app/radio/active-color.spec.ts +++ b/examples/sites/demos/pc/app/radio/active-color.spec.ts @@ -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') }) diff --git a/examples/sites/demos/pc/app/radio/basic-usage.spec.ts b/examples/sites/demos/pc/app/radio/basic-usage.spec.ts index e8afe9797..4ad1b2943 100644 --- a/examples/sites/demos/pc/app/radio/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/radio/basic-usage.spec.ts @@ -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)') }) diff --git a/examples/sites/demos/pc/app/radio/default-slot.spec.ts b/examples/sites/demos/pc/app/radio/default-slot.spec.ts index c1f80b07e..d77393c91 100644 --- a/examples/sites/demos/pc/app/radio/default-slot.spec.ts +++ b/examples/sites/demos/pc/app/radio/default-slot.spec.ts @@ -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() }) diff --git a/examples/sites/demos/pc/app/radio/dynamic-disable.spec.ts b/examples/sites/demos/pc/app/radio/dynamic-disable.spec.ts index 005e64f14..ed4be078e 100644 --- a/examples/sites/demos/pc/app/radio/dynamic-disable.spec.ts +++ b/examples/sites/demos/pc/app/radio/dynamic-disable.spec.ts @@ -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() diff --git a/examples/sites/demos/pc/app/radio/radio-events.spec.ts b/examples/sites/demos/pc/app/radio/radio-events.spec.ts index 937843e1c..4df6ffb5d 100644 --- a/examples/sites/demos/pc/app/radio/radio-events.spec.ts +++ b/examples/sites/demos/pc/app/radio/radio-events.spec.ts @@ -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() }) diff --git a/examples/sites/demos/pc/app/radio/radio-group.spec.ts b/examples/sites/demos/pc/app/radio/radio-group.spec.ts new file mode 100644 index 000000000..69f56f4f1 --- /dev/null +++ b/examples/sites/demos/pc/app/radio/radio-group.spec.ts @@ -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() +}) diff --git a/examples/sites/demos/pc/app/radio/radio-size.spec.ts b/examples/sites/demos/pc/app/radio/radio-size.spec.ts index 29ba32b91..02763d241 100644 --- a/examples/sites/demos/pc/app/radio/radio-size.spec.ts +++ b/examples/sites/demos/pc/app/radio/radio-size.spec.ts @@ -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') }) diff --git a/examples/sites/demos/pc/app/radio/radio-text.spec.ts b/examples/sites/demos/pc/app/radio/radio-text.spec.ts index 848ed07a4..65f81f266 100644 --- a/examples/sites/demos/pc/app/radio/radio-text.spec.ts +++ b/examples/sites/demos/pc/app/radio/radio-text.spec.ts @@ -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') }) diff --git a/examples/sites/demos/pc/app/radio/vertical.spec.ts b/examples/sites/demos/pc/app/radio/vertical.spec.ts index 464179ee7..5dcf257ad 100644 --- a/examples/sites/demos/pc/app/radio/vertical.spec.ts +++ b/examples/sites/demos/pc/app/radio/vertical.spec.ts @@ -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') }) diff --git a/examples/sites/demos/pc/app/radio/webdoc/radio.js b/examples/sites/demos/pc/app/radio/webdoc/radio.js index 6754a075a..4637ffa30 100644 --- a/examples/sites/demos/pc/app/radio/webdoc/radio.js +++ b/examples/sites/demos/pc/app/radio/webdoc/radio.js @@ -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': '

可对按钮形式的 radio 或带有边框的 radio 设置 size 属性，以改变其尺寸，可选值有： medium 、small 、mini 。

\n',