diff --git a/packages/switch/index.tsx b/packages/switch/index.tsx
index 1354a8307..cba941e8b 100644
--- a/packages/switch/index.tsx
+++ b/packages/switch/index.tsx
@@ -21,14 +21,16 @@ function Switch(
) {
const { value, loading, disabled, activeValue, inactiveValue } = props;
+ const checked = value === activeValue;
+
const style = {
fontSize: props.size,
- backgroundColor: value ? props.activeColor : props.inactiveColor
+ backgroundColor: checked ? props.activeColor : props.inactiveColor
};
const onClick = () => {
if (!disabled && !loading) {
- const newValue = value === activeValue ? inactiveValue : activeValue;
+ const newValue = checked ? inactiveValue : activeValue;
emit(ctx, 'input', newValue);
emit(ctx, 'change', newValue);
}
@@ -37,7 +39,7 @@ function Switch(
return (
+`;
diff --git a/packages/switch/test/index.spec.js b/packages/switch/test/index.spec.js
index a05bdc9ff..bbc2987d2 100644
--- a/packages/switch/test/index.spec.js
+++ b/packages/switch/test/index.spec.js
@@ -37,3 +37,38 @@ test('disabled', () => {
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, {
+ propsData: {
+ value: '1',
+ activeValue: '1',
+ inactiveValue: '2'
+ },
+ context: {
+ on: {
+ input,
+ change
+ }
+ }
+ });
+
+ wrapper.trigger('click');
+
+ expect(input).toHaveBeenCalledWith('2');
+ expect(change).toHaveBeenCalledWith('2');
+});
+
+test('inactive-color prop', () => {
+ const wrapper = mount(Switch, {
+ propsData: {
+ value: '2',
+ inactiveValue: '2',
+ inactiveColor: 'black'
+ }
+ });
+
+ expect(wrapper).toMatchSnapshot();
+});