From 4f14fe47713770e72444e254835e46f852fae500 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Fri, 26 Aug 2022 13:39:33 +0800 Subject: [PATCH 1/3] test: add unit test for popup --- src/popup/__test__/index.test.jsx | 130 ++++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 src/popup/__test__/index.test.jsx diff --git a/src/popup/__test__/index.test.jsx b/src/popup/__test__/index.test.jsx new file mode 100644 index 000000000..dbdc77c8d --- /dev/null +++ b/src/popup/__test__/index.test.jsx @@ -0,0 +1,130 @@ +import { mount } from '@vue/test-utils'; +import { describe, it, expect, vi } from 'vitest'; +import Popup from '../popup.vue'; +import { ref } from 'vue'; + +describe('popup', () => { + // test props api + describe('props', () => { + const onOpen = vi.fn(); + it(': visible ', async () => { + const wrapper = mount(Popup, { + props: { + visible: false, + onOpen: onOpen + }, + }); + + expect(wrapper.find('.t-overlay').isVisible()).toBe(false) + expect(wrapper.find('.t-overlay').attributes('style')).toContain('display: none') + await wrapper.setProps({ + visible: true, + }) + expect(wrapper.vm.currentVisible).toBe(true) + expect(wrapper.find('.t-overlay').isVisible()).toBe(true) + expect(onOpen).toBeCalledTimes(1) + }) + + it(': placement ', async () => { + const wrapper = mount(Popup, { + props: { + placement: 'top' + }, + }); + expect(wrapper.find('.t-popup--content').classes()).toContain(`t-popup--content-${wrapper.vm.placement}`) + await wrapper.setProps({ + placement: 'center' + }) + expect(wrapper.find('.t-popup--content').classes()).toContain(`t-popup--content-${wrapper.vm.placement}`) + }) + + it(': showOverlay ', async () => { + const wrapper = mount(Popup, { + props: { + showOverlay: false + }, + }); + expect(wrapper.find('.t-overlay').classes('t-overlay--transparent')).toBe(true) + await wrapper.setProps({ + showOverlay: true + }) + expect(wrapper.find('.t-overlay').classes('t-overlay--transparent')).toBe(false) + }) + + it(': zIndex', async () => { + const wrapper = mount(Popup, { + props: { + zIndex: 15000 + }, + }); + expect(wrapper.find('.t-popup').attributes('style')).toContain('z-index: 15000') + await wrapper.setProps({ + zIndex: 17000 + }) + expect(wrapper.find('.t-popup').attributes('style')).toContain('z-index: 17000') + }) + + it(': transitionName', async () => { + const wrapper = mount(Popup, { + props: { + placement: 'top' + }, + }); + expect(wrapper.vm.contentTransitionName).toBe(`slide-${wrapper.vm.placement}`) + await wrapper.setProps({ + transitionName: "slide-fade" + }) + expect(wrapper.vm.contentTransitionName).toBe(wrapper.vm.transitionName) + }) + + it(': customStyle', async () => { + const wrapper = mount(Popup, { + props: { + customStyle: 'font-size: 18px', + zIndex: 17000 + }, + }); + expect(wrapper.find('.t-popup').attributes('style')).toContain('font-size: 18px; z-index: 17000;') + }) + }) + + // test events + describe('event', () => { + it(': onVisibleChange', async () => { + const onVisibleChange = vi.fn(); + const open= vi.fn(); + const opened = vi.fn(); + const close = vi.fn(); + const closed = vi.fn(); + const visible = ref(true); + const wrapper = mount({ + render() { + return + } + }) + const $popup = wrapper.find('.t-popup') + const $overlay = wrapper.find('.t-overlay') + await $overlay.trigger('click'); + expect(onVisibleChange).toBeCalledTimes(1) + expect(close).toBeCalledTimes(1) + + const $transition = wrapper.findAllComponents({ name: 'transition' }) // => 通过 `name` 找到 transition + expect($transition).toHaveLength(3) + + expect($transition.at(0).exists()).toBeTruthy() + expect($transition.at(2).exists()).toBeTruthy() + + await $popup.trigger('touchmove') + + }) + }); +}) From e9bd59498934f6714cfc4a512bf2775742181861 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 7 Sep 2022 19:42:08 +0800 Subject: [PATCH 2/3] test: add badge --- site/web/test-coverage.js | 2 +- src/_common | 2 +- src/popup/__test__/index.test.jsx | 74 +++++++++++++++++-------------- 3 files changed, 43 insertions(+), 35 deletions(-) diff --git a/site/web/test-coverage.js b/site/web/test-coverage.js index 4e8cd4b51..1f662e7e1 100644 --- a/site/web/test-coverage.js +++ b/site/web/test-coverage.js @@ -1 +1 @@ -module.exports = {"button":{"statements":"98.57%","branches":"58.82%","functions":"100%","lines":"98.57%"},"checkbox":{"statements":"93.47%","branches":"75.8%","functions":"80%","lines":"93.47%"},"drawer":{"statements":"100%","branches":"93.75%","functions":"100%","lines":"100%"},"fab":{"statements":"100%","branches":"100%","functions":"100%","lines":"100%"},"overlay":{"statements":"92.55%","branches":"100%","functions":"20%","lines":"92.55%"},"popup":{"statements":"95%","branches":"64.7%","functions":"55.55%","lines":"95%"},"shared":{"statements":"70.46%","branches":"61.11%","functions":"25%","lines":"70.46%"},"switch":{"statements":"98.05%","branches":"92.85%","functions":"100%","lines":"98.05%"}} \ No newline at end of file +module.exports = {"button":{"statements":"98.57%","branches":"58.82%","functions":"100%","lines":"98.57%"},"checkbox":{"statements":"93.47%","branches":"75.8%","functions":"80%","lines":"93.47%"},"drawer":{"statements":"100%","branches":"93.75%","functions":"100%","lines":"100%"},"fab":{"statements":"100%","branches":"100%","functions":"100%","lines":"100%"},"overlay":{"statements":"92.55%","branches":"100%","functions":"20%","lines":"92.55%"},"popup":{"statements":"95%","branches":"64.7%","functions":"55.55%","lines":"95%"},"shared":{"statements":"70.58%","branches":"61.11%","functions":"25%","lines":"70.58%"},"stepper":{"statements":"100%","branches":"93.18%","functions":"100%","lines":"100%"},"switch":{"statements":"98.05%","branches":"92.85%","functions":"100%","lines":"98.05%"}} \ No newline at end of file diff --git a/src/_common b/src/_common index d9ad437c0..51955ccaf 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit d9ad437c0ded605ac3699f2fa19b98337a4edb4a +Subproject commit 51955ccaf67c8498080ea9fdd628af4b0421b717 diff --git a/src/popup/__test__/index.test.jsx b/src/popup/__test__/index.test.jsx index dbdc77c8d..5ab8ffe42 100644 --- a/src/popup/__test__/index.test.jsx +++ b/src/popup/__test__/index.test.jsx @@ -7,12 +7,12 @@ describe('popup', () => { // test props api describe('props', () => { const onOpen = vi.fn(); - it(': visible ', async () => { - const wrapper = mount(Popup, { - props: { + it(': visible ', async () => { + const wrapper = mount(Popup, { + props: { visible: false, onOpen: onOpen - }, + }, }); expect(wrapper.find('.t-overlay').isVisible()).toBe(false) @@ -26,10 +26,10 @@ describe('popup', () => { }) it(': placement ', async () => { - const wrapper = mount(Popup, { - props: { - placement: 'top' - }, + const wrapper = mount(Popup, { + props: { + placement: 'top' + }, }); expect(wrapper.find('.t-popup--content').classes()).toContain(`t-popup--content-${wrapper.vm.placement}`) await wrapper.setProps({ @@ -39,10 +39,10 @@ describe('popup', () => { }) it(': showOverlay ', async () => { - const wrapper = mount(Popup, { - props: { - showOverlay: false - }, + const wrapper = mount(Popup, { + props: { + showOverlay: false + }, }); expect(wrapper.find('.t-overlay').classes('t-overlay--transparent')).toBe(true) await wrapper.setProps({ @@ -52,10 +52,10 @@ describe('popup', () => { }) it(': zIndex', async () => { - const wrapper = mount(Popup, { - props: { - zIndex: 15000 - }, + const wrapper = mount(Popup, { + props: { + zIndex: 15000 + }, }); expect(wrapper.find('.t-popup').attributes('style')).toContain('z-index: 15000') await wrapper.setProps({ @@ -65,10 +65,10 @@ describe('popup', () => { }) it(': transitionName', async () => { - const wrapper = mount(Popup, { - props: { + const wrapper = mount(Popup, { + props: { placement: 'top' - }, + }, }); expect(wrapper.vm.contentTransitionName).toBe(`slide-${wrapper.vm.placement}`) await wrapper.setProps({ @@ -78,11 +78,11 @@ describe('popup', () => { }) it(': customStyle', async () => { - const wrapper = mount(Popup, { - props: { + const wrapper = mount(Popup, { + props: { customStyle: 'font-size: 18px', zIndex: 17000 - }, + }, }); expect(wrapper.find('.t-popup').attributes('style')).toContain('font-size: 18px; z-index: 17000;') }) @@ -102,7 +102,7 @@ describe('popup', () => { return { onClosed={closed} /> } - }) - const $popup = wrapper.find('.t-popup') - const $overlay = wrapper.find('.t-overlay') + }); + + const $popup = wrapper.find('.t-popup'); + const $overlay = wrapper.find('.t-overlay'); + await $overlay.trigger('click'); - expect(onVisibleChange).toBeCalledTimes(1) - expect(close).toBeCalledTimes(1) - const $transition = wrapper.findAllComponents({ name: 'transition' }) // => 通过 `name` 找到 transition - expect($transition).toHaveLength(3) - expect($transition.at(0).exists()).toBeTruthy() - expect($transition.at(2).exists()).toBeTruthy() + expect(onVisibleChange).toBeCalledTimes(1); + expect(close).toBeCalledTimes(1); + + const $transition = wrapper.findAllComponents({ name: 'transition' }); // => 通过 `name` 找到 transition + expect($transition).toHaveLength(3); + + expect($transition.at(0).exists()).toBeTruthy(); + expect($transition.at(2).exists()).toBeTruthy(); - await $popup.trigger('touchmove') + await $popup.trigger('touchmove'); + // 理论上点击遮罩层，可以触发 transition 的 after-leave 事件，但在测试环境中并没有触发。 + // 手动触发 afterLeave + wrapper.findComponent(Popup).vm.afterLeave(); + expect(closed).toBeCalledTimes(1); }) }); }) From ecdabd91adc6d3fdda4d9b51ffd4e0a4f3b12c5a Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 7 Sep 2022 19:42:08 +0800 Subject: [PATCH 3/3] test: add badge --- site/web/test-coverage.js | 2 +- src/popup/__test__/index.test.jsx | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/site/web/test-coverage.js b/site/web/test-coverage.js index 1f662e7e1..e0da53e33 100644 --- a/site/web/test-coverage.js +++ b/site/web/test-coverage.js @@ -1 +1 @@ -module.exports = {"button":{"statements":"98.57%","branches":"58.82%","functions":"100%","lines":"98.57%"},"checkbox":{"statements":"93.47%","branches":"75.8%","functions":"80%","lines":"93.47%"},"drawer":{"statements":"100%","branches":"93.75%","functions":"100%","lines":"100%"},"fab":{"statements":"100%","branches":"100%","functions":"100%","lines":"100%"},"overlay":{"statements":"92.55%","branches":"100%","functions":"20%","lines":"92.55%"},"popup":{"statements":"95%","branches":"64.7%","functions":"55.55%","lines":"95%"},"shared":{"statements":"70.58%","branches":"61.11%","functions":"25%","lines":"70.58%"},"stepper":{"statements":"100%","branches":"93.18%","functions":"100%","lines":"100%"},"switch":{"statements":"98.05%","branches":"92.85%","functions":"100%","lines":"98.05%"}} \ No newline at end of file +module.exports = {"button":{"statements":"98.57%","branches":"58.82%","functions":"100%","lines":"98.57%"},"checkbox":{"statements":"93.47%","branches":"75.8%","functions":"80%","lines":"93.47%"},"drawer":{"statements":"100%","branches":"93.75%","functions":"100%","lines":"100%"},"fab":{"statements":"100%","branches":"100%","functions":"100%","lines":"100%"},"overlay":{"statements":"94.68%","branches":"100%","functions":"60%","lines":"94.68%"},"popup":{"statements":"99%","branches":"92.3%","functions":"88.88%","lines":"99%"},"shared":{"statements":"70.58%","branches":"61.11%","functions":"25%","lines":"70.58%"},"switch":{"statements":"98.05%","branches":"92.85%","functions":"100%","lines":"98.05%"}} \ No newline at end of file diff --git a/src/popup/__test__/index.test.jsx b/src/popup/__test__/index.test.jsx index 5ab8ffe42..1bd74b4a3 100644 --- a/src/popup/__test__/index.test.jsx +++ b/src/popup/__test__/index.test.jsx @@ -127,7 +127,11 @@ describe('popup', () => { expect($transition.at(0).exists()).toBeTruthy(); expect($transition.at(2).exists()).toBeTruthy(); - await $popup.trigger('touchmove'); + const event = { + preventDefault: vi.fn() + } + await $popup.trigger('touchmove', event); + expect(event.preventDefault).toHaveBeenCalledTimes(1); // 理论上点击遮罩层，可以触发 transition 的 after-leave 事件，但在测试环境中并没有触发。 // 手动触发 afterLeave