feat(tag-group): [tag-group] updata ttag-group e2e

opentiny · Sep 14, 2024 · 985244d · 985244d
1 parent 088ab18
commit 985244d
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 62 deletions.
diff --git a/examples/sites/demos/pc/app/tag-group/basic-usage.spec.js b/examples/sites/demos/pc/app/tag-group/basic-usage.spec.js
@@ -6,24 +6,23 @@ test('TagGroup 基础用法', async ({ page }) => {
 
   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 tag1 = tagGroup.getByText('标签').nth(0)
+  await expect(tag1).toHaveCSS('background-color', 'rgb(230, 242, 255)')
+  await expect(tag1).toHaveCSS('color', 'rgb(20, 118, 255)')
 
-  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 tag2 = tagGroup.getByText('标签').nth(1)
+  await expect(tag2).toHaveCSS('background-color', 'rgb(228, 247, 233)')
+  await expect(tag2).toHaveCSS('color', 'rgb(2, 153, 49)')
 
-  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 tag3 = tagGroup.getByText('标签').nth(2)
+  await expect(tag3).toHaveCSS('background-color', 'rgb(255, 240, 224)')
+  await expect(tag3).toHaveCSS('color', 'rgb(217, 105, 0)')
 
-  const tag5 = tagGroup.getByText('标签五')
-  await expect(tag5).toHaveCSS('background-color', 'rgb(255, 238, 237)')
-  await expect(tag5).toHaveCSS('color', 'rgb(222, 80, 78)')
+  const tag4 = tagGroup.getByText('标签').nth(3)
+  await expect(tag4).toHaveCSS('background-color', 'rgb(255, 234, 232)')
+  await expect(tag4).toHaveCSS('color', 'rgb(242, 48, 48)')
 
+  const tag5 = tagGroup.getByText('标签').nth(4)
+  await expect(tag5).toHaveCSS('background-color', 'rgb(245, 245, 245)')
+  await expect(tag5).toHaveCSS('color', 'rgb(25, 25, 25)')
 })
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js b/examples/sites/demos/pc/app/tag-group/tag-group-effect.spec.js
@@ -6,66 +6,63 @@ test('TagGroup 主题', async ({ page }) => {
 
   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)')
+  const darkTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(0)
+  await expect(darkTag1).toHaveCSS('background-color', 'rgb(20, 118, 255)')
   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)')
+  const darkTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(1)
+  await expect(darkTag2).toHaveCSS('background-color', 'rgb(92, 179, 0)')
   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)')
+  const darkTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(2)
+  await expect(darkTag3).toHaveCSS('background-color', 'rgb(255, 136, 0)')
   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)')
+  const darkTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(3)
+  await expect(darkTag4).toHaveCSS('background-color', 'rgb(242, 48, 48)')
   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)')
+  const darkTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--dark').getByText('标签').nth(4)
+  await expect(darkTag5).toHaveCSS('background-color', 'rgb(25, 25, 25)')
   await expect(darkTag5).toHaveCSS('color', 'rgb(255, 255, 255)')
 
+  const lightTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--light').getByText('标签').nth(0)
+  await expect(lightTag1).toHaveCSS('background-color', 'rgb(230, 242, 255)')
+  await expect(lightTag1).toHaveCSS('color', 'rgb(20, 118, 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').getByText('标签').nth(1)
+  await expect(lightTag2).toHaveCSS('background-color', 'rgb(228, 247, 233)')
+  await expect(lightTag2).toHaveCSS('color', 'rgb(2, 153, 49)')
 
-  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').getByText('标签').nth(2)
+  await expect(lightTag3).toHaveCSS('background-color', 'rgb(255, 240, 224)')
+  await expect(lightTag3).toHaveCSS('color', 'rgb(217, 105, 0)')
 
-  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').getByText('标签').nth(3)
+  await expect(lightTag4).toHaveCSS('background-color', 'rgb(255, 234, 232)')
+  await expect(lightTag4).toHaveCSS('color', 'rgb(242, 48, 48)')
 
-  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').getByText('标签').nth(4)
+  await expect(lightTag5).toHaveCSS('background-color', 'rgb(245, 245, 245)')
+  await expect(lightTag5).toHaveCSS('color', 'rgb(25, 25, 25)')
 
-  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: '标签一' })
+  const plainTag1 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(0)
   await expect(plainTag1).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag1).toHaveCSS('color', 'rgb(94, 124, 224)')
+  await expect(plainTag1).toHaveCSS('color', 'rgb(20, 118, 255)')
 
-  const plainTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签二' })
+  const plainTag2 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(1)
   await expect(plainTag2).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag2).toHaveCSS('color', 'rgb(37, 43, 58)')
+  await expect(plainTag2).toHaveCSS('color', 'rgb(2, 153, 49)')
 
-  const plainTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签三' })
+  const plainTag3 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(2)
   await expect(plainTag3).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag3).toHaveCSS('color', 'rgb(80, 212, 171)')
+  await expect(plainTag3).toHaveCSS('color', 'rgb(217, 105, 0)')
 
-  const plainTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签四' })
+  const plainTag4 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(3)
   await expect(plainTag4).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag4).toHaveCSS('color', 'rgb(250, 152, 65)')
+  await expect(plainTag4).toHaveCSS('color', 'rgb(242, 48, 48)')
 
-  const plainTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').filter({ hasText: '标签五' })
+  const plainTag5 = tagGroupsLocator.locator('.tiny-tag.tiny-tag--plain').getByText('标签').nth(4)
   await expect(plainTag5).toHaveCSS('background-color', 'rgb(255, 255, 255)')
-  await expect(plainTag5).toHaveCSS('color', 'rgb(246, 111, 106)')
-
+  await expect(plainTag5).toHaveCSS('color', 'rgb(25, 25, 25)')
 })
diff --git a/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js b/examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js
@@ -5,16 +5,14 @@ test('TagGroup 尺寸', async ({ page }) => {
   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')
-
+  await expect(mediumTag).toHaveCSS('height', '32px')
+  await expect(mediumTag).toHaveCSS('line-height', '32px')
 
   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')
+  await expect(smallTag).toHaveCSS('height', '24px')
+  await expect(smallTag).toHaveCSS('line-height', '24px')
 
   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')
-
+  await expect(miniTag).toHaveCSS('height', '18px')
+  await expect(miniTag).toHaveCSS('line-height', '18px')
 })