mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Search): update test cases
This commit is contained in:
chenjiahan
parent
4e8576147e
commit
f3d045cd61
@ -1,91 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`action-text prop 1`] = `
|
||||
<div class="van-search van-search--show-action">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="search" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="button" tabindex="0" class="van-search__action">Custom Text</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`label slot 1`] = `
|
||||
<div class="van-search">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-search__label">Custom Label</div>
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="search" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`left slot 1`] = `
|
||||
<div class="van-search">Custom Left Content<div class="van-search__content van-search__content--square">
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="search" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`left-icon prop 1`] = `
|
||||
<div class="van-search">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="search" class="van-field__control"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`right-icon prop 1`] = `
|
||||
<div class="van-search">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="search" class="van-field__control">
|
||||
<div class="van-field__right-icon"><i class="van-icon van-icon-setting-o">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`right-icon slot 1`] = `
|
||||
<div class="van-search">
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-field__left-icon"><i class="van-icon van-icon-search">
|
||||
<!----></i></div>
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body"><input type="search" class="van-field__control">
|
||||
<div class="van-field__right-icon">Custom Right Icon</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
57
src/search/test/__snapshots__/index.spec.js.snap
Normal file
57
src/search/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,57 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render action text when using action-text prop 1`] = `
|
||||
<div class="van-search__action"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Custom Text
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render label slot correctly 1`] = `
|
||||
<div class="van-search__label">
|
||||
Custom Label
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render left icon when using left-icon prop 1`] = `
|
||||
<div class="van-field__left-icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-setting-o">
|
||||
</i>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render left slot correctly 1`] = `
|
||||
<div class="van-search">
|
||||
Custom Left Content
|
||||
<div class="van-search__content van-search__content--square">
|
||||
<div class="van-cell van-cell--borderless van-field">
|
||||
<div class="van-field__left-icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-search">
|
||||
</i>
|
||||
</div>
|
||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="search"
|
||||
class="van-field__control"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render right icon when using right-icon prop 1`] = `
|
||||
<div class="van-field__right-icon">
|
||||
<i class="van-badge__wrapper van-icon van-icon-setting-o">
|
||||
</i>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render right-icon slot correctly 1`] = `
|
||||
<div class="van-field__right-icon">
|
||||
Custom Right Icon
|
||||
</div>
|
||||
`;
|
||||
@ -1,125 +0,0 @@
|
||||
import Search from '..';
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
test('input event', () => {
|
||||
const onInput = jest.fn();
|
||||
const wrapper = mount(Search, {
|
||||
context: {
|
||||
on: {
|
||||
input: onInput,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '1';
|
||||
input.trigger('input');
|
||||
|
||||
expect(onInput).toHaveBeenCalledWith('1');
|
||||
});
|
||||
|
||||
test('cancel event', () => {
|
||||
const onInput = jest.fn();
|
||||
const onCancel = jest.fn();
|
||||
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
value: 'test',
|
||||
showAction: true,
|
||||
},
|
||||
context: {
|
||||
on: {
|
||||
input: onInput,
|
||||
cancel: onCancel,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const cancel = wrapper.find('.van-search__action');
|
||||
cancel.trigger('click');
|
||||
|
||||
expect(onInput).toHaveBeenCalledWith('');
|
||||
expect(onCancel).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('search event', () => {
|
||||
const onSearch = jest.fn();
|
||||
const onKeypress = jest.fn();
|
||||
|
||||
const wrapper = mount(Search, {
|
||||
context: {
|
||||
on: {
|
||||
search: onSearch,
|
||||
keypress: onKeypress,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.trigger('keypress.enter');
|
||||
input.trigger('keypress.a');
|
||||
|
||||
expect(onSearch).toHaveBeenCalled();
|
||||
expect(onKeypress).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('label slot', () => {
|
||||
const wrapper = mount(Search, {
|
||||
slots: {
|
||||
label: () => 'Custom Label',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('left slot', () => {
|
||||
const wrapper = mount(Search, {
|
||||
slots: {
|
||||
left: () => 'Custom Left Content',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('left-icon prop', () => {
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
leftIcon: 'setting-o',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('right-icon prop', () => {
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
rightIcon: 'setting-o',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('right-icon slot', () => {
|
||||
const wrapper = mount(Search, {
|
||||
slots: {
|
||||
'right-icon': () => 'Custom Right Icon',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('action-text prop', () => {
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
actionText: 'Custom Text',
|
||||
showAction: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
121
src/search/test/index.spec.js
Normal file
121
src/search/test/index.spec.js
Normal file
@ -0,0 +1,121 @@
|
||||
import Search from '..';
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
test('should emit update:modelValue event when input value changed', () => {
|
||||
const onUpdateModelValue = jest.fn();
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
'onUpdate:modelValue': onUpdateModelValue,
|
||||
},
|
||||
});
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.element.value = '1';
|
||||
input.trigger('input');
|
||||
|
||||
expect(onUpdateModelValue).toHaveBeenCalledTimes(1);
|
||||
expect(onUpdateModelValue).toHaveBeenCalledWith('1');
|
||||
});
|
||||
|
||||
test('should emit cancel event when cancel button click is clicked', () => {
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
value: 'test',
|
||||
showAction: true,
|
||||
},
|
||||
});
|
||||
|
||||
const cancel = wrapper.find('.van-search__action');
|
||||
cancel.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('cancel').length).toEqual(1);
|
||||
expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('');
|
||||
});
|
||||
|
||||
test('should not emit cancel event when using action slot', () => {
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
value: 'test',
|
||||
showAction: true,
|
||||
},
|
||||
slots: {
|
||||
action: () => 'Custom Action',
|
||||
},
|
||||
});
|
||||
|
||||
const cancel = wrapper.find('.van-search__action');
|
||||
cancel.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('cancel')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should emit search event when enter key is pressed', () => {
|
||||
const wrapper = mount(Search);
|
||||
|
||||
const input = wrapper.find('input');
|
||||
input.trigger('keypress.enter');
|
||||
input.trigger('keypress.a');
|
||||
|
||||
expect(wrapper.emitted('search').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('should render label slot correctly', () => {
|
||||
const wrapper = mount(Search, {
|
||||
slots: {
|
||||
label: () => 'Custom Label',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-search__label').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render left slot correctly', () => {
|
||||
const wrapper = mount(Search, {
|
||||
slots: {
|
||||
left: () => 'Custom Left Content',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render left icon when using left-icon prop', () => {
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
leftIcon: 'setting-o',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-field__left-icon').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render right icon when using right-icon prop', () => {
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
rightIcon: 'setting-o',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-field__right-icon').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render right-icon slot correctly', () => {
|
||||
const wrapper = mount(Search, {
|
||||
slots: {
|
||||
'right-icon': () => 'Custom Right Icon',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-field__right-icon').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render action text when using action-text prop', () => {
|
||||
const wrapper = mount(Search, {
|
||||
props: {
|
||||
actionText: 'Custom Text',
|
||||
showAction: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-search__action').html()).toMatchSnapshot();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user