test: add badge

Tencent · Sep 8, 2022 · e9bd594 · e9bd594
1 parent 4f14fe4
commit e9bd594
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 35 deletions.
diff --git a/site/web/test-coverage.js b/site/web/test-coverage.js
diff --git a/src/_common b/src/_common
diff --git 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,29 +102,37 @@ describe('popup', () => {
           return <Popup
             placement="bottom"
             transition-name="slide-fade"
-            visible={visible}
+            visible={visible.value}
             onVisibleChange={onVisibleChange}
             onOpen={open}
             onOpened={opened}
             onClose={close}
             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);
     })
   });
 })