From 083e35f570cb7e56d59ca5d6dcbc18959c00344f Mon Sep 17 00:00:00 2001
From: Julien Banken <jbn@odoo.com>
Date: Wed, 8 Jun 2022 09:35:13 +0000
Subject: [PATCH] [FIX] knowledge: make custom emoji picker compatible with new
 standard templates

The template of the standard emoji picker has recently been updated. This
commit will update the emoji picker of Knowledge to make the custom
component compatible with the new standard templates.

Related: https://github.com/odoo/odoo/commit/9830406020ef1c3b0c57045a6e285a31ebf81143
task-2871883

closes odoo/odoo#93243

X-original-commit: 7f35a0bf19bfe02200244847b09ae43f4bc02494
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 .../components/emoji_picker/emoji_picker.js   | 17 +++++--
 .../tests/tours/knowledge_pick_emoji_tour.js  | 48 +++++++++++++++++++
 .../knowledge/tests/test_knowledge_form_ui.py | 13 +++--
 3 files changed, 70 insertions(+), 8 deletions(-)
 create mode 100644 addons/knowledge/static/tests/tours/knowledge_pick_emoji_tour.js

diff --git a/addons/knowledge/static/src/components/emoji_picker/emoji_picker.js b/addons/knowledge/static/src/components/emoji_picker/emoji_picker.js
index bebcac7d906..6af19dade90 100644
--- a/addons/knowledge/static/src/components/emoji_picker/emoji_picker.js
+++ b/addons/knowledge/static/src/components/emoji_picker/emoji_picker.js
@@ -16,8 +16,7 @@ class Emoji extends Component {
 
 Emoji.template = 'mail.Emoji';
 Emoji.props = {
-    emoji: Object,
-    emojiListView: Object,
+    emojiView: Object
 };
 
 class EmojiPicker extends Component {
@@ -26,15 +25,23 @@ class EmojiPicker extends Component {
      */
     setup () {
         // Mock the template variables:
-        this.emojis = emojis;
         this.className = '';
-        this.emojiListView = {
+        const viewEventHandlers =  {
             /**
              * @param {Event} event
              */
             onClickEmoji: event => {
                 this.props.onClickEmoji(event.target.dataset.unicode);
-            }
+            },
+        };
+        this.emojiListView = {
+            emojiViews: emojis.map((emoji, index) => {
+                return {
+                    localId: index,
+                    emoji: emoji,
+                    emojiListView: viewEventHandlers
+                };
+            })
         };
     }
 
diff --git a/addons/knowledge/static/tests/tours/knowledge_pick_emoji_tour.js b/addons/knowledge/static/tests/tours/knowledge_pick_emoji_tour.js
new file mode 100644
index 00000000000..22a5f32c532
--- /dev/null
+++ b/addons/knowledge/static/tests/tours/knowledge_pick_emoji_tour.js
@@ -0,0 +1,48 @@
+/** @odoo-module */
+
+import tour from 'web_tour.tour';
+
+tour.register('knowledge_pick_emoji_tour', {
+    test: true,
+    url: '/web',
+}, [tour.stepUtils.showAppsMenuItem(), {
+    // open Knowledge App
+    trigger: '.o_app[data-menu-xmlid="knowledge.knowledge_menu_root"]',
+}, {
+    // click on the main "Create" action
+    trigger: '.o_knowledge_header .btn:contains("Create")',
+}, {
+    trigger: 'section[data-section="private"] .o_article .o_article_name:contains("New Article")',
+    run: () => {}, // check that the article is correctly created (private section)
+}, {
+    trigger: '.o_knowledge_icon_cover_buttons',
+    run: () => {
+        // force the cover buttons to be visible (it's only visible on hover)
+        $('.o_knowledge_add_icon, .o_knowledge_add_cover').css({
+            opacity: 1,
+            visibility: 'visible'
+        });
+    },
+}, {
+    // add a random emoji
+    trigger: '.o_knowledge_add_icon',
+    run: 'click',
+}, {
+    trigger: '.o_knowledge_body .o_article_emoji',
+    run: 'click',
+}, {
+    trigger: '.o_article_emoji_dropdown_panel span[data-unicode="😃"]',
+    run: 'click',
+}, {
+    // check that the emoji has been properly changed in the article body
+    trigger: '.o_knowledge_body .o_article_emoji:contains(😃)',
+    run: () => {},
+}, {
+    // check that the emoji has been properly changed in the header
+    trigger: '.o_knowledge_header .o_article_emoji:contains(😃)',
+    run: () => {},
+}, {
+    // check that the emoji has been properly changed in the aside block
+    trigger: '.o_knowledge_aside .o_article_emoji_active:contains(😃)',
+    run: () => {}
+}]);
diff --git a/addons/knowledge/tests/test_knowledge_form_ui.py b/addons/knowledge/tests/test_knowledge_form_ui.py
index 736d4b1bf03..bd4248b18aa 100644
--- a/addons/knowledge/tests/test_knowledge_form_ui.py
+++ b/addons/knowledge/tests/test_knowledge_form_ui.py
@@ -7,11 +7,13 @@ from odoo.tests.common import tagged, HttpCase
 
 @tagged('post_install', '-at_install', 'knowledge', 'knowledge_tour')
 class TestKnowledgeUI(HttpCase):
+    @classmethod
+    def setUpClass(cls):
+        super(TestKnowledgeUI, cls).setUpClass()
+        # remove existing articles to ease tour management
+        cls.env['knowledge.article'].search([]).unlink()
 
     def test_knowledge_main_flow(self):
-        # remove existing articles to ease tour management
-        self.env['knowledge.article'].search([]).unlink()
-
         # as the knowledge.article#_resequence method is based on write date
         # force the write_date to be correctly computed
         # otherwise it always returns the same value as we are in a single transaction
@@ -65,3 +67,8 @@ class TestKnowledgeUI(HttpCase):
         self.assertEqual(len(article_favorites), 2)
         self.assertEqual(article_favorites[0].article_id, private_article)
         self.assertEqual(article_favorites[1].article_id, workspace_article)
+
+    def test_knowledge_pick_emoji(self):
+        """This tour will check that the emojis of the form view are properly updated
+           when the user picks an emoji from an emoji picker."""
+        self.start_tour('/web', 'knowledge_pick_emoji_tour', login='admin', step_delay=100)