From 12d6b813ea42282f25ac4cad816bd09245437dae Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 23 Nov 2020 20:58:03 +0800 Subject: [PATCH] test(SubmitBar): update test cases --- .../test/__snapshots__/index.legacy.js.snap | 78 ----------- .../test/__snapshots__/index.spec.js.snap | 80 +++++++++++ src/submit-bar/test/index.legacy.js | 132 ------------------ src/submit-bar/test/index.spec.js | 111 +++++++++++++++ 4 files changed, 191 insertions(+), 210 deletions(-) delete mode 100644 src/submit-bar/test/__snapshots__/index.legacy.js.snap create mode 100644 src/submit-bar/test/__snapshots__/index.spec.js.snap delete mode 100644 src/submit-bar/test/index.legacy.js create mode 100644 src/submit-bar/test/index.spec.js diff --git a/src/submit-bar/test/__snapshots__/index.legacy.js.snap b/src/submit-bar/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index ef4265298..000000000 --- a/src/submit-bar/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,78 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`button slot 1`] = ` -
-
Custom button
-
-`; - -exports[`button-color prop 1`] = ` -
-
-
-`; - -exports[`decimal-length prop 1`] = ` -
-
-
合计：¥1.1
-
-
-`; - -exports[`disable safe-area-inset-bottom prop 1`] = ` -
-
-
-`; - -exports[`disable submit 1`] = ` -
-
-
合计：¥0.01
-
-
-`; - -exports[`suffix-label prop 1`] = ` -
-
-
Label¥1.11Suffix Label
-
-
-`; - -exports[`text-align prop 1`] = ` -
-
-
合计：¥1.11
-
-
-`; - -exports[`top slot 1`] = ` -
Custom Top
-
-`; - -exports[`without price 1`] = ` -
-
-
-`; diff --git a/src/submit-bar/test/__snapshots__/index.spec.js.snap b/src/submit-bar/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..e1b51a5ab --- /dev/null +++ b/src/submit-bar/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,80 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should change the color of submit button when using button-color prop 1`] = ` + +`; + +exports[`should render button slot correctly 1`] = ` +
+
+ Custom button +
+
+`; + +exports[`should render decimal length correctly when using decimal-length prop 1`] = ` + + ¥ + + 1 + + .1 + +`; + +exports[`should render decimal length correctly when using decimal-length prop 2`] = ` + + ¥ + + 1 + + +`; + +exports[`should render disabled submit button correctly 1`] = ` + +`; + +exports[`should render suffix-label correctly 1`] = ` +
+ + Label + + + ¥ + + 1 + + .11 + + + Suffix Label + +
+`; + +exports[`should render top slot correctly 1`] = ` +
+ Custom Top +
+ +
+
+`; diff --git a/src/submit-bar/test/index.legacy.js b/src/submit-bar/test/index.legacy.js deleted file mode 100644 index 9905a19a6..000000000 --- a/src/submit-bar/test/index.legacy.js +++ /dev/null @@ -1,132 +0,0 @@ -import SubmitBar from '..'; -import { mount } from '@vue/test-utils'; - -test('submit event', () => { - const submit = jest.fn(); - const wrapper = mount(SubmitBar, { - context: { - props: { - price: 1, - }, - on: { submit }, - }, - }); - - const button = wrapper.find('.van-button'); - button.trigger('click'); - expect(submit).toHaveBeenCalled(); -}); - -test('disable submit', () => { - const submit = jest.fn(); - const wrapper = mount(SubmitBar, { - context: { - props: { - price: 1, - disabled: true, - }, - on: { submit }, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); - - // disabled - const button = wrapper.find('.van-button'); - button.trigger('click'); - expect(submit).toHaveBeenCalledTimes(0); -}); - -test('without price', () => { - const wrapper = mount(SubmitBar, { - context: { - props: { - label: 'Label', - }, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('top slot', () => { - const wrapper = mount(SubmitBar, { - slots: { - top: () => 'Custom Top', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('decimal-length prop', () => { - const wrapper = mount(SubmitBar, { - context: { - props: { - price: 111, - decimalLength: 1, - }, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('suffix-label prop', () => { - const wrapper = mount(SubmitBar, { - context: { - props: { - price: 111, - label: 'Label', - suffixLabel: 'Suffix Label', - }, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('text-align prop', () => { - const wrapper = mount(SubmitBar, { - context: { - props: { - price: 111, - textAlign: 'left', - }, - }, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('disable safe-area-inset-bottom prop', () => { - const wrapper = mount(SubmitBar, { - context: { - props: { - safeAreaInsetBottom: false, - }, - }, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('button-color prop', () => { - const wrapper = mount(SubmitBar, { - context: { - props: { - buttonColor: 'red', - }, - }, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('button slot', () => { - const wrapper = mount(SubmitBar, { - buttonText: 'text', - slots: { - button: () => 'Custom button', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); diff --git a/src/submit-bar/test/index.spec.js b/src/submit-bar/test/index.spec.js new file mode 100644 index 000000000..0a693a77b --- /dev/null +++ b/src/submit-bar/test/index.spec.js @@ -0,0 +1,111 @@ +import SubmitBar from '..'; +import { mount } from '@vue/test-utils'; + +test('should emit submit event when submit button is clicked', () => { + const wrapper = mount(SubmitBar); + const button = wrapper.find('.van-submit-bar__button'); + button.trigger('click'); + expect(wrapper.emitted('submit').length).toEqual(1); +}); + +test('should render disabled submit button correctly', () => { + const wrapper = mount(SubmitBar, { + props: { + disabled: true, + }, + }); + expect(wrapper.find('.van-submit-bar__button').html()).toMatchSnapshot(); +}); + +test('should not emit submit event when disabled submit button is clicked', () => { + const wrapper = mount(SubmitBar, { + props: { + disabled: true, + }, + }); + const button = wrapper.find('.van-submit-bar__button'); + button.trigger('click'); + expect(wrapper.emitted('submit')).toBeFalsy(); +}); + +test('should not render label without price', () => { + const wrapper = mount(SubmitBar, { + props: { + label: 'Label', + }, + }); + expect(wrapper.html().includes('Label')).toBeFalsy(); +}); + +test('should render top slot correctly', () => { + const wrapper = mount(SubmitBar, { + slots: { + top: () => 'Custom Top', + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render decimal length correctly when using decimal-length prop', async () => { + const wrapper = mount(SubmitBar, { + props: { + price: 111, + decimalLength: 1, + }, + }); + + expect(wrapper.find('.van-submit-bar__price').html()).toMatchSnapshot(); + + await wrapper.setProps({ decimalLength: 0 }); + expect(wrapper.find('.van-submit-bar__price').html()).toMatchSnapshot(); +}); + +test('should render suffix-label correctly', () => { + const wrapper = mount(SubmitBar, { + props: { + price: 111, + label: 'Label', + suffixLabel: 'Suffix Label', + }, + }); + expect(wrapper.find('.van-submit-bar__text').html()).toMatchSnapshot(); +}); + +test('should adjust text align when using text-align prop', () => { + const wrapper = mount(SubmitBar, { + props: { + price: 111, + textAlign: 'left', + }, + }); + expect(wrapper.find('.van-submit-bar__text').element.style.textAlign).toEqual( + 'left' + ); +}); + +test('should allow to disable safe-area-inset-bottom prop', () => { + const wrapper = mount(SubmitBar, { + props: { + safeAreaInsetBottom: false, + }, + }); + expect(wrapper.find('.van-submit-bar--unfit').exists()).toBeTruthy(); +}); + +test('should change the color of submit button when using button-color prop', () => { + const wrapper = mount(SubmitBar, { + props: { + buttonColor: 'red', + }, + }); + expect(wrapper.find('.van-submit-bar__button').html()).toMatchSnapshot(); +}); + +test('should render button slot correctly', () => { + const wrapper = mount(SubmitBar, { + slots: { + button: () => 'Custom button', + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +});