[IMP] web_editor: convert tours to use web_tour.tour

2 files changed, 324 insertions, 394 deletions

diff --git a/addons/web_editor/static/src/js/tour.rte.js b/addons/web_editor/static/src/js/tour.rte.js
index 1e0093f80c0..0575e2f858e 100644
--- a/addons/web_editor/static/src/js/tour.rte.js
+++ b/addons/web_editor/static/src/js/tour.rte.js
@@ -1,398 +1,328 @@
 odoo.define('web_editor.tour', function (require) {
-'use strict';
+    "use strict";
 
-var core = require('web.core');
-var Tour = require('web.Tour');
-var base = require('web_editor.base');
-var snippet_editor = require('web_editor.snippet.editor');
+    var tour = require("web_tour.tour");
+    var base = require("web_editor.base");
+    var snippet_editor = require('web_editor.snippet.editor');
 
-var _t = core._t;
+    var click_event = function (el, type) {
+        var evt = document.createEvent("MouseEvents");
+        evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
+        el.dispatchEvent(evt);
+    };
 
-base.ready().done(function () {
-
-var click_event = function (el, type) {
-    var evt = document.createEvent("MouseEvents");
-    evt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, el);
-    el.dispatchEvent(evt);
-};
-
-Tour.register({
-    id:   'rte',
-    name: "Test RTE",
-    mode: 'test',
-    path: '/web_editor/field/html?debug&callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
-    steps: [
-        {
-            title:     "Change html for this test",
-            onload: function () {
-                var html = '\n'+
-                    '<section>\n'+
-                    '    <div class="container">\n'+
-                    '        <div class="row">\n'+
-                    '            <div class="col-md-6 mt16">\n'+
-                    '<h1 id="text_title_id">Batnae municipium in Anthemusia</h1>     \n'+
-                    '     <p>Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad.</p>\n'+
-                    '     <p>    Quam <img style="width: 25%" src="/web_editor/static/src/img/drag_here.png"/> quidem <span class="fa fa-flag fa-2x"></span> partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas.</p>\n'+
-                    '     <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix.</p>'+
-                    '<p>Harum trium sententiarum nulli prorsus assentior.</p>\n'+
-                    '        </div>\n'+
-                    '        <div class="col-md-6 mt16">\n'+
-                    '            <img class="img img-responsive shadow mb16" src="/web_editor/static/src/img/drag_here.png" alt="Odoo text and image block">\n'+
-                    '        </div>\n'+
-                    '    </div>\n'+
-                    '</section>\n';
-                $("#editable_area").html(html);
-            }
-        },
-        {
-            element:   '#editable_area > section .row > div:first',
-            title:     "simulate triple click and change text bg-color",
-            onload: function () {
-                var $el = $(this.element);
-                var $h1 = $('h1', $el);
-                $.summernote.core.range.create($h1[0].firstChild, 0, $('p', $el)[0], 0).select();
-                click_event($h1[0], 'mouseup');
-            }
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first',
-            element:   '.note-popover button[data-event="color"]:visible',
-            title:     "change text bg-color after triple click",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first:not(:has(p font)) h1 font',
-            element:   '.note-color button.dropdown-toggle:visible',
-            title:     "change selection to change text color",
-            onload: function () {
-                var $el = $('#editable_area > section .row > div:first:not(:has(p font)) h1 font');
-                $.summernote.core.range.create($el[0].firstChild, 5, $el[0].firstChild, 10).select();
-                click_event($el[0], 'mouseup');
-            }
-        },
-        {
-            element:   ".dropdown-menu:visible .btn-group:last .note-color-row:eq(1) button[data-event=foreColor]:first",
-            title:     "change text color",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first h1 font:eq(2)',
-            element:   '.note-color button.dropdown-toggle:visible',
-            title:     "change selection to change text bg-color again",
-            onload: function () {
-                var $el = $('#editable_area > section .row > div:first h1 font:eq(2)');
-                $.summernote.core.range.create($el.prev()[0].firstChild, 3, $el[0].firstChild, 10).select();
-                click_event($el.prev()[0], 'mouseup');
-            }
-        },
-        {
-            element:   ".dropdown-menu:visible .btn-group:first .note-color-row:eq(0) button[data-event=backColor]:first",
-            title:     "change text backColor again",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first h1 font:eq(4)',
-            element:   '.note-color button.dropdown-toggle:visible:first',
-            title:     "change selection (h1 and p) to change text color with class",
-            onload: function () {
-                var $el = $('#editable_area > section .row > div:first h1 font:eq(4)');
-                $.summernote.core.range.create($el.prev()[0].firstChild, 3, $el.parent("h1").next("p")[0].firstChild, 30).select();
-                click_event($el.prev()[0], 'mouseup');
-            }
-        },
-        {
-            waitFor:   ".dropdown-menu:visible",
-            element:   ".dropdown-menu:visible .btn-group:last .note-color-row:eq(0) button[data-event=foreColor]:first",
-            title:     "change text foreColor again",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first p font',
-            element:   '.o_editable.note-editable.o_dirty',
-            title:     "delete selection",
-            keydown:   46 // delete
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first:not(:has(p font)) h1',
-            element:   '.o_editable.note-editable.o_dirty',
-            title:     "clean and delete (backspace) an other selection",
-            onload: function () {
-                var $el = $(this.waitFor);
-                $.summernote.core.range.createFromNode($el.next("p")[0]).clean();
-                $.summernote.core.range.create($el.find('font:containsExact(ici)')[0].firstChild, 1, $el.next().next()[0].firstChild, 5).select();
-                click_event($el.find('font:last')[0], 'mouseup');
-            },
-            keydown:   8 // backspace
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) ) h1',
-            element:   '.o_editable.note-editable.o_dirty',
-            title:     "delete an other selection",
-            onload: function () {
-                var $el = $(this.waitFor);
-                $.summernote.core.range.create($el.find('font:first')[0].firstChild, 3, $el.next("p")[0].childNodes[2], 8).select();
-                click_event($el.find('font:first')[0], 'mouseup');
-            },
-            keydown:   46
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first:has( font:last:containsExact(Bat) )',
-            element:   '.note-image-popover button[data-event="undo"]',
-            title:     "undo",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first:has( font:last:containsExact(i) )',
-            element:   '.note-air-popover button[data-event="undo"]',
-            title:     "undo again",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first:not(:has(p font)) h1',
-            element:   '.o_editable.note-editable.o_dirty',
-            title:     "delete (backspace) after undo",
-            keydown:   8 // backspace
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) )',
-            element:   '#editable_area > section .row > div:first img[style*="25%"]',
-            title:     "click on image",
-        },
-        {
-            element:   '.note-image-popover:visible button[data-event="resize"][data-value="0.5"]',
-            title:     "Click on resize half",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first img[style*="50%"]',
-            element:   '.note-image-popover:visible button[data-event="showImageDialog"]',
-            title:     "Click on edit picture",
-        },
-        {
-            waitFor:   '.modal #editor-media-image',
-            element:   '.modal a[data-toggle="tab"]:contains(Pictogram)',
-            title:     "Click on pictogram tab",
-        },
-        {
-            element:   '#editor-media-icon.active span.fa:first',
-            title:     "select a pictogram",
-        },
-        {
-            waitFor:   '#editor-media-icon.active span.o_selected',
-            element:   '.modal button.o_save_button',
-            title:     "save pictogram",
-        },
-        {
-            element:   '.note-image-popover button[data-event="resizefa"][data-value="3"]',
-            title:     "select a size for the pictogram",
-        },
-        {
-            waitFor:   '#wrapwrap span.fa-3x',
-            element:   '.note-image-popover:visible button[data-event="floatMe"][data-value="right"]',
-            title:     "click on float right",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first span.fa.pull-right',
-            element:   '.note-image-popover:visible button[data-event="showLinkDialog"]',
-            title:     "click on create link",
-        },
-        {
-            waitFor:   '.modal a#link-preview:containsRegex(/^<span [^>]+><\\/span>$/) > span.fa.fa-3x.pull-right',
-            element:   '.modal .dropdown:has(.link-style) a[data-toggle="dropdown"]',
-            title:     "click on color style",
-        },
-        {
-            element:   '.modal .dropdown ul label.btn-success',
-            title:     "choose success style",
-        },
-        // {
-        //     waitFor:   '.modal a#link-preview.btn:containsRegex(/^<span [^>]+><\\/span>$/)',
-        //     element:   '.modal .select2-container.url-source a.select2-choice',
-        //     title:     "click to choose an internal page",
-        // },
-        // {
-        //     element:   '.select2-drop:visible .select2-search input',
-        //     title:     "search 'contact'",
-        //     sampleText: "contact",
-        // },
-        // {
-        //     element:   '.select2-drop:visible .select2-results .select2-result div:contains(/page/)',
-        //     title:     "select /page/contactus",
-        // },
-        {
-        //    waitNot:   '.select2-drop:visible',
-            element:   '#link-text',
-            title:     "change text label",
-            sampleText: "ABC[IMG] DEF",
-        },
-        {
-            waitFor:   '.modal a#link-preview.btn',
-            element:   '#link-external',
-            sampleText: "http://www.odoo.com",
-            title:     "insert a link url",
-        },
-        {
-            waitFor:   '.modal a#link-preview.btn:containsRegex(/^ABC<span [^>]+><\\/span> DEF$/)',
-            element:   '.modal button.o_save_button',
-            title:     "save link",
-        },
-        {
-            waitNot:   '#link-preview',
-            waitFor:   'a.btn[href^="http://"]:has(span.fa.fa-3x.pull-right)',
-            element:   '#editable_area > section .row > div:last img',
-            title:     "click on other picture",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first span.fa.pull-right',
-            element:   '.note-image-popover:visible button[data-event="showLinkDialog"]',
-            title:     "click on create link again",
-        },
-        {
-            waitFor:   '.modal a#link-preview:containsRegex(/^<img [^>]+>$/)',
-            element:   '.modal .dropdown:has(.link-style) a[data-toggle="dropdown"]',
-            title:     "click on color style again",
-        },
-        {
-            element:   '.modal .dropdown ul label.btn-success',
-            title:     "choose success style",
-        },
-        {
-            waitFor:   '.modal a#link-preview.btn',
-            element:   '#link-external',
-            sampleText: "test@test.test",
-            title:     "insert an email",
-        },
-        {
-            waitFor:   '.modal a#link-preview.btn[href="mailto:test@test.test"]',
-            element:   '.modal button.o_save_button',
-            title:     "save link",
-        },
-        {
-            waitNot:   '#link-preview',
-            waitFor:   '#editable_area > section .row > div:eq(1) > a > img',
-            element:   '#editable_area > section .row > div:first p:eq(2)',
-            title:     "triple enter then double backspace",
-            keydown:   [66, 13, 66, 13, 13, 8, 8], // B enter B enter enter backspace backspace
-            onload: function () {
-                var p = $(this.element)[0].firstChild;
-                $.summernote.core.range.create(p, p.textContent.length, p, p.textContent.length).select();
-                click_event(p, 'mouseup');
-            },
-        },
-        {
-            waitNot:   '#editable_area > section .row > div:first p:eq(4), #editable_area > section .row > div:eq(3)',
-            waitFor:   '#editable_area > section .row > div:first p:eq(3)',
-            title:     "add ul content",
-            onload: function () {
-                var $el = $('#editable_area > section .row > div:first');
-                var html = '  <ul>     '+
-                    '\n     <li>   <p>Batnae municipium.  </p></li>'+
-                    '\n     <li>    Seleucia praeter.</li>'+
-                    '\n     <li><p>Et hanc quidem.</p></li>'+
-                    '\n    </ul>';
-                $el.append(html);
-                var node = $el.find('ul li p:last')[0].firstChild;
-                $.summernote.core.range.create(node, 6).select();
-                click_event(node, 'mouseup');
-            }
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first ul li p:first',
-            element:   '.note-air-popover .note-style button.dropdown-toggle',
-            title:     "click on style dropdown",
-        },
-        {
-            element:   '.note-air-popover .note-style ul:visible a[data-value="h3"]',
-            title:     "select h3",
-            onload: function () {
-                var node = $('#editable_area > section .row > div:first ul li p:last')[0].firstChild;
-                $.summernote.core.range.create(node, 0).select();
-                click_event(node, 'mouseup');
-            }
-        },
-        {
-            element:   '#editable_area > section .row > div:first > ul > li > h3',
-            title:     "double tabulation",
-            keydown:   [9, 9] // tabulation
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first ul > li > ul > li > ul > li > h3',
-            element:   '.note-air-popover button[data-event="insertOrderedList"]',
-            title:     "click on order list",
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first ul > li > ul > li > ol > li > h3',
-            element:   '#editable_area > section .row > div:first ul li > p:last',
-            title:     "enter in ul",
-            keydown:   [66, 13], // enter
-            onload: function () {
-                $(this.element)[0].firstChild.textContent += "";
-                $.summernote.core.range.create($(this.element)[0].firstChild, 7).select();
-                click_event($(this.element)[0], 'mouseup');
-            }
-        },
-        {
-            element:   '#editable_area > section .row > div:first ul li > p:eq(1):containsRegex(/^municipium./)',
-            title:     "backspace in list",
-            keydown:   8
-        },
-        {
-            waitFor:   '#editable_area > section .row > div:first ul li p:eq(1)',
-            title:     "end",
-        },
-    ]
-});
-
-
-Tour.register({
-    id:   'rte_inline',
-    name: "Test RTE Inline",
-    mode: 'test',
-    path: '/web_editor/field/html/inline?callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
-    steps: [
-        {
-            title:     "Change html for this test",
-            onload: function () {
-                var $el = $(this.element);
-                var html = '\n'+
-                    '<div>\n'+
-                    '  <table cellspacing="0" cellpadding="0" width="100%">\n'+
-                    '    <tbody>\n'+
-                    '      <tr>\n'+
-                    '        <td valign="center" width="270">\n'+
-                    '          <img src="/logo.png" alt="Your Logo" class="img-circle img-thumbnail">\n'+
-                    '        </td>\n'+
-                    '        <td valign="center" width="270">\n'+
-                    '          <a href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x text-primary"></span></a>\n'+
-                    '          <span style="color: rgb(255, 0, 0);" class="fa fa-4x fa-google-plus-square pull-right"></span>\n'+
-                    '        </td>\n'+
-                    '      </tr>\n'+
-                    '    </tbody>\n'+
-                    '  </table>\n'+
-                    '</div>';
-                $("#editable_area").html(html);
-            }
-        },
-        {
-            title:     "call clean for save",
-            element:   '#wrapwrap table',
-            onload: function () {
-                snippet_editor.instance.clean_for_save();
-            }
-        },
-        {
-            waitFor:   '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]',
-            title:     "check the image style",
-        },
-        {
-            waitFor:   '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(51,122,183)/28"]',
-            title:     "check the font image src",
-        },
-        {
-            waitFor:   '#wrapwrap img:eq(1)[height]:not([class*="fa"])',
-            title:     "check the font class to css",
-        },
-        {
-            waitFor:   '#wrapwrap img:eq(2)[style*="float: right"]',
-            title:     "check the second font class to css",
-        },
-    ]
-});
-
-
-});
+    tour.register("rte", {
+        url: '/web_editor/field/html?callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
+        test: true,
+        wait_for: base.ready(),
+    }, [{
+        content: "Change html for this test",
+        trigger: "#editable_area",
+        run: function () {
+            var html = '\n'+
+                '<section>\n'+
+                '    <div class="container" style="width: 600px;">\n'+
+                '        <div class="row">\n'+
+                '            <div class="col-md-6 mt16">\n'+
+                '<h1 id="text_content_id">Batnae municipium in Anthemusia</h1>     \n'+
+                '     <p>Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad.</p>\n'+
+                '     <p>    Quam <img style="width: 25%" src="/web/static/src/img/logo.png"/> quidem <span class="fa fa-flag fa-2x"></span> partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas.</p>\n'+
+                '     <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix.</p>'+
+                '<p>Harum trium sententiarum nulli prorsus assentior.</p>\n'+
+                '        </div>\n'+
+                '        <div class="col-md-6 mt16">\n'+
+                '            <img class="img img-responsive shadow mb16" src="/web/static/src/img/logo.png" alt="Odoo text and image block">\n'+
+                '        </div>\n'+
+                '    </div>\n'+
+                '</section>\n';
+            this.$anchor.html(html);
+        }
+    }, {
+        content: "simulate triple click and change text bg-color",
+        trigger: '#editable_area > section .row > div:first',
+        run: function () {
+            var $h1 = $('h1', this.$anchor);
+            $.summernote.core.range.create($h1[0].firstChild, 0, $('p', this.$anchor)[0], 0).select();
+            click_event($h1[0], 'mouseup');
+        }
+    }, {
+        content: "change text bg-color after triple click",
+        trigger: '.note-popover button[data-event="color"]',
+        extra_trigger: '#editable_area > section .row > div:first',
+    }, {
+        content: "change selection to change text color",
+        trigger: '#editable_area > section .row > div:first:not(:has(p font)) h1 font',
+        run: function () {
+            $.summernote.core.range.create(this.$anchor[0].firstChild, 5, this.$anchor[0].firstChild, 10).select();
+            click_event(this.$anchor[0], 'mouseup');
+        }
+    }, {
+        content: "open color dropdown",
+        trigger: ".note-color button.dropdown-toggle",
+    }, {
+        content: "change text color",
+        trigger: "button[data-event=foreColor]:first",
+    }, {
+        content: "change selection to change text bg-color again",
+        trigger: '#editable_area > section .row > div:first h1 font:eq(2)',
+        run: function () {
+            $.summernote.core.range.create(this.$anchor.prev()[0].firstChild, 3, this.$anchor[0].firstChild, 10).select();
+            click_event(this.$anchor.prev()[0], 'mouseup');
+        }
+    }, {
+        content: "open color dropdown",
+        trigger: ".note-color button.dropdown-toggle",
+    }, {
+        content: "change text backColor again",
+        trigger: "button[data-event=backColor]:visible:first",
+    }, {
+        content: "change selection (h1 and p) to change text color with class",
+        trigger: '#editable_area > section .row > div:first h1 font:eq(4)',
+        run: function () {
+            $.summernote.core.range.create(this.$anchor.prev()[0].firstChild, 3, this.$anchor.parent("h1").next("p")[0].firstChild, 30).select();
+            click_event(this.$anchor.prev()[0], 'mouseup');
+        }
+    }, {
+        content: "open color dropdown",
+        trigger: ".note-color button.dropdown-toggle",
+    }, {
+        content: "change text color again",
+        trigger: "button[data-event=foreColor]:visible:eq(3)",
+    }, {
+        content: "delete selection",
+        trigger: '.o_editable.note-editable.o_dirty',
+        extra_trigger: '#editable_area > section .row > div:first p font',
+        run: "keydown 46", // delete
+    }, {
+        content: "create an other selection to delete",
+        trigger: '#editable_area > section .row > div:first:not(:has(p font)) h1',
+        extra_trigger: '.o_editable.note-editable.o_dirty',
+        run: function () {
+            $.summernote.core.range.createFromNode(this.$anchor.next("p")[0]).clean();
+            $.summernote.core.range.create(this.$anchor.find('font:containsExact(ici)')[0].firstChild, 1, this.$anchor.next().next()[0].firstChild, 5).select();
+            click_event(this.$anchor.find('font:last')[0], 'mouseup');
+        },
+    }, {
+        content: "clean and delete (backspace) an other selection",
+        trigger: '#editable_area > section .row > div:first:not(:has(p font)) h1',
+        run: "keydown 8", // backspace
+    }, {
+        content: "an other selection",
+        trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) ) h1',
+        extra_trigger: '.o_editable.note-editable.o_dirty',
+        run: function () {
+            $.summernote.core.range.create(this.$anchor.find('font:first')[0].firstChild, 3, this.$anchor.next("p")[0].childNodes[2], 8).select();
+            click_event(this.$anchor.find('font:first')[0], 'mouseup');
+        },
+    }, {
+        content: "delete an other selection",
+        trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) ) h1',
+        run: "keydown 46",
+    }, {
+        content: "undo",
+        trigger: '.note-image-popover button[data-event="undo"]',
+        extra_trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(Bat) )',
+    }, {
+        content: "undo again",
+        trigger: '.note-air-popover button[data-event="undo"]',
+        extra_trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(i) )',
+    }, {
+        content: "delete (backspace) after undo",
+        trigger: '.o_editable.note-editable.o_dirty',
+        extra_trigger: '#editable_area > section .row > div:first:not(:has(p font)) h1',
+        run: "keydown 8", // backspace
+    }, {
+        content: "click on image",
+        trigger: '#editable_area > section .row > div:first img[style*="25%"]',
+        extra_trigger: '#editable_area > section .row > div:first:has( font:last:containsExact(i) ):has( p:first:containsRegex(/^uam/) )',
+    }, {
+        content: "Click on resize half",
+        trigger: '.note-image-popover:visible button[data-event="resize"][data-value="0.5"]',
+    }, {
+        content: "Click on edit picture",
+        trigger: '.note-image-popover:visible button[data-event="showImageDialog"]',
+        extra_trigger: '#editable_area > section .row > div:first img[style*="50%"]',
+    }, {
+        content: "Click on pictogram tab",
+        trigger: 'a[data-toggle="tab"]:contains(Pictogram)',
+        extra_trigger: '#editor-media-image',
+    }, {
+        content: "select a pictogram",
+        trigger: '#editor-media-icon.active span.fa:first',
+    }, {
+        content: "save pictogram",
+        trigger: 'button.o_save_button',
+        extra_trigger: '#editor-media-icon.active span.o_selected',
+    }, {
+        content: "select a size for the pictogram",
+        trigger: '.note-image-popover button[data-event="resizefa"][data-value="3"]',
+    }, {
+        content: "click on float right",
+        trigger: '.note-image-popover:visible button[data-event="floatMe"][data-value="right"]',
+        extra_trigger: '#wrapwrap span.fa-3x',
+    }, {
+        content: "click on create link",
+        trigger: '.note-image-popover:visible button[data-event="showLinkDialog"]',
+        extra_trigger: '#editable_area > section .row > div:first span.fa.pull-right',
+    }, {
+        content: "click on color style",
+        trigger: '.dropdown:has(.link-style) a[data-toggle="dropdown"]',
+        extra_trigger: 'a#link-preview:containsRegex(/^<span [^>]+><\\/span>$/) > span.fa.fa-3x.pull-right',
+    }, {
+        content: "choose success style",
+        trigger: '.dropdown ul label.btn-success',
+    }, {
+        content: "insert a link url",
+        trigger: '#link-external',
+        extra_trigger: 'a#link-preview.btn',
+        run: "text http://www.odoo.com",
+    }, {
+        content: "change text label",
+        trigger: '#link-text',
+        run: "text ABC[IMG] DEF",
+    }, {
+        content: "save link",
+        trigger: 'button.o_save_button',
+        extra_trigger: 'a#link-preview.btn:containsRegex(/^ABC<span [^>]+><\\/span> DEF$/)',
+    }, {
+        content: "click on other picture",
+        trigger: '#editable_area > section .row > div:last img',
+        extra_trigger: 'body:not(:has(#link-preview)) a.btn[href^="http://"]:has(span.fa.fa-3x.pull-right)',
+    }, {
+        content: "click on create link again",
+        trigger: '.note-image-popover:visible button[data-event="showLinkDialog"]',
+        extra_trigger: '#editable_area > section .row > div:first span.fa.pull-right',
+    }, {
+        content: "click on color style again",
+        trigger: '.dropdown:has(label.btn-success) a[data-toggle="dropdown"]',
+        extra_trigger: 'a#link-preview:containsRegex(/^<img [^>]+>$/) img',
+    }, {
+        content: "choose success style",
+        trigger: '.dropdown ul label.btn-success',
+    }, {
+        content: "insert an email",
+        trigger: '#link-external',
+        extra_trigger: 'a#link-preview.btn',
+        run: "text test@test.test",
+    }, {
+        content: "save link",
+        trigger: 'button.o_save_button',
+        extra_trigger: 'a#link-preview.btn[href="mailto:test@test.test"]',
+    }, {
+        content: "select for triple enter then double backspace",
+        trigger: '#editable_area > section .row > div:first p:eq(2)',
+        extra_trigger: 'body:not(:has(#link-preview)) #editable_area > section .row > div:eq(1) > a > img',
+        run: function () {
+            var p = this.$anchor[0].firstChild;
+            $.summernote.core.range.create(p, p.textContent.length, p, p.textContent.length).select();
+            click_event(p, 'mouseup');
+        },
+    }, {
+        content: "triple enter then double backspace",
+        trigger: '#editable_area > section .row > div:first p:eq(2)',
+        run: "keydown 66,13,66,13,13,8,8", // B enter B enter enter backspace backspace
+    }, {
+        content: "add ul content",
+        trigger: '#editable_area > section .row > div:first',
+        extra_trigger: 'body:not(:has(#editable_area > section .row > div:first p:eq(4), #editable_area > section .row > div:eq(3))) #editable_area > section .row > div:first p:eq(3)',
+        run: function () {
+            var html = '  <ul>     '+
+                '\n     <li>   <p>Batnae municipium.  </p></li>'+
+                '\n     <li>    Seleucia praeter.</li>'+
+                '\n     <li><p>Et hanc quidem.</p></li>'+
+                '\n    </ul>';
+            this.$anchor.append(html);
+            var node = this.$anchor.find('ul li p:last')[0].firstChild;
+            $.summernote.core.range.create(node, 6).select();
+            click_event(node, 'mouseup');
+        }
+    }, {
+        content: "click on style dropdown",
+        trigger: '.note-air-popover .note-style button.dropdown-toggle',
+        extra_trigger: '#editable_area > section .row > div:first ul li p:first',
+    }, {
+        content: "select h3",
+        trigger: '.note-air-popover .note-style ul:visible a[data-value="h3"]',
+    }, {
+        content: "select h3",
+        trigger: '#editable_area > section .row > div:first > ul > li > h3',
+        run: function () {
+            var node = this.$anchor[0].firstChild;
+            $.summernote.core.range.create(node, 0).select();
+            click_event(node, 'mouseup');
+        }
+    }, {
+        content: "double tabulation",
+        trigger: '#editable_area > section .row > div:first > ul > li > h3',
+        run: "keydown 9,9", // tabulation
+    }, {
+        content: "click on order list",
+        trigger: '.note-air-popover button[data-event="insertOrderedList"]',
+        extra_trigger: '#editable_area > section .row > div:first ul > li > ul > li > ul > li > h3',
+    }, {
+        content: "select for enter in ul",
+        trigger: '#editable_area > section .row > div:first ul li > p:last',
+        run: function () {
+            this.$anchor[0].firstChild.textContent += "";
+            $.summernote.core.range.create(this.$anchor[0].firstChild, 7).select();
+            click_event(this.$anchor[0], 'mouseup');
+        }
+    }, {
+        content: "enter in ul",
+        trigger: '#editable_area > section .row > div:first ul li > p:last',
+        run: "keydown 66,13", // enter
+    }, {
+        trigger: '#editable_area > section .row > div:first ul li > p:eq(1):containsRegex(/^municipium./)',
+        content: "backspace in list",
+        run: "keydown 8",
+    }, {
+        content: "end",
+        trigger: '#editable_area > section .row > div:first ul li p:eq(0):containsRegex(/^Batnae Bmunicipium.$/)',
+    }]);
 
+    tour.register('rte_inline', {
+        url: '/web_editor/field/html/inline?callback=FieldTextHtml_0&enable_editor=1&datarecord=%7B%7D',
+        test: true,
+        wait_for: base.ready(),
+    }, [{
+        content: "Change html for this test",
+        trigger: "#editable_area",
+        run: function () {
+            var html = '\n'+
+                '<div>\n'+
+                '  <table cellspacing="0" cellpadding="0" width="100%">\n'+
+                '    <tbody>\n'+
+                '      <tr>\n'+
+                '        <td valign="center" width="270">\n'+
+                '          <img src="/logo.png" alt="Your Logo" class="img-circle img-thumbnail">\n'+
+                '        </td>\n'+
+                '        <td valign="center" width="270">\n'+
+                '          <a href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x text-primary"></span></a>\n'+
+                '          <span style="color: rgb(255, 0, 0);" class="fa fa-4x fa-google-plus-square pull-right"></span>\n'+
+                '        </td>\n'+
+                '      </tr>\n'+
+                '    </tbody>\n'+
+                '  </table>\n'+
+                '</div>';
+            this.$anchor.html(html);
+        }
+    }, {
+        content: "call clean for save",
+        trigger: '#wrapwrap table',
+        run: function () {
+            snippet_editor.instance.clean_for_save();
+        }
+    }, {
+        content: "check the image style",
+        trigger: '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]',
+    }, {
+        content: "check the font image src",
+        trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(51,122,183)/28"]',
+    }, {
+        content: "check the font class to css",
+        trigger: '#wrapwrap img:eq(1)[height]:not([class*="fa"])',
+    }, {
+        content: "check the second font class to css",
+        trigger: '#wrapwrap img:eq(2)[style*="float: right"]',
+    }]);
 });
diff --git a/addons/web_editor/tests/test_ui.py b/addons/web_editor/tests/test_ui.py
index 22736ce7d3e..3a05da5acc9 100644
--- a/addons/web_editor/tests/test_ui.py
+++ b/addons/web_editor/tests/test_ui.py
@@ -11,7 +11,7 @@ class TestUi(odoo.tests.HttpCase):
     at_install = False
 
     def test_01_admin_rte(self):
-        self.phantom_js("/web", "odoo.__DEBUG__.services['web.Tour'].run('rte', 'test')", "odoo.__DEBUG__.services['web.Tour'].tours.rte", login='admin')
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('rte')", "odoo.__DEBUG__.services['web_tour.tour'].tours.rte.ready", login='admin')
 
     def test_02_admin_rte_inline(self):
-        self.phantom_js("/web", "odoo.__DEBUG__.services['web.Tour'].run('rte_inline', 'test')", "odoo.__DEBUG__.services['web.Tour'].tours.rte", login='admin')
+        self.phantom_js("/web", "odoo.__DEBUG__.services['web_tour.tour'].run('rte_inline')", "odoo.__DEBUG__.services['web_tour.tour'].tours.rte_inline.ready", login='admin')