element-plus/packages/container/__tests__/container.spec.ts

124 lines
2.8 KiB
TypeScript
Raw Normal View History

import { mount } from '@vue/test-utils'
2020-08-05 16:36:08 +08:00
import Container from '../src/container.vue'
2020-08-05 19:06:05 +08:00
import Header from '../src/header.vue'
import Main from '../src/main.vue'
import Aside from '../src/aside.vue'
import Footer from '../src/footer.vue'
const AXIOM = 'Rem is the best girl'
describe('Container.vue', () => {
2020-08-05 22:58:49 +08:00
test('container render test', () => {
const wrapper = mount(Container, {
slots: {
default: AXIOM,
},
})
expect(wrapper.text()).toEqual(AXIOM)
})
2020-08-05 22:58:49 +08:00
test('vertical', () => {
const TestComponent = {
template: `
<el-container>
<el-header></el-header>
<el-main></el-main>
</el-container>`,
components: {
'el-container': Container,
'el-header': Header,
'el-main': Main,
},
}
const wrapper = mount(TestComponent)
expect(wrapper.vm.$el.classList.contains('is-vertical')).toBe(true)
})
test('direction', () => {
const TestComponent = {
template: `
<el-container :direction="direction">
<el-header></el-header>
<el-main></el-main>
</el-container>`,
components: {
'el-container': Container,
'el-header': Header,
'el-main': Main,
},
data() {
return {
direction: 'horizontal'
};
}
}
const wrapper = mount(TestComponent)
expect(wrapper.vm.$el.classList.contains('is-vertical')).toBe(false)
wrapper.vm.direction = 'vertical'
wrapper.vm.$nextTick(() => {
expect(wrapper.vm.$el.classList.contains('is-vertical')).toBe(true)
})
})
})
2020-08-05 19:06:05 +08:00
describe('Header', () => {
2020-08-05 22:58:49 +08:00
test('create header', () => {
2020-08-05 19:06:05 +08:00
const wrapper = mount(Header)
expect(wrapper.classes()).toContain('el-header')
})
2020-08-05 22:58:49 +08:00
test('header height', () => {
const wrapper = mount(Header, {
props: {
height: '100px',
},
})
const vm = wrapper.vm
expect(vm.$el.style.height).toEqual('100px')
});
2020-08-05 19:06:05 +08:00
})
describe('Aside', () => {
2020-08-05 22:58:49 +08:00
test('aside create', () => {
2020-08-05 19:06:05 +08:00
const wrapper = mount(Aside)
expect(wrapper.classes()).toContain('el-aside')
})
2020-08-05 22:58:49 +08:00
test('aside width', () => {
const wrapper = mount(Aside, {
props: {
width: '200px',
},
})
const vm = wrapper.vm
expect(vm.$el.style.width).toEqual('200px')
});
})
describe('Main', () => {
test('main create', () => {
const wrapper = mount(Main)
expect(wrapper.classes()).toContain('el-main')
})
2020-08-05 19:06:05 +08:00
})
describe('Footer', () => {
2020-08-05 22:58:49 +08:00
test('footer create', () => {
2020-08-05 19:06:05 +08:00
const wrapper = mount(Footer)
expect(wrapper.classes()).toContain('el-footer')
})
2020-08-05 22:58:49 +08:00
test('footer height', () => {
const wrapper = mount(Footer, {
props: {
height: '100px',
},
})
const vm = wrapper.vm
expect(vm.$el.style.height).toEqual('100px')
});
2020-08-05 19:06:05 +08:00
})