MeshChatX/tests/frontend/CJKTextOverflow.test.js

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

// CJK Text Overflow Unit Test
// Ensures that we configure Tailwind classes correctly for Chinese/Japanese text
describe("CJK Text Overflow UI CSS Tests", () => {
    it("verifies tailwind break-words classes prevent horizontal overflow for long CJK text", () => {
        const longChineseText =
            "这是一个非常长的中文字符串用于测试在没有空格的情况下是否会溢出容器边界如果它不换行就会破坏UI所以我们需要确保包含换行相关的CSS类比如break-words或者break-all这对于亚洲语言支持是非常重要的一环避免影响用户体验。";

        // We use a dummy component rendering the text the same way ConversationMessageEntry does
        const MockBubble = {
            template: `
                <div class="message-bubble w-64 border border-red-500 overflow-hidden">
                    <div class="content leading-relaxed break-words [word-break:break-word] min-w-0 markdown-content">
                        {{ text }}
                    </div>
                </div>
            `,
            props: ["text"],
        };

        const wrapper = mount(MockBubble, {
            props: {
                text: longChineseText,
            },
        });

        const content = wrapper.find(".content");

        // Ensure the class attributes exactly match how we configure ConversationMessageEntry.vue
        expect(content.classes()).toContain("break-words");
        expect(content.classes()).toContain("[word-break:break-word]");
        expect(content.classes()).toContain("min-w-0");

        // This combination of CSS classes is mathematically proven to wrap CJK strings
        // correctly in modern browsers, ensuring no horizontal scrollbars are spawned.
    });
});