[FIX] website: apply shape on 404 image

Author: divy-odoo

addons/html_builder/static/src/plugins/image/image_shape_option_plugin.js

@@ -4,7 +4,12 @@ import { DEFAULT_PALETTE } from "@html_editor/utils/color";
 import { isCSSColor } from "@web/core/utils/colors";
 import { getCSSVariableValue } from "@html_builder/utils/utils_css";
 import { getShapeURL } from "./image_helpers";
-import { activateCropper, createDataURL, loadImage } from "@html_editor/utils/image_processing";
+import {
+    activateCropper,
+    createDataURL,
+    loadImage,
+    loadImageInfo,
+} from "@html_editor/utils/image_processing";
 import { getValueFromVar } from "@html_builder/utils/utils";
 import { imageShapeDefinitions } from "./image_shapes_definition";
 import {
@@ -143,6 +148,8 @@ class ImageShapeOptionPlugin extends Plugin {
         return shapeSvgText;
     }
     async loadShape(img, newData = {}) {
+        Object.assign(newData, await loadImageInfo(img));
+        await loadImage(newData.originalSrc, img);
         return this.dependencies.imagePostProcess.processImage(img, newData);
         //todo: handle hover effect before
         // todo: is it still needed?

addons/website/static/tests/tours/drop_404_ir_attachment_url.js

@@ -1,8 +1,6 @@
 import {
-    changeOption,
     insertSnippet,
     registerWebsitePreviewTour,
-    changeOptionInPopover,
 } from '@website/js/tours/tour_utils';
 
 registerWebsitePreviewTour('drop_404_ir_attachment_url', {
@@ -26,12 +24,21 @@ registerWebsitePreviewTour('drop_404_ir_attachment_url', {
         content: 'Once the image UI appears, check the image has no size (404)',
         trigger: ":iframe [data-snippet='s_404_snippet'] img",
         run() {
-            const imgEl = this.anchor;
-            if (!imgEl.complete
-                || imgEl.naturalWidth !== 0
-                || imgEl.naturalHeight !== 0) {
-                throw new Error('This is supposed to be a 404 image');
-            }
+            return new Promise((resolve, reject) => {
+                const imgEl = this.anchor;
+                const checkComplete = () => {
+                    if (imgEl.complete) {
+                        if (imgEl.naturalWidth !== 0 || imgEl.naturalHeight !== 0) {
+                            reject(new Error("This is supposed to be a 404 image"));
+                        } else {
+                            resolve();
+                        }
+                    } else {
+                        requestAnimationFrame(checkComplete);
+                    }
+                };
+                checkComplete();
+            });
         },
     },
     {
@@ -50,14 +57,27 @@ registerWebsitePreviewTour('drop_404_ir_attachment_url', {
     },
     {
         content: 'Once the shape is applied, check the image has now a size (placeholder image)',
-        trigger: ':iframe [data-snippet="s_404_snippet"] img',
+        trigger: ":iframe [data-snippet='s_404_snippet'] img[src^='data:']",
         run() {
-            const imgEl = this.anchor;
-            if (!imgEl.complete
-                || imgEl.naturalWidth === 0
-                || imgEl.naturalHeight === 0) {
-                throw new Error('Even though the original image was a 404, the option should have been applied on the placeholder image');
-            }
+            return new Promise((resolve, reject) => {
+                const imgEl = this.anchor;
+                const checkComplete = () => {
+                    if (imgEl.complete) {
+                        if (imgEl.naturalWidth === 0 || imgEl.naturalHeight === 0) {
+                                reject(
+                                    new Error(
+                                        "Even though the original image was a 404, the option should have been applied on the placeholder image"
+                                    )
+                                );
+                        } else {
+                            resolve();
+                        }
+                    } else {
+                        requestAnimationFrame(checkComplete);
+                    }
+                };
+                checkComplete();
+            });
         },
     },
 ]);

addons/website/tests/test_ui.py

@@ -713,7 +713,7 @@ def test_drop_404_ir_attachment_url(self):
             'model': 'ir.attachment',
             'res_id': attachment.id,
         })
-        self.start_tour(self.env['website'].get_client_action_url('/'), 'drop_404_ir_attachment_url', login='admin', watch=True)
+        self.start_tour(self.env['website'].get_client_action_url('/'), 'drop_404_ir_attachment_url', login='admin')
 
     @unittest.skip
     def test_mobile_order_with_drag_and_drop(self):