Fixed #7174 - Unit tests related to Signaturepad failing

src/question_signaturepad.ts

@@ -12,7 +12,7 @@ import { ITheme } from "./themes";
 var defaultWidth = 300;
 var defaultHeight = 200;
 
-function resizeCanvas(canvas: HTMLCanvasElement) {
+export function getCanvasRatio(canvas: HTMLCanvasElement): number {
   var context: any = canvas.getContext("2d");
   var devicePixelRatio = window.devicePixelRatio || 1;
   var backingStoreRatio =
@@ -23,7 +23,12 @@ function resizeCanvas(canvas: HTMLCanvasElement) {
     context.backingStorePixelRatio ||
     1;
 
-  var ratio = devicePixelRatio / backingStoreRatio;
+  return devicePixelRatio / backingStoreRatio;
+}
+
+function resizeCanvas(canvas: HTMLCanvasElement) {
+  var context: any = canvas.getContext("2d");
+  var ratio = getCanvasRatio(canvas);
 
   var oldWidth = canvas.width;
   var oldHeight = canvas.height;
@@ -94,7 +99,7 @@ export class QuestionSignaturePadModel extends Question {
     }
   }
   public themeChanged(theme: ITheme): void {
-    if(!!this.signaturePad) {
+    if (!!this.signaturePad) {
       this.updateColors(this.signaturePad);
     }
   }
@@ -266,7 +271,7 @@ export class QuestionSignaturePadModel extends Question {
    *
    * Default value: `true`
    */
-  @property({ }) showPlaceholder: boolean;
+  @property({}) showPlaceholder: boolean;
 
   public needShowPlaceholder(): boolean {
     const showPlaceholder = this.showPlaceholder;
@@ -282,12 +287,12 @@ export class QuestionSignaturePadModel extends Question {
   endLoadingFromJson(): void {
     super.endLoadingFromJson();
     //todo: need to remove this code
-    if(this.signatureWidth === 300 && !!this.width && typeof this.width === "number" && this.width) {
+    if (this.signatureWidth === 300 && !!this.width && typeof this.width === "number" && this.width) {
       ConsoleWarnings.warn("Use signatureWidth property to set width for the signature pad");
       this.signatureWidth = this.width;
       this.width = undefined;
     }
-    if(this.signatureHeight === 200 && !!this.height) {
+    if (this.signatureHeight === 200 && !!this.height) {
       ConsoleWarnings.warn("Use signatureHeight property to set width for the signature pad");
       this.signatureHeight = this.height;
       this.height = undefined;
@@ -296,9 +301,9 @@ export class QuestionSignaturePadModel extends Question {
 }
 
 function correctFormatData(val: string): string {
-  if(!val) val = "png";
+  if (!val) val = "png";
   val = val.replace("image/", "").replace("+xml", "");
-  if(val !== "jpeg" && val !== "svg") val = "png";
+  if (val !== "jpeg" && val !== "svg") val = "png";
   return val;
 }
 
@@ -327,11 +332,13 @@ Serializer.addClass(
       default: true,
     },
     { name: "showPlaceholder:boolean", category: "general", default: true },
-    { name: "placeholder:text",
+    {
+      name: "placeholder:text",
       serializationProperty: "locPlaceholder",
       category: "general",
       dependsOn: "showPlaceholder",
-      visibleIf: (obj: QuestionSignaturePadModel) => obj.showPlaceholder },
+      visibleIf: (obj: QuestionSignaturePadModel) => obj.showPlaceholder
+    },
     {
       name: "backgroundImage:file",
       category: "general",

tests/question_signaturepadtests.ts

@@ -1,5 +1,5 @@
 import { Serializer } from "../src/jsonobject";
-import { QuestionSignaturePadModel } from "../src/question_signaturepad";
+import { QuestionSignaturePadModel, getCanvasRatio } from "../src/question_signaturepad";
 import { SurveyModel } from "../src/survey";
 
 export default QUnit.module("question signaturepad");
@@ -104,15 +104,16 @@ QUnit.test("Check signaturepad signauteWidth/Height properties", (assert) => {
   const canvas = document.createElement("canvas");
   containerEl.appendChild(canvas);
   const signaturepad = <QuestionSignaturePadModel>survey.getQuestionByName("q1");
+  const ratio = getCanvasRatio(canvas);
   signaturepad.initSignaturePad(containerEl);
   assert.equal(signaturepad.signatureWidth, 300);
   assert.equal(signaturepad.signatureHeight, 200);
-  assert.equal(canvas.width, 300);
-  assert.equal(canvas.height, 200);
+  assert.equal(canvas.width, 300 * ratio);
+  assert.equal(canvas.height, 200 * ratio);
   signaturepad.signatureWidth = 400;
   signaturepad.signatureHeight = 300;
-  assert.equal(canvas.width, 400);
-  assert.equal(canvas.height, 300);
+  assert.equal(canvas.width, 400 * ratio);
+  assert.equal(canvas.height, 300 * ratio);
 
   canvas.remove();
   containerEl.remove();
@@ -208,7 +209,7 @@ QUnit.test("check penColor & background color from json", (assert) => {
   assert.equal(signaturepadQuestion.signaturePad.penColor, "#e92525", "signaturePad.penColor init");
   assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "#dde6db", "signaturePad.backgroundColor init");
 
-  survey.applyTheme({ "cssVariables": { } });
+  survey.applyTheme({ "cssVariables": {} });
   assert.equal(signaturepadQuestion.penColor, "#e92525", "penColor init");
   assert.equal(signaturepadQuestion.backgroundColor, "#dde6db", "backgroundColor init");
   assert.equal(signaturepadQuestion.signaturePad.penColor, "#e92525", "signaturePad.penColor init");
@@ -242,7 +243,7 @@ QUnit.test("check penColor & background color from theme", (assert) => {
   assert.equal(signaturepadQuestion.signaturePad.penColor, "rgba(103, 58, 176, 1)", "signaturePad.penColor from theme");
   assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "transparent", "signaturePad.backgroundColor from theme");
 
-  survey.applyTheme({ "cssVariables": { } });
+  survey.applyTheme({ "cssVariables": {} });
   assert.equal(signaturepadQuestion.penColor, undefined, "penColor undefined");
   assert.equal(signaturepadQuestion.backgroundColor, undefined, "backgroundColor undefined");
   assert.equal(signaturepadQuestion.signaturePad.penColor, "#1ab394", "signaturePad.penColor default");
@@ -277,7 +278,7 @@ QUnit.test("check penColor & background color if background image", (assert) =>
   assert.equal(signaturepadQuestion.signaturePad.penColor, "rgba(103, 58, 176, 1)", "signaturePad.penColor from theme");
   assert.equal(signaturepadQuestion.signaturePad.backgroundColor, "transparent", "signaturePad.backgroundColor from theme");
 
-  survey.applyTheme({ "cssVariables": { } });
+  survey.applyTheme({ "cssVariables": {} });
   assert.equal(signaturepadQuestion.penColor, undefined, "penColor undefined");
   assert.equal(signaturepadQuestion.backgroundColor, undefined, "backgroundColor undefined");
   assert.equal(signaturepadQuestion.signaturePad.penColor, "#1ab394", "signaturePad.penColor #1ab394");