trade-message-center/apps/chrome-extension/test/onetalk-conversation-id-copy.test.js

import assert from "node:assert/strict";
import test from "node:test";

import { getByRole } from "@testing-library/dom";
import userEvent from "@testing-library/user-event";

import { installOneTalkConversationIdCopyControl } from "../src/onetalk/main-page/dom/conversation-id-copy.ts";
import { createDomFixture } from "./dom-fixture.js";

const rect = (left, top, width, height) => ({
    left,
    top,
    width,
    height,
    right: left + width,
    bottom: top + height,
});

const createPage = () => {
    const fixture = createDomFixture(`
        <div class="contact-item-container selected" data-cid="conversation-1"></div>
        <span data-testid="conversation-title">Elliot Izzard</span>
        <span>OKKI销售助手</span>
    `);
    const selected = fixture.document.querySelector(".contact-item-container");
    const headerTitle = fixture.document.querySelector("[data-testid=conversation-title]");
    const navigationTitle = fixture.document.querySelector("span:last-child");
    selected.getBoundingClientRect = () => rect(80, 80, 340, 60);
    headerTitle.getBoundingClientRect = () => rect(436, 16, 112, 24);
    navigationTitle.getBoundingClientRect = () => rect(1_500, 16, 160, 24);

    const clipboardWrites = [];
    const navigator = { clipboard: { writeText: async (value) => clipboardWrites.push(value) } };
    const pageWindow = {
        document: fixture.document,
        location: fixture.window.location,
        navigator,
        setTimeout: fixture.window.setTimeout.bind(fixture.window),
        clearTimeout: fixture.window.clearTimeout.bind(fixture.window),
    };
    return { ...fixture, clipboardWrites, pageWindow };
};

test("installs a copy control beside the current conversation title and copies through user-event", async (t) => {
    const { cleanup, clipboardWrites, document, pageWindow } = createPage();
    t.after(cleanup);

    installOneTalkConversationIdCopyControl(pageWindow);

    const button = getByRole(document.body, "button", { name: "复制会话 Id" });
    assert.equal(button.dataset.conversationId, "conversation-1");
    assert.match(button.style.cssText, /font-size: 12px/u);
    assert.match(button.style.cssText, /justify-content: center/u);

    const user = userEvent.setup({ document });
    await user.click(button);
    await Promise.resolve();

    assert.deepEqual(clipboardWrites, ["conversation-1"]);
    assert.equal(button.textContent, "已复制");
});

test("does not install a control without one unambiguous selected conversation", (t) => {
    const { cleanup, document, pageWindow } = createPage();
    t.after(cleanup);
    document.querySelector(".contact-item-container").className = "contact-item-container";

    installOneTalkConversationIdCopyControl(pageWindow);

    assert.equal(document.querySelector("button[data-tmc-conversation-id-copy]"), null);
});

test("shows a failure state when the page cannot write to the clipboard", async (t) => {
    const { cleanup, document, pageWindow } = createPage();
    t.after(cleanup);
    pageWindow.navigator.clipboard.writeText = async () => {
        throw new Error("clipboard_denied");
    };
    installOneTalkConversationIdCopyControl(pageWindow);

    const button = getByRole(document.body, "button", { name: "复制会话 Id" });
    const user = userEvent.setup({ document });
    await user.click(button);
    await Promise.resolve();
    await Promise.resolve();

    assert.equal(button.textContent, "复制失败");
});