2022-06-23 22:51:10 +08:00
|
|
|
import { nextTick } from 'vue'
|
2021-08-24 13:36:48 +08:00
|
|
|
import { mount } from '@vue/test-utils'
|
2022-06-23 22:51:10 +08:00
|
|
|
import { describe, expect, it, vi } from 'vitest'
|
2021-10-06 19:34:32 +08:00
|
|
|
import Space from '../src/space'
|
2020-12-18 10:30:26 +08:00
|
|
|
|
|
|
|
const AXIOM = 'Rem is the best girl'
|
|
|
|
|
|
|
|
describe('Space.vue', () => {
|
2022-06-23 22:51:10 +08:00
|
|
|
it('render test', async () => {
|
|
|
|
const wrapper = mount(<Space>{AXIOM}</Space>)
|
|
|
|
|
2020-12-18 10:30:26 +08:00
|
|
|
expect(wrapper.text()).toEqual(AXIOM)
|
|
|
|
|
|
|
|
await wrapper.setProps({
|
|
|
|
direction: 'vertical',
|
|
|
|
wrap: true,
|
|
|
|
})
|
|
|
|
|
|
|
|
expect(wrapper.find('.el-space--vertical').exists()).toBe(true)
|
2021-09-04 19:29:28 +08:00
|
|
|
expect(wrapper.find('.el-space').attributes('style')).toContain(
|
|
|
|
'flex-wrap: wrap'
|
|
|
|
)
|
2020-12-18 10:30:26 +08:00
|
|
|
})
|
|
|
|
|
2022-06-23 22:51:10 +08:00
|
|
|
it('sizes', async () => {
|
2022-04-19 12:46:57 +08:00
|
|
|
const warnHandler = vi.fn()
|
2022-06-23 22:51:10 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
<Space size="large">
|
|
|
|
{Array.from({ length: 2 }).map((_, idx) => {
|
|
|
|
return `test${idx}`
|
|
|
|
})}
|
|
|
|
</Space>,
|
|
|
|
{
|
|
|
|
global: {
|
|
|
|
config: {
|
|
|
|
warnHandler,
|
|
|
|
},
|
2020-12-18 10:30:26 +08:00
|
|
|
},
|
2022-06-23 22:51:10 +08:00
|
|
|
}
|
|
|
|
)
|
2020-12-18 10:30:26 +08:00
|
|
|
|
|
|
|
await nextTick()
|
2021-09-04 19:29:28 +08:00
|
|
|
expect(wrapper.find('.el-space__item').attributes('style')).toContain(
|
|
|
|
'margin-right: 16px'
|
|
|
|
)
|
2020-12-18 10:30:26 +08:00
|
|
|
|
|
|
|
await wrapper.setProps({
|
|
|
|
size: 30,
|
|
|
|
})
|
|
|
|
|
|
|
|
await nextTick()
|
2021-09-04 19:29:28 +08:00
|
|
|
expect(wrapper.find('.el-space__item').attributes('style')).toContain(
|
|
|
|
'margin-right: 30px'
|
|
|
|
)
|
2020-12-18 10:30:26 +08:00
|
|
|
|
|
|
|
await wrapper.setProps({
|
|
|
|
size: [10, 20],
|
|
|
|
})
|
|
|
|
|
2021-09-04 19:29:28 +08:00
|
|
|
expect(wrapper.find('.el-space__item').attributes('style')).toContain(
|
|
|
|
'margin-right: 10px'
|
|
|
|
)
|
|
|
|
expect(wrapper.find('.el-space__item').attributes('style')).toContain(
|
|
|
|
'padding-bottom: 20px'
|
|
|
|
)
|
2020-12-18 10:30:26 +08:00
|
|
|
await wrapper.setProps({
|
|
|
|
size: 'unknown',
|
|
|
|
})
|
|
|
|
|
2021-10-15 18:24:49 +08:00
|
|
|
expect(warnHandler).toHaveBeenCalled()
|
2020-12-18 10:30:26 +08:00
|
|
|
|
2021-09-04 19:29:28 +08:00
|
|
|
expect(wrapper.find('.el-space__item').attributes('style')).toContain(
|
|
|
|
'margin-right: 8px'
|
|
|
|
)
|
2020-12-18 10:30:26 +08:00
|
|
|
})
|
|
|
|
|
2022-06-23 22:51:10 +08:00
|
|
|
it('should render with spacer', async () => {
|
2020-12-18 10:30:26 +08:00
|
|
|
const stringSpacer = '|'
|
2022-06-23 22:51:10 +08:00
|
|
|
const wrapper = mount(
|
|
|
|
<Space size="large" spacer={stringSpacer}>
|
|
|
|
{Array.from({ length: 2 }).map((_, idx) => {
|
|
|
|
return `test${idx}`
|
|
|
|
})}
|
|
|
|
</Space>
|
|
|
|
)
|
2020-12-18 10:30:26 +08:00
|
|
|
|
|
|
|
await nextTick()
|
|
|
|
expect(wrapper.element.children).toHaveLength(3)
|
|
|
|
|
|
|
|
expect(wrapper.text()).toContain(stringSpacer)
|
|
|
|
|
|
|
|
// 2 elements expecting only 1 spacer
|
|
|
|
expect(wrapper.text().split(stringSpacer)).toHaveLength(2)
|
|
|
|
const testSpacerCls = 'test-spacer-cls'
|
|
|
|
|
|
|
|
// vnode type spacer
|
|
|
|
await wrapper.setProps({
|
2022-06-23 22:51:10 +08:00
|
|
|
spacer: <div class={testSpacerCls} />,
|
2020-12-18 10:30:26 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
expect(wrapper.findAll(`.${testSpacerCls}`)).toHaveLength(1)
|
|
|
|
expect(wrapper.element.children).toHaveLength(3)
|
|
|
|
})
|
|
|
|
|
2022-06-23 22:51:10 +08:00
|
|
|
it('fill', async () => {
|
|
|
|
const wrapper = mount(
|
|
|
|
<Space fill>
|
|
|
|
{Array.from({ length: 2 }).map((_, idx) => {
|
|
|
|
return `test${idx}`
|
|
|
|
})}
|
|
|
|
</Space>
|
|
|
|
)
|
2021-07-30 11:39:07 +08:00
|
|
|
|
|
|
|
await nextTick()
|
|
|
|
expect(wrapper.find('.el-space').attributes('style')).toContain(
|
2021-09-04 19:29:28 +08:00
|
|
|
'flex-wrap: wrap'
|
2021-07-30 11:39:07 +08:00
|
|
|
)
|
|
|
|
expect(wrapper.find('.el-space__item').attributes('style')).toContain(
|
2021-09-04 19:29:28 +08:00
|
|
|
'flex-grow: 1'
|
2021-07-30 11:39:07 +08:00
|
|
|
)
|
|
|
|
expect(wrapper.find('.el-space__item').attributes('style')).toContain(
|
2021-09-04 19:29:28 +08:00
|
|
|
'min-width: 100%'
|
2021-07-30 11:39:07 +08:00
|
|
|
)
|
|
|
|
|
|
|
|
// custom fill ratio
|
|
|
|
await wrapper.setProps({
|
|
|
|
fillRatio: 50,
|
|
|
|
})
|
|
|
|
|
|
|
|
await nextTick()
|
|
|
|
expect(wrapper.find('.el-space__item').attributes('style')).toContain(
|
2021-09-04 19:29:28 +08:00
|
|
|
'min-width: 50%'
|
2021-07-30 11:39:07 +08:00
|
|
|
)
|
|
|
|
})
|
2020-12-18 10:30:26 +08:00
|
|
|
})
|