@mozaic-ds/vue/src/components/tileexpandable/MTileExpandable.spec.ts

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

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

describe('MTileExpandable', () => {
  it('applies appearance modifier when not primary', () => {
    const wrapper = mount(MTileExpandable, {
      props: { appearance: 'secondary' },
    });

    expect(wrapper.classes()).toContain('mc-tile--secondary');
  });

  it('applies bordered class when bordered is true', () => {
    const wrapper = mount(MTileExpandable, {
      props: { bordered: true },
    });

    expect(wrapper.classes()).toContain('mc-tile--bordered');
  });

  it('applies trigger mode class when trigger is not container', () => {
    const wrapper = mount(MTileExpandable, {
      props: { trigger: 'icon' },
    });

    expect(wrapper.classes()).toContain('mc-tile--trigger-icon');
  });

  it('does not apply trigger mode class when trigger is container', () => {
    const wrapper = mount(MTileExpandable, {
      props: { trigger: 'container' },
    });

    expect(
      wrapper.classes().some((c) => c.startsWith('mc-tile--trigger-')),
    ).toBe(false);
  });

  it('renders container as button when trigger is container', async () => {
    const wrapper = mount(MTileExpandable, {
      props: { trigger: 'container' },
    });

    const header = wrapper.find('.mc-tile__header');
    expect(header.element.tagName).toBe('BUTTON');

    expect(header.attributes('aria-controls')).toBeTruthy();
    expect(header.attributes('aria-expanded')).toBe('false');

    await header.trigger('click');
    expect(header.attributes('aria-expanded')).toBe('true');
  });

  it('renders icon button when trigger is icon', async () => {
    const wrapper = mount(MTileExpandable, {
      props: { trigger: 'icon' },
    });

    const iconButton = wrapper.findComponent({ name: 'MIconButton' });
    expect(iconButton.exists()).toBe(true);

    const header = wrapper.find('.mc-tile__header');
    expect(header.element.tagName).toBe('DIV');
    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
      'true',
    );

    await iconButton.trigger('click');
    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
      'false',
    );
  });

  it('renders action button when trigger is button', async () => {
    const wrapper = mount(MTileExpandable, {
      props: { trigger: 'button', label: 'Expand' },
    });

    const button = wrapper.findComponent({ name: 'MButton' });
    expect(button.exists()).toBe(true);
    expect(button.text()).toContain('Expand');

    await button.trigger('click');
    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
      'false',
    );
  });

  it('toggles open state when clicking header in container mode', async () => {
    const wrapper = mount(MTileExpandable, {
      props: { trigger: 'container' },
    });

    const header = wrapper.find('.mc-tile__header');
    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
      'true',
    );

    await header.trigger('click');
    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
      'false',
    );

    await header.trigger('click');
    expect(wrapper.find('.mc-tile__content').attributes('aria-hidden')).toBe(
      'true',
    );
  });

  it('content slot has id matching aria-controls', () => {
    const wrapper = mount(MTileExpandable, {
      props: { trigger: 'container' },
    });

    const header = wrapper.find('.mc-tile__header');
    const content = wrapper.find('.mc-tile__content');

    expect(content.attributes('id')).toBe(header.attributes('aria-controls'));
  });
});