test: implament some unit test use case

This commit is contained in:
Sagi 2022-09-21 15:37:32 +08:00
parent b135abd4a5
commit 68c0df3401
1 changed files with 76 additions and 7 deletions

View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils';
import { ref } from 'vue';
import { ButtonEdit } from '..';
describe('f-button-edit', () => {
@ -52,18 +53,86 @@ describe('f-button-edit', () => {
describe('methods', () => {});
describe('events', () => {
it('should emit event named clear when click clear button', () => {});
it('should emit event named change when changed text box value', () => {});
it('should emit event named click whend click text box', () => {});
it('should emit event named clickButton when click append button', () => {});
it('should emit event named blur when text box lost focus', () => {});
it('should emit event named focus when text box get focus', () => {});
it('should emit event named clear when click clear button', async () => {
const handleClick = jest.fn();
const wrapper = mount({
setup() {
return () => {
return <ButtonEdit enableClear onClear={handleClick}></ButtonEdit>;
};
},
});
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');
const wrapper = mount({
setup() {
return () => {
return <ButtonEdit v-model={num.value} onChange={handleClick}></ButtonEdit>;
};
},
});
// 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({
setup() {
return () => {
return <ButtonEdit onClick={handleClick}></ButtonEdit>;
};
},
});
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({
setup() {
return () => {
return <ButtonEdit onClickButton={handleClick}></ButtonEdit>;
};
},
});
await wrapper.find('.input-group-text').trigger('click');
expect(handleClick).toBeCalled();
});
it('should emit event named blur when text box lost focus', async () => {
const handleClick = jest.fn();
const wrapper = mount({
setup() {
return () => {
return <ButtonEdit onBlur={handleClick}></ButtonEdit>;
};
},
});
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({
setup() {
return () => {
return <ButtonEdit onFocus={handleClick}></ButtonEdit>;
};
},
});
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 inputClick when click text box', () => {});
it('should emit event named input when input text in text box', () => {});
});