From f3d045cd616443a34d07376695e6b97adb9d0cc0 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 3 Dec 2020 20:20:18 +0800 Subject: [PATCH] test(Search): update test cases --- .../test/__snapshots__/index.legacy.js.snap | 91 ------------- .../test/__snapshots__/index.spec.js.snap | 57 ++++++++ src/search/test/index.legacy.js | 125 ------------------ src/search/test/index.spec.js | 121 +++++++++++++++++ 4 files changed, 178 insertions(+), 216 deletions(-) delete mode 100644 src/search/test/__snapshots__/index.legacy.js.snap create mode 100644 src/search/test/__snapshots__/index.spec.js.snap delete mode 100644 src/search/test/index.legacy.js create mode 100644 src/search/test/index.spec.js 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`] = ` -
-
-
-
-
-
-
-
-
-
-
Custom Text
-
-`; - -exports[`label slot 1`] = ` -
-
-
Custom Label
-
-
-
-
-
-
-
-
-
-`; - -exports[`left slot 1`] = ` -
Custom Left Content
-
-
-
-
-
-
-
-
-
-`; - -exports[`left-icon prop 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`right-icon prop 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`right-icon slot 1`] = ` -
-
-
-
-
-
-
-
Custom Right Icon
-
-
-
-
-
-`; 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 when using right-icon prop 1`] = ` +
+ + +
+`; + +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(); +});