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

describe('VHeading.vue', () => {
  it('renders correct heading tag based on level prop', () => {
    const wrapperH1 = mount(VHeading, { props: { level: 1, text: 'H1' } });
    expect(wrapperH1.element.tagName).toBe('H1');

    const wrapperH2 = mount(VHeading, { props: { level: 2, text: 'H2' } });
    expect(wrapperH2.element.tagName).toBe('H2');

    const wrapperH3 = mount(VHeading, { props: { level: 3, text: 'H3' } });
    expect(wrapperH3.element.tagName).toBe('H3');
  });

  it('renders text prop content when no default slot', () => {
    const headingText = 'My Awesome Heading';
    const wrapper = mount(VHeading, { props: { level: 1, text: headingText } });
    expect(wrapper.text()).toBe(headingText);
  });

  it('renders default slot content instead of text prop', () => {
    const slotContent = '<em>Custom Slot Heading</em>';
    const wrapper = mount(VHeading, {
      props: { level: 2, text: 'Ignored Text Prop' },
      slots: { default: slotContent },
    });
    expect(wrapper.html()).toContain(slotContent);
    expect(wrapper.text()).not.toBe('Ignored Text Prop'); // Check text() to be sure
    expect(wrapper.find('em').exists()).toBe(true);
  });

  it('applies id attribute when id prop is provided', () => {
    const headingId = 'section-title-1';
    const wrapper = mount(VHeading, { props: { level: 1, id: headingId } });
    expect(wrapper.attributes('id')).toBe(headingId);
  });

  it('does not have an id attribute if id prop is not provided', () => {
    const wrapper = mount(VHeading, { props: { level: 1 } });
    expect(wrapper.attributes('id')).toBeUndefined();
  });

  it('validates level prop correctly', () => {
    const validator = VHeading.props.level.validator;
    expect(validator(1)).toBe(true);
    expect(validator(2)).toBe(true);
    expect(validator(3)).toBe(true);
    expect(validator(4)).toBe(false);
    expect(validator(0)).toBe(false);
    expect(validator('1')).toBe(false); // Expects a number
  });

  it('renders an empty heading if text prop is empty and no slot', () => {
    const wrapper = mount(VHeading, { props: { level: 1, text: '' } });
    expect(wrapper.text()).toBe('');
    expect(wrapper.element.children.length).toBe(0); // No child nodes
  });

  it('renders correctly if text prop is not provided (defaults to empty string)', () => {
    const wrapper = mount(VHeading, { props: { level: 1 } }); // text prop is optional, defaults to ''
    expect(wrapper.text()).toBe('');
  });
});
