import { readFileSync } from 'node:fs';
import { shallowMount } from '@vue/test-utils';
import { describe, expect, it, vi } from 'vitest';
import Messages from './views/Messages.vue';

const store = {
  getters: { 'conversation/getGroupedConversation': [] },
  dispatch: vi.fn(),
};

describe('widget conversation layout', () => {
  it('keeps the widget mount point in the full-height viewport chain', () => {
    const widgetHtml = readFileSync('widget.html', 'utf8');

    expect(widgetHtml).toContain('<div id="app" class="h-full"></div>');
  });

  it('keeps messages scrolling independently from the footer', () => {
    const wrapper = shallowMount(Messages, {
      global: {
        mocks: { $store: store },
        stubs: {
          ChatFooter: { template: '<footer data-test-id="chat-footer" />' },
          ConversationWrap: {
            template: '<div data-test-id="conversation-wrap" />',
          },
        },
      },
    });
    const scrollRegion = wrapper.find('.overflow-auto');
    const footer = wrapper.find('[data-test-id="chat-footer"]');

    expect(wrapper.classes()).toContain('overflow-hidden');
    expect(
      scrollRegion.find('[data-test-id="conversation-wrap"]').exists()
    ).toBe(true);
    expect(scrollRegion.element.nextElementSibling).toBe(footer.element);
  });
});