element-plus/packages/hooks/__tests__/use-form-item.spec.ts
云游君 4560adfdf8
refactor(style): adjust component size to large/default/small (#4491)
* refactor(style): adjust component size to large/default/small

* refactor(components): avatar size & use flex instead of block

* refactor(components): adjust check button size

* refactor(components): adjust tag size

* refactor(components): adjust size doc

* fix(components): datetime-picker demo style width

* refactor(components): color-picker size & block to flex

* refactor(components): adjust slider input size

* refactor(components): adjust radio input size for demo

* refactor(components): adjust select size & docs

* refactor(components): adjust form radio size & docs

* refactor(components): add windicss for docs

* refactor(components): adjust skeleton avatar size to css var

* refactor(components): simplify typography size demo

* refactor(components): adjust dropdown size & demo

* refactor(components): adjust descriptions size

* fix(components): datetime-picker showcase class pollute global button

* chore(ci): upgrade docs dependencies to fix ci

* fix(ci): add highlight because vitepress not export it

* fix(ci): disable line for no-console

* fix(ci): remove mini to fix test

* fix(style): code font size

* fix(style): button span flex style

* fix(style): button padding horizontal default 15px

* refactor(components): adjust tag padding size & demo

* refactor(components): adjust form line-height for input

* refactor(components): adjust dropdown menu size & button padding

* fix(style): picker separator block to flex center

* fix: dropdown button span items-center

* style: adjust input-with-icon & size demo & fix input vitepress load

* chore: upgrade dependencies

* chore: upgrade dependencies

* ci: fix website build

* ci: regenerate pnpm-lock.yaml

* ci: use dev pnpm-lock

* ci: update pnpm-lock.yaml
2021-12-12 17:54:21 +08:00

117 lines
2.6 KiB
TypeScript

import { h, provide } from 'vue'
import { NOOP } from '@vue/shared'
import { mount } from '@vue/test-utils'
import { ElButton } from '@element-plus/components'
import {
elFormKey,
elFormItemKey,
buttonGroupContextKey,
} from '@element-plus/tokens'
import type {
ElFormContext,
ElFormItemContext,
ButtonGroupContext,
} from '@element-plus/tokens'
const AXIOM = 'Rem is the best girl'
const Component = {
render() {
return h(ElButton, this.$attrs, {
default: () => [AXIOM],
})
},
}
const mountComponent = (setup = NOOP, options = {}) => {
return mount(
{
...Component,
setup,
},
options
)
}
const getButtonVm = (wrapper: ReturnType<typeof mountComponent>) => {
return wrapper.findComponent(ElButton).vm as any as {
buttonSize: string
buttonDisabled: boolean
}
}
describe('use-form-item', () => {
it('should return local value', () => {
const wrapper = mountComponent()
expect(getButtonVm(wrapper).buttonSize).toBe('')
})
it('should return props.size instead of injected.size', () => {
const propSize = 'small'
const wrapper = mountComponent(
() => {
provide(elFormItemKey, {
size: 'large',
} as ElFormItemContext)
},
{
props: {
size: propSize,
},
}
)
expect(getButtonVm(wrapper).buttonSize).toBe(propSize)
})
it('should return fallback.size instead inject.size', () => {
const fallbackSize = 'small'
const wrapper = mountComponent(() => {
provide(buttonGroupContextKey, {
size: fallbackSize,
} as ButtonGroupContext)
provide(elFormItemKey, {
size: 'large',
} as ElFormItemContext)
})
expect(getButtonVm(wrapper).buttonSize).toBe(fallbackSize)
})
it('should return formItem.size instead form.size', () => {
const itemSize = 'small'
const wrapper = mountComponent(() => {
provide(elFormItemKey, {
size: itemSize,
} as ElFormItemContext)
provide(elFormKey, {
size: 'large',
} as ElFormContext)
})
expect(getButtonVm(wrapper).buttonSize).toBe(itemSize)
})
// update this once useGlobalConfig is fixed
// it('should return global config when none is provided', () => {
// const size = 'mini'
// const wrapper = mountComponent(undefined, {
// global: {
// globalProperties: {
// $ELEMENT: {
// size,
// },
// },
// },
// })
// console.log(wrapper.vm.$data)
// expect(getButtonVm(wrapper).buttonSize).toBe(size)
// })
// Add test case for config provider
})