fix(Signature): should render tips correctly (#11794)

packages/vant/src/signature/Signature.tsx

@@ -5,7 +5,12 @@ import {
   defineComponent,
   type ExtractPropTypes,
 } from 'vue';
-import { createNamespace, makeNumberProp, makeStringProp } from '../utils';
+import {
+  inBrowser,
+  makeNumberProp,
+  makeStringProp,
+  createNamespace,
+} from '../utils';
 import { Button } from '../button';
 
 const [name, bem, t] = createNamespace('signature');
@@ -19,6 +24,11 @@ export const signatureProps = {
 
 export type SignatureProps = ExtractPropTypes<typeof signatureProps>;
 
+const hasCanvasSupport = () => {
+  const canvas = document.createElement('canvas');
+  return !!canvas.getContext?.('2d');
+};
+
 export default defineComponent({
   name,
 
@@ -37,10 +47,7 @@ export default defineComponent({
       isSupportTouch: 'ontouchstart' in window,
     });
 
-    const hasCanvasSupport = () => {
+    const isRenderCanvas = inBrowser ? hasCanvasSupport() : true;
-      const canvas = document.createElement('canvas');
-      return !!(canvas.getContext && canvas.getContext('2d'));
-    };
 
     const touchMove = (event: TouchEvent) => {
       if (!state.ctx) {
@@ -118,7 +125,7 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      if (hasCanvasSupport()) {
+      if (isRenderCanvas) {
         state.ctx = canvasRef.value?.getContext('2d');
         state.width = wrapRef.value?.offsetWidth || 0;
         state.height = wrapRef.value?.offsetHeight || 0;
@@ -128,7 +135,7 @@ export default defineComponent({
     return () => (
       <div class={bem()}>
         <div class={bem('content')} ref={wrapRef}>
-          {(hasCanvasSupport() && (
+          {isRenderCanvas ? (
             <canvas
               ref={canvasRef}
               width={state.width}
@@ -137,10 +144,11 @@ export default defineComponent({
               onTouchmovePassive={touchMove}
               onTouchend={touchEnd}
             />
-          )) || <p>{props.tips}</p>}
+          ) : (
+            <p>{props.tips}</p>
+          )}
         </div>
         <div class={bem('footer')}>
-          <p>{props.tips}</p>
           <Button size="small" onClick={clear}>
             {t('cancel')}
           </Button>

packages/vant/src/signature/test/__snapshots__/demo.spec.ts.snap

@@ -10,8 +10,6 @@ exports[`should render demo and match snapshot 1`] = `
       </canvas>
     </div>
     <div class="van-signature__footer">
-      <p>
-      </p>
       <button type="button"
               class="van-button van-button--default van-button--small"
       >
@@ -42,8 +40,6 @@ exports[`should render demo and match snapshot 1`] = `
       </canvas>
     </div>
     <div class="van-signature__footer">
-      <p>
-      </p>
       <button type="button"
               class="van-button van-button--default van-button--small"
       >
@@ -74,8 +70,6 @@ exports[`should render demo and match snapshot 1`] = `
       </canvas>
     </div>
     <div class="van-signature__footer">
-      <p>
-      </p>
       <button type="button"
               class="van-button van-button--default van-button--small"
       >

packages/vant/src/signature/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render tips correctly 1`] = `
+<div class="van-signature">
+  <div class="van-signature__content">
+    <p>
+      Canvas is not supported
+    </p>
+  </div>
+  <div class="van-signature__footer">
+    <button type="button"
+            class="van-button van-button--default van-button--small"
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          Cancel
+        </span>
+      </div>
+    </button>
+    <button type="button"
+            class="van-button van-button--primary van-button--small"
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          Confirm
+        </span>
+      </div>
+    </button>
+  </div>
+</div>
+`;

packages/vant/src/signature/test/index.spec.ts

@@ -56,3 +56,24 @@ test('submit() should output a valid canvas', async () => {
   expect(data.canvas).toBeNull();
   expect(data.filePath).toBe('');
 });
+
+test('should render tips correctly', async () => {
+  const createElement = document.createElement.bind(document);
+
+  const spy = jest.spyOn(document, 'createElement');
+  spy.mockImplementation((tagName, options) => {
+    if (tagName === 'canvas') {
+      return {} as HTMLCanvasElement;
+    }
+    return createElement(tagName, options);
+  });
+
+  const wrapper = mount(Signature, {
+    props: {
+      tips: 'Canvas is not supported',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+  spy.mockRestore();
+});