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

test(site/pc/app): [rate, tag-group, input] e2e test case completion (#913) 

* test(site/pc/app): [rate, tag-group, input] e2e test case completion

* test(site/pc/app): [rate, tag-group, input] e2e test case completion 2

* test(site/pc/app): [rate, tag-group, input] e2e test case completion 3
This commit is contained in:
yoyo 2023-11-24 17:01:07 +08:00 committed by GitHub
parent ba803fa5b3
commit b53895dce0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 143 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/sites/demos/pc/app/input/event.spec.ts
View File

@ -8,8 +8,8 @@ test('[Input]event: input, change', async ({ page }) => {
// input event
await input.fill('2')
const dialogModelInputEvent = await page.locator('.tiny-modal')
await expect(dialogModelInputEvent).toContainText('input')
const dialogModelInputEvent = await page.locator('.tiny-modal', { hasText: 'input' })
await expect(dialogModelInputEvent).toBeVisible()
// change event
await input.blur()

4
examples/sites/demos/pc/app/rate/allow-half.spec.js
View File

@ -5,13 +5,11 @@ test.describe('Rate 允许半选', () => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('rate#allow-half')
// 判断rate组件是否出现
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div')).toBeVisible()
// 点击icon前一半允许半选
const icon = page.locator('.tiny-rate__star > .tiny-svg')
const rate = await page.locator('.tiny-rate > span:nth-child(1)').boundingBox()
await page.mouse.click(rate.x + rate.width / 2, rate.y + rate.height / 2)
await page.waitForTimeout(200)
await expect(icon.nth(0)).toHaveClass(/ratehalf/)
})
})

9
examples/sites/demos/pc/app/rate/basic-usage.spec.js
View File

@ -1,13 +1,6 @@
import { test, expect } from '@playwright/test'
test.describe('Rate 基本用法', () => {
test('rate 组件出现', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('rate#allow-half')
// 判断rate组件是否出现
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div')).toBeVisible()
})
test('鼠标hover时，icon高亮', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
@ -41,7 +34,7 @@ test.describe('Rate 基本用法', () => {
await page.goto('rate#basic-usage')
const icon = page.locator('.tiny-rate__star > .tiny-svg')
const text = page.locator('//*[@id="preview"]/div[2]/div[2]/div/span[6]')
const text = page.locator('.tiny-rate .tiny-rate__text')
await icon.nth(0).click()
await expect(text).toHaveText('很差')

2
examples/sites/demos/pc/app/rate/custom-3-threshold-colors.spec.js
View File

@ -8,6 +8,7 @@ test.describe('rate 自定义 3 分段颜色', () => {
// hover时三分段颜色
const icon = page.locator('.tiny-rate__star > .tiny-svg')
await icon.nth(0).hover()
await page.waitForTimeout(200)
await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
await icon.nth(1).hover()
await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(250, 219, 20)')
@ -20,6 +21,7 @@ test.describe('rate 自定义 3 分段颜色', () => {
// 选中时时三分段颜色
await icon.nth(0).click()
await page.waitForTimeout(200)
await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
await icon.nth(1).click()
await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(250, 219, 20)')

6
examples/sites/demos/pc/app/rate/not-selected-color.spec.js
View File

@ -1,7 +1,7 @@
import { test, expect } from '@playwright/test'
test.describe('Rate 自定义未选中图标类名', () => {
test('自定义未选中图标', async ({ page }) => {
test.describe('Rate 自 定义未选中图标颜色', () => {
test(' 定义未选中图标颜色', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('rate#not-selected-color')
@ -10,7 +10,7 @@ test.describe('Rate 自定义未选中图标类名', () => {
await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 0, 0)')
await icon.nth(4).hover()
await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 187, 51)')
await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 0, 0)')
await icon.nth(4).click()
await expect(icon.nth(4)).toHaveCSS('fill', 'rgb(255, 187, 51)')

2
examples/sites/demos/pc/app/rate/rate-events.spec.js
View File

@ -6,7 +6,7 @@ test.describe('rate change事件', () => {
await page.goto('rate#rate-events')
const icon = page.locator('.tiny-rate__star > .tiny-svg')
const modal = page.locator('.tiny-modal__box')
const modal = page.locator('.tiny-modal__box .tiny-modal__text').filter({ hasText: '选中的值是5' })
await icon.nth(4).click()
await expect(modal).toBeVisible()

2
examples/sites/demos/pc/app/rate/threshold-value.spec.js
View File

@ -8,6 +8,7 @@ test.describe('rate 自定义三分段界限值', () => {
// hover时三分段颜色
const icon = page.locator('.tiny-rate__star > .tiny-svg')
await icon.nth(0).hover()
await page.waitForTimeout(200)
await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
await icon.nth(1).hover()
await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(255, 122, 69)')
@ -20,6 +21,7 @@ test.describe('rate 自定义三分段界限值', () => {
// 选中时时三分段颜色
await icon.nth(0).click()
await page.waitForTimeout(200)
await expect(icon.nth(0)).toHaveCSS('fill', 'rgb(250, 219, 20)')
await icon.nth(1).click()
await expect(icon.nth(1)).toHaveCSS('fill', 'rgb(255, 122, 69)')

29
examples/sites/demos/pc/app/tag-group/basic-usage.spec.js Normal file
View File

@ -0,0 +1,29 @@
import { test, expect } from '@playwright/test'
test('TagGroup 基础用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tag-group#basic-usage')
const tagGroup = page.locator('.tiny-tag-group')
const tag1 = tagGroup.getByText('标签一')
await expect(tag1).toHaveCSS('background-color', 'rgb(238, 240, 245)')
await expect(tag1).toHaveCSS('color', 'rgb(87, 93, 108)')
const tag2 = tagGroup.getByText('标签二')
await expect(tag2).toHaveCSS('background-color', 'rgba(51, 51, 51, 0.06)')
await expect(tag2).toHaveCSS('color', 'rgb(37, 43, 58)')
const tag3 = tagGroup.getByText('标签三')
await expect(tag3).toHaveCSS('background-color', 'rgb(237, 255, 249)')
await expect(tag3).toHaveCSS('color', 'rgb(58, 194, 149)')
const tag4 = tagGroup.getByText('标签四')
await expect(tag4).toHaveCSS('background-color', 'rgb(255, 243, 232)')
await expect(tag4).toHaveCSS('color', 'rgb(227, 125, 41)')
const tag5 = tagGroup.getByText('标签五')
await expect(tag5).toHaveCSS('background-color', 'rgb(255, 238, 237)')
await expect(tag5).toHaveCSS('color', 'rgb(222, 80, 78)')
})

71
examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js Normal file
View File

@ -0,0 +1,71 @@
import { test, expect } from '@playwright/test'
test('TagGroup 主题', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tag-group#tag-group-effect')
const tagGroupsLocator = page.locator('.tiny-demo-tag-group-effect .tiny-tag-group')
const darkTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签一' })
await expect(darkTag1).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(darkTag1).toHaveCSS('color', 'rgb(255, 255, 255)')
const darkTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签二' })
await expect(darkTag2).toHaveCSS('background-color', 'rgb(37, 43, 58)')
await expect(darkTag2).toHaveCSS('color', 'rgb(255, 255, 255)')
const darkTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签三' })
await expect(darkTag3).toHaveCSS('background-color', 'rgb(80, 212, 171)')
await expect(darkTag3).toHaveCSS('color', 'rgb(255, 255, 255)')
const darkTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签四' })
await expect(darkTag4).toHaveCSS('background-color', 'rgb(250, 152, 65)')
await expect(darkTag4).toHaveCSS('color', 'rgb(255, 255, 255)')
const darkTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').filter({ hasText: '标签五' })
await expect(darkTag5).toHaveCSS('background-color', 'rgb(246, 111, 106)')
await expect(darkTag5).toHaveCSS('color', 'rgb(255, 255, 255)')
const lightTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签一' })
await expect(lightTag1).toHaveCSS('background-color', 'rgb(238, 240, 245)')
await expect(lightTag1).toHaveCSS('color', 'rgb(87, 93, 108)')
const lightTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签二' })
await expect(lightTag2).toHaveCSS('background-color', 'rgba(51, 51, 51, 0.06)')
await expect(lightTag2).toHaveCSS('color', 'rgb(37, 43, 58)')
const lightTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签三' })
await expect(lightTag3).toHaveCSS('background-color', 'rgb(237, 255, 249)')
await expect(lightTag3).toHaveCSS('color', 'rgb(58, 194, 149)')
const lightTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签四' })
await expect(lightTag4).toHaveCSS('background-color', 'rgb(255, 243, 232)')
await expect(lightTag4).toHaveCSS('color', 'rgb(227, 125, 41)')
const lightTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').filter({ hasText: '标签五' })
await expect(lightTag5).toHaveCSS('background-color', 'rgb(255, 238, 237)')
await expect(lightTag5).toHaveCSS('color', 'rgb(222, 80, 78)')
const plainTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签一' })
await expect(plainTag1).toHaveCSS('background-color', 'rgb(255, 255, 255)')
await expect(plainTag1).toHaveCSS('color', 'rgb(94, 124, 224)')
const plainTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签二' })
await expect(plainTag2).toHaveCSS('background-color', 'rgb(255, 255, 255)')
await expect(plainTag2).toHaveCSS('color', 'rgb(37, 43, 58)')
const plainTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签三' })
await expect(plainTag3).toHaveCSS('background-color', 'rgb(255, 255, 255)')
await expect(plainTag3).toHaveCSS('color', 'rgb(80, 212, 171)')
const plainTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签四' })
await expect(plainTag4).toHaveCSS('background-color', 'rgb(255, 255, 255)')
await expect(plainTag4).toHaveCSS('color', 'rgb(250, 152, 65)')
const plainTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签五' })
await expect(plainTag5).toHaveCSS('background-color', 'rgb(255, 255, 255)')
await expect(plainTag5).toHaveCSS('color', 'rgb(246, 111, 106)')
})

11
examples/sites/demos/pc/app/tag-group/tag-group-event.spec.js Normal file
View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('TagGroup 事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tag-group#tag-group-event')
const tag3 = page.locator('.tiny-tag ').filter({ hasText: '标签三' })
await tag3.click()
await expect(page.locator('.tiny-modal__box').filter({ hasText: '当前点击的是第3个标签' })).toBeVisible()
})

20
examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js Normal file
View File

@ -0,0 +1,20 @@
import { test, expect } from '@playwright/test'
test('TagGroup 尺寸', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('tag-group#tag-group-size')
const mediumTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--medium').nth(0)
await expect(mediumTag).toHaveCSS('height', '24px')
await expect(mediumTag).toHaveCSS('line-height', '24px')
const smallTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--small').nth(0)
await expect(smallTag).toHaveCSS('height', '20px')
await expect(smallTag).toHaveCSS('line-height', '20px')
const miniTag = page.locator('.tiny-demo-tag-group-size .tiny-tag-group .tiny-tag.tiny-tag--mini').nth(0)
await expect(miniTag).toHaveCSS('height', '16px')
await expect(miniTag).toHaveCSS('line-height', '16px')
})