import { config, mount, flushPromises } from "@vue/test-utils";
import { createPinia, setActivePinia } from "pinia";
import { beforeEach, describe, expect, it, vi } from "vitest";
import {
  NConfigProvider,
  NDialogProvider,
  NMessageProvider,
  dateZhCN,
  zhCN,
} from "naive-ui";
import { defineComponent, h, nextTick } from "vue";
import EndpointsView from "./EndpointsView.vue";
import { mockApi } from "@/api/mock";

vi.mock("@/api/admin", async () => import("@/api/admin-mock"));

config.global.stubs = { teleport: true };

function wrap(Comp: object) {
  return defineComponent({
    setup() {
      return () =>
        h(NConfigProvider, { locale: zhCN, dateLocale: dateZhCN, size: "small" }, {
          default: () =>
            h(NMessageProvider, null, {
              default: () =>
                h(NDialogProvider, null, {
                  default: () => h(Comp),
                }),
            }),
        });
    },
  });
}

describe("EndpointsView 开通端", () => {
  beforeEach(() => {
    setActivePinia(createPinia());
    mockApi._setSession();
  });

  it("开通后密码只显示一次，关闭后消失", async () => {
    const pinia = createPinia();
    const w = mount(wrap(EndpointsView), {
      global: { plugins: [pinia] },
      attachTo: document.body,
    });
    await flushPromises();

    const openBtn = w.findAll("button").find((b) => b.text().trim() === "开通");
    expect(openBtn).toBeTruthy();
    await openBtn!.trigger("click");
    await nextTick();
    await flushPromises();

    const nameRoot = w.find('[data-testid="create-name"]');
    expect(nameRoot.exists()).toBe(true);
    await nameRoot.find("input").setValue("测试端");
    await w.find('[data-testid="create-submit"]').trigger("click");
    await flushPromises();

    expect(w.text()).toContain("只显示一次");

    const dismiss = w.findAll("button").find((b) => b.text().includes("我已保存"));
    expect(dismiss).toBeTruthy();
    await dismiss!.trigger("click");
    await nextTick();

    expect(w.text()).not.toContain("只显示一次");
    w.unmount();
  });

  it("手填密码开通后不显示一次性面板和 undefined", async () => {
    const pinia = createPinia();
    const w = mount(wrap(EndpointsView), {
      global: { plugins: [pinia] },
      attachTo: document.body,
    });
    await flushPromises();

    const openBtn = w.findAll("button").find((b) => b.text().trim() === "开通");
    await openBtn!.trigger("click");
    await nextTick();
    await flushPromises();

    await w.find('[data-testid="create-name"]').find("input").setValue("手填端");
    await w.find('[data-testid="create-login-password"]').find("input").setValue("handpassword12");
    await w.find('[data-testid="create-submit"]').trigger("click");
    await flushPromises();

    expect(w.text()).not.toContain("undefined");
    expect(w.text()).not.toContain("只显示一次");
    expect(w.text()).toContain("手填端");
    w.unmount();
  });
});