forked from opentiny/tiny-vue
31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test('基本用法', async ({ page }) => {
|
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
|
await page.goto('tabs#basic-usage')
|
|
|
|
const tabs = page.locator('.tiny-tabs')
|
|
const tabItems = tabs.getByRole('tab')
|
|
const item1 = tabItems.nth(0)
|
|
const item2 = tabItems.nth(1)
|
|
const content = tabs.getByRole('tabpanel')
|
|
const activeBar = tabs.locator('.tiny-tabs__active-bar')
|
|
|
|
await expect(tabItems).toHaveCount(4)
|
|
await expect(tabItems).toHaveClass([/is-top/, /is-top is-active/, /is-top/, /is-top/])
|
|
await expect(content).toHaveText(/数据组件/)
|
|
await expect(activeBar).toHaveCSS('width', '56px')
|
|
await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 96, 0)')
|
|
await item1.click()
|
|
await expect(item1).toHaveClass(/is-active/)
|
|
await expect(activeBar).toHaveCSS('width', '56px')
|
|
await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
|
await expect(item1).toHaveCSS('color', 'rgb(94, 124, 224)')
|
|
await expect(content).toHaveText(/表单组件/)
|
|
|
|
// 禁用
|
|
await item2.click()
|
|
await expect(item1).toHaveClass(/is-active/)
|
|
await expect(content).toHaveText(/表单组件/)
|
|
})
|