@mozaic-ds/vue/src/components/pagination/MPagination.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 MPagination from './MPagination.vue';

const options = [
  { value: 1, text: 'Page 1' },
  { value: 2, text: 'Page 2' },
  { value: 3, text: 'Page 3' },
];

describe('MPagination component', () => {
  it('renders correctly with select when compact is false', () => {
    const wrapper = mount(MPagination, {
      props: {
        id: 'test-pagination',
        modelValue: 2,
        options,
        compact: false,
        selectLabel: 'Select page',
      },
    });

    // Check buttons rendered as MButton (not MIconButton)
    expect(wrapper.findAllComponents({ name: 'MButton' }).length).toBe(2);
    expect(wrapper.findAllComponents({ name: 'MIconButton' }).length).toBe(0);

    // Check select is present
    expect(wrapper.find('select').exists()).toBe(true);
  });

  it('renders icon buttons only when compact is true', () => {
    const wrapper = mount(MPagination, {
      props: {
        id: 'test-pagination',
        modelValue: 2,
        options,
        compact: true,
      },
    });

    // MIconButton rendered for previous and next
    expect(wrapper.findAllComponents({ name: 'MIconButton' }).length).toBe(2);
    // No MButton when compact
    expect(wrapper.findAllComponents({ name: 'MButton' }).length).toBe(0);

    // No select rendered
    expect(wrapper.find('select').exists()).toBe(false);
  });

  it('disables previous button if on first page', async () => {
    const wrapper = mount(MPagination, {
      props: {
        id: 'test-pagination',
        modelValue: 1,
        options,
      },
    });
    const prevButton = wrapper.findAllComponents({ name: 'MButton' })[0];
    expect(prevButton.attributes('disabled')).toBeDefined();
  });

  it('disables next button if on last page', async () => {
    const wrapper = mount(MPagination, {
      props: {
        id: 'test-pagination',
        modelValue: 3,
        options,
      },
    });
    const buttons = wrapper.findAllComponents({ name: 'MButton' });
    const nextButton = buttons[buttons.length - 1];
    expect(nextButton.attributes('disabled')).toBeDefined();
  });

  it('clicking previous button updates the modelValue', async () => {
    const wrapper = mount(MPagination, {
      props: {
        id: 'test-pagination',
        modelValue: 2,
        options,
      },
    });

    await wrapper.findAllComponents({ name: 'MButton' })[0].trigger('click');
    // Should emit update:modelValue with value 1 (previous page)
    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
    expect(wrapper.emitted('update:modelValue')![0]).toEqual([1]);
  });

  it('clicking next button updates the modelValue', async () => {
    const wrapper = mount(MPagination, {
      props: {
        id: 'test-pagination',
        modelValue: 2,
        options,
      },
    });

    const buttons = wrapper.findAllComponents({ name: 'MButton' });
    await buttons[buttons.length - 1].trigger('click');

    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
    expect(wrapper.emitted('update:modelValue')![0]).toEqual([3]);
  });

  it('emits update:modelValue when select value changes', async () => {
    const wrapper = mount(MPagination, {
      props: {
        id: 'test-pagination',
        modelValue: 1,
        options,
        compact: false,
        selectLabel: 'Select page',
      },
    });

    const select = wrapper.find('select');
    await select.setValue('3');

    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
    expect(wrapper.emitted('update:modelValue')![0]).toEqual([3]);
  });
});