[FIX] web: render JournalDashboardGraph when in DOM

The lib 'nvd3' renders graph when they are attached to the
DOM. However, widgets are rendered in fragments and
appended to the DOM when ready (to prevent flickering).

Before this commit, we used a `setTimeout(0)` and cross
fingers that the widget was attached to the DOM when the
`render` method was called.

With this commit, the render method is called when it is
attached to the DOM.

Task-ID 1868252

Closes #26410

1 files changed, 52 insertions, 0 deletions

diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index 63e677f367d..68643f7b48d 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -14,6 +14,7 @@ var testUtils = require('web.test_utils');
 var createView = testUtils.createView;
 var createAsyncView = testUtils.createAsyncView;
 var DebouncedField = basicFields.DebouncedField;
+var JournalDashboardGraph = basicFields.JournalDashboardGraph;
 var _t = core._t;
 
 QUnit.module('fields', {}, function () {
@@ -2009,6 +2010,57 @@ QUnit.module('basic_fields', {
         },
     });
 
+    QUnit.test('graph dashboard widget attach/detach callbacks', function (assert) {
+        // This widget is rendered with nvd3, and nvd3 renders the graphs when
+        // the svg is in the DOM. The intent of this test is to determine when
+        // the field widgets are in the DOM, so that we can tell nvd3 to render
+        // them.
+        var done = assert.async();
+        assert.expect(6);
+
+        testUtils.patch(JournalDashboardGraph, {
+            on_attach_callback: function () {
+                assert.step('on_attach_callback');
+            },
+            on_detach_callback: function () {
+                assert.step('on_detach_callback');
+            },
+        });
+
+        createAsyncView({
+            View: KanbanView,
+            model: 'partner',
+            data: this.data,
+            arch: '<kanban class="o_kanban_test">' +
+                    '<field name="graph_type"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                        '<div>' +
+                        '<field name="graph_data" t-att-graph_type="record.graph_type.raw_value" widget="dashboard_graph"/>' +
+                        '</div>' +
+                    '</t>' +
+                '</templates></kanban>',
+            domain: [['id', 'in', [1, 2]]],
+        }).then(function (kanban) {
+            assert.verifySteps([
+                'on_attach_callback',
+                'on_attach_callback'
+            ]);
+
+            kanban.on_detach_callback();
+
+            assert.verifySteps([
+                'on_attach_callback',
+                'on_attach_callback',
+                'on_detach_callback',
+                'on_detach_callback'
+            ]);
+
+            kanban.destroy();
+            testUtils.unpatch(JournalDashboardGraph);
+            done();
+        });
+    });
+
     QUnit.test('graph dashboard widget is rendered correctly', function (assert) {
         var done = assert.async();
         assert.expect(4);