test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(components): [container] use JSX in Unit test (#8778)

Browse Source
This commit is contained in:
gjfei 2022-07-12 19:26:58 +08:00 committed by GitHub
parent b64aa94f5e
commit 23b131770e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
packages/components/container/__tests__/container.test.ts → packages/components/container/__tests__/container.test.tsx
View File

@ -11,52 +11,34 @@ import Footer from '../src/footer.vue'
const AXIOM = 'Rem is the best girl'
describe('Container.vue', () => {
test('container render test', () => {
const wrapper = mount(Container, {
slots: {
default: AXIOM,
},
})
test('container render test', async () => {
const wrapper = mount(() => <Container>{AXIOM}</Container>)
expect(wrapper.text()).toEqual(AXIOM)
})
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)
const wrapper = mount(() => (
<Container>
<Header />
<Main />
</Container>
))
expect(wrapper.classes('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,
const wrapper = mount({
data: () => ({ direction: 'horizontal' }),
render() {
return (
<Container direction={this.direction}>
<Header />
<Main />
</Container>
)
},
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(() => {
@ -67,16 +49,12 @@ describe('Container.vue', () => {
describe('Header', () => {
test('create header', () => {
const wrapper = mount(Header)
const wrapper = mount(() => <Header />)
expect(wrapper.classes()).toContain('el-header')
})
test('header height', () => {
const wrapper = mount(Header, {
props: {
height: '100px',
},
})
const wrapper = mount(() => <Header height="100px" />)
const vm = wrapper.vm
expect(getCssVariable(vm.$el, '--el-header-height')).toEqual('100px')
})
@ -84,17 +62,12 @@ describe('Header', () => {
describe('Aside', () => {
test('aside create', () => {
const wrapper = mount(Aside)
const wrapper = mount(() => <Aside />)
expect(wrapper.classes()).toContain('el-aside')
})
test('aside width', () => {
const wrapper = mount(Aside, {
props: {
width: '200px',
},
})
const wrapper = mount(() => <Aside width="200px" />)
const vm = wrapper.vm
expect(getCssVariable(vm.$el, '--el-aside-width')).toEqual('200px')
})
@ -102,23 +75,19 @@ describe('Aside', () => {
describe('Main', () => {
test('main create', () => {
const wrapper = mount(Main)
const wrapper = mount(() => <Main />)
expect(wrapper.classes()).toContain('el-main')
})
})
describe('Footer', () => {
test('footer create', () => {
const wrapper = mount(Footer)
const wrapper = mount(() => <Footer />)
expect(wrapper.classes()).toContain('el-footer')
})
test('footer height', () => {
const wrapper = mount(Footer, {
props: {
height: '100px',
},
})
const wrapper = mount(() => <Footer height="100px" />)
const vm = wrapper.vm
expect(getCssVariable(vm.$el, '--el-footer-height')).toEqual('100px')
})