From 775d9539ccd9acd925d21ac04d9fc75d2ec28452 Mon Sep 17 00:00:00 2001
From: neverland <jait.chen@foxmail.com>
Date: Sat, 24 Dec 2022 15:33:58 +0800
Subject: [PATCH] chore(Badge): add some test cases for offset prop (#11412)

---
 packages/vant/src/badge/Badge.tsx          |  6 ++-
 packages/vant/src/badge/README.md          |  2 +-
 packages/vant/src/badge/README.zh-CN.md    |  2 +-
 packages/vant/src/badge/test/index.spec.ts | 51 ++++++++++++++++++++++
 4 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/packages/vant/src/badge/Badge.tsx b/packages/vant/src/badge/Badge.tsx
index 341c1ba5c..0287e8649 100644
--- a/packages/vant/src/badge/Badge.tsx
+++ b/packages/vant/src/badge/Badge.tsx
@@ -82,8 +82,10 @@ export default defineComponent({
       if (props.offset) {
         const [x, y] = props.offset;
         const { position } = props;
-        const offsetY = position.indexOf('top') > -1 ? 'top' : 'bottom';
-        const offsetX = position.indexOf('left') > -1 ? 'left' : 'right';
+        const [offsetY, offsetX] = position.split('-') as [
+          'top' | 'bottom',
+          'left' | 'right'
+        ];
 
         if (slots.default) {
           if (typeof y === 'number') {
diff --git a/packages/vant/src/badge/README.md b/packages/vant/src/badge/README.md
index 8e12c5dcc..7f9642703 100644
--- a/packages/vant/src/badge/README.md
+++ b/packages/vant/src/badge/README.md
@@ -139,7 +139,7 @@ Use `position` prop to set the position of badge.
 | color | Background color | _string_ | `#ee0a24` |
 | dot | Whether to show dot | _boolean_ | `false` |
 | max | Max value, show `{max}+` when exceed, only works when content is number | _number \| string_ | - |
-| offset `v3.0.5` | Offset of badge dot | _[number \| string, number \| string]_ | - |
+| offset `v3.0.5` | Offset of badge dot, the two items of the array correspond to the horizontal and vertical offsets | _[number \| string, number \| string]_ | - |
 | show-zero `v3.0.10` | Whether to show badge when content is zero | _boolean_ | `true` |
 | position `v3.2.7` | Badge position, can be set to `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 
diff --git a/packages/vant/src/badge/README.zh-CN.md b/packages/vant/src/badge/README.zh-CN.md
index ffb5024ae..bcb8228b5 100644
--- a/packages/vant/src/badge/README.zh-CN.md
+++ b/packages/vant/src/badge/README.zh-CN.md
@@ -147,7 +147,7 @@ app.use(Badge);
 | color | 徽标背景颜色 | _string_ | `#ee0a24` |
 | dot | 是否展示为小红点 | _boolean_ | `false` |
 | max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
-| offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平和垂直方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
+| offset `v3.0.5` | 设置徽标的偏移量，数组的两项分别对应水平向右和垂直向下方向的偏移量，默认单位为 `px` | _[number \| string, number \| string]_ | - |
 | show-zero `v3.0.10` | 当 content 为数字 0 或字符串 '0' 时，是否展示徽标 | _boolean_ | `true` |
 | position `v3.2.7` | 徽标位置，可选值为 `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
 
diff --git a/packages/vant/src/badge/test/index.spec.ts b/packages/vant/src/badge/test/index.spec.ts
index 2144d9b40..76df97778 100644
--- a/packages/vant/src/badge/test/index.spec.ts
+++ b/packages/vant/src/badge/test/index.spec.ts
@@ -98,6 +98,57 @@ test('should change dot position when using offset prop without children', () =>
   expect(badge.style.marginLeft).toEqual('2px');
 });
 
+test('should change dot position when using offset prop and position is bottom-right', async () => {
+  const wrapper = mount(Badge, {
+    props: {
+      dot: true,
+      offset: [2, '-4rem'],
+      position: 'bottom-right',
+    },
+    slots: {
+      default: () => 'Child',
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.bottom).toEqual('4rem');
+  expect(badge.style.right).toEqual('-2px');
+});
+
+test('should change dot position when using offset prop and position is bottom-left', async () => {
+  const wrapper = mount(Badge, {
+    props: {
+      dot: true,
+      offset: [2, '-4rem'],
+      position: 'bottom-left',
+    },
+    slots: {
+      default: () => 'Child',
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.bottom).toEqual('4rem');
+  expect(badge.style.left).toEqual('2px');
+});
+
+test('should change dot position when using offset prop and position is top-left', async () => {
+  const wrapper = mount(Badge, {
+    props: {
+      dot: true,
+      offset: [2, '-4rem'],
+      position: 'top-left',
+    },
+    slots: {
+      default: () => 'Child',
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.top).toEqual('-4rem');
+  expect(badge.style.left).toEqual('2px');
+});
+
 test('should not render zero when show-zero is false', async () => {
   const wrapper = mount(Badge, {
     props: {