[FIX] web: display signatures in signature fields

**Before this commit**
Since [1], the signature field only display placeholder
signatures when it has a value.

**Explanation**
The commit [1] removes the props "value" from the standard field props.
The signature field missed an adaptation.

**After this commit**
The issue is fixed and a test has been written.

[1] 688986f888
opw-3335655

closes odoo/odoo#123463

X-original-commit: 4edc5e3326cc92e9adf4f2512af1e85382108bb3
Signed-off-by: Jorge Pinna Puissant (jpp) <jpp@odoo.com>
Signed-off-by: Bruno Boi (boi) <boi@odoo.com>

addons/web/static/src/views/fields/signature/signature_field.js

@@ -43,9 +43,9 @@ export class SignatureField extends Component {
     }
 
     get getUrl() {
-        const { name, previewImage, record, value } = this.props;
-        if (this.state.isValid && value) {
-            if (isBinarySize(value)) {
+        const { name, previewImage, record } = this.props;
+        if (this.state.isValid && this.value) {
+            if (isBinarySize(this.value)) {
                 return url("/web/image", {
                     model: record.resModel,
                     id: record.resId,
@@ -63,9 +63,9 @@ export class SignatureField extends Component {
     }
 
     get sizeStyle() {
-        let { width, height, value } = this.props;
+        let { width, height } = this.props;
 
-        if (!value) {
+        if (!this.value) {
             if (width && height) {
                 width = Math.min(width, this.displaySignatureRatio * height);
                 height = width / this.displaySignatureRatio;
@@ -86,6 +86,10 @@ export class SignatureField extends Component {
         return style;
     }
 
+    get value() {
+        return this.props.record.data[this.props.name];
+    }
+
     onClickSignature() {
         if (!this.props.readonly) {
             const nameAndSignatureProps = {

addons/web/static/src/views/fields/signature/signature_field.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.SignatureField" owl="1">
-        <t t-if="props.record.data[props.name]">
+        <t t-if="value">
             <img class="o_signature img img-fluid"
                 alt="Binary file"
                 t-att-src="getUrl"

addons/web/static/tests/views/fields/signature_field_tests.js

@@ -1,5 +1,11 @@
 /** @odoo-module **/
-import { click, getFixture, patchWithCleanup } from "@web/../tests/helpers/utils";
+import {
+    click,
+    dragAndDrop,
+    getFixture,
+    makeDeferred,
+    patchWithCleanup,
+} from "@web/../tests/helpers/utils";
 import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
 import { NameAndSignature } from "@web/core/signature/name_and_signature";
 
@@ -48,6 +54,55 @@ QUnit.module("Fields", (hooks) => {
 
     QUnit.module("Signature Field");
 
+    QUnit.test("signature can be drawned", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `<form>
+                        <field name="sign" widget="signature" />
+                    </form>`,
+            mockRPC: async (route) => {
+                if (route === "/web/sign/get_fonts/") {
+                    return {};
+                }
+            },
+        });
+
+        assert.containsNone(target, "div[name=sign] img.o_signature");
+        assert.containsOnce(
+            target,
+            "div[name=sign] div.o_signature svg",
+            "should have a valid signature widget"
+        );
+
+        // Click on the widget to open signature modal
+        await click(target, "div[name=sign] div.o_signature");
+        assert.containsOnce(target, ".modal .modal-body .o_web_sign_name_and_signature");
+        assert.containsNone(target, ".modal .btn.btn-primary:not([disabled])");
+
+        // Use a drag&drop simulation to draw a signature
+        const def = makeDeferred();
+        const $jSignatureEl = $(target.querySelector(".modal .o_web_sign_signature"));
+        $jSignatureEl.on("change", def.resolve);
+        await dragAndDrop("canvas.jSignature", "canvas.jSignature");
+        await def; // makes sure the signature stroke is taken into account by jSignature
+        assert.containsOnce(target, ".modal .btn.btn-primary:not([disabled])");
+
+        // Click on "Adopt and Sign" button
+        await click(target, ".modal .btn.btn-primary:not([disabled])");
+        assert.containsNone(target, ".modal");
+
+        // The signature widget should now display the signature img
+        assert.containsNone(target, "div[name=sign] div.o_signature svg");
+        assert.containsOnce(target, "div[name=sign] img.o_signature");
+
+        const signImgSrc = target.querySelector("div[name=sign] img.o_signature").dataset.src;
+        assert.notOk(signImgSrc.includes("placeholder"));
+        assert.ok(signImgSrc.startsWith("data:image/png;base64,"));
+    });
+
     QUnit.test("Set simple field in 'full_name' node option", async function (assert) {
         patchWithCleanup(NameAndSignature.prototype, {
             setup() {