Repository: IduxFE/components
Pull request #135 (2021-01-12 10:09:37)

fix(comp: badge): overflowCount not work (#134)
## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] The commit message follows [our guidelines](https://github.com/IduxFE/components/blob/main/docs/contributing.zh.md#commit)
- [x] Tests for the changes have been added/updated or not needed
- [x] Docs and demo have been added/updated or not needed

## PR Type

What kind of change does this PR introduce?

- [x] Bugfix
- [ ] Feature
- [ ] Component style update
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Application (the showcase website) / infrastructure changes
- [ ] Other... Please describe:

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->

## What is the new behavior?

## Other information


codecov[bot]: # [Codecov](https://codecov.io/gh/IduxFE/components/pull/135?src=pr&el=h1) Report
> Merging [#135](https://codecov.io/gh/IduxFE/components/pull/135?src=pr&el=desc) (9bb16ae) into [main](https://codecov.io/gh/IduxFE/components/commit/049482133640553eea214dfd54ca28dc63543dd4?el=desc) (0494821) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://codecov.io/gh/IduxFE/components/pull/135/graphs/tree.svg?width=650&height=150&src=pr&token=PGAUXP06V3)](https://codecov.io/gh/IduxFE/components/pull/135?src=pr&el=tree)

```diff
@@           Coverage Diff           @@
##             main     #135   +/-   ##
=======================================
  Coverage   96.23%   96.23%           
=======================================
  Files          50       50           
  Lines         771      771           
  Branches      141      141           
=======================================
  Hits          742      742           
  Misses         11       11           
  Partials       18       18           
```


| [Impacted Files](https://codecov.io/gh/IduxFE/components/pull/135?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [packages/components/badge/src/Badge.vue](https://codecov.io/gh/IduxFE/components/pull/135/diff?src=pr&el=tree#diff-cGFja2FnZXMvY29tcG9uZW50cy9iYWRnZS9zcmMvQmFkZ2UudnVl) | `100.00% <100.00%> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/IduxFE/components/pull/135?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/IduxFE/components/pull/135?src=pr&el=footer). Last update [0494821...232100a](https://codecov.io/gh/IduxFE/components/pull/135?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).

danranVm: 讨论后决定，移除 `overflowCount` 的 `string` 支持，麻烦修改下相关的类型定义和文档。

Patch:
diff --git a/packages/cdk/utils/typeof.ts b/packages/cdk/utils/typeof.ts
index 416404c7..99257013 100644
--- a/packages/cdk/utils/typeof.ts
+++ b/packages/cdk/utils/typeof.ts
@@ -68,3 +68,7 @@ export function isDate(val: unknown): val is Date {
 export function isPromise<T = any>(val: unknown): val is Promise<T> {
   return isObject(val) && isFunction(val.then) && isFunction(val.catch)
 }
+
+export function hasOwnProperty(val: Record<string | symbol, unknown>, key: string | symbol): key is keyof typeof val {
+  return Object.prototype.hasOwnProperty.call(val, key)
+}
diff --git a/packages/components/badge/demo/Basic.vue b/packages/components/badge/demo/Basic.vue
index 7b2b3432..1f0796ff 100644
--- a/packages/components/badge/demo/Basic.vue
+++ b/packages/components/badge/demo/Basic.vue
@@ -12,7 +12,7 @@
       <a href="#"></a>
     </ix-badge>
 
-    <ix-badge count="1000" overflowCount="999">
+    <ix-badge count="1000" :overflowCount="999">
       <a href="#"></a>
     </ix-badge>
 
diff --git a/packages/components/badge/docs/index.zh.md b/packages/components/badge/docs/index.zh.md
index b25c9daa..5e4e1b95 100644
--- a/packages/components/badge/docs/index.zh.md
+++ b/packages/components/badge/docs/index.zh.md
@@ -26,7 +26,7 @@ cover:
 | --- | --- | --- | --- | --- | --- |
 | `dot` | 圆点徽标 | `boolean` | `false`  | ✅ | - |
 | `count` | 数值徽标的值 | `number\|string` | `0` | - | - |
-| `overflowCount` | 最大数值徽标的值 | `number\|string` | `99` | ✅ | 超出以`${overflowCount}+`显示 |
+| `overflowCount` | 最大数值徽标的值 | `number` | `99` | ✅ | 超出以`${overflowCount}+`显示 |
 | `showZero`| 数值为 0 时是否显示 | `boolean` | `false` | ✅ | - |
 | `color` | 徽标的颜色 | `string` | - | - | 数值徽标和圆点徽标为设置背景色，组件徽标为字体颜色 |
 
diff --git a/packages/components/badge/src/Badge.vue b/packages/components/badge/src/Badge.vue
index 384ad044..4d769db4 100644
--- a/packages/components/badge/src/Badge.vue
+++ b/packages/components/badge/src/Badge.vue
@@ -12,7 +12,7 @@ import type { ComputedRef } from 'vue'
 import type { BadgeProps } from './types'
 
 import { computed, defineComponent } from 'vue'
-import { hasSlot, isNumeric, PropTypes } from '@idux/cdk/utils'
+import { hasSlot, isNumeric, PropTypes, toNumber } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/core/config'
 
 export default defineComponent({
@@ -20,7 +20,7 @@ export default defineComponent({
   props: {
     count: PropTypes.oneOfType([Number, String]).def(0),
     showZero: PropTypes.bool,
-    overflowCount: PropTypes.oneOfType([Number, String]),
+    overflowCount: PropTypes.number,
     dot: PropTypes.bool,
     color: PropTypes.string,
   },
@@ -59,8 +59,10 @@ const useCountValue = (
       if (!showZero.value && +props.count === 0) {
         return false
       }
-      if (isNumeric(props.count) && isNumeric(overflowCount.value)) {
-        return props.count > overflowCount.value ? `${overflowCount.value}+` : `${props.count}`
+      if (isNumeric(props.count)) {
+        return props.count > toNumber(overflowCount.value, Number.MAX_VALUE)
+          ? `${overflowCount.value}+`
+          : `${props.count}`
       }
       return props.count
     }


Test patch:
diff --git a/packages/cdk/utils/__tests__/typeof.spec.ts b/packages/cdk/utils/__tests__/typeof.spec.ts
index e6326e4f..adcb2bc8 100644
--- a/packages/cdk/utils/__tests__/typeof.spec.ts
+++ b/packages/cdk/utils/__tests__/typeof.spec.ts
@@ -16,6 +16,7 @@ import {
   isNil,
   isNonNil,
   isNumeric,
+  hasOwnProperty,
 } from '../typeof'
 
 describe('typeof.ts', () => {
@@ -154,4 +155,21 @@ describe('typeof.ts', () => {
     expect(isPromise({})).toEqual(false)
     expect(isPromise(function () {})).toEqual(false)
   })
+
+  test('hasOwnProperty work', () => {
+    const object1 = { prop: 1 }
+    expect(hasOwnProperty(object1, 'prop')).toEqual(true)
+    expect(hasOwnProperty(object1, 'toString')).toEqual(false)
+    expect(hasOwnProperty(object1, 'hasOwnProperty')).toEqual(false)
+
+    const object2 = new Object() as { prop: unknown; test?: unknown }
+    object2.prop = null
+    expect(hasOwnProperty(object2, 'prop')).toEqual(true)
+    object2.prop = undefined
+    expect(hasOwnProperty(object2, 'prop')).toEqual(true)
+
+    expect(hasOwnProperty(object2, 'test')).toEqual(false)
+    object2.test = undefined
+    expect(hasOwnProperty(object2, 'test')).toEqual(true)
+  })
 })
diff --git a/packages/components/badge/__tests__/__snapshots__/badge.spec.ts.snap b/packages/components/badge/__tests__/__snapshots__/badge.spec.ts.snap
index bbcf8087..d8826276 100644
--- a/packages/components/badge/__tests__/__snapshots__/badge.spec.ts.snap
+++ b/packages/components/badge/__tests__/__snapshots__/badge.spec.ts.snap
@@ -18,6 +18,10 @@ exports[`Badge.vue overflowCount work 1`] = `"<sup class=\\"ix-badge ix-badge-em
 
 exports[`Badge.vue overflowCount work 2`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">999+</sup>"`;
 
+exports[`Badge.vue overflowCount work 3`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">999+</sup>"`;
+
+exports[`Badge.vue overflowCount work 4`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count\\">1000</sup>"`;
+
 exports[`Badge.vue render work 1`] = `"<span class=\\"ix-badge-wrapper\\"><sup class=\\"ix-badge ix-badge-empty ix-badge-count ix-badge-hide-zero\\"><!--v-if--></sup></span>"`;
 
 exports[`Badge.vue showZero work 1`] = `"<sup class=\\"ix-badge ix-badge-empty ix-badge-count ix-badge-hide-zero\\"><!--v-if--></sup>"`;
diff --git a/packages/components/badge/__tests__/badge.spec.ts b/packages/components/badge/__tests__/badge.spec.ts
index 485c0bee..21d5679d 100644
--- a/packages/components/badge/__tests__/badge.spec.ts
+++ b/packages/components/badge/__tests__/badge.spec.ts
@@ -57,6 +57,12 @@ describe('Badge.vue', () => {
     await wrapper.setProps({ count: '1000', overflowCount: 999 })
     expect(badge.text()).toBe('999+')
     expect(badge.html()).toMatchSnapshot()
+    await wrapper.setProps({ count: '1000', overflowCount: '999' })
+    expect(badge.text()).toBe('999+')
+    expect(badge.html()).toMatchSnapshot()
+    await wrapper.setProps({ count: '1000', overflowCount: 'xxx' })
+    expect(badge.text()).toBe('1000')
+    expect(badge.html()).toMatchSnapshot()
   })
 
   // 圆点徽标呈现