[FIX] Make tour declarative to enable autotests

bzr revid: ddm@openerp.com-20131206133239-mrhduf2fi0sm8sh7

3 files changed, 154 insertions, 110 deletions

diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js
index 22582ecc9e3..b93d1c2c761 100644
--- a/addons/website/static/src/js/website.snippets.editor.js
+++ b/addons/website/static/src/js/website.snippets.editor.js
@@ -207,17 +207,17 @@
                 self.make_active($target);
             });
         },
-        snippet_blur: function ($snipped_id) {
-            if ($snipped_id) {
-                if ($snipped_id.data("snippet-editor")) {
-                    $snipped_id.data("snippet-editor").onBlur();
+        snippet_blur: function ($snippet) {
+            if ($snippet) {
+                if ($snippet.data("snippet-editor")) {
+                    $snippet.data("snippet-editor").onBlur();
                 }
             }
         },
-        snippet_focus: function ($snipped_id) {
-            if ($snipped_id) {
-                if ($snipped_id.data("snippet-editor")) {
-                    $snipped_id.data("snippet-editor").onFocus();
+        snippet_focus: function ($snippet) {
+            if ($snippet) {
+                if ($snippet.data("snippet-editor")) {
+                    $snippet.data("snippet-editor").onFocus();
                 }
             }
         },
@@ -230,31 +230,34 @@
                 }
             }
         },
-        make_active: function ($snipped_id) {
-            if ($snipped_id && this.$active_snipped_id && this.$active_snipped_id.get(0) === $snipped_id.get(0)) {
+        make_active: function ($snippet) {
+            if ($snippet && this.$active_snipped_id && this.$active_snipped_id.get(0) === $snippet.get(0)) {
                 return;
             }
             if (this.$active_snipped_id) {
                 this.snippet_blur(this.$active_snipped_id);
                 this.$active_snipped_id = false;
             }
-            if ($snipped_id && $snipped_id.length) {
-                if(_.indexOf(this.snippets, $snipped_id.get(0)) === -1) {
-                    this.snippets.push($snipped_id.get(0));
+            if ($snippet && $snippet.length) {
+                if(_.indexOf(this.snippets, $snippet.get(0)) === -1) {
+                    this.snippets.push($snippet.get(0));
                 }
-                this.$active_snipped_id = $snipped_id;
+                this.$active_snipped_id = $snippet;
                 this.create_overlay(this.$active_snipped_id);
-                this.snippet_focus($snipped_id);
+                this.snippet_focus($snippet);
+            }
+            if (_.isFunction($snippet.trigger)) {
+                $snippet.trigger('tour:snippet_activated');
             }
         },
-        create_overlay: function ($snipped_id) {
-            if (typeof $snipped_id.data("snippet-editor") === 'undefined') {
-                var $targets = this.activate_overlay_zones($snipped_id);
+        create_overlay: function ($snippet) {
+            if (typeof $snippet.data("snippet-editor") === 'undefined') {
+                var $targets = this.activate_overlay_zones($snippet);
                 if (!$targets.length) return;
-                var editor = website.snippet.editorRegistry[$snipped_id.data("snippet-id")] || website.snippet.editorRegistry.resize;
-                $snipped_id.data("snippet-editor", new editor(this, $snipped_id));
+                var editor = website.snippet.editorRegistry[$snippet.data("snippet-id")] || website.snippet.editorRegistry.resize;
+                $snippet.data("snippet-editor", new editor(this, $snippet));
             }
-            this.cover_target($snipped_id.data('overlay'), $snipped_id);
+            this.cover_target($snippet.data('overlay'), $snippet);
         },
 
         path_eval: function(path){
@@ -869,7 +872,7 @@
                 var editor = new Editor(self, self.$target, val['snippet-style-id']);
                 $ul.prepend(editor.$el);
             });
-            
+
             if ($ul.find("li").length) {
                 $styles.removeClass("hidden");
             }
@@ -1149,7 +1152,7 @@
             }
         },
     });
- 
+
     website.snippet.editorRegistry.slider = website.snippet.editorRegistry.resize.extend({
         drop_and_build_snippet: function() {
             var id = $(".carousel").length;
@@ -1224,7 +1227,7 @@
             var new_index = 0;
             var cycle = this.$inner.find('.item').length - 1;
             var index = this.$inner.find('.item.active').index();
-            
+
             if (cycle > 0) {
                 this.remove_process = true;
                 var $el = this.$inner.find('.item.active');
diff --git a/addons/website/static/src/js/website.tour.banner.js b/addons/website/static/src/js/website.tour.banner.js
index 75838ada953..a60ac05a633 100644
--- a/addons/website/static/src/js/website.tour.banner.js
+++ b/addons/website/static/src/js/website.tour.banner.js
@@ -11,7 +11,7 @@
     });
 
     website.BannerTour = website.Tour.extend({
-        id: 'banner-tutorial',
+        id: 'banner',
         name: "Insert a banner",
         startPath: '/page/website.homepage',
         init: function (editor) {
@@ -19,11 +19,10 @@
             self.steps = [
                 {
                     stepId: 'welcome',
-                    orphan: true,
-                    backdrop: true,
                     title: "Welcome to your website!",
                     content: "This tutorial will guide you to build your home page. We will start by adding a banner.",
                     template: self.popover({ next: "Start Tutorial", end: "Skip It" }),
+                    backdrop: true,
                 },
                 {
                     stepId: 'edit-page',
@@ -31,8 +30,10 @@
                     placement: 'bottom',
                     title: "Edit this page",
                     content: "Every page of your website can be modified through the <i>Edit</i> button.",
-                    triggers: function () {
-                        editor.on('tour:editor_bar_loaded', self, self.moveToNextStep);
+                    trigger: {
+                        emitter: editor,
+                        type: 'openerp',
+                        id: 'tour:editor_bar_loaded',
                     },
                 },
                 {
@@ -41,11 +42,7 @@
                     placement: 'bottom',
                     title: "Insert building blocks",
                     content: "To add content in a page, you can insert building blocks.",
-                    triggers: function () {
-                        $('button[data-action=snippet]').one('click', function () {
-                            self.moveToNextStep();
-                        });
-                    }
+                    trigger: 'click',
                 },
                 {
                     stepId: 'drag-banner',
@@ -53,9 +50,7 @@
                     placement: 'bottom',
                     title: "Drag & Drop a Banner",
                     content: "Drag the Banner block and drop it in your page.",
-                    triggers: function () {
-                        self.onSnippetDraggedAdvance();
-                    },
+                    trigger: 'drag',
                 },
                 {
                     stepId: 'edit-title',
@@ -64,7 +59,7 @@
                     title: "Customize banner's text",
                     content: "Click in the text and start editing it. Click continue once it's done.",
                     template: self.popover({ next: "Continue" }),
-                    triggers: function () {
+                    onStart: function () {
                         var $banner = $("#wrap [data-snippet-id=carousel]:first");
                         if ($banner.length) {
                             $banner.click();
@@ -85,11 +80,7 @@
                     placement: 'bottom',
                     title: "Add Another Block",
                     content: "Let's add another building block to your page.",
-                    triggers: function () {
-                        $('button[data-action=snippet]').one('click', function () {
-                            self.moveToNextStep();
-                        });
-                    }
+                    trigger: 'click',
                 },
                 {
                     stepId: 'drag-three-columns',
@@ -97,9 +88,7 @@
                     placement: 'bottom',
                     title: "Drag & Drop a Block",
                     content: "Drag the <em>'3 Columns'</em> block and drop it below the banner.",
-                    triggers: function () {
-                        self.onSnippetDraggedAdvance();
-                    },
+                    trigger: 'drag',
                 },
                 {
                     stepId: 'activate-text-block-title',
@@ -107,31 +96,28 @@
                     placement: 'top',
                     title: "Edit an Area",
                     content: "Select any area of the page to modify it. Click on this subtitle.",
-                    triggers: function () {
-                        $('#wrap [data-snippet-id=three-columns] .text-center[data-snippet-id=colmd]').one('click', function () {
-                            self.moveToNextStep();
-                        });
+                    trigger: {
+                        id: 'tour:snippet_activated'
                     },
                 },
                 {
                     stepId: 'remove-text-block-title',
                     element: '.ui-draggable.oe_active .oe_snippet_remove',
                     placement: 'top',
-                    reflex: true,
                     title: "Delete the Title",
                     content: "From this toolbar you can move, duplicate or delete the selected zone. Click on the trash can to delete the title.",
+                    trigger: 'click',
                 },
                 {
                     stepId: 'save-changes',
                     element: 'button[data-action=save]',
                     placement: 'right',
-                    reflex: true,
                     title: "Save your modifications",
                     content: "Publish your page by clicking on the <em>'Save'</em> button.",
+                    trigger: 'click',
                 },
                 {
                     stepId: 'part-2',
-                    orphan: true,
                     title: "Congratulation!",
                     content: "Your homepage has been updated.",
                     template: self.popover({ next: "Continue" }),
@@ -142,35 +128,31 @@
                     placement: 'bottom',
                     title: "Test Your Mobile Version",
                     content: "Let's check how your homepage looks like on mobile devices.",
-                    triggers: function () {
-                        $(document).one('shown.bs.modal', function () {
-                            self.moveToNextStep();
-                        });
-                    }
+                    trigger: {
+                        emitter: $(document),
+                        id: 'shown.bs.modal',
+                    },
                 },
                 {
                     stepId: 'show-mobile-close',
                     element: 'button[data-dismiss=modal]',
                     placement: 'right',
-                    reflex: true,
                     title: "Close Mobile Preview",
                     content: "Scroll in the mobile preview to test the rendering. Once it's ok, close this dialog.",
+                    trigger: 'click',
                 },
                 {
                     stepId: 'show-tutorials',
                     element: '#help-menu-button',
                     placement: 'left',
-                    reflex: true,
                     title: "More Tutorials",
                     content: "Get more tutorials through this <em>'Help'</em> menu or click on the left <em>'Edit'</em> button to continue modifying this page.",
                     template: self.popover({ end: "Close Tutorial" }),
+                    trigger: 'click',
                 }
             ];
             return this._super();
         },
-        resume: function () {
-            return this.isCurrentStep('part-2') && this._super();
-        },
     });
 
 }());
diff --git a/addons/website/static/src/js/website.tour.js b/addons/website/static/src/js/website.tour.js
index a14a55bded5..d028f15afdd 100644
--- a/addons/website/static/src/js/website.tour.js
+++ b/addons/website/static/src/js/website.tour.js
@@ -14,49 +14,76 @@
                 storage: this.tourStorage,
                 keyboard: false,
                 template: this.popover(),
+                onHide: function () {
+                    window.scrollTo(0, 0);
+                }
             });
             this.registerSteps();
         },
         registerSteps: function () {
             var self = this;
             this.tour.addSteps(_.map(this.steps, function (step) {
-               step.title = openerp.qweb.render('website.tour_popover_title', { title: step.title });
-               if (step.modal) {
-                   step.onShow = function () {
-                        var $doc = $(document);
-                        function onStop () {
-                            if (step.modal.stopOnClose) {
-                                self.stop();
-                            }
+                step.title = openerp.qweb.render('website.tour_popover_title', { title: step.title });
+                if (!step.element) {
+                    step.orphan = true;
+                }
+                if (step.trigger) {
+                    if (step.trigger === 'click') {
+                        step.triggers = function (callback) {
+                            $(step.element).one('click', function () {
+                                (callback || self.moveToNextStep).call(self);
+                            });
+                        };
+                    } else if (step.trigger === 'drag') {
+                        step.triggers = function (callback) {
+                            self.onSnippetDragged(callback || self.moveToNextStep);
+                        };
+                    } else if (step.trigger && step.trigger.id) {
+                        if (step.trigger.emitter && step.trigger.type === 'openerp') {
+                            step.triggers = function (callback) {
+                                step.trigger.emitter.on(step.trigger.id, self, function customHandler () {
+                                    step.trigger.emitter.off(step.trigger.id, customHandler);
+                                    (callback || self.moveToNextStep).apply(self, arguments);
+                                });
+                            };
+                        } else {
+                            step.triggers = function (callback) {
+                                var emitter = step.trigger.emitter || $(step.element);
+                                emitter.one(step.trigger.id, function customHandler () {
+                                    (callback || self.moveToNextStep).apply(self, arguments);
+                                });
+                            };
                         }
-                        $doc.on('hide.bs.modal', onStop);
-                        $doc.one('shown.bs.modal', function () {
-                            $('.modal button.btn-primary').one('click', function () {
-                                $doc.off('hide.bs.modal', onStop);
-                                self.moveToStep(step.modal.afterSubmit);
+                    } else if (step.trigger.modal) {
+                        step.triggers = function (callback) {
+                            var $doc = $(document);
+                            function onStop () {
+                                if (step.trigger.modal.stopOnClose) {
+                                    self.stop();
+                                }
+                            }
+                            $doc.on('hide.bs.modal', onStop);
+                            $doc.one('shown.bs.modal', function () {
+                                $('.modal button.btn-primary').one('click', function () {
+                                    $doc.off('hide.bs.modal', onStop);
+                                    self.moveToStep(step.trigger.modal.afterSubmit);
+                                });
+                                (callback || self.moveToNextStep).call(self);
                             });
-                            self.moveToNextStep();
-                        });
+                        };
+                    }
+                }
+                step.onShow = (function () {
+                    var executed = false;
+                    return function () {
+                        if (!executed) {
+                            _.isFunction(step.onStart) && step.onStart();
+                            _.isFunction(step.triggers) && step.triggers();
+                            executed = true;
+                        }
                     };
-               } else if (step.triggers) {
-                   step.onShow = (function () {
-                       var executed = false;
-                       return function () {
-                           if (!executed) {
-                               step.triggers();
-                               executed = true;
-                           }
-                       };
-                   }());
-               } else if (step.reflex) {
-                   step.onShow = function () {
-                       $(step.element).one('click', function () {
-                           self.moveToNextStep();
-                       });
-                   };
-                   delete step.reflex;
-               }
-               return step;
+                }());
+                return step;
             }));
         },
         reset: function () {
@@ -108,7 +135,7 @@
         redirect: function (url) {
             url = url || new website.UrlParser(window.location.href);
             var path = (this.startPath && url.pathname !== this.startPath) ? this.startPath : url.pathname;
-            var search = url.addToSearch(this.id + "=true");
+            var search = url.activateTutorial(this.id);
             var newUrl = path + search;
             window.location.replace(newUrl);
         },
@@ -122,8 +149,7 @@
         trigger: function (url) {
             // Override if necessary
             url = url || new website.UrlParser(window.location.href);
-            var urlTrigger = this.id + "=true";
-            return url.search.indexOf(urlTrigger) >= 0;
+            return url.isActive(this.id);
         },
         testUrl: function (pattern) {
             var url = new website.UrlParser(window.location.href);
@@ -132,21 +158,22 @@
         popover: function (options) {
             return openerp.qweb.render('website.tour_popover', options);
         },
-        onSnippetDraggedAdvance: function (snippetId, stepId) {
+        onSnippetDragged: function (callback) {
             var self = this;
             function beginDrag () {
                 $('.popover.tour').remove();
                 function advance () {
-                    if (stepId) {
-                        self.moveToStep(stepId);
-                    } else {
-                        self.moveToNextStep();
+                    if (_.isFunction(callback)) {
+                        callback.call(self);
                     }
                 }
                 $(document.body).one('mouseup', advance);
             }
             $('#website-top-navbar [data-snippet-id].ui-draggable').one('mousedown', beginDrag);
         },
+        onSnippetDraggedAdvance: function () {
+            onSnippetDragged(self.moveToNextStep);
+        },
     });
 
     website.UrlParser = openerp.Class.extend({
@@ -162,21 +189,35 @@
             this.origin = a.origin;
             this.search = a.search;
             this.hash = a.hash;
-            this.addToSearch= function (query) {
+            function generateTrigger (id) {
+                return "tutorial."+id+"=true";
+            }
+            this.activateTutorial = function (id) {
+                var urlTrigger = generateTrigger(id);
                 var querystring = _.filter(this.search.split('?'), function (str) {
                     return str;
                 });
                 if (querystring.length > 0) {
-                    var queries = querystring[0].split("&");
-                    queries.push(query);
-                    return "?" + _.uniq(queries).join("&");
+                    var queries = _.filter(querystring[0].split("&"), function (query) {
+                        return query.indexOf("tutorial.") < 0
+                    });
+                    queries.push(urlTrigger);
+                    return "?"+_.uniq(queries).join("&");
                 } else {
-                    return "?"+query;
+                    return "?"+urlTrigger;
                 }
             };
+            this.isActive = function (id) {
+                var urlTrigger = generateTrigger(id);
+                return this.search.indexOf(urlTrigger) >= 0;
+            };
         },
     });
 
+    var TestConsole = website.TestConsole = {
+        tests: []
+    };
+
     website.EditorBar.include({
         tours: [],
         start: function () {
@@ -202,6 +243,24 @@
         },
         registerTour: function (tour) {
             this.tours.push(tour);
+            TestConsole.tests.push({
+                id: tour.id,
+                run: function runTest () {
+                    var actionSteps = _.filter(tour.steps, function (step) {
+                       return step.triggers;
+                    });
+                    var currentIndex = 0;
+                    function executeStep (step) {
+                       var $element = $(step.element);
+                       step.triggers(function () {
+                           currentIndex = currentIndex + 1;
+                           executeStep(actionSteps[currentIndex]);
+                       });
+                       $element.click();
+                    }
+                    executeStep(actionSteps[currentIndex]);
+                },
+            });
         },
     });