test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-03 11:47:48 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(directives): [trap-focus] use JSX in Unit test (#8819)

Browse Source
This commit is contained in:
zz 2022-07-17 19:34:15 +08:00 committed by GitHub
parent 2287dc3690
commit 098c439ce8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
packages/directives/__tests__/trap-focus.test.ts → packages/directives/__tests__/trap-focus.test.tsx
View File

@ -1,28 +1,24 @@
// @ts-nocheck import { defineComponent, nextTick } from 'vue'
import { nextTick } from 'vue'
import { mount } from '@vue/test-utils' import { mount } from '@vue/test-utils'
import { afterAll, afterEach, describe, expect, test, vi } from 'vitest' import { afterAll, afterEach, describe, expect, test, vi } from 'vitest'
import * as Aria from '@element-plus/utils/dom/aria' import * as Aria from '@element-plus/utils/dom/aria'
import TrapFocus, { FOCUSABLE_CHILDREN } from '../trap-focus' import TrapFocus, { FOCUSABLE_CHILDREN } from '../trap-focus'
import type { ComponentPublicInstance, VNode } from 'vue'
import type { VueWrapper } from '@vue/test-utils'
import type { TrapFocusElement } from '../trap-focus' import type { TrapFocusElement } from '../trap-focus'
const isVisibleMock = vi.spyOn(Aria, 'isVisible').mockImplementation(() => true) const isVisibleMock = vi.spyOn(Aria, 'isVisible').mockImplementation(() => true)
let wrapper let wrapper: VueWrapper<ComponentPublicInstance>
const _mount = (template: string) =>
mount( const _mount = (render: () => VNode) =>
{ mount(render, {
template, global: {
props: {}, directives: { TrapFocus },
}, },
{ attachTo: document.body,
global: { })
directives: { TrapFocus },
},
attachTo: document.body,
}
)
afterAll(() => { afterAll(() => {
isVisibleMock.mockRestore() isVisibleMock.mockRestore()
@ -34,18 +30,18 @@ afterEach(() => {
describe('v-trap-focus', () => { describe('v-trap-focus', () => {
test('should fetch all focusable element', () => { test('should fetch all focusable element', () => {
wrapper = _mount(` wrapper = _mount(() => (
<div v-trap-focus> <div v-trap-focus>
<button /> <button />
</div> </div>
`) ))
expect( expect(
(wrapper.element as TrapFocusElement)[FOCUSABLE_CHILDREN].length (wrapper.element as TrapFocusElement)[FOCUSABLE_CHILDREN].length
).toBe(1) ).toBe(1)
}) })
test('should not fetch disabled element', () => { test('should not fetch disabled element', () => {
wrapper = _mount(` wrapper = _mount(() => (
<div v-trap-focus> <div v-trap-focus>
<button /> <button />
<button disabled /> <button disabled />
@ -61,20 +57,20 @@ describe('v-trap-focus', () => {
<textarea /> <textarea />
<textarea disabled /> <textarea disabled />
</div> </div>
`) ))
expect( expect(
(wrapper.element as TrapFocusElement)[FOCUSABLE_CHILDREN].length (wrapper.element as TrapFocusElement)[FOCUSABLE_CHILDREN].length
).toBe(5) ).toBe(5)
}) })
test('should trap keyboard.tab event', async () => { test('should trap keyboard.tab event', async () => {
wrapper = _mount(` wrapper = _mount(() => (
<div v-trap-focus> <div v-trap-focus>
<button class="button-1" /> <button class="button-1" />
<button class="button-2" /> <button class="button-2" />
<button class="button-3" /> <button class="button-3" />
</div> </div>
`) ))
expect(document.activeElement).toBe(document.body) expect(document.activeElement).toBe(document.body)
await wrapper.find('.button-1').trigger('keydown', { await wrapper.find('.button-1').trigger('keydown', {
@ -104,11 +100,11 @@ describe('v-trap-focus', () => {
}) })
test('should focus on the only focusable element', async () => { test('should focus on the only focusable element', async () => {
wrapper = _mount(` wrapper = _mount(() => (
<div v-trap-focus> <div v-trap-focus>
<button /> <button />
</div> </div>
`) ))
expect(document.activeElement).toBe(document.body) expect(document.activeElement).toBe(document.body)
await wrapper.find('button').trigger('keydown', { await wrapper.find('button').trigger('keydown', {
code: 'Tab', code: 'Tab',
@ -118,20 +114,19 @@ describe('v-trap-focus', () => {
test('should update focusable list when children changes', async () => { test('should update focusable list when children changes', async () => {
wrapper = mount( wrapper = mount(
{ defineComponent({
props: { props: {
show: { show: Boolean,
type: Boolean,
default: false,
},
}, },
template: ` setup(props) {
<div v-trap-focus> return () => (
<button /> <div v-trap-focus>
<button v-if="show" /> <button />
</div> {props.show && <button />}
`, </div>
}, )
},
}),
{ {
global: { global: {
directives: { directives: {
@ -140,7 +135,10 @@ describe('v-trap-focus', () => {
}, },
} }
) )
const initialElements = wrapper.element[FOCUSABLE_CHILDREN]
const initialElements = (wrapper.element as TrapFocusElement)[
FOCUSABLE_CHILDREN
]
expect(initialElements.length).toBe(1) expect(initialElements.length).toBe(1)
await wrapper.setProps({ await wrapper.setProps({
@ -149,6 +147,8 @@ describe('v-trap-focus', () => {
await nextTick() await nextTick()
expect(wrapper.element[FOCUSABLE_CHILDREN].length).toBe(2) expect(
(wrapper.element as TrapFocusElement)[FOCUSABLE_CHILDREN].length
).toBe(2)
}) })
}) })