test: implement button edit events unit test case
This commit is contained in:
parent
68c0df3401
commit
a0a83576dc
|
@ -16,7 +16,6 @@ export default defineComponent({
|
||||||
'clickButton',
|
'clickButton',
|
||||||
'blur',
|
'blur',
|
||||||
'focus',
|
'focus',
|
||||||
'mouseEnter',
|
|
||||||
'mouseEnterIcon',
|
'mouseEnterIcon',
|
||||||
'mouseLeaveIcon',
|
'mouseLeaveIcon',
|
||||||
'keyup',
|
'keyup',
|
||||||
|
@ -95,7 +94,7 @@ export default defineComponent({
|
||||||
)}
|
)}
|
||||||
{props.buttonContent && (
|
{props.buttonContent && (
|
||||||
<span
|
<span
|
||||||
class="input-group-text"
|
class="input-group-text input-group-append-button"
|
||||||
onClick={onClickButton}
|
onClick={onClickButton}
|
||||||
onMouseenter={onMouseEnterButton}
|
onMouseenter={onMouseEnterButton}
|
||||||
onMouseleave={onMouseLeaveButton}
|
onMouseleave={onMouseLeaveButton}
|
||||||
|
|
|
@ -18,7 +18,7 @@ export function useButton(props: ButtonEditProps, context: SetupContext): UseBut
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseEnterButton($event: MouseEvent) {
|
function onMouseEnterButton($event: MouseEvent) {
|
||||||
context.emit('mouseEnter', $event);
|
context.emit('mouseEnterIcon', $event);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMouseLeaveButton($event: MouseEvent) {
|
function onMouseLeaveButton($event: MouseEvent) {
|
||||||
|
|
|
@ -65,6 +65,7 @@ describe('f-button-edit', () => {
|
||||||
await wrapper.find('.input-group-clear').trigger('click');
|
await wrapper.find('.input-group-clear').trigger('click');
|
||||||
expect(handleClick).toBeCalled();
|
expect(handleClick).toBeCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should emit event named change when changed text box value', async () => {
|
it('should emit event named change when changed text box value', async () => {
|
||||||
const handleClick = jest.fn();
|
const handleClick = jest.fn();
|
||||||
const num = ref('0');
|
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');
|
await wrapper.find('div').find('div').find('input').setValue('test');
|
||||||
// num.value = 'test';
|
|
||||||
expect(handleClick).toBeCalled();
|
expect(handleClick).toBeCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should emit event named click whend click text box', async () => {
|
it('should emit event named click whend click text box', async () => {
|
||||||
const handleClick = jest.fn();
|
const handleClick = jest.fn();
|
||||||
const wrapper = mount({
|
const wrapper = mount({
|
||||||
|
@ -92,6 +92,7 @@ describe('f-button-edit', () => {
|
||||||
await wrapper.find('div').find('div').find('input').trigger('click');
|
await wrapper.find('div').find('div').find('input').trigger('click');
|
||||||
expect(handleClick).toBeCalled();
|
expect(handleClick).toBeCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should emit event named clickButton when click append button', async () => {
|
it('should emit event named clickButton when click append button', async () => {
|
||||||
const handleClick = jest.fn();
|
const handleClick = jest.fn();
|
||||||
const wrapper = mount({
|
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();
|
expect(handleClick).toBeCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should emit event named blur when text box lost focus', async () => {
|
it('should emit event named blur when text box lost focus', async () => {
|
||||||
const handleClick = jest.fn();
|
const handleClick = jest.fn();
|
||||||
const wrapper = mount({
|
const wrapper = mount({
|
||||||
|
@ -116,6 +118,7 @@ describe('f-button-edit', () => {
|
||||||
await wrapper.find('div').find('div').find('input').trigger('blur');
|
await wrapper.find('div').find('div').find('input').trigger('blur');
|
||||||
expect(handleClick).toBeCalled();
|
expect(handleClick).toBeCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should emit event named focus when text box get focus', async () => {
|
it('should emit event named focus when text box get focus', async () => {
|
||||||
const handleClick = jest.fn();
|
const handleClick = jest.fn();
|
||||||
const wrapper = mount({
|
const wrapper = mount({
|
||||||
|
@ -128,12 +131,84 @@ describe('f-button-edit', () => {
|
||||||
await wrapper.find('div').find('div').find('input').trigger('focus');
|
await wrapper.find('div').find('div').find('input').trigger('focus');
|
||||||
expect(handleClick).toBeCalled();
|
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', () => {
|
describe('behaviors', () => {
|
||||||
|
|
Loading…
Reference in New Issue