@engie-group/fluid-design-system-vue/src/components/button/NjButton.test.ts

Fluid Design System Vue

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

import Button from './NjButton.vue';

describe('Button', () => {
  it('renders all base variants correctly', () => {
    const variants = ['primary', 'secondary', 'destructive', 'inverse'];

    for (const variant of variants) {
      const wrapper = mount(Button, {
        slots: {
          default: 'Do an action',
        },
        props: {
          variant,
        },
      });

      expect(wrapper.element).toMatchSnapshot();
    }
  });

  it('renders all sizes correctly', () => {
    const sizes = ['xsmall', 'small', 'normal', 'large'];

    for (const size of sizes) {
      const wrapper = mount(Button, {
        slots: {
          default: 'Do an action',
        },
        props: {
          size,
        },
      });

      expect(wrapper.element).toMatchSnapshot();
    }
  });

  it('renders button with icon correctly', () => {
    const wrapper = mount(Button, {
      slots: {
        default: 'Do an action',
      },
      props: {
        icon: 'add',
      },
    });

    expect(wrapper.element).toMatchSnapshot();
  });

  it('renders a link element when the "href" prop is defined', () => {
    const wrapper = mount(Button, {
      slots: {
        default: 'Do an action',
      },
      props: {
        href: 'https://example.com',
      },
    });

    expect(wrapper.element.tagName).toEqual('A');
    expect(wrapper.element).toMatchSnapshot();
  });

  it('renders a disabled button correctly', () => {
    const wrapper = mount(Button, {
      slots: {
        default: 'Do an action',
      },
      props: {
        disabled: true,
      },
    });

    expect(wrapper.element).toMatchSnapshot();
  });

  it('ignores the disabled prop when rendering a link', () => {
    const wrapper = mount(Button, {
      slots: { default: 'Do an action' },
      props: {
        href: 'https://example.com',
        disabled: true,
      },
    });

    expect(wrapper.attributes('disabled')).toBeUndefined();
  });
});