test: implement button edit events unit test case

packages/ui-vue/components/button-edit/src/button-edit.component.tsx

@@ -16,7 +16,6 @@ export default defineComponent({
     'clickButton',
     'blur',
     'focus',
-    'mouseEnter',
     'mouseEnterIcon',
     'mouseLeaveIcon',
     'keyup',
@@ -95,7 +94,7 @@ export default defineComponent({
               )}
               {props.buttonContent && (
                 <span
-                  class="input-group-text"
+                  class="input-group-text input-group-append-button"
                   onClick={onClickButton}
                   onMouseenter={onMouseEnterButton}
                   onMouseleave={onMouseLeaveButton}

packages/ui-vue/components/button-edit/src/composition/use-button.ts

@@ -18,7 +18,7 @@ export function useButton(props: ButtonEditProps, context: SetupContext): UseBut
   }
 
   function onMouseEnterButton($event: MouseEvent) {
-    context.emit('mouseEnter', $event);
+    context.emit('mouseEnterIcon', $event);
   }
 
   function onMouseLeaveButton($event: MouseEvent) {

packages/ui-vue/components/button-edit/test/button-edit.spec.tsx

@@ -65,6 +65,7 @@ describe('f-button-edit', () => {
       await wrapper.find('.input-group-clear').trigger('click');
       expect(handleClick).toBeCalled();
     });
+
     it('should emit event named change when changed text box value', async () => {
       const handleClick = jest.fn();
       const num = ref('0');
@@ -75,11 +76,10 @@ describe('f-button-edit', () => {
           };
         },
       });
-      // wrapper.setProps({ modelValue: 'test' });
       await wrapper.find('div').find('div').find('input').setValue('test');
-      // num.value = 'test';
       expect(handleClick).toBeCalled();
     });
+
     it('should emit event named click whend click text box', async () => {
       const handleClick = jest.fn();
       const wrapper = mount({
@@ -92,6 +92,7 @@ describe('f-button-edit', () => {
       await wrapper.find('div').find('div').find('input').trigger('click');
       expect(handleClick).toBeCalled();
     });
+
     it('should emit event named clickButton when click append button', async () => {
       const handleClick = jest.fn();
       const wrapper = mount({
@@ -101,9 +102,10 @@ describe('f-button-edit', () => {
           };
         },
       });
-      await wrapper.find('.input-group-text').trigger('click');
+      await wrapper.find('.input-group-append-button').trigger('click');
       expect(handleClick).toBeCalled();
     });
+
     it('should emit event named blur when text box lost focus', async () => {
       const handleClick = jest.fn();
       const wrapper = mount({
@@ -116,6 +118,7 @@ describe('f-button-edit', () => {
       await wrapper.find('div').find('div').find('input').trigger('blur');
       expect(handleClick).toBeCalled();
     });
+
     it('should emit event named focus when text box get focus', async () => {
       const handleClick = jest.fn();
       const wrapper = mount({
@@ -128,12 +131,84 @@ describe('f-button-edit', () => {
       await wrapper.find('div').find('div').find('input').trigger('focus');
       expect(handleClick).toBeCalled();
     });
-    it('should emit event named mouseEnter when mouse move in text box', () => {});
+
-    it('should emit event named mouseEnterIcon when mouse move in append button', () => {});
+    it('should emit event named mouseEnter when mouse move in text box', async () => {
-    it('should emit event named mouseLeaveIcon when mouse leave append button', () => {});
+      const handleClick = jest.fn();
-    it('should emit event named keyup when input text in text box', () => {});
+      const wrapper = mount({
-    it('should emit event named keydown when input text in text box', () => {});
+        setup() {
-    it('should emit event named input when input text in text box', () => {});
+          return () => {
+            return <ButtonEdit onMouseEnter={handleClick}></ButtonEdit>;
+          };
+        },
+      });
+      await wrapper.trigger('mouseenter');
+      expect(handleClick).toBeCalled();
+    });
+
+    it('should emit event named mouseEnterIcon when mouse move in append button', async () => {
+      const handleClick = jest.fn();
+      const wrapper = mount({
+        setup() {
+          return () => {
+            return <ButtonEdit onMouseEnterIcon={handleClick}></ButtonEdit>;
+          };
+        },
+      });
+      await wrapper.find('.input-group-append-button').trigger('mouseenter');
+      expect(handleClick).toBeCalled();
+    });
+
+    it('should emit event named mouseLeaveIcon when mouse leave append button', async () => {
+      const handleClick = jest.fn();
+      const wrapper = mount({
+        setup() {
+          return () => {
+            return <ButtonEdit onMouseLeaveIcon={handleClick}></ButtonEdit>;
+          };
+        },
+      });
+      await wrapper.find('.input-group-append-button').trigger('mouseleave');
+      expect(handleClick).toBeCalled();
+    });
+
+    it('should emit event named keyup when input text in text box', async () => {
+      const handleClick = jest.fn();
+      const wrapper = mount({
+        setup() {
+          return () => {
+            return <ButtonEdit onKeyup={handleClick}></ButtonEdit>;
+          };
+        },
+      });
+      await wrapper.find('div').find('div').find('input').trigger('keyup');
+      expect(handleClick).toBeCalled();
+    });
+
+    it('should emit event named keydown when input text in text box', async () => {
+      const handleClick = jest.fn();
+      const wrapper = mount({
+        setup() {
+          return () => {
+            return <ButtonEdit onKeydown={handleClick}></ButtonEdit>;
+          };
+        },
+      });
+      await wrapper.find('div').find('div').find('input').trigger('keydown');
+      expect(handleClick).toBeCalled();
+    });
+
+    it('should emit event named input when input text in text box', async () => {
+      const handleClick = jest.fn();
+      const wrapper = mount({
+        setup() {
+          return () => {
+            return <ButtonEdit onInput={handleClick}></ButtonEdit>;
+          };
+        },
+      });
+      await wrapper.find('div').find('div').find('input').trigger('input');
+      expect(handleClick).toBeCalled();
+    });
   });
 
   describe('behaviors', () => {