From a30eff4f3b6888cba0ba5af7b9651c3baaa506d0 Mon Sep 17 00:00:00 2001
From: Rogee <rogeecn@users.noreply.github.com>
Date: Mon, 24 Aug 2026 13:24:44 +0800
Subject: [PATCH] test(HH-605): lock widget viewport layout (#161)

Co-authored-by: Rogee <rogee@ipao.vip>
---
 frontend/app/javascript/widget/layout.spec.js | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 frontend/app/javascript/widget/layout.spec.js

diff --git a/frontend/app/javascript/widget/layout.spec.js b/frontend/app/javascript/widget/layout.spec.js
new file mode 100644
index 00000000..927f76f1
--- /dev/null
+++ b/frontend/app/javascript/widget/layout.spec.js
@@ -0,0 +1,39 @@
+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);
+  });
+});