[IMP] web: add isHtmlEmpty method in kanban view

In this commit we have added new method name isHtmlEmpty in
kanban view. As we are convertting text field to html field,
we will need to check html field in if conditions.

As Html field will contain tags we cannot check it every time
perfectly. So, we need this method to make sure html field is
empty or not.

Task id: 2499504

X-original-commit: 2968dcea7fb58795eeb34949f4bbfc1029938cd1

addons/web/static/src/js/views/kanban/kanban_record.js

@@ -87,6 +87,22 @@ var KanbanRecord = Widget.extend(WidgetAdapterMixin, {
     // Public
     //--------------------------------------------------------------------------
 
+    /**
+     * Check if a html content is empty. If there are only formatting tags with
+     * style attributes or a void content. Famous use case is
+     * '<p style="..." class=".."><br></p>' added by some web editor(s).
+     * Note that because the use of this method is limited, we ignore the cases
+     * like there's one <img> tag in the content. In such case, even if it's the
+     * actual content, we consider it empty.
+     *
+     * @param {string} htmlContent
+     * @returns {boolean} true if no content found or if containing only formatting tags
+     */
+    isHtmlEmpty: function (htmlContent) {
+        let div = document.createElement('div');
+        div.innerHTML = htmlContent || "";
+        return div.innerText.trim() === "";
+    },
     /**
      * Re-renders the record with a new state
      *

addons/web/static/tests/views/kanban_tests.js

@@ -7528,6 +7528,43 @@ QUnit.module('Views', {
 
         kanban.destroy();
     });
+
+    QUnit.test('kanban with isHtmlEmpty method', async function (assert) {
+        assert.expect(3);
+
+        this.data.product.fields.description = {string: 'Description', type: 'html'};
+        this.data.product.records.push(
+            {id: 11, display_name: "product 11", description: "<span class='text-info'>hello</hello>"},
+            {id: 12, display_name: "product 12", description: "<p class='a'><span style='color:red;'/><br/></p>"},
+        );
+
+        var kanban = await createView({
+            View: KanbanView,
+            model: 'product',
+            data: this.data,
+            arch: `<kanban>
+                        <field name="description"/>
+                        <templates><t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="display_name"/>
+                                <div class="test" t-if="!widget.isHtmlEmpty(record.description.raw_value)">
+                                    <t t-raw="record.description.raw_value"/>
+                                </div>
+                            </div>
+                        </t></templates>
+                    </kanban>`,
+            domain: [['id', 'in', [11, 12]]],
+
+        });
+        assert.containsOnce(kanban, '.o_kanban_record:first div.test',
+            "the container is displayed if description have actual content");
+        assert.strictEqual(kanban.$('.o_kanban_record:first div.test span.text-info').html().trim(), 'hello',
+            "the inner html content is rendered properly");
+        assert.containsNone(kanban, '.o_kanban_record:last div.test',
+            "the container is not displayed if description just have formatting tags and no actual content");
+
+        kanban.destroy();
+    });
 });
 
 });