test: 更新单元测试问题

FightingDesign · Oct 7, 2023 · 3c9b107 · 3c9b107
1 parent 768b833
commit 3c9b107
Showing 1 changed file with 37 additions and 27 deletions.
diff --git a/packages/fighting-design/_hooks/use-watermark/index.ts b/packages/fighting-design/_hooks/use-watermark/index.ts
@@ -2,31 +2,37 @@ import { computed } from 'vue'
 import type { WatermarkProps } from '../../watermark'
 import type { ComputedRef } from 'vue'
 
-export type UseWatermarkReturn = ComputedRef<{
+/**
+ * useWatermark 返回值类型接口
+ * 
+ * @param { string } base64 base64 格式图片
+ * @param { number } size 图片尺寸
+ */
+export interface UseWatermarkReturn {
   base64: string
   size: number
-}>
+}
 
 /**
  * 生成水印图片
  * 
  * @param { Object } prop prop 参数
  * @returns 
  */
-export const useWatermark = (prop: WatermarkProps): UseWatermarkReturn => {
-  return computed((): { base64: string; size: number } => {
+export const useWatermark = (prop: WatermarkProps): ComputedRef<UseWatermarkReturn> => {
+  return computed((): UseWatermarkReturn => {
     /**
-    * 创建一个 canvas
-    *
-    * @see Canvas https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
-    */
+     * 创建一个 canvas
+     *
+     * @see Canvas https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
+     */
     const canvas: HTMLCanvasElement = document.createElement('canvas')
 
     /**
-    * 设备像素比率
-    *
-    * @see Window.devicePixelRatio https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
-    */
+     * 设备像素比率
+     *
+     * @see Window.devicePixelRatio https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
+     */
     const devicePixeRatio: number = window.devicePixelRatio || 1
 
     /** 文字大小 */
@@ -41,24 +47,28 @@ export const useWatermark = (prop: WatermarkProps): UseWatermarkReturn => {
      */
     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
 
-    const { width } = ctx.measureText(prop.content)
+    if (ctx) {
+      const { width } = ctx.measureText(prop.content)
+
+      const cavasSize: number = Math.max(100, width) * devicePixeRatio + prop.gap
 
-    const cavasSize = Math.max(100, width) * devicePixeRatio + prop.gap
+      canvas.width = cavasSize
+      canvas.height = cavasSize
 
-    canvas.width = cavasSize
-    canvas.height = cavasSize
+      ctx.translate(canvas.width / 2, canvas.height / 2)
+      ctx.rotate((Math.PI / 190) * -45)
+      ctx.fillStyle = prop.fontColor
+      ctx.font = font
+      ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
+      ctx.fillText(prop.content, 0, 0)
 
-    ctx.translate(canvas.width / 2, canvas.height / 2)
-    ctx.rotate((Math.PI / 190) * -45)
-    ctx.fillStyle = prop.fontColor
-    ctx.font = font
-    ctx.textAlign = 'center'
-    ctx.textBaseline = 'middle'
-    ctx.fillText(prop.content, 0, 0)
+      return {
+        base64: canvas.toDataURL(),
+        size: cavasSize / devicePixeRatio
+      } as const
+    }
 
-    return {
-      base64: canvas.toDataURL(),
-      size: cavasSize / devicePixeRatio
-    } as const
+    return { base64: '', size: 0 }
   })
 }