docs(link): [link] e2e and docs optimize (#1023)
This commit is contained in:
gimmyhehe
GitHub
parent
6ae405b20d
commit
dc9ba745e3
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-link :underline="false">默认链接</tiny-link>
|
||||
<tiny-link>默认链接</tiny-link>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
|
|||
test('基础用法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('link#basic-usage')
|
||||
const preview = page.locator('#preview')
|
||||
const preview = page.locator('#basic-usage')
|
||||
const anchor = preview.locator('a')
|
||||
await anchor.hover()
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(82, 110, 204)')
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-link :underline="false">默认链接</tiny-link>
|
||||
<tiny-link>默认链接</tiny-link>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
|
|||
test('链接地址', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('link#config-href')
|
||||
const preview = page.locator('#preview')
|
||||
const anchor = preview.getByRole('link', { name: '默认链接' })
|
||||
const demo = page.locator('#config-href')
|
||||
const anchor = demo.getByRole('link', { name: '默认链接' })
|
||||
await expect(anchor).toHaveAttribute('target', '_blank')
|
||||
await expect(anchor).toHaveAttribute('href', /\S+/)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ import { test, expect } from '@playwright/test'
|
|||
test('自定义图标', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('link#custom-icon')
|
||||
const preview = page.locator('#preview')
|
||||
const edit = preview.locator('a').filter({ hasText: '编辑' })
|
||||
const demo = page.locator('#custom-icon')
|
||||
const edit = demo.locator('a').filter({ hasText: '编辑' })
|
||||
await expect(edit.locator('svg')).toHaveCount(1)
|
||||
const disabled = preview.locator('a').filter({ hasText: '禁用' })
|
||||
const disabled = demo.locator('a').filter({ hasText: '禁用' })
|
||||
await expect(disabled.locator('svg')).toHaveCount(1)
|
||||
const view = preview.locator('a').filter({ hasText: '查看' })
|
||||
const view = demo.locator('a').filter({ hasText: '查看' })
|
||||
await expect(view.locator('svg')).toHaveCount(1)
|
||||
const del = preview.locator('a').filter({ hasText: '删除' })
|
||||
const del = demo.locator('a').filter({ hasText: '删除' })
|
||||
await expect(del.locator('svg')).toHaveCount(1)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,28 +3,28 @@ import { test, expect } from '@playwright/test'
|
|||
test('禁用', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('link#dynamic-disable')
|
||||
const preview = page.locator('#preview')
|
||||
let anchor = preview.locator('a').filter({ hasText: '默认链接' })
|
||||
const demo = page.locator('#dynamic-disable')
|
||||
let anchor = demo.locator('a').filter({ hasText: '默认链接' })
|
||||
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
|
||||
await anchor.hover()
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
|
||||
anchor = preview.locator('a').filter({ hasText: '主要链接' })
|
||||
anchor = demo.locator('a').filter({ hasText: '主要链接' })
|
||||
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
|
||||
await anchor.hover()
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
|
||||
anchor = preview.locator('a').filter({ hasText: '成功链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(160, 207, 255)')
|
||||
anchor = demo.locator('a').filter({ hasText: '成功链接' })
|
||||
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
|
||||
await anchor.hover()
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
|
||||
anchor = preview.locator('a').filter({ hasText: '警告链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(166, 195, 185)')
|
||||
anchor = demo.locator('a').filter({ hasText: '警告链接' })
|
||||
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
|
||||
await anchor.hover()
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
|
||||
anchor = preview.locator('a').filter({ hasText: '危险链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(211, 198, 162)')
|
||||
anchor = demo.locator('a').filter({ hasText: '危险链接' })
|
||||
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
|
||||
await anchor.hover()
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
|
||||
anchor = preview.locator('a').filter({ hasText: '信息链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(216, 186, 181)')
|
||||
anchor = demo.locator('a').filter({ hasText: '信息链接' })
|
||||
await expect(anchor).toHaveCSS('cursor', 'not-allowed')
|
||||
await anchor.hover()
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
|
|||
test('聚焦时有无下划线', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('link#focus-no-underline')
|
||||
const preview = page.locator('#preview')
|
||||
let anchor = preview.locator('a').filter({ hasText: '无下划线' })
|
||||
const demo = page.locator('#focus-no-underline')
|
||||
let anchor = demo.locator('a').filter({ hasText: '无下划线' })
|
||||
await anchor.hover()
|
||||
await expect(anchor).toHaveCSS('text-decoration', /none/)
|
||||
// 无法获取到伪元素::after，暂时跳过测试
|
||||
anchor = preview.locator('a').filter({ hasText: '有下划线' })
|
||||
anchor = demo.locator('a').filter({ hasText: '有下划线' })
|
||||
await anchor.hover()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-link :underline="false"> 默认链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="primary"> 主要链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="success"> 成功链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="warning"> 警告链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="danger"> 危险链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="info"> 信息链接 </tiny-link>
|
||||
<tiny-link> 默认链接 </tiny-link>
|
||||
<tiny-link type="primary"> 主要链接 </tiny-link>
|
||||
<tiny-link type="success"> 成功链接 </tiny-link>
|
||||
<tiny-link type="warning"> 警告链接 </tiny-link>
|
||||
<tiny-link type="danger"> 危险链接 </tiny-link>
|
||||
<tiny-link type="info"> 信息链接 </tiny-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,23 +3,52 @@ import { test, expect } from '@playwright/test'
|
|||
test('主题样式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('link#link-style')
|
||||
const preview = page.locator('#preview')
|
||||
let anchor = preview.locator('a').filter({ hasText: '默认链接' })
|
||||
|
||||
const demo = page.locator('#link-style')
|
||||
let getAfter = async (index: number) =>
|
||||
await page.evaluate((index: number) => {
|
||||
const link = document.querySelector(`#link-style .tiny-link:nth-child(${index})`)
|
||||
if (link) {
|
||||
const { borderBottomColor } = window.getComputedStyle(link, '::after')
|
||||
return borderBottomColor
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}, index)
|
||||
|
||||
let anchor = demo.locator('a').filter({ hasText: '默认链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(37, 43, 58)')
|
||||
await anchor.hover()
|
||||
await expect(await getAfter(1)).toBe('rgb(94, 124, 224)')
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(82, 110, 204)')
|
||||
anchor = preview.locator('a').filter({ hasText: '主要链接' })
|
||||
|
||||
anchor = demo.locator('a').filter({ hasText: '主要链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(94, 124, 224)')
|
||||
await anchor.hover()
|
||||
await expect(await getAfter(2)).toBe('rgb(94, 124, 224)')
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(118, 147, 245)')
|
||||
anchor = preview.locator('a').filter({ hasText: '成功链接' })
|
||||
|
||||
anchor = demo.locator('a').filter({ hasText: '成功链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(80, 212, 171)')
|
||||
await anchor.hover()
|
||||
await expect(await getAfter(3)).toBe('rgb(80, 212, 171)')
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(172, 242, 220)')
|
||||
anchor = preview.locator('a').filter({ hasText: '警告链接' })
|
||||
|
||||
anchor = demo.locator('a').filter({ hasText: '警告链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(250, 152, 65)')
|
||||
await anchor.hover()
|
||||
await expect(await getAfter(4)).toBe('rgb(250, 152, 65)')
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(250, 194, 10)')
|
||||
anchor = preview.locator('a').filter({ hasText: '危险链接' })
|
||||
|
||||
anchor = demo.locator('a').filter({ hasText: '危险链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(199, 0, 11)')
|
||||
await anchor.hover()
|
||||
await expect(await getAfter(5)).toBe('rgb(199, 0, 11)')
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(214, 74, 82)')
|
||||
anchor = preview.locator('a').filter({ hasText: '信息链接' })
|
||||
|
||||
anchor = demo.locator('a').filter({ hasText: '信息链接' })
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(37, 43, 58)')
|
||||
await anchor.hover()
|
||||
await expect(await getAfter(6)).toBe('rgb(37, 43, 58)')
|
||||
await expect(anchor).toHaveCSS('color', 'rgb(92, 97, 115)')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-link :underline="false"> 默认链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="primary"> 主要链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="success"> 成功链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="warning"> 警告链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="danger"> 危险链接 </tiny-link>
|
||||
<tiny-link :underline="false" type="info"> 信息链接 </tiny-link>
|
||||
<tiny-link> 默认链接 </tiny-link>
|
||||
<tiny-link type="primary"> 主要链接 </tiny-link>
|
||||
<tiny-link type="success"> 成功链接 </tiny-link>
|
||||
<tiny-link type="warning"> 警告链接 </tiny-link>
|
||||
<tiny-link type="danger"> 危险链接 </tiny-link>
|
||||
<tiny-link type="info"> 信息链接 </tiny-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ export default {
|
|||
'demoId': 'link-style',
|
||||
'name': { 'zh-CN': '主题样式', 'en-US': 'Theme Style' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>type</code> 属性设置链接的主题类型。</p>\n',
|
||||
'en-US': '<p>Set the topic type of the link through the <code>type</code> attribute. </p>\n'
|
||||
'zh-CN': '<p>通过 <code>type</code> 设置链接的主题类型。</p>',
|
||||
'en-US': '<p>Set the topic type of the link through the <code>type</code> attribute. </p>'
|
||||
},
|
||||
'codeFiles': ['link-style.vue']
|
||||
},
|
||||
|
|
@ -21,8 +21,8 @@ export default {
|
|||
'demoId': 'dynamic-disable',
|
||||
'name': { 'zh-CN': '禁用链接', 'en-US': 'Disable links' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过 <code>disabled</code> 属性可以指定是否禁用链接。</p>\n',
|
||||
'en-US': '<p>You can use the <code>disabled</code> attribute to specify whether to disable links. </p>\n'
|
||||
'zh-CN': '<p>通过 <code>disabled</code> 设置是否禁用链接。</p>',
|
||||
'en-US': '<p>You can use the <code>disabled</code> attribute to specify whether to disable links. </p>'
|
||||
},
|
||||
'codeFiles': ['dynamic-disable.vue']
|
||||
},
|
||||
|
|
@ -30,10 +30,9 @@ export default {
|
|||
'demoId': 'focus-no-underline',
|
||||
'name': { 'zh-CN': '聚焦时不显示下划线', 'en-US': 'Do not display underscores when focusing.' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>鼠标悬停在链接上时，默认会显示下划线，设置 <code>underline</code> 为 false 后聚焦时不显示下划线。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>underline</code> 设置鼠标悬浮是否显示下划线。</p>',
|
||||
'en-US':
|
||||
'<p>When you hover the cursor over a link, the underline is displayed by default. If <code>underline</code> is set to false, the underline is not displayed when you focus. </p>\n'
|
||||
'<p>When you hover the cursor over a link, the underline is displayed by default. If <code>underline</code> is set to false, the underline is not displayed when you focus. </p>'
|
||||
},
|
||||
'codeFiles': ['focus-no-underline.vue']
|
||||
},
|
||||
|
|
@ -41,9 +40,9 @@ export default {
|
|||
'demoId': 'custom-icon',
|
||||
'name': { 'zh-CN': '自定义图标', 'en-US': 'Custom Icon' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>通过属性 <code>icon</code>、默认插槽、<code>icon</code> 插槽都可以自定义图标。</p>\n',
|
||||
'zh-CN': '<p>通过属性 <code>icon</code>、默认插槽、<code>icon</code> 插槽都可以自定义图标。</p>',
|
||||
'en-US':
|
||||
'<p>Icon can be customized by attribute <code>icon</code>, default slot, and <code>icon</code> slot. </p>\n'
|
||||
'<p>Icon can be customized by attribute <code>icon</code>, default slot, and <code>icon</code> slot. </p>'
|
||||
},
|
||||
'codeFiles': ['custom-icon.vue']
|
||||
},
|
||||
|
|
@ -51,10 +50,9 @@ export default {
|
|||
'demoId': 'config-href',
|
||||
'name': { 'zh-CN': '链接地址', 'en-US': 'Link' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过属性 <code>href</code> 指定链接需要跳转的地址，可配合原生属性 <code>target</code> 一起使用。</p>\n',
|
||||
'zh-CN': '<p>通过 <code>href</code> 设置跳转连接，可配合原生属性 <code>target</code> 一起使用。</p>',
|
||||
'en-US':
|
||||
'<p>Use the <code>href</code> attribute to specify the URL to be redirected to. This attribute can be used together with the native attribute <code>target</code>. </p>\n'
|
||||
'<p>Use the <code>href</code> attribute to specify the URL to be redirected to. This attribute can be used together with the native attribute <code>target</code>. </p>'
|
||||
},
|
||||
'codeFiles': ['config-href.vue']
|
||||
}
|
||||
|
|
@ -66,26 +64,26 @@ export default {
|
|||
'properties': [
|
||||
{
|
||||
'name': 'type',
|
||||
'type': 'string',
|
||||
'defaultValue': '该属性的默认值为 default',
|
||||
'type': "'primary' | 'success' | 'warning' | 'danger' | 'info'",
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '该属性的可选值为 primary / success / warning / danger / info',
|
||||
'en-US': 'This attribute can be set to primary / success / warning / danger / info'
|
||||
'zh-CN': '文本链接类型',
|
||||
'en-US': 'Text link type'
|
||||
},
|
||||
'demoId': 'link-style'
|
||||
},
|
||||
{
|
||||
'name': 'underline',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 true',
|
||||
'desc': { 'zh-CN': '是否下划线', 'en-US': 'Underline' },
|
||||
'defaultValue': 'true',
|
||||
'desc': { 'zh-CN': '是否下划线', 'en-US': 'Whether has Underline' },
|
||||
'demoId': 'focus-no-underline'
|
||||
},
|
||||
{
|
||||
'name': 'disabled',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '该属性的默认值为 false',
|
||||
'desc': { 'zh-CN': '是否禁用状态', 'en-US': 'Disabled' },
|
||||
'defaultValue': 'false',
|
||||
'desc': { 'zh-CN': '是否禁用状态', 'en-US': 'Is disabled' },
|
||||
'demoId': 'dynamic-disable'
|
||||
},
|
||||
{
|
||||
|
|
@ -97,9 +95,9 @@ export default {
|
|||
},
|
||||
{
|
||||
'name': 'icon',
|
||||
'type': 'object , string',
|
||||
'type': 'VueComponent',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '图标类名', 'en-US': 'Icon class name' },
|
||||
'desc': { 'zh-CN': '图标组件', 'en-US': 'Icon component' },
|
||||
'demoId': 'custom-icon'
|
||||
}
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue