diff --git a/src/search/test/__snapshots__/index.legacy.js.snap b/src/search/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index ecdbc1cd3..000000000
--- a/src/search/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`action-text prop 1`] = `
-
-`;
-
-exports[`label slot 1`] = `
-
-`;
-
-exports[`left slot 1`] = `
-
-`;
-
-exports[`left-icon prop 1`] = `
-
-`;
-
-exports[`right-icon prop 1`] = `
-
-`;
-
-exports[`right-icon slot 1`] = `
-
-`;
diff --git a/src/search/test/__snapshots__/index.spec.js.snap b/src/search/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..3903e1d9a
--- /dev/null
+++ b/src/search/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render action text when using action-text prop 1`] = `
+
+ Custom Text
+
+`;
+
+exports[`should render label slot correctly 1`] = `
+
+ Custom Label
+
+`;
+
+exports[`should render left icon when using left-icon prop 1`] = `
+
+
+
+
+`;
+
+exports[`should render left slot correctly 1`] = `
+
+ Custom Left Content
+
+
+
+
+
+`;
+
+exports[`should render right-icon slot correctly 1`] = `
+
+ Custom Right Icon
+
+`;
diff --git a/src/search/test/index.legacy.js b/src/search/test/index.legacy.js
deleted file mode 100644
index c41525ded..000000000
--- a/src/search/test/index.legacy.js
+++ /dev/null
@@ -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();
-});
diff --git a/src/search/test/index.spec.js b/src/search/test/index.spec.js
new file mode 100644
index 000000000..0ff37f431
--- /dev/null
+++ b/src/search/test/index.spec.js
@@ -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();
+});