fix(Switch): custom color invalid when using active-value (#4645)

package.json

@@ -18,7 +18,8 @@
     "build:lib": "yarn && npx gulp -f build/compiler.js --series buildEs buildLib",
     "build:changelog": "vant-cli changelog",
     "upload:weapp": "node build/upload.js",
-    "test": "jest"
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "files": [
     "dist",

packages/switch/index.wxml

@@ -3,13 +3,13 @@
 
 <view
   class="{{ utils.bem('switch', { on: checked === activeValue, disabled }) }} custom-class"
-  style="{{ computed.rootStyle({ size, checked, activeColor, inactiveColor }) }}"
+  style="{{ computed.rootStyle({ size, checked, activeColor, inactiveColor, activeValue }) }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">
     <van-loading
       wx:if="{{ loading }}"
-      color="{{ computed.loadingColor({ checked, activeColor, inactiveColor }) }}"
+      color="{{ computed.loadingColor({ checked, activeColor, inactiveColor, activeValue }) }}"
       custom-class="van-switch__loading"
     />
   </view>

packages/switch/index.wxs

@@ -3,7 +3,7 @@ var style = require('../wxs/style.wxs');
 var addUnit = require('../wxs/add-unit.wxs');
 
 function rootStyle(data) {
-  var currentColor = data.checked ? data.activeColor : data.inactiveColor;
+  var currentColor = data.checked === data.activeValue ? data.activeColor : data.inactiveColor;
 
   return style({
     'font-size': addUnit(data.size),
@@ -15,7 +15,7 @@ var BLUE = '#1989fa';
 var GRAY_DARK = '#969799';
 
 function loadingColor(data) {
-  return data.checked
+  return data.checked === data.activeValue
     ? data.activeColor || BLUE
     : data.inactiveColor || GRAY_DARK;
 }

packages/switch/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`switch should allow to custom active-value and inactive-value 1`] = `
+<wx-view
+  class="van-switch van-switch--on custom-class"
+  style="font-size:30px;background-color:#07c160"
+  bind:tap="onClick"
+>
+  <wx-view
+    class="van-switch__node node-class"
+  />
+</wx-view>
+`;
+
+exports[`switch should allow to custom active-value and inactive-value 2`] = `
+<wx-view
+  class="van-switch custom-class"
+  style="font-size:30px;background-color:#ee0a24"
+  bind:tap="onClick"
+>
+  <wx-view
+    class="van-switch__node node-class"
+  />
+</wx-view>
+`;

packages/switch/test/index.spec.ts

@@ -0,0 +1,50 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+describe('switch', () => {
+  const VanSwitch = simulate.load(
+    path.resolve(__dirname, '../../switch/index'),
+    'van-switch',
+    {
+      rootPath: path.resolve(__dirname, '../../'),
+    }
+  );
+
+  test('should allow to custom active-value and inactive-value', async () => {
+    const comp = simulate.render(
+      simulate.load({
+        usingComponents: {
+          'van-switch': VanSwitch,
+        },
+        template: `
+          <van-switch
+            id="wrapper"
+            checked="{{ checked }}"
+            active-color="#07c160"
+            inactive-color="#ee0a24"
+            active-value="on"
+            inactive-value="off"
+            bind:change="onChange"
+          />
+        `,
+        data: {
+          checked: 'on',
+        },
+        methods: {
+          onChange({ detail }) {
+            this.setData({ checked: detail });
+          },
+        },
+      })
+    );
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const wrapper = comp.querySelector('#wrapper');
+    const btn = wrapper?.querySelector('.van-switch');
+    expect((btn as any).toJSON()).toMatchSnapshot();
+    btn?.dispatchEvent('tap');
+    await simulate.sleep(10);
+    expect((btn as any).toJSON()).toMatchSnapshot();
+    expect(comp.data.checked).toEqual('off');
+  });
+});