test(dropdown): Add UI test cases for dropdown components

tests/dropdown/basic.spec.ts

@@ -0,0 +1,61 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('dropdown 组件对齐xdesign规范', () => {
+  test('dropdown 默认显示-- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#basic-usage')
+    const demo = page.locator('#basic-usage .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('default.png')
+  })
+
+  test('dropdown 悬浮下拉-- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#basic-usage')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#basic-usage .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger .tiny-dropdown__suffix-inner')
+
+    await trigger.hover()
+    await page.waitForTimeout(200)
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('dropdown.png')
+  })
+
+  test('dropdown 悬浮菜单项-- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#basic-usage')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#basic-usage .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger .tiny-dropdown__suffix-inner')
+    const item = page.locator('.tiny-dropdown-menu .tiny-dropdown-item')
+
+    await trigger.hover()
+    await page.waitForTimeout(200)
+    await item.nth(0).hover()
+
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('item-hover.png')
+  })
+
+  test('dropdown 悬浮禁用菜单项-- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#basic-usage')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#basic-usage .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger .tiny-dropdown__suffix-inner')
+    const item = page.locator('.tiny-dropdown-menu .tiny-dropdown-item')
+
+    await trigger.hover()
+    await page.waitForTimeout(200)
+    await item.nth(4).hover()
+
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('item-disabled-hover.png')
+  })
+})

tests/dropdown/border.spec.ts

@@ -0,0 +1,13 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('dropdown 组件对齐xdesign规范', () => {
+  test('dropdown 显示边框圆角-- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#border')
+    const demo = page.locator('#border .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('border-default.png')
+  })
+})

tests/dropdown/check-status.spec.ts

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('dropdown 组件对齐xdesign规范', () => {
+  test('dropdown 选中状态 -- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#check-status')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#check-status .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger')
+    const item = page.locator('.tiny-dropdown-menu .tiny-dropdown-item')
+
+    await trigger.locator('.tiny-dropdown__suffix-inner').hover()
+    await page.waitForTimeout(300)
+    await item.nth(0).locator('.tiny-dropdown-item__content').click()
+    await page.waitForTimeout(300)
+    await trigger.locator('.tiny-dropdown__suffix-inner').hover()
+    await page.waitForTimeout(300)
+    await expect(wrap).toBeInViewport()
+
+    await expect(wrap).toHaveScreenshot('check-status.png')
+  })
+})

tests/dropdown/disabled.spec.ts

@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('dropdown 组件对齐xdesign规范', () => {
+  test('dropdown 禁用显示-- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#disabled')
+    const demo = page.locator('#disabled .pc-demo')
+
+    await expect(demo).toBeInViewport()
+    await expect(demo).toHaveScreenshot('disabled-default.png')
+  })
+
+  test('dropdown 悬浮禁用下拉菜单-- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#disabled')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#disabled .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger')
+
+    await trigger.nth(0).locator('.tiny-dropdown__suffix-inner').hover()
+    await page.waitForTimeout(200)
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('disabled-hover.png')
+  })
+
+  test('dropdown 悬浮禁用按钮类型下拉菜单-- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#disabled')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#disabled .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger')
+
+    await trigger.nth(1).hover()
+    await page.waitForTimeout(200)
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('button-disabled-hover.png')
+  })
+
+  test('dropdown 悬浮禁用菜单项-- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#disabled')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#disabled .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger')
+
+    await trigger.nth(2).locator('.tiny-dropdown__suffix-inner').hover()
+    await page.waitForTimeout(200)
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('item-disabled.png')
+  })
+})

tests/dropdown/events.spec.ts

@@ -0,0 +1,47 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('dropdown 组件对齐xdesign规范', () => {
+  test('dropdown 按钮类型事件 -- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#events')
+    const body = page.locator('body')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#events .pc-demo')
+    const dropdown = demo.locator('.tiny-dropdown')
+    const trigger = dropdown.nth(0).locator('.tiny-dropdown__trigger')
+    const item = page.locator('body > .tiny-dropdown-menu .tiny-dropdown-item')
+
+    await dropdown.nth(0).locator('.tiny-dropdown__title-button').click()
+    await page.waitForTimeout(100)
+    await trigger.hover()
+    await page.waitForTimeout(100)
+    await item.nth(0).click()
+    await page.waitForTimeout(100)
+    await dropdown.nth(0).locator('.tiny-dropdown__title-button').hover()
+    await page.waitForTimeout(100)
+
+    await expect(body).toBeInViewport()
+    await expect(body).toHaveScreenshot('button-events.png')
+  })
+
+  test('dropdown 默认类型事件 -- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#events')
+    const body = page.locator('body')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#events .pc-demo')
+    const dropdown = demo.locator('.tiny-dropdown')
+    const trigger = dropdown.nth(1).locator('.tiny-dropdown__trigger')
+    const item = page.locator('body > .tiny-dropdown-menu .tiny-dropdown-item')
+
+    await trigger.locator('.tiny-dropdown__suffix-inner').hover()
+    await page.waitForTimeout(100)
+    await item.nth(0).click()
+    await page.waitForTimeout(100)
+
+    await expect(body).toBeInViewport()
+    await expect(body).toHaveScreenshot('default-events.png')
+  })
+})

tests/dropdown/hide-on-click.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('dropdown 组件对齐xdesign规范', () => {
+  test('dropdown 显示箭头 -- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#hide-on-click')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#hide-on-click .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger')
+    const item = page.locator('.tiny-dropdown-menu .tiny-dropdown-item')
+
+    // 选中不收起弹框
+    await trigger.locator('.tiny-dropdown__suffix-inner').hover()
+    await page.waitForTimeout(300)
+    await item.nth(0).locator('.tiny-dropdown-item__content').click()
+    await page.waitForTimeout(300)
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('click-visible.png')
+  })
+})

tests/dropdown/inherit-width.spec.ts

@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('dropdown 组件对齐xdesign规范', () => {
+  test('dropdown 默认由内容撑开', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#inherit-width')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#inherit-width .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger')
+
+    await trigger.nth(0).hover()
+    await page.waitForTimeout(300)
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('default.png')
+  })
+
+  test('dropdown 继承宽度 -- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#inherit-width')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#inherit-width .pc-demo')
+    const trigger = demo.locator('.tiny-dropdown__trigger')
+
+    await trigger.nth(1).hover()
+    await page.waitForTimeout(300)
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('inherit-width.png')
+  })
+})

tests/dropdown/lazy-show-popper.spec.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('dropdown 组件对齐xdesign规范', () => {
+  test('dropdown 默认不懒加载 -- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#lazy-show-popper')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#lazy-show-popper .pc-demo')
+    const dropdown = demo.locator('.tiny-dropdown')
+    const trigger = dropdown.nth(0).locator('.tiny-dropdown__trigger')
+
+    await dropdown.nth(0).locator('.tiny-dropdown__suffix-inner').hover()
+    await page.waitForTimeout(100)
+
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('default.png')
+  })
+
+  test('dropdown 懒加载 -- UI截图', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+    await page.goto('dropdown#lazy-show-popper')
+    const wrap = page.locator('.docs-tabs-wrap')
+    const demo = page.locator('#lazy-show-popper .pc-demo')
+    const dropdown = demo.locator('.tiny-dropdown')
+    const trigger = dropdown.nth(1).locator('.tiny-dropdown__trigger')
+
+    await trigger.locator('.tiny-dropdown__suffix-inner').hover()
+    await page.waitForTimeout(100)
+
+    await expect(wrap).toBeInViewport()
+    await expect(wrap).toHaveScreenshot('lazy.png')
+  })
+})