Files
comp-squirrel 4466ec1979 feat(components): [link] add control for when underlines should appear (#20480)
* feat(components): [link] add `always-underline` option

* docs(components): [link] update version tag

* style(components): [link] remove redundant styles

* feat(components): [link] control underline visibility timing

* chore(components): [link] add `useDeprecated` function

* chore(components): [link] remove TODO comments
2025-04-21 21:29:07 +08:00

82 lines
2.6 KiB
TypeScript

import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import Link from '../src/link.vue'
const AXIOM = 'Rem is the best girl'
describe('Link.vue', () => {
it('render test', () => {
const wrapper = mount(() => <Link>{AXIOM}</Link>)
expect(wrapper.text()).toEqual(AXIOM)
})
it('it should handle click event when link is not disabled', async () => {
const wrapper = mount(() => <Link>{AXIOM}</Link>)
await wrapper.trigger('click')
expect(wrapper.emitted('click')).toHaveLength(1)
})
it('it should disable click when link is disabled', async () => {
const wrapper = mount(() => <Link disabled>{AXIOM}</Link>)
expect(wrapper.classes()).toContain('is-disabled')
expect(wrapper.attributes('href')).toBeUndefined()
})
it('icon slots', () => {
const linkName = 'test link'
const wrapper = mount(() => (
<Link
v-slots={{
default: () => linkName,
icon: () => AXIOM,
}}
/>
))
expect(wrapper.text()).toContain(linkName)
expect(wrapper.text()).toContain(AXIOM)
})
describe('underline prop', () => {
// will be removed in 3.0.0.
it('it should show underline on hover when true', async () => {
const wrapper = mount(() => <Link underline>{AXIOM}</Link>)
expect(wrapper.classes()).not.toContain('is-underline')
expect(wrapper.classes()).toContain('is-hover-underline')
})
// will be removed in 3.0.0.
it('it should not show any underline when false', async () => {
const wrapper = mount(() => <Link underline={false}>{AXIOM}</Link>)
expect(wrapper.classes()).not.toContain('is-underline')
expect(wrapper.classes()).not.toContain('is-hover-underline')
})
it('it should always show underline when set to "always"', async () => {
const wrapper = mount(() => <Link underline="always">{AXIOM}</Link>)
expect(wrapper.classes()).toContain('is-underline')
expect(wrapper.classes()).not.toContain('is-hover-underline')
})
it('it should show underline on hover when set to "hover"', async () => {
const wrapper = mount(() => <Link underline="hover">{AXIOM}</Link>)
expect(wrapper.classes()).not.toContain('is-underline')
expect(wrapper.classes()).toContain('is-hover-underline')
})
it('should never show underline when set to "never"', async () => {
const wrapper = mount(() => <Link underline="never">{AXIOM}</Link>)
expect(wrapper.classes()).not.toContain('is-underline')
expect(wrapper.classes()).not.toContain('is-hover-underline')
})
})
})