fix(emoji-text-wrapper): DLT-2455 skip vue3 comment vnodes when extracting text for emojis (#686)

Author: noellelevydialpad

packages/dialtone-vue2/components/emoji_text_wrapper/emoji_text_wrapper.test.js

@@ -149,6 +149,22 @@ describe('DtEmojiTextWrapper Tests', () => {
           });
         });
       });
+
+      describe('When default slot contains html', () => {
+        beforeEach(() => {
+          mockSlots = { default: 'this <strong>noun</strong> being <em>bolded :star_struck:</em> is <!--slightly--> impressive!' }
+
+          updateWrapper();
+        });
+
+        it('Contains emoji component', () => {
+          expect(emoji.exists()).toBe(true);
+        });
+
+        it('Does not render comments as text', () => {
+          expect(wrapper.text()).not.toContain('slightly');
+        });
+      });
     });
 
     describe('When default slot is not provided', () => {

packages/dialtone-vue3/components/emoji_text_wrapper/emoji_text_wrapper.test.js

@@ -143,6 +143,22 @@ describe('DtEmojiTextWrapper Tests', () => {
           });
         });
       });
+
+      describe('When default slot contains html', () => {
+        beforeEach(() => {
+          mockSlots = { default: 'this <strong>noun</strong> being <em>bolded :star_struck:</em> is <!--slightly--> impressive!' }
+
+          updateWrapper();
+        });
+
+        it('Contains emoji component', () => {
+          expect(emoji.exists()).toBe(true);
+        });
+
+        it('Does not render comments as text', () => {
+          expect(wrapper.text()).not.toContain('slightly');
+        });
+      });
     });
 
     describe('When default slot is not provided', () => {

packages/dialtone-vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue

@@ -1,9 +1,11 @@
 <script>
 import { DtEmoji } from '../emoji';
 import { findEmojis, findShortCodes } from '@/common/emoji';
-import { h } from 'vue';
+import { h, resolveDynamicComponent } from 'vue';
 import { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';
 
+const COMMENT_TYPE = h(resolveDynamicComponent(null)).type;
+
 /**
  * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.
  * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html
@@ -77,6 +79,7 @@ export default {
      */
     searchVNodes (VNode) {
       if (typeof VNode === 'string') return this.searchCodes(VNode);
+      if (VNode.type === COMMENT_TYPE) return VNode;
       if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);
       if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);