diff --git a/packages/components/overlay/__tests__/overlay.test.ts b/packages/components/overlay/__tests__/overlay.test.tsx similarity index 68% rename from packages/components/overlay/__tests__/overlay.test.ts rename to packages/components/overlay/__tests__/overlay.test.tsx index 6c0f05e40a..9297593a79 100644 --- a/packages/components/overlay/__tests__/overlay.test.ts +++ b/packages/components/overlay/__tests__/overlay.test.tsx @@ -1,3 +1,4 @@ +import { nextTick, ref } from 'vue' import { mount } from '@vue/test-utils' import { describe, expect, test } from 'vitest' import Overlay from '../src/overlay' @@ -6,11 +7,7 @@ const AXIOM = 'Rem is the best girl' describe('Overlay.vue', () => { test('render test', async () => { - const wrapper = mount(Overlay, { - slots: { - default: AXIOM, - }, - }) + const wrapper = mount(() => {AXIOM}) expect(wrapper.text()).toEqual(AXIOM) const testClass = 'test-class' await wrapper.setProps({ @@ -21,31 +18,28 @@ describe('Overlay.vue', () => { }) test('should emit click event', async () => { - const wrapper = mount(Overlay, { - slots: { - default: AXIOM, - }, - }) + const wrapper = mount(() => {AXIOM}) await wrapper.find('.el-overlay').trigger('click') expect(wrapper.emitted()).toBeTruthy() }) test('no mask', async () => { - const wrapper = mount(Overlay, { - slots: { - default: AXIOM, - }, - }) + const mask = ref(true) + const wrapper = mount(() => {AXIOM}) + const selector = '.el-overlay' expect(wrapper.find(selector).exists()).toBe(true) - await wrapper.setProps({ - mask: false, - }) + mask.value = false + + await nextTick() + expect(wrapper.find(selector).exists()).toBe(false) - await wrapper.setProps({ - mask: true, - }) + + mask.value = true + + await nextTick() + expect(wrapper.find(selector).exists()).toBe(true) }) })