[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>

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
+                };
+            })
         };
     }
 

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: () => {}
+}]);

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)