mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-05 12:48:04 +08:00
bbd16a08e9
* refactor(hooks): remove use-css-var * refactor(hooks): remove use-events * refactor(hooks): remove use-migrating * refactor(hooks): remove use-transition * refactor(hooks): named export useAttrs * refactor(hooks): named export useFocus * refactor(hooks): refactor useFormItem * refactor(hooks): refactor useGlobalConfig * refactor(hooks): refactor useLocale * refactor(hooks): refactor useLockscreen * refactor(hooks): refactor useModal * refactor(hooks): refactor useModelToggle * refactor(hooks): refactor usePreventGlobal * refactor(hooks): refactor useRestoreActive * refactor(hooks): refactor useTeleport * refactor(hooks): refactor useThrottleRender * refactor(hooks): refactor useTimeout * refactor(hooks): refactor useTransitionFallthrogh
97 lines
2.3 KiB
TypeScript
97 lines
2.3 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import { useAttrs } from '../use-attrs'
|
|
import type { ComponentOptions } from 'vue'
|
|
|
|
const CLASS = 'a'
|
|
const WIDTH = '50px'
|
|
const TEST_KEY = 'test'
|
|
const TEST_VALUE = 'fake'
|
|
const ANOTHER_TEST_VALUE = 'fake1'
|
|
|
|
const handleClick = jest.fn()
|
|
|
|
const genComp = (
|
|
inheritAttrs = true,
|
|
excludeListeners = false,
|
|
excludeKeys: string[] = []
|
|
) => {
|
|
return {
|
|
template: `
|
|
<div>
|
|
<span v-bind="attrs"></span>
|
|
</div>
|
|
`,
|
|
inheritAttrs,
|
|
props: {},
|
|
setup() {
|
|
const attrs = useAttrs({ excludeListeners, excludeKeys })
|
|
|
|
return {
|
|
attrs,
|
|
}
|
|
},
|
|
}
|
|
}
|
|
|
|
const _mount = (Comp: ComponentOptions) => {
|
|
return mount({
|
|
components: { Comp },
|
|
template: `
|
|
<comp
|
|
class="${CLASS}"
|
|
style="width: ${WIDTH}"
|
|
${TEST_KEY}="${TEST_VALUE}"
|
|
@click="handleClick"
|
|
/>`,
|
|
methods: {
|
|
handleClick,
|
|
},
|
|
})
|
|
}
|
|
|
|
afterEach(() => {
|
|
handleClick.mockClear()
|
|
})
|
|
|
|
describe('useAttrs', () => {
|
|
test('class and style should not bind to child node', async () => {
|
|
const wrapper = _mount(genComp())
|
|
const container = wrapper.element as HTMLDivElement
|
|
const span = wrapper.find('span')
|
|
|
|
expect(wrapper.classes(CLASS)).toBe(true)
|
|
expect(container.style.width).toBe(WIDTH)
|
|
expect(span.classes(CLASS)).toBe(false)
|
|
expect(span.element.style.width).toBe('')
|
|
expect(span.attributes(TEST_KEY)).toBe(TEST_VALUE)
|
|
|
|
await span.trigger('click')
|
|
|
|
expect(handleClick).toBeCalledTimes(2)
|
|
})
|
|
|
|
test("child node's attributes should update when prop change", async () => {
|
|
const wrapper = _mount(genComp())
|
|
const span = wrapper.find('span')
|
|
|
|
await wrapper.setProps({ [TEST_KEY]: ANOTHER_TEST_VALUE })
|
|
expect(span.attributes(TEST_KEY)).toBe(ANOTHER_TEST_VALUE)
|
|
})
|
|
|
|
test('excluded listeners should not bind to child node', async () => {
|
|
const wrapper = _mount(genComp(true, true))
|
|
const span = wrapper.find('span')
|
|
|
|
await span.trigger('click')
|
|
|
|
expect(handleClick).toBeCalledTimes(1)
|
|
})
|
|
|
|
test('excluded attributes should not bind to child node', async () => {
|
|
const wrapper = _mount(genComp(true, false, [TEST_KEY]))
|
|
const span = wrapper.find('span')
|
|
|
|
expect(span.attributes(TEST_KEY)).toBeUndefined()
|
|
})
|
|
})
|