javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(components): [layout] use JSX in Unit test (#8020)

Browse Source
This commit is contained in:
류한경
2022-06-01 14:08:19 +09:00
committed by GitHub
parent 40fb6b8303
commit 19aa8ca424
1 changed files with 27 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/components/col/__tests__/layout.test.tsx
View File

@@ -1,4 +1,4 @@
import { defineComponent, nextTick, ref } from 'vue'
import { nextTick, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, it, test } from 'vitest'
import Row from '@element-plus/components/row'
@@ -6,41 +6,36 @@ import Col from '../src/col.vue'
describe('Col', () => {
it('create', () => {
const wrapper = mount(Col)
const wrapper = mount(() => <Col />)
expect(wrapper.classes()).toContain('el-col')
})
it('span', () => {
const wrapper = mount(Col, {
props: { span: 12 },
})
const wrapper = mount(() => <Col span={12} />)
expect(wrapper.classes()).toContain('el-col-12')
})
it('pull', () => {
const wrapper = mount(Col, {
props: { span: 12, pull: 3 },
})
const wrapper = mount(() => <Col span={12} pull={3} />)
expect(wrapper.classes()).toContain('el-col-pull-3')
})
it('push', () => {
const wrapper = mount(Col, {
props: { span: 12, push: 3 },
})
const wrapper = mount(() => <Col span={12} push={3} />)
expect(wrapper.classes()).toContain('el-col-push-3')
})
it('gutter', () => {
const TestComponent = defineComponent({
setup: () => () =>
(
const wrapper = mount({
setup() {
return () => (
<Row gutter={20}>
<Col span={12} ref="col"></Col>
</Row>
),
)
},
})
const wrapper = mount(TestComponent)
const colElm = wrapper.findComponent({ ref: 'col' }).element as HTMLElement
expect(colElm.style.paddingLeft === '10px').toBe(true)
expect(colElm.style.paddingRight === '10px').toBe(true)
@@ -48,16 +43,17 @@ describe('Col', () => {
it('change gutter value', async () => {
const outer = ref(20)
const App = defineComponent({
setup: () => () =>
(
const wrapper = mount({
setup() {
return () => (
<Row gutter={outer.value} ref="row">
<Col span={12} ref="col" />
</Row>
),
)
},
})
const wrapper = mount(App)
const rowElm = wrapper.findComponent({ ref: 'row' }).element as HTMLElement
const colElm = wrapper.findComponent({ ref: 'col' }).element as HTMLElement
expect(rowElm.style.marginLeft === '-10px').toBe(true)
@@ -74,9 +70,9 @@ describe('Col', () => {
})
it('responsive', () => {
const TestComponent = defineComponent({
setup: () => () =>
(
const wrapper = mount({
setup() {
return () => (
<Row gutter={20}>
<Col
ref="col"
@@ -85,9 +81,10 @@ describe('Col', () => {
lg={{ span: 6, offset: 3 }}
/>
</Row>
),
)
},
})
const wrapper = mount(TestComponent)
const colElmClass = wrapper.findComponent({ ref: 'col' }).classes()
expect(colElmClass.includes('el-col-sm-4')).toBe(true)
expect(colElmClass.includes('el-col-sm-4')).toBe(true)
@@ -100,28 +97,22 @@ describe('Col', () => {
describe('Row', () => {
test('create', () => {
const wrapper = mount(Row)
const wrapper = mount(() => <Row />)
expect(wrapper.classes()).toContain('el-row')
})
test('gutter', () => {
const wrapper = mount(Row, {
props: { gutter: 20 },
})
const wrapper = mount(() => <Row gutter={20} />)
const rowElm = wrapper.element as HTMLElement
expect(rowElm.style.marginLeft).toEqual('-10px')
expect(rowElm.style.marginRight).toEqual('-10px')
})
test('justify', () => {
const wrapper = mount(Row, {
props: { justify: 'end' },
})
const wrapper = mount(() => <Row justify="end" />)
expect(wrapper.classes()).toContain('is-justify-end')
})
test('align', () => {
const wrapper = mount(Row, {
props: { align: 'bottom' },
})
const wrapper = mount(() => <Row align="bottom" />)
expect(wrapper.classes()).toContain('is-align-bottom')
})
})