feat: Badge 增加测试用例，修改top、right 值的适配，去掉doc中的hidden属性，无此属性。 (#269)

package.json

@@ -58,9 +58,8 @@
     "prepare": "husky install",
     "test": "jest",
     "test:demo": "jest  --testNamePattern=^should match snapshot$ --runTestsByPath ./src/packages/collapse/__test__/collapse.spec.tsx",
-
     "generate:file:taro": "node scripts/taro/generate-nutui-taro.js",
-    "checked:taro":"npm run generate:file:taro && tsc --project ./tsconfig.taro.json",
+    "checked:taro": "npm run generate:file:taro && tsc --project ./tsconfig.taro.json",
     "generate:file:taro:pages": "node scripts/taro/generate-taro-pages.js",
     "dev:taro:weapp": "npm run checked:taro && npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:weapp",
     "replace:taro:types": "node scripts/taro/replace-taro-types-alias.js",

src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match custom icons 1`] = `
+<DocumentFragment>
+  <div
+    class="nut-badge"
+  >
+    <div
+      class="slot-icons"
+    >
+      <i
+        class="nutui-iconfont nut-icon nut-icon-link _icon"
+        style="color: rgb(255, 255, 255); font-size: 12px; width: 12px; height: 12px;"
+      />
+    </div>
+    <div />
+    <div
+      class=" nut-badge__content sup"
+      style="top: 0px; right: 0px; z-index: 0;"
+    >
+      200
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="nut-badge"
+  >
+    <div />
+    <div
+      class=" nut-badge__content sup"
+      style="top: 0px; right: 0px; z-index: 0;"
+    >
+      8
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/packages/badge/__test__/badge.spec.tsx

+import * as React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { Badge } from '../badge'
+
+test('should match snapshot', () => {
+  const { asFragment } = render(<Badge value={8} />)
+  expect(asFragment()).toMatchSnapshot()
+})
+
+test('should match value is string', () => {
+  const { container } = render(<Badge value="new" />)
+  const badgeContent = container.querySelectorAll('.nut-badge__content')[0]
+  expect(badgeContent).toHaveTextContent('new')
+})
+
+test('should match max size', () => {
+  const { container } = render(<Badge value={200} max={9} />)
+  const badgeContent = container.querySelectorAll('.nut-badge__content')[0]
+  expect(badgeContent.textContent).toBe('9+')
+})
+
+test('should match dot', () => {
+  const { container } = render(<Badge value={10} dot />)
+  const badgeContent = container.querySelectorAll('.nut-badge__content.is-dot')
+  expect(badgeContent.length).toBe(1)
+})
+
+test('should match top、right: bad number', () => {
+  const { container } = render(<Badge value={10} top="--10" right="0" />)
+  const badgeContent = container.querySelectorAll('.nut-badge__content')[0]
+  expect(badgeContent).toHaveStyle({ top: '0px' })
+})
+
+test('should match top、right: have px', () => {
+  const { container } = render(<Badge value={10} top="-10px" right="0" />)
+  const badgeContent = container.querySelectorAll('.nut-badge__content')[0]
+  expect(badgeContent).toHaveStyle({ top: '-10px', right: '0px' })
+})
+
+test('should match top、right: float', () => {
+  const { container } = render(<Badge value={10} top="-10.8px" right="0.5px" />)
+  const badgeContent = container.querySelectorAll('.nut-badge__content')[0]
+  expect(badgeContent).toHaveStyle({ top: '-10.8px', right: '0.5px' })
+})
+
+test('should match custom color', () => {
+  const { container } = render(<Badge value={200} color="orange" />)
+  const badgeContent = container.querySelectorAll('.nut-badge__content')[0]
+  expect(badgeContent).toHaveStyle({ 'background-color': 'orange' })
+})
+
+// test('should match custom gradient color', () => {
+//   const { container } = render(
+//     <Badge
+//       value={200}
+//       color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
+//     />
+//   )
+//   const badgeContent = container.querySelectorAll('.nut-badge__content')[0]
+//   expect(badgeContent).toHaveStyle({
+//     'background-color':
+//       'linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)',
+//   })
+// })
+
+test('should match custom icons', () => {
+  const { asFragment } = render(<Badge value={200} icons="link" />)
+  expect(asFragment()).toMatchSnapshot()
+})

src/packages/badge/badge.taro.tsx

@@ -41,10 +41,10 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
   }
   const getStyle = () => {
     const style: CSSProperties = {}
-    style.top = `${top}px`
-    style.right = `${right}px`
+    style.top = `${Number(top) || parseFloat(top) || 0}px`
+    style.right = `${Number(right) || parseFloat(right) || 0}px`
     style.zIndex = zIndex
-    style.background = color
+    style.backgroundColor = color
     return style
   }
   return (

src/packages/badge/badge.tsx

@@ -41,10 +41,10 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
   }
   const getStyle = () => {
     const style: CSSProperties = {}
-    style.top = `${top}px`
-    style.right = `${right}px`
+    style.top = `${Number(top) || parseFloat(top) || 0}px`
+    style.right = `${Number(right) || parseFloat(right) || 0}px`
     style.zIndex = zIndex
-    style.background = color
+    style.backgroundColor = color
     return style
   }
   return (

src/packages/badge/doc.en-US.md

@@ -192,11 +192,10 @@ export default App;
 |---------|--------------------------------------------|---------|-----------|
 | value   | value to show                                 | String  | -         |
 | max     | when value is number, it's the max size                     | Number  | `10000`   |
-| z-index |  z-index                          | Number  | `10`      |
-| dot     | Is dotted                                 | Boolean | `false`   |
-| hidden  | Is hidden                                   | Boolean | `false`   |
-| top     | Up and down offset, support unit setting, can be set to: 5px, etc. | Number  | `0`       |
-| right   | Left and right offset, support unit setting, can be set to: 5px, etc. | Number  | `0`       |
+| zIndex |  z-index                          | Number  | `10`      |
+| dot     | Is dotted    | Boolean | `false`   |
+| top     | Up and down offset, support unit setting, can be set to: 5, etc. | Number  | `0`       |
+| right   | Left and right offset, support unit setting, can be set to: 5, etc. | Number  | `0`       |
 | color   | background color                                | String  | `#fa2c19` |
 | icons   | custom icons                               | String  | - |
 

src/packages/badge/doc.md

@@ -190,15 +190,11 @@ export default App;
 
 | 字段    | 说明                                       | 类型    | 默认值    |
 |---------|--------------------------------------------|---------|-----------|
-| value   | 显示的内容                                 | String  | -         |
-| max     | value 为数值时，最大值                     | Number  | `10000`   |
-| z-index | 徽标的 z-index 值                          | Number  | `10`      |
-| dot     | 是否为小点                                 | Boolean | `false`   |
-| hidden  | 是否隐藏                                   | Boolean | `false`   |
-| top     | 上下偏移量，支持单位设置，可设置为：5px 等 | Number  | `0`       |
-| right   | 左右偏移量，支持单位设置，可设置为：5px 等 | Number  | `0`       |
-| color   | 徽标背景颜色                               | String  | `#fa2c19` |
-| icons   | 徽标自定义                               | String  | - |
-
-
-
+| value   | 显示的内容  | String  | -         |
+| max     | value 为数值时，最大值 | Number  | `10000`   |
+| zIndex | 徽标的 z-index 值 | Number  | `10`      |
+| dot     | 是否为小点 | Boolean | `false`   |
+| top     | 上下偏移量，支持单位设置，可设置为：5 等 | Number  | `0`       |
+| right   | 左右偏移量，支持单位设置，可设置为：5 等 | Number  | `0`       |
+| color   | 徽标背景颜色 | String  | `#fa2c19` |
+| icons   | 徽标自定义 | String  | - |

src/packages/badge/doc.zh-TW.md

@@ -103,16 +103,11 @@ import { Badge } from '@nutui/nutui-react';
 | 字段    | 說明                                       | 類型    | 默認值    |
 |---------|--------------------------------------------|---------|-----------|
 | value   | 顯示的內容                                 | String  | -         |
-| max     | value 為數值時，最大值
-                     | Number  | `10000`   |
-| z-index | 徽標的 z-index 值
-                         | Number  | `10`      |
-| dot     | 是否為小點
-                                 | Boolean | `false`   |
-| hidden  | 是否隱藏
-                                   | Boolean | `false`   |
-| top     | 上下偏移量，支持單位設置，可設置為：5px 等 | Number  | `0`       |
-| right   | 左右偏移量，支持單位設置，可設置為：5px 等 | Number  | `0`       |
+| max     | value 為數值時，最大值 | Number  | `10000`   |
+| zIndex | 徽標的 z-index 值 | Number  | `10`      |
+| dot     | 是否為小點 | Boolean | `false`   |
+| top     | 上下偏移量，支持單位設置，可設置為：5 等 | Number  | `0`       |
+| right   | 左右偏移量，支持單位設置，可設置為：5 等 | Number  | `0`       |
 | color   | 徽標背景顏色                               | String  | `#fa2c19` |
 | icons   | 徽標自定義                               | String  | - |