2020-07-29 21:25:29 +08:00
|
|
|
import { mount } from '@vue/test-utils'
|
|
|
|
import Card from '../src/index.vue'
|
|
|
|
|
|
|
|
const AXIOM = 'Rem is the best girl'
|
|
|
|
|
|
|
|
describe('Card.vue', () => {
|
|
|
|
test('render test', () => {
|
|
|
|
const wrapper = mount(Card, {
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
expect(wrapper.text()).toEqual(AXIOM)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('string header', () => {
|
|
|
|
const header = 'I am header'
|
|
|
|
const wrapper = mount(Card, {
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
header,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
expect(wrapper.text()).toContain(header)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('vnode header', () => {
|
|
|
|
const headerCls = 'header-text'
|
|
|
|
const btnCls = 'test-btn'
|
|
|
|
const wrapper = mount(Card, {
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
header: `<div>
|
|
|
|
<span class="${headerCls}">card header</span>
|
|
|
|
<button class="${btnCls}">click me</button>
|
|
|
|
</div>`,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
expect(wrapper.find('.header-text').exists()).toBe(true)
|
|
|
|
expect(wrapper.find('.test-btn').exists()).toBe(true)
|
|
|
|
})
|
|
|
|
|
|
|
|
test('body style', () => {
|
|
|
|
const style = 'font-size: 14px;'
|
|
|
|
const wrapper = mount(Card, {
|
|
|
|
props: {
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
},
|
|
|
|
bodyStyle: style,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
expect(wrapper.find('.el-card__body').attributes('style')).toBe(style)
|
|
|
|
})
|
|
|
|
|
2020-12-01 19:57:36 +08:00
|
|
|
test('body style with object', () => {
|
|
|
|
const style = { 'font-size': '14px' }
|
|
|
|
const wrapper = mount(Card, {
|
|
|
|
props: {
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
},
|
|
|
|
bodyStyle: style,
|
|
|
|
},
|
|
|
|
})
|
2021-09-04 19:29:28 +08:00
|
|
|
expect(wrapper.find('.el-card__body').attributes('style')).toBe(
|
|
|
|
'font-size: 14px;'
|
|
|
|
)
|
2020-12-01 19:57:36 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
test('body style with array', () => {
|
|
|
|
const style = [{ 'font-size': '14px' }, { color: 'blue' }]
|
|
|
|
const wrapper = mount(Card, {
|
|
|
|
props: {
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
},
|
|
|
|
bodyStyle: style,
|
|
|
|
},
|
|
|
|
})
|
2021-09-04 19:29:28 +08:00
|
|
|
expect(
|
|
|
|
wrapper.find('.el-card__body').attributes('style').replace(/[ ]/g, '')
|
|
|
|
).toBe('font-size:14px;color:blue;')
|
2020-12-01 19:57:36 +08:00
|
|
|
})
|
|
|
|
|
2020-07-29 21:25:29 +08:00
|
|
|
test('shadow', () => {
|
|
|
|
const shadow = 'test-shadow'
|
|
|
|
const wrapper = mount(Card, {
|
|
|
|
props: {
|
|
|
|
slots: {
|
|
|
|
default: AXIOM,
|
|
|
|
},
|
|
|
|
shadow,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(wrapper.find(`.is-${shadow}-shadow`).exists()).toBe(true)
|
|
|
|
})
|
|
|
|
})
|