From 83b467ff8d7798513e528dfc9b644dd6d95bf079 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sat, 14 Nov 2020 15:09:28 +0800 Subject: [PATCH] test(Switch): update test cases --- .../test/__snapshots__/index.legacy.js.snap | 13 -- .../test/__snapshots__/index.spec.js.snap | 13 ++ src/switch/test/index.legacy.js | 91 -------------- src/switch/test/index.spec.js | 111 ++++++++++++++++++ 4 files changed, 124 insertions(+), 104 deletions(-) delete mode 100644 src/switch/test/__snapshots__/index.legacy.js.snap create mode 100644 src/switch/test/__snapshots__/index.spec.js.snap delete mode 100644 src/switch/test/index.legacy.js create mode 100644 src/switch/test/index.spec.js diff --git a/src/switch/test/__snapshots__/index.legacy.js.snap b/src/switch/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 8a9a87679..000000000 --- a/src/switch/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,13 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`inactive-color prop 1`] = ` -
-
-
-`; - -exports[`size prop 1`] = ` -
-
-
-`; diff --git a/src/switch/test/__snapshots__/index.spec.js.snap b/src/switch/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..c9582dfc0 --- /dev/null +++ b/src/switch/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should apply active color to loading icon 1`] = ` +
+ +
+`; + +exports[`should apply inactive color to loading icon 1`] = ` +
+ +
+`; diff --git a/src/switch/test/index.legacy.js b/src/switch/test/index.legacy.js deleted file mode 100644 index 58580657c..000000000 --- a/src/switch/test/index.legacy.js +++ /dev/null @@ -1,91 +0,0 @@ -import Switch from '..'; -import { mount } from '@vue/test-utils'; - -test('emit event', () => { - const input = jest.fn(); - const change = jest.fn(); - const wrapper = mount(Switch, { - listeners: { - input, - change, - }, - }); - wrapper.trigger('click'); - - expect(input).toHaveBeenCalledWith(true); - expect(change).toHaveBeenCalledWith(true); -}); - -test('disabled', () => { - const input = jest.fn(); - const change = jest.fn(); - const wrapper = mount(Switch, { - listeners: { - input, - change, - }, - props: { - disabled: true, - }, - }); - wrapper.trigger('click'); - - expect(input).toHaveBeenCalledTimes(0); - expect(change).toHaveBeenCalledTimes(0); -}); - -test('active-value & inactive-value prop', () => { - const input = jest.fn(); - const change = jest.fn(); - const wrapper = mount(Switch, { - props: { - value: '1', - activeValue: '1', - inactiveValue: '2', - }, - listeners: { - input, - change, - }, - }); - - wrapper.trigger('click'); - - expect(input).toHaveBeenCalledWith('2'); - expect(change).toHaveBeenCalledWith('2'); -}); - -test('inactive-color prop', () => { - const wrapper = mount(Switch, { - props: { - value: '2', - inactiveValue: '2', - inactiveColor: 'black', - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('size prop', () => { - const wrapper = mount(Switch, { - props: { - size: 20, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('click event', () => { - const click = jest.fn(); - const wrapper = mount(Switch, { - listeners: { - click, - }, - }); - - wrapper.trigger('click'); - - expect(click).toHaveBeenCalledTimes(1); -}); diff --git a/src/switch/test/index.spec.js b/src/switch/test/index.spec.js new file mode 100644 index 000000000..3ad1dd35b --- /dev/null +++ b/src/switch/test/index.spec.js @@ -0,0 +1,111 @@ +import Switch from '..'; +import { mount } from '@vue/test-utils'; + +test('should emit update:modelValue event when click the switch button', async () => { + const wrapper = mount(Switch); + + wrapper.trigger('click'); + expect(wrapper.emitted('update:modelValue').length).toEqual(1); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(true); + + await wrapper.setProps({ modelValue: true }); + wrapper.trigger('click'); + expect(wrapper.emitted('update:modelValue').length).toEqual(2); + expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(false); +}); + +test('should emit change event when click the switch button', async () => { + const wrapper = mount(Switch); + + wrapper.trigger('click'); + expect(wrapper.emitted('change').length).toEqual(1); + expect(wrapper.emitted('change')[0][0]).toEqual(true); + + await wrapper.setProps({ modelValue: true }); + wrapper.trigger('click'); + expect(wrapper.emitted('change').length).toEqual(2); + expect(wrapper.emitted('change')[1][0]).toEqual(false); +}); + +test('should not emit change event or update:modelValue event if disabled', async () => { + const wrapper = mount(Switch, { + props: { + disabled: true, + }, + }); + + wrapper.trigger('click'); + expect(wrapper.emitted('change')).toBeFalsy(); + expect(wrapper.emitted('update:modelValue')).toBeFalsy(); +}); + +test('should change active color when using active-color prop', () => { + const wrapper = mount(Switch, { + props: { + modelValue: true, + activeColor: 'black', + }, + }); + + expect(wrapper.element.style.backgroundColor).toEqual('black'); +}); + +test('should change inactive color when using inactive-color prop', () => { + const wrapper = mount(Switch, { + props: { + inactiveColor: 'black', + }, + }); + + expect(wrapper.element.style.backgroundColor).toEqual('black'); +}); + +test('should apply active color to loading icon', () => { + const wrapper = mount(Switch, { + props: { + loading: true, + modelValue: true, + activeColor: 'red', + }, + }); + + const loading = wrapper.find('.van-switch__loading'); + expect(loading.html()).toMatchSnapshot(); +}); + +test('should apply inactive color to loading icon', () => { + const wrapper = mount(Switch, { + props: { + loading: true, + inactiveColor: 'black', + }, + }); + + const loading = wrapper.find('.van-switch__loading'); + expect(loading.html()).toMatchSnapshot(); +}); + +test('should change size when using size prop', () => { + const wrapper = mount(Switch, { + props: { + size: 20, + }, + }); + + expect(wrapper.element.style.fontSize).toEqual('20px'); +}); + +test('should allow to custom active-value and inactive-value', () => { + const wrapper = mount(Switch, { + props: { + modelValue: 'on', + activeValue: 'on', + inactiveValue: 'off', + }, + }); + + expect(wrapper.find('.van-switch--on').exists()).toBeTruthy(); + + wrapper.trigger('click'); + expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('off'); +});