[FIX] website_links: fix multiple bugs + add tests

Commit 6d67ce5b7c refactored the JS from multiple website modules including
`website_links`.
A few error needed to be fixed:
  - recent links would not appear anymore
  - graphs would not be displayed anymore
  - graph resize on tab change would not be fired

This commit fixes it and also add some tests to be sure this module is now
strongly tested.

Note: tests are skipped for now as there is a race condition happening only
      with docker and this fix is getting urgent for Odoo.com

closes odoo/odoo#31507

Signed-off-by: Romain Derie (rde) <rde@odoo.com>

addons/website_links/static/src/js/test_ui_flow.js

@@ -0,0 +1,82 @@
+odoo.define('website_links.website_links_tour', function (require) {
+'use strict';
+
+var tour = require("web_tour.tour");
+var base = require("web_editor.base");
+
+tour.register('website_links_tour', {
+    test: true,
+    url: '/r',
+    wait_for: base.ready()
+},
+    [
+        // 1. Create a tracked URL
+        {
+            content: "check that existing links are shown",
+            trigger: '#o_website_links_recent_links .btn_shorten_url_clipboard',
+            run: function () {}, // it's a check
+        },
+        {
+            content: "fill the form and submit it",
+            trigger: '#o_website_links_link_tracker_form input#url',
+            run: function () {
+                var url = window.location.host + '/aboutus';
+                $('#o_website_links_link_tracker_form input#url').val(url);
+                $('.o_website_links_utm_forms input#campaign-select').val(1).change();
+                $('.o_website_links_utm_forms input#channel-select').val(1).change();
+                $('.o_website_links_utm_forms input#source-select').val(1).change();
+                $('#btn_shorten_url').click();
+            },
+        },
+        // 2. Visit it
+        {
+            content: "check that link was created and visit it",
+            // Depending of the speed of `requests.get` from `_get_title_from_url`,
+            // the link name will either be "About us" (page title) or
+            // "http://url/aboutus" (page url).
+            extra_trigger: '#o_website_links_recent_links .truncate_text:first():contains("About us"), #o_website_links_recent_links .truncate_text:first():contains("aboutus")',
+            trigger: '#o_website_links_link_tracker_form #generated_tracked_link:contains("/r/")',
+            run: function () {
+                window.location.href = $('#generated_tracked_link').text();
+            },
+        },
+        {
+            content: "check that we landed on correct page with correct query strings",
+            trigger: '.s_title h1:containsExact("About us")',
+            run: function () {
+                var expectedUrl = "/aboutus?utm_campaign=Sale&utm_source=Search+engine&utm_medium=Website";
+                if (window.location.pathname + window.location.search !== expectedUrl) {
+                    console.error("The link was not correctly created.");
+                }
+                window.location.href = '/r';
+            },
+        },
+        // 3. Check that counter got incremented and charts are correctly displayed
+        {
+            content: "visit link stats page",
+            trigger: '#o_website_links_recent_links a:containsExact("Stats"):first()',
+        },
+        {
+            content: "check click number and ensure graphs are initialized",
+            extra_trigger: '.website_links_click_chart .title:contains("1 clicks")',
+            trigger: '.nvd3.nv-pieChart',
+            run: function () {}, // it's a check
+        },
+        {
+            content: "click on Last Month tab",
+            trigger: '.o_website_links_chart .graph-tabs a:contains("Last Month")',
+        },
+        {
+            content: "ensure tab is correctly resized",
+            trigger: '.nvd3.nv-lineChart',
+            run: function () {
+                var width = $('#last_month_charts .nvd3.nv-lineChart .nv-background rect').width();
+                if (width < 50) {
+                    console.error("The graphs are probably not resized on tab change.");
+                }
+            },
+        },
+    ]
+);
+
+});

addons/website_links/static/src/js/website_links.js

@@ -8,7 +8,6 @@ var sAnimations = require('website.content.snippets.animation');
 var _t = core._t;
 
 var SelectBox = Widget.extend({
-    xmlDependencies: ['/website_links/static/src/xml/recent_link.xml'],
     events: {
         'change': '_onChange',
     },
@@ -107,6 +106,7 @@ var SelectBox = Widget.extend({
 
 var RecentLinkBox = Widget.extend({
     template: 'website_links.RecentLink',
+    xmlDependencies: ['/website_links/static/src/xml/recent_link.xml'],
     events: {
         'click .btn_shorten_url_clipboard': '_toggleCopyButton',
         'click .o_website_links_edit_code': '_editCode',
@@ -460,6 +460,7 @@ sAnimations.registry.websiteLinks = sAnimations.Class.extend({
      * @param {Event} ev
      */
     _onFormSubmit: function (ev) {
+        var self = this;
         ev.preventDefault();
 
         if ($('#btn_shorten_url').hasClass('btn-copy')) {
@@ -511,7 +512,7 @@ sAnimations.registry.websiteLinks = sAnimations.Class.extend({
                 $('#generated_tracked_link').html(link.short_url);
                 $('#generated_tracked_link').css('display', 'inline');
 
-                this.recentLinks._addLink(link);
+                self.recentLinks._addLink(link);
 
                 // Clean URL and UTM selects
                 $('#campaign-select').select2('val', '');

addons/website_links/static/src/js/website_links_charts.js

@@ -197,27 +197,27 @@ sAnimations.registry.websiteLinksCharts = sAnimations.Class.extend({
 
             // Process all time line chart data
             var now = moment();
-            self.charts.all_time_bar = new BarChart(beginDate, now, formattedClicksByDay);
+            self.charts.all_time_bar = new BarChart(this, beginDate, now, formattedClicksByDay);
             self.charts.all_time_bar.attachTo($('#all_time_clicks_chart'));
 
             // Process month line chart data
             beginDate = moment().subtract(30, 'days');
-            self.charts.last_month_bar = new BarChart(beginDate, now, formattedClicksByDay);
+            self.charts.last_month_bar = new BarChart(this, beginDate, now, formattedClicksByDay);
             self.charts.last_month_bar.attachTo($('#last_month_clicks_chart'));
 
             // Process week line chart data
             beginDate = moment().subtract(7, 'days');
-            self.charts.last_week_bar = new BarChart(beginDate, now, formattedClicksByDay);
+            self.charts.last_week_bar = new BarChart(this, beginDate, now, formattedClicksByDay);
             self.charts.last_week_bar.attachTo($('#last_week_clicks_chart'));
 
             // Process pie charts
-            self.charts.all_time_pie = new PieChart(_clicksByCountry);
+            self.charts.all_time_pie = new PieChart(this, _clicksByCountry);
             self.charts.all_time_pie.attachTo($('#all_time_countries_charts'));
 
-            self.charts.last_month_pie = new PieChart(_lastMonthClicksByCountry);
+            self.charts.last_month_pie = new PieChart(this, _lastMonthClicksByCountry);
             self.charts.last_month_pie.attachTo($('#last_month_countries_charts'));
 
-            self.charts.last_week_pie = new PieChart(_lastWeekClicksByCountry);
+            self.charts.last_week_pie = new PieChart(this, _lastWeekClicksByCountry);
             self.charts.last_week_pie.attachTo($('#last_week_countries_charts'));
 
             var rowWidth = $('#all_time_countries_charts').parent().width();
@@ -305,7 +305,11 @@ sAnimations.registry.websiteLinksCharts = sAnimations.Class.extend({
     _onGraphTabClick: function (ev) {
         ev.preventDefault();
         $('.graph-tabs li a').tab('show');
-        _.chain(this.charts).pluck('chart').invoke('update'); // Force NVD3 to redraw the chart
+
+        setTimeout(function () {
+            // Force NVD3 to redraw the chart
+            window.dispatchEvent(new Event('resize'));
+        }, 0);
     },
     /**
      * @private

addons/website_links/tests/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+
+from . import test_ui

addons/website_links/tests/test_ui.py

@@ -0,0 +1,18 @@
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+
+import odoo.tests
+import unittest
+
+
+@odoo.tests.common.tagged('post_install', '-at_install')
+class TestUi(odoo.tests.HttpCase):
+
+    @unittest.skip("Race condition on runbot or on local with Docker. Merging the test skipped for history purpose as the tour has been reviewed.")
+    def test_01_test_ui(self):
+        self.env['link.tracker'].create({
+            'campaign_id': 2,
+            'medium_id': 2,
+            'source_id': 2,
+            'url': self.env["ir.config_parameter"].sudo().get_param("web.base.url") + '/contactus',
+        })
+        self.phantom_js("/", "odoo.__DEBUG__.services['web_tour.tour'].run('website_links_tour')", "odoo.__DEBUG__.services['web_tour.tour'].tours.website_links_tour.ready", login="admin")

addons/website_links/views/website_links_template.xml

@@ -6,6 +6,7 @@
                 <script type="text/javascript" src="/website_links/static/src/js/website_links.js"/>
                 <script type="text/javascript" src="/website_links/static/src/js/website_links_code_editor.js"/>
                 <script type="text/javascript" src="/website_links/static/src/js/website_links_charts.js"/>
+                <script type="text/javascript" src="/website_links/static/src/js/test_ui_flow.js"/>
                 <link rel="stylesheet" type="text/css" href="/website_links/static/src/css/website_links.css"/>
             </xpath>
         </template>