testzm0318
/
farris-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

test: implement button edit events unit test case

This commit is contained in:
Sagi 2022-09-21 16:35:10 +08:00
parent 68c0df3401
commit a0a83576dc
3 changed files with 86 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}

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

@ -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) {

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

@ -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 mouseLeaveIcon when mouse leave append button', () => {});
it('should emit event named keyup when input text in text box', () => {});
it('should emit event named keydown when input text in text box', () => {});
it('should emit event named input when input text in text box', () => {});
it('should emit event named mouseEnter when mouse move in text box', async () => {
const handleClick = jest.fn();
const wrapper = mount({
setup() {
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', () => {