diff --git a/src/steps/test/__snapshots__/index.legacy.js.snap b/src/steps/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 111a9b513..000000000 --- a/src/steps/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,47 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`icon slot 1`] = ` -
-
-
-
- A -
-
Custim Inactive Icon
-
-
-
-
- B -
-
Custim Active Icon
-
-
-
-
- C -
-
Custim Inactive Icon
-
-
-
-
-`; - -exports[`inactive-color prop 1`] = ` -
-
-
-
A
-
-
-
-
-
-
B
-
-
-
-
-
-`; diff --git a/src/steps/test/__snapshots__/index.spec.js.snap b/src/steps/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..21dff74b3 --- /dev/null +++ b/src/steps/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,94 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should change inactive color when using inactive-color prop 1`] = ` +
+
+
+
+ A +
+
+ + +
+
+
+
+
+
+ B +
+
+ + +
+
+
+
+
+
+`; + +exports[`should change inactive icon when using inactive-icon prop 1`] = ` +
+
+
+
+ A +
+
+ + +
+
+
+
+
+
+ B +
+
+ + +
+
+
+
+
+
+`; + +exports[`should render icon slot correctly 1`] = ` +
+
+
+
+ B +
+
+ Custim Active Icon +
+
+
+
+
+
+ A +
+
+ Custim Inactive Icon +
+
+
+
+
+
+`; diff --git a/src/steps/test/index.legacy.js b/src/steps/test/index.legacy.js deleted file mode 100644 index eecbd7875..000000000 --- a/src/steps/test/index.legacy.js +++ /dev/null @@ -1,61 +0,0 @@ -import { mount } from '@vue/test-utils'; - -test('icon slot', () => { - const wrapper = mount({ - template: ` - - - - A - - - - B - - - - C - - - `, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('click-step event', () => { - const onClickStep = jest.fn(); - const wrapper = mount({ - template: ` - - A - B - C - - `, - methods: { - onClickStep, - }, - }); - - wrapper.find('.van-step').trigger('click'); - expect(onClickStep).toHaveBeenCalledTimes(0); - - wrapper.find('.van-step__title').trigger('click'); - expect(onClickStep).toHaveBeenCalledWith(0); - - wrapper.findAll('.van-step__circle-container').at(2).trigger('click'); - expect(onClickStep).toHaveBeenCalledTimes(2); - expect(onClickStep).toHaveBeenLastCalledWith(2); -}); - -test('inactive-color prop', () => { - const wrapper = mount({ - template: ` - - A - B - - `, - }); - expect(wrapper.html()).toMatchSnapshot(); -}); diff --git a/src/steps/test/index.spec.js b/src/steps/test/index.spec.js new file mode 100644 index 000000000..d436b6ed8 --- /dev/null +++ b/src/steps/test/index.spec.js @@ -0,0 +1,72 @@ +import { mount } from '@vue/test-utils'; +import Step from '../../step'; +import Steps from '..'; + +test('should render icon slot correctly', () => { + const wrapper = mount({ + render() { + return ( + + `Custim Active Icon` }}>B + `Custim Inactive Icon` }}> + A + + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should emit click-step event when step is clicked', () => { + const onClickStep = jest.fn(); + const wrapper = mount({ + setup() { + return () => ( + + A + B + C + + ); + }, + }); + + wrapper.find('.van-step').trigger('click'); + expect(onClickStep).toHaveBeenCalledTimes(0); + + wrapper.find('.van-step__title').trigger('click'); + expect(onClickStep).toHaveBeenCalledWith(0); + + wrapper.findAll('.van-step__circle-container')[2].trigger('click'); + expect(onClickStep).toHaveBeenCalledTimes(2); + expect(onClickStep).toHaveBeenLastCalledWith(2); +}); + +test('should change inactive color when using inactive-color prop', () => { + const wrapper = mount({ + render() { + return ( + + A + B + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should change inactive icon when using inactive-icon prop', () => { + const wrapper = mount({ + render() { + return ( + + A + B + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); +});