[ENGAGE-2185] - Add MetaTemplateMessage tests

src/components/insights/widgets/MetaTemplateMessage.vue

@@ -1,53 +1,69 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <section class="meta-template-message">
-    <section class="meta-template-message__header">
+    <header class="meta-template-message__header">
       <section class="meta-template-message__container-title">
         <h2 class="meta-template-message__preview-label">
           {{ $t('template_messages_dashboard.template.preview') }}
         </h2>
 
-        <p style="margin-right: auto">
+        <p
+          class="meta-template-message__container-title__name"
+          data-testid="template-name"
+        >
           {{ props.template.name }}
         </p>
 
         <UnnnicIcon
+          data-testid="template-favorite"
           class="meta-template-message__favorite-icon"
           icon="star_rate"
           scheme="aux-yellow-500"
           clickable
         />
       </section>
       <QualityTemplateMessageFlag
+        data-testid="template-quality"
         showDot
         showInfo
         :quality="props.template.quality"
       />
-    </section>
-    <section class="meta-template-message__container-content">
+    </header>
+    <main class="meta-template-message__container-content">
       <section class="meta-template-message__preview">
         <img
           v-if="props.template.image"
           class="meta-template-message__preview-image"
           :src="props.template.image"
+          data-testid="template-image"
         />
 
-        <h2 class="meta-template-message__preview-title">
+        <h2
+          class="meta-template-message__preview-title"
+          data-testid="template-title"
+        >
           {{ props.template.title }}
         </h2>
 
-        <p class="meta-template-message__preview-text">
+        <article
+          class="meta-template-message__preview-text"
+          data-testid="template-text"
+        >
           {{ props.template.text }}
-        </p>
+        </article>
 
-        <p class="meta-template-message__preview-hint">
+        <p
+          class="meta-template-message__preview-hint"
+          data-testid="template-hint"
+        >
           {{ props.template.hint }}
         </p>
 
         <section
           v-for="(button, index) in props.template.buttons"
           :key="index"
           class="meta-template-message__preview-link"
+          data-testid="template-button"
         >
           <UnnnicIcon
             :icon="button.icon"
@@ -56,16 +72,17 @@
           <p>{{ button.label }}</p>
         </section>
       </section>
-    </section>
-    <section class="meta-template-message__edit">
+    </main>
+    <footer class="meta-template-message__edit">
       <UnnnicButton
         class="meta-template-message__edit-button"
         type="secondary"
+        data-testid="template-edit-button"
         @click.stop="$emit('open-edit-template')"
       >
         {{ $t('template_messages_dashboard.template.edit_template') }}
       </UnnnicButton>
-    </section>
+    </footer>
   </section>
 </template>
 
@@ -115,6 +132,10 @@ defineEmits(['open-edit-template']);
       font-size: 14px;
       font-style: normal;
       line-height: 22px;
+
+      &__name {
+        margin-right: auto;
+      }
     }
     &-content {
       background-color: $unnnic-color-background-grass;

src/components/insights/widgets/__tests__/MetaTemplateMessage.spec.js

@@ -0,0 +1,111 @@
+import { beforeEach, describe, it } from 'vitest';
+import { mount, config } from '@vue/test-utils';
+import { createI18n } from 'vue-i18n';
+import en from '@/locales/en.json';
+import UnnnicSystem from '@/utils/plugins/UnnnicSystem';
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en },
+  fallbackWarn: false,
+  missingWarn: false,
+});
+
+config.global.plugins = [i18n, UnnnicSystem];
+
+import MetaTemplateMessage from '../MetaTemplateMessage.vue';
+
+const templateMock = {
+  title: 'Template Title',
+  text: 'Template Text',
+  hint: `Template Hint`,
+  quality: 'high',
+  name: 'template_test',
+  image: 'https://img.com/img.png',
+  buttons: [
+    { icon: 'open_in_new', label: 'button1' },
+    { icon: 'reply', label: 'button2' },
+  ],
+};
+
+const createWrapper = () => {
+  return mount(MetaTemplateMessage, {
+    global: {
+      stubs: {
+        QualityTemplateMessageFlag: true,
+      },
+    },
+    props: {
+      template: templateMock,
+    },
+  });
+};
+
+describe('MetaTemplateMessage', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  it('renders the component with all template data', () => {
+    const wrapperText = wrapper.text();
+    expect(wrapperText).toContain('template_test');
+
+    expect(wrapperText).toContain('Template Title');
+    expect(wrapperText).toContain('Template Text');
+    expect(wrapperText).toContain('Template Hint');
+
+    const image = wrapper.find('[data-testid="template-image"]');
+    expect(image.exists()).toBe(true);
+    expect(image.attributes('src')).toBe('https://img.com/img.png');
+
+    const buttons = wrapper.findAll('[data-testid="template-button"]');
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0].text()).toContain('button1');
+    expect(buttons[1].text()).toContain('button2');
+  });
+
+  it('does not render the image if "image" prop is missing', async () => {
+    await wrapper.setProps({ template: { image: null } });
+
+    const image = wrapper.find('[data-testid="template-image"]');
+    expect(image.exists()).toBe(false);
+  });
+
+  it('renders the quality flag with the correct quality', () => {
+    const qualityFlag = wrapper.findComponent({
+      name: 'QualityTemplateMessageFlag',
+    });
+    expect(qualityFlag.exists()).toBe(true);
+    expect(qualityFlag.props('quality')).toBe('high');
+  });
+
+  it('emits "open-edit-template" when the edit button is clicked', async () => {
+    const editButton = wrapper.find('[data-testid="template-edit-button"]');
+    await editButton.trigger('click');
+
+    expect(wrapper.emitted('open-edit-template')).toBeTruthy();
+  });
+
+  it('renders buttons dynamically based on props', () => {
+    const buttons = wrapper.findAll('[data-testid="template-button"]');
+    expect(buttons).toHaveLength(2);
+
+    expect(buttons[0].text()).toContain('button1');
+    expect(buttons[1].text()).toContain('button2');
+  });
+
+  it('handles missing props gracefully', async () => {
+    await wrapper.setProps({
+      template: { ...templateMock, buttons: null, text: null, hint: null },
+    });
+
+    const buttons = wrapper.findAll('[data-testid="template-button"]');
+    expect(buttons).toHaveLength(0);
+
+    expect(wrapper.text()).not.toContain('Template Text');
+    expect(wrapper.text()).not.toContain('Template Hint');
+  });
+});