test(components): add close-on-press-escape test case (#21367)

packages/components/dialog/__tests__/dialog.test.tsx

@@ -5,6 +5,8 @@ import { rAF } from '@element-plus/test-utils/tick'
 import triggerCompositeClick from '@element-plus/test-utils/composite-click'
 import { Delete } from '@element-plus/icons-vue'
 import Dialog from '../src/dialog.vue'
+import triggerEvent from '@element-plus/test-utils/trigger-event'
+import { EVENT_CODE } from '@element-plus/constants'
 
 const AXIOM = 'Rem is the best girl'
 
@@ -179,6 +181,28 @@ describe('Dialog.vue', () => {
     expect(wrapper.find('.test-footer-class').exists()).toBe(false)
   })
 
+  test('should close the modal when pressing Escape when `closeOnPressEscape` is true', async () => {
+    const onClose = vi.fn()
+    const wrapper = mount(
+      <Dialog modelValue={true} onClose={onClose} closeOnPressEscape={false}>
+        {AXIOM}
+      </Dialog>
+    )
+
+    await nextTick()
+
+    triggerEvent(document.body, 'keydown', EVENT_CODE.esc)
+    await nextTick()
+    expect(wrapper.vm.visible).toBeTruthy()
+
+    await wrapper.setProps({ closeOnPressEscape: true })
+    triggerEvent(document.body, 'keydown', EVENT_CODE.esc)
+    await nextTick()
+
+    expect(wrapper.vm.visible).toBeFalsy()
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
   describe('mask related', () => {
     test('should not have overlay mask when mask is false', async () => {
       const wrapper = mount(

packages/components/image-viewer/__tests__/image-viewer.test.tsx

@@ -1,8 +1,10 @@
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import { IMAGE_FAIL, IMAGE_SUCCESS } from '@element-plus/test-utils/mock'
 import ImageViewer from '../src/image-viewer.vue'
+import triggerEvent from '@element-plus/test-utils/trigger-event'
+import { EVENT_CODE } from '@element-plus/constants'
 
 async function doubleWait() {
   await nextTick()
@@ -39,6 +41,30 @@ describe('<image-viewer />', () => {
     wrapper.unmount()
   })
 
+  test('image preview close-on-press-escape', async () => {
+    const onClose = vi.fn()
+    const wrapper = mount(
+      <ImageViewer
+        urlList={[IMAGE_SUCCESS]}
+        onClose={onClose}
+        closeOnPressEscape={false}
+      />
+    )
+
+    await doubleWait()
+
+    triggerEvent(document.body, 'keydown', EVENT_CODE.esc)
+    await nextTick()
+    expect(document.querySelector('.el-image-viewer__wrapper')).toBeDefined()
+
+    await wrapper.setProps({ closeOnPressEscape: true })
+    triggerEvent(document.body, 'keydown', EVENT_CODE.esc)
+    await nextTick()
+
+    expect(document.querySelector('.el-image-viewer__wrapper')).toBeNull()
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
   test('manually switch image', async () => {
     const wrapper = mount(
       <ImageViewer urlList={[IMAGE_SUCCESS, IMAGE_FAIL]} initialIndex={0} />

packages/components/image/__tests__/image.test.tsx

@@ -7,6 +7,8 @@ import {
   mockImageEvent,
 } from '@element-plus/test-utils/mock'
 import Image from '../src/image.vue'
+import triggerEvent from '@element-plus/test-utils/trigger-event'
+import { EVENT_CODE } from '@element-plus/constants'
 
 import type { AnchorHTMLAttributes, ImgHTMLAttributes } from 'vue'
 import type { ImageProps } from '../src/image'
@@ -116,6 +118,31 @@ describe('Image.vue', () => {
     expect(result).toBeTruthy()
   })
 
+  test('image preview close-on-press-escape', async () => {
+    const onClose = vi.fn()
+    const wrapper = mount(
+      <Image
+        previewSrcList={Array.from<string>({ length: 3 }).fill(IMAGE_SUCCESS)}
+        onClose={onClose}
+        closeOnPressEscape={false}
+      />
+    )
+
+    await doubleWait()
+    wrapper.getCurrentComponent().exposed!.showPreview()
+
+    triggerEvent(document.body, 'keydown', EVENT_CODE.esc)
+    await nextTick()
+    expect(wrapper.vm.showViewer).toBeTruthy()
+
+    await wrapper.setProps({ closeOnPressEscape: true })
+    triggerEvent(document.body, 'keydown', EVENT_CODE.esc)
+    await nextTick()
+
+    expect(wrapper.vm.showViewer).toBeFalsy()
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
   test('manually open preview', async () => {
     const url = IMAGE_SUCCESS
     const srcList = Array.from<string>({ length: 3 }).map(

packages/components/tour/__tests__/tour.test.tsx

@@ -1,8 +1,10 @@
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, test } from 'vitest'
+import { afterEach, describe, expect, test, vi } from 'vitest'
 import Tour from '../src/tour.vue'
 import TourStep from '../src/step.vue'
+import { EVENT_CODE } from '@element-plus/constants'
+import triggerEvent from '@element-plus/test-utils/trigger-event'
 
 describe('Tour.vue', () => {
   afterEach(() => {
@@ -190,4 +192,36 @@ describe('Tour.vue', () => {
     expect(document.querySelector('.prev-btn span')?.innerHTML).toBe('上一步')
     expect(document.querySelector('.next-btn span')?.innerHTML).toBe('下一步')
   })
+
+  test('close-on-press-escape', async () => {
+    const onClose = vi.fn()
+    const modelValue = ref(true)
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <Tour
+            v-model={modelValue.value}
+            closeOnPressEscape={false}
+            onClose={onClose}
+          >
+            <TourStep title="first" description="cover description." />
+            <TourStep title="second" description="cover description." />
+          </Tour>
+        )
+      },
+    })
+
+    await nextTick()
+
+    triggerEvent(document.body, 'keydown', EVENT_CODE.esc)
+    await nextTick()
+    expect(modelValue.value).toBeTruthy()
+
+    await wrapper.setProps({ closeOnPressEscape: true })
+    triggerEvent(document.body, 'keydown', EVENT_CODE.esc)
+    await nextTick()
+
+    expect(modelValue.value).toBeFalsy()
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
 })