import { mount } from '@vue/test-utils';
import VList from './VList.vue';
import VListItem from './VListItem.vue'; // For testing with children
import { describe, it, expect } from 'vitest';

describe('VList.vue', () => {
  it('applies the .item-list class to the root element', () => {
    const wrapper = mount(VList);
    expect(wrapper.classes()).toContain('item-list');
  });

  it('renders default slot content', () => {
    const wrapper = mount(VList, {
      slots: {
        default: '<VListItem>Item 1</VListItem><VListItem>Item 2</VListItem>',
      },
      global: {
        components: { VListItem } // Register VListItem for the slot content
      }
    });
    const items = wrapper.findAllComponents(VListItem);
    expect(items.length).toBe(2);
    expect(wrapper.text()).toContain('Item 1');
    expect(wrapper.text()).toContain('Item 2');
  });

  it('renders as a <ul> element by default', () => {
    const wrapper = mount(VList);
    expect(wrapper.element.tagName).toBe('UL');
  });

  it('renders correctly when empty', () => {
    const wrapper = mount(VList, {
      slots: { default: '' } // Empty slot
    });
    expect(wrapper.find('ul.item-list').exists()).toBe(true);
    expect(wrapper.element.children.length).toBe(0); // No direct children from empty slot
                                                     // or use .html() to check inner content
    expect(wrapper.html()).toContain('<ul class="item-list"></ul>');

  });

  it('renders non-VListItem children if passed', () => {
    const wrapper = mount(VList, {
      slots: {
        default: '<li>Raw LI</li><div>Just a div</div>'
      }
    });
    expect(wrapper.find('li').exists()).toBe(true);
    expect(wrapper.find('div').exists()).toBe(true);
    expect(wrapper.text()).toContain('Raw LI');
    expect(wrapper.text()).toContain('Just a div');
  });
});
