@mozaic-ds/vue/src/components/pageheader/MPageHeader.spec.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import { shallowMount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import MPageHeader from './MPageHeader.vue';

describe('MPageHeader', () => {
  describe('Render basics', () => {
    it('renders the title', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page' },
      });

      expect(wrapper.text()).toContain('My Page');
    });

    it('adds shadow class when shadow prop is true', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page', shadow: true },
      });

      expect(wrapper.classes()).toContain('mc-page-header--with-shadow');
    });

    it('renders content slot when provided', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page' },
        slots: {
          content: '<div class="slot-content">ContentSlot</div>',
        },
      });

      expect(wrapper.find('.slot-content').exists()).toBe(true);
    });

    it('renders features slot when provided', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page' },
        slots: {
          actions: '<button class="feature-btn">Feature</button>',
        },
      });

      expect(wrapper.find('.feature-btn').exists()).toBe(true);
      expect(wrapper.find('.mc-page-header__features-wrapper').exists()).toBe(
        true,
      );
    });

    it('renders context slot when provided', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page' },
        slots: {
          context: '<div class="context-slot">Context</div>',
        },
      });

      expect(wrapper.find('.context-slot').exists()).toBe(true);
    });

    it('renders tabs slot when provided', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page' },
        slots: {
          tabs: '<div class="tab-item">Tab 1</div>',
        },
      });

      expect(wrapper.find('.tab-item').exists()).toBe(true);
    });
  });

  describe('Buttons and emitted events', () => {
    it('shows back button and emits "back" when clicked', async () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page', backButton: true },
      });

      const backBtn = wrapper.find('[aria-label="Back button"]');
      expect(backBtn.exists()).toBe(true);

      await backBtn.trigger('click');
      expect(wrapper.emitted()).toHaveProperty('back');
    });

    it('does not render back button when backButton is false', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page', backButton: false },
      });

      expect(wrapper.find('[aria-label="Back button"]').exists()).toBe(false);
    });

    it('burger menu button emits "toggle-menu" when clicked', async () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page' },
      });

      const burger = wrapper.find('[aria-label="Burger menu"]');
      expect(burger.exists()).toBe(true);

      await burger.trigger('click');
      expect(wrapper.emitted()).toHaveProperty('toggle-menu');
    });
  });

  describe('Status and extra info', () => {
    it('renders status badge when status and statusLabel are provided', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: {
          title: 'My Page',
          status: 'success',
          statusLabel: 'OK',
        },
      });

      expect(wrapper.findComponent({ name: 'MStatusBadge' }).exists()).toBe(
        true,
      );
    });

    it('does not render status badge if statusLabel is missing', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: {
          title: 'My Page',
          status: 'success',
        },
      });

      expect(wrapper.findComponent({ name: 'MStatusBadge' }).exists()).toBe(
        false,
      );
    });

    it('renders extra info when provided', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: {
          title: 'My Page',
          extraInfo: 'Details',
        },
      });

      expect(wrapper.find('.mc-page-header__extra-info').text()).toBe(
        'Details',
      );
    });

    it('renders info wrapper only when status or extraInfo exists', () => {
      const wrapper = shallowMount(MPageHeader, {
        props: { title: 'My Page' },
      });

      expect(wrapper.find('.mc-page-header__info-wrapper').exists()).toBe(
        false,
      );
    });
  });
});