From 6c0022dd20130ec8badc9ee26419d0718eaf3a2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= Date: Wed, 15 Jun 2022 01:30:57 +0800 Subject: [PATCH] refactor(components): [upload] use JSX in Unit test --- .../{upload.test.ts => upload.test.tsx} | 148 +++++++----------- 1 file changed, 59 insertions(+), 89 deletions(-) rename packages/components/upload/__tests__/{upload.test.ts => upload.test.tsx} (60%) diff --git a/packages/components/upload/__tests__/upload.test.ts b/packages/components/upload/__tests__/upload.test.tsx similarity index 60% rename from packages/components/upload/__tests__/upload.test.ts rename to packages/components/upload/__tests__/upload.test.tsx index 30b9ef04f962c..111c4c9a39eec 100644 --- a/packages/components/upload/__tests__/upload.test.ts +++ b/packages/components/upload/__tests__/upload.test.tsx @@ -1,87 +1,59 @@ -import { computed, defineComponent, h, nextTick, provide } from 'vue' -import { flushPromises } from '@vue/test-utils' -import { describe, expect, test, vi } from 'vitest' -import makeMount from '@element-plus/test-utils/make-mount' -import { on } from '@element-plus/utils' -import { EVENT_CODE } from '@element-plus/constants' +import { nextTick, ref } from 'vue' +import { flushPromises, mount } from '@vue/test-utils' +import { afterEach, describe, expect, test, vi } from 'vitest' -import { uploadContextKey } from '@element-plus/tokens' +import { EVENT_CODE } from '@element-plus/constants' +import Upload from '../src/upload.vue' import UploadContent from '../src/upload-content.vue' const AXIOM = 'Rem is the best girl' -const action = 'test-action' -const mockGetFile = (element: HTMLInputElement, files: File[]) => { - Object.defineProperty(element, 'files', { - get() { - return files - }, - }) -} - -const Wrapper = defineComponent({ - props: { - action: { - type: String, - required: true, - }, - }, - setup(props, { slots }) { - provide(uploadContextKey, { accept: computed(() => 'video/*') }) - return () => h(UploadContent, props, slots) - }, -}) - -const mount = makeMount(Wrapper, { - props: { - action, - }, - slots: { - default: () => AXIOM, - }, -}) +const mockGetFile = (element: HTMLInputElement, files: File[]) => + vi.spyOn(element, 'files', 'get').mockImplementation((): any => files) describe('', () => { + afterEach(() => { + vi.restoreAllMocks() + }) + describe('render test', () => { test('basic rendering', async () => { - const wrapper = mount() + const drag = ref(false) + const wrapper = mount(() => {AXIOM}) expect(wrapper.text()).toEqual(AXIOM) - await wrapper.setProps({ - drag: true, - }) + drag.value = true + await nextTick() expect(wrapper.find('.el-upload-dragger').exists()).toBe(true) }) }) describe('functionality', () => { test('works with keydown & click', async () => { - const wrapper = mount() + const wrapper = mount(() => ) - const click = vi.fn() - on(wrapper.find('input').element, 'click', click) + const onClick = vi.fn() + wrapper.find('input').element.addEventListener('click', onClick) await wrapper.trigger('click') - expect(click).toHaveBeenCalled() + expect(onClick).toHaveBeenCalled() + await wrapper.trigger('keydown', { key: EVENT_CODE.enter, }) - expect(click).toHaveBeenCalledTimes(2) + expect(onClick).toHaveBeenCalledTimes(2) await wrapper.trigger('keydown', { key: EVENT_CODE.space, }) - expect(click).toHaveBeenCalledTimes(3) + expect(onClick).toHaveBeenCalledTimes(3) }) test('works when upload file exceeds the limit', async () => { const onExceed = vi.fn() - const wrapper = mount({ - props: { - onExceed, - limit: 1, - }, - }) + const wrapper = mount(() => ( + + )) const fileList = [ new File(['content'], 'test-file.txt'), new File(['content'], 'test-file.txt'), @@ -94,14 +66,11 @@ describe('', () => { test('onStart works', async () => { const onStart = vi.fn() - const wrapper = mount({ - props: { - onStart, - autoUpload: false, // prevent auto upload - }, - }) - const fileList = [new File(['content'], 'test-file.txt')] + const wrapper = mount(() => ( + + )) + const fileList = [new File(['content'], 'test-file.txt')] mockGetFile(wrapper.find('input').element, fileList) await wrapper.find('input').trigger('change') @@ -111,15 +80,12 @@ describe('', () => { test('beforeUpload works for rejecting upload', async () => { const beforeUpload = vi.fn(() => Promise.reject()) const onRemove = vi.fn() - const wrapper = mount({ - props: { - beforeUpload, - onRemove, - }, - }) + const wrapper = mount(() => ( + + )) const fileList = [new File(['content'], 'test-file.txt')] - mockGetFile(wrapper.find('input').element, fileList) + await wrapper.find('input').trigger('change') expect(beforeUpload).toHaveBeenCalled() @@ -129,33 +95,39 @@ describe('', () => { test('beforeUpload works for resolving upload', async () => { const beforeUpload = vi.fn(() => Promise.resolve()) - const httpRequest = vi.fn(() => Promise.resolve()) + const httpRequest = ref(vi.fn(() => Promise.resolve())) const onSuccess = vi.fn() + const onError = vi.fn() - const wrapper = mount({ - props: { - beforeUpload, - httpRequest, - onSuccess, - }, - }) - const fileList = [new File(['content'], 'test-file.txt')] + const wrapper = mount(() => ( + + )) + const fileList = [new File(['content'], 'test-file.txt')] mockGetFile(wrapper.find('input').element, fileList) + await wrapper.find('input').trigger('change') expect(beforeUpload).toHaveBeenCalled() await flushPromises() - expect(onSuccess).toHaveBeenCalled() + expect(onError).not.toHaveBeenCalled() + + vi.clearAllMocks() + + httpRequest.value = vi.fn(() => Promise.reject()) + await nextTick() - const onError = vi.fn() - await wrapper.setProps({ - httpRequest: vi.fn(() => Promise.reject()), - onError, - }) await wrapper.find('input').trigger('change') + + expect(beforeUpload).toHaveBeenCalled() await flushPromises() + expect(onSuccess).not.toHaveBeenCalled() expect(onError).toHaveBeenCalled() }) @@ -165,15 +137,13 @@ describe('', () => { onProgress() return Promise.resolve() }) - const wrapper = mount({ - props: { - httpRequest, - onProgress, - }, - }) - const fileList = [new File(['content'], 'test-file.txt')] + const wrapper = mount( + + ) + const fileList = [new File(['content'], 'test-file.txt')] mockGetFile(wrapper.find('input').element, fileList) + await wrapper.find('input').trigger('change') await nextTick() expect(onProgress).toHaveBeenCalled()