feat: signature组件增加单元测试、文档和demo国际化 (#205)

package.json

@@ -123,6 +123,7 @@
     "husky": "^6.0.0",
     "inquirer": "^8.0.0",
     "jest": "^27.5.1",
+    "jest-canvas-mock": "^2.4.0",
     "lint-staged": "^11.0.0",
     "lzutf8": "0.6.0",
     "map-stream": "0.0.7",

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`props test 1`] = `"<div class=\\"nut-signature test-signature\\"><div class=\\"nut-signature__inner\\"><canvas height=\\"0\\" width=\\"0\\"></canvas></div><div class=\\"nut-button nut-button--default nut-button--normal nut-button--round nut-signature__btn\\"><div class=\\"nut-button__warp\\">重签</div></div><div class=\\"nut-button nut-button--primary nut-button--normal nut-button--round nut-signature__btn\\"><div class=\\"nut-button__warp\\">确认</div></div></div>"`;

src/packages/signature/__test__/signature.spec.tsx

+import * as React from 'react'
+import { fireEvent, render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import 'jest-canvas-mock'
+
+import { Signature } from '../signature'
+
+test('props test', () => {
+  const testClick = jest.fn()
+  const { container } = render(
+    <Signature
+      className="test-signature"
+      lineWidth={4}
+      strokeStyle="green"
+      confirm={(canvas: HTMLCanvasElement, data: string) =>
+        testClick(canvas, data)
+      }
+    />
+  )
+  expect(container.querySelector('.nut-signature')).toHaveClass(
+    'test-signature'
+  )
+  expect(container?.innerHTML).toMatchSnapshot()
+  const btns = container.querySelectorAll('.nut-signature__btn')
+  expect(btns.length).toBe(2)
+  fireEvent.click(btns[1])
+  expect(testClick).toBeCalled()
+  expect(testClick).toBeCalledTimes(1)
+
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  if (ctx) {
+    ctx.lineWidth = 4
+    ctx.strokeStyle = 'green'
+    ctx.beginPath()
+    ctx.lineTo(10, 50)
+    ctx.lineTo(80, 120)
+    ctx.stroke()
+    const _img = document.createElement('img')
+    _img.src = canvas.toDataURL()
+    expect(canvas.toDataURL()).not.toBeNull()
+  }
+})

src/packages/signature/demo.tsx

 import React from 'react'
 import { Signature } from './signature'
+import { useTranslate } from '../../sites/assets/locale'
+
+interface T {
+  basic: string
+  title: string
+  tips: string
+}
 
 const SignatureDemo = () => {
+  const [translated] = useTranslate<T>({
+    'zh-CN': {
+      basic: '基本用法',
+      title: '修改颜色和签字粗细',
+      tips: 'Tips: 点击确认按钮,下方显示签名图片',
+    },
+    'zh-TW': {
+      basic: '基本用法',
+      title: '修改顏色和簽字粗細',
+      tips: 'Tips: 點擊確認按鈕,下方顯示簽名圖片',
+    },
+    'en-US': {
+      basic: 'Basic Usage',
+      title: 'Modify color and signature thickness',
+      tips: 'Tips: click the confirm button, and the signature image is displayed below',
+    },
+  })
   const confirm = (canvas: HTMLCanvasElement, data: string) => {
     const img = document.createElement('img')
     img.src = data
@@ -33,12 +57,12 @@ const SignatureDemo = () => {
   return (
     <>
       <div className="demo">
-        <h2>基础用法</h2>
+        <h2>{translated.basic}</h2>
         <Signature confirm={confirm} clear={clear} />
         <p className="demo-tips demo1" style={demoStyles}>
-          Tips: 点击确认按钮,下方显示签名图片
+          {translated.tips}
         </p>
-        <h2>修改颜色和签字粗细</h2>
+        <h2> {translated.title}</h2>
         <Signature
           lineWidth={4}
           strokeStyle="green"
@@ -46,7 +70,7 @@ const SignatureDemo = () => {
           clear={clear1}
         />
         <p className="demo-tips demo2" style={demoStyles}>
-          Tips: 点击确认按钮,下方显示签名图片
+          {translated.tips}
         </p>
       </div>
     </>

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

-# Signature 签名
+# Signature 
 
-### 介绍
+### Intro
 
-基于 Canvas 的签名组件
+Signature component based on canvas.
 
-### 安装
+### Install
 
 ```javascript
 import { Signature } from '@nutui/nutui-react'
 ```
 
-## 代码演示
+## Demo
 
-### 基础用法
+### Basic usage
 
 :::demo
 
@@ -38,7 +38,7 @@ const App = () => {
     <>
         <Signature confirm={confirm} clear={clear} />
         <p className="demo-tips demo" style={demoStyles}>
-            Tips: 点击确认按钮,下方显示签名图片
+           Tips: click the confirm button, and the signature image is displayed below
         </p>
     </>
     );
@@ -48,7 +48,7 @@ export default App;
 
 :::
 
-### 修改颜色和签字粗细
+### Modify color and signature thickness
 
 :::demo
 
@@ -79,7 +79,7 @@ const App = () => {
             clear={clear}
          />
         <p className="demo-tips demo" style={demoStyles}>
-            Tips: 点击确认按钮,下方显示签名图片
+            Tips: click the confirm button, and the signature image is displayed below
         </p>
     </>
     );
@@ -93,17 +93,17 @@ export default App;
 
 ### Props
 
-| 参数           | 说明                           | 类型   | 默认值                                              |
+| Attribute           | Description                           | Type   | Default                                              |
 | -------------- | ------------------------------ | ------ | --------------------------------------------------- |
-| custom-class   | 自定义 class                   | String | -                                                   |
-| line-width     | 线条的宽度                     | Number | 3                                                   |
-| stroke-style   | 绘图笔触颜色                   | String | '#000'                                              |
-| type           | 图片格式                       | String | 'png'                                               |
-| un-support-tpl | 不支持 Canvas 情况下的展示文案 | String | '对不起，当前浏览器不支持 Canvas，无法使用本控件！' |
+| customClass   |  Custom class                 | String | -                                                   |
+| lineWidth     | Width of line                    | Number | 3                                                   |
+| strokeStyle   | Drawing stroke color                   | String | '#000'                                              |
+| type           | Picture format                       | String | 'png'                                               |
+| unSupportTpl |  Display copy without canvas | String | 'sorry, the current browser doesn't support canvas, so we can't use this control! ' |
 
 ## Event
 
 | 字段    | 说明                         | 回调参数                         |
 | ------- | ---------------------------- | -------------------------------- |
-| confirm | 点击确认按钮触发事件回调函数 | canvas 和签名图片展示的 data URI |
-| clear   | 点击重签按钮触发事件回调函数 | 无                               |
+| confirm | Click the confirm button to trigger the event callback function | Canvas and data URI displayed by signature imageURI |
+| clear   | Click the re sign button to trigger the event callback function | -                               |

src/packages/signature/doc.md

@@ -95,15 +95,15 @@ export default App;
 
 | 参数           | 说明                           | 类型   | 默认值                                              |
 | -------------- | ------------------------------ | ------ | --------------------------------------------------- |
-| custom-class   | 自定义 class                   | String | -                                                   |
-| line-width     | 线条的宽度                     | Number | 3                                                   |
-| stroke-style   | 绘图笔触颜色                   | String | '#000'                                              |
+| customClass   | 自定义 class                   | String | -                                                   |
+| lineWidth     | 线条的宽度                     | Number | 3                                                   |
+| strokeStyle   | 绘图笔触颜色                   | String | '#000'                                              |
 | type           | 图片格式                       | String | 'png'                                               |
-| un-support-tpl | 不支持 Canvas 情况下的展示文案 | String | '对不起，当前浏览器不支持 Canvas，无法使用本控件！' |
+| unSupportTpl | 不支持 Canvas 情况下的展示文案 | String | '对不起，当前浏览器不支持 Canvas，无法使用本控件！' |
 
 ## Event
 
 | 字段    | 说明                         | 回调参数                         |
 | ------- | ---------------------------- | -------------------------------- |
 | confirm | 点击确认按钮触发事件回调函数 | canvas 和签名图片展示的 data URI |
-| clear   | 点击重签按钮触发事件回调函数 | 无                               |
+| clear   | 点击重签按钮触发事件回调函数 | -                              |

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

-# Signature 签名
+# Signature 簽名
 
-### 介绍
+### 介紹
 
-基于 Canvas 的签名组件
+基於 Canvas 的簽名組件
 
-### 安装
+### 安裝
 
 ```javascript
 import { Signature } from '@nutui/nutui-react'
 ```
 
-## 代码演示
+## 代碼演示
 
-### 基础用法
+### 基礎用法
 
 :::demo
 
@@ -38,7 +38,7 @@ const App = () => {
     <>
         <Signature confirm={confirm} clear={clear} />
         <p className="demo-tips demo" style={demoStyles}>
-            Tips: 点击确认按钮,下方显示签名图片
+            Tips: 點擊確認按鈕,下方顯示簽名圖片
         </p>
     </>
     );
@@ -48,7 +48,7 @@ export default App;
 
 :::
 
-### 修改颜色和签字粗细
+### 修改顏色和簽字粗細
 
 :::demo
 
@@ -79,7 +79,7 @@ const App = () => {
             clear={clear}
          />
         <p className="demo-tips demo" style={demoStyles}>
-            Tips: 点击确认按钮,下方显示签名图片
+            Tips: 點擊確認按鈕,下方顯示簽名圖片
         </p>
     </>
     );
@@ -93,17 +93,17 @@ export default App;
 
 ### Props
 
-| 参数           | 说明                           | 类型   | 默认值                                              |
+| 參數           | 說明                           | 類型   | 默認值                                              |
 | -------------- | ------------------------------ | ------ | --------------------------------------------------- |
-| custom-class   | 自定义 class                   | String | -                                                   |
-| line-width     | 线条的宽度                     | Number | 3                                                   |
-| stroke-style   | 绘图笔触颜色                   | String | '#000'                                              |
-| type           | 图片格式                       | String | 'png'                                               |
-| un-support-tpl | 不支持 Canvas 情况下的展示文案 | String | '对不起，当前浏览器不支持 Canvas，无法使用本控件！' |
+| customClass   | 自定義 class                   | String | -                                                   |
+| lineWidth     | 線條的寬度                     | Number | 3                                                   |
+| strokeStyle   | 繪圖筆觸顏色                   | String | '#000'                                              |
+| type           | 圖片格式                       | String | 'png'                                               |
+| unSupportTpl | 不支持 Canvas 情況下的展示文案 | String | '對不起，當前瀏覽器不支持 Canvas，無法使用本控件！' |
 
 ## Event
 
-| 字段    | 说明                         | 回调参数                         |
+| 字段    | 說明                         | 回調參數                         |
 | ------- | ---------------------------- | -------------------------------- |
-| confirm | 点击确认按钮触发事件回调函数 | canvas 和签名图片展示的 data URI |
-| clear   | 点击重签按钮触发事件回调函数 | 无                               |
+| confirm | 點擊確認按鈕觸發事件回調函數 | canvas 和簽名圖片展示的 data URI |
+| clear   | 點擊重簽按鈕觸發事件回調函數 | -                               |

src/packages/signature/signature.scss

 @import '../button/button';
 .nut-signature {
   &__inner {
-    height: 10rem;
-    margin-bottom: 1rem;
-    border: 1px solid $signature-border-color;
+    height: $signature-height;
+    margin-bottom: $signature-margin-bottom;
+    border: $signature-border-width solid $signature-border-color;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -12,6 +12,6 @@
     font-size: $font-size-base;
   }
   &__btn {
-    margin-right: 15px !important;
+    margin-right: $signature-btn-margin-right !important;
   }
 }

src/packages/signature/signature.tsx

@@ -119,6 +119,8 @@ export const Signature: FunctionComponent<
       case 'jpg':
         dataurl = canvas.toDataURL('image/jpeg', 0.8)
         break
+      default:
+        dataurl = canvas.toDataURL('image/png')
     }
     clear()
     props.confirm && props.confirm(canvas, dataurl as string)

src/styles/variables.scss

@@ -338,6 +338,10 @@ $radio-label-button-background: rgba(240, 37, 15, 0.05) !default;
 
 // signature
 $signature-border-color: #dadada;
+$signature-border-width: 1px;
+$signature-height: 10rem;
+$signature-margin-bottom: 1rem;
+$signature-btn-margin-right: 15px;
 
 //fixednav
 $fixednav-bg-color: $white;

src/utils/test/event.ts

@@ -42,6 +42,12 @@ export function trigger(
   el.dispatchEvent(event)
 }
 
+export function sleep(delay = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay)
+  })
+}
+
 // simulate drag gesture
 export function triggerDrag(el: any, relativeX = 0, relativeY = 0): void {
   let x = relativeX