import { fireEvent, render } from "@testing-library/vue";
import { describe, expect, it } from "vitest";
import DsTabs from "../src/components/navigation/DsTabs.vue";

describe("DsTabs", () => {
  it("uses arrow, Home and End keys with automatic activation", async () => {
    const view = render(DsTabs, {
      props: {
        label: "Cuenta",
        modelValue: "profile",
        items: [
          { id: "profile", label: "Perfil" },
          { id: "security", label: "Seguridad" },
          { id: "billing", label: "Facturación" },
        ],
      },
      slots: {
        profile: "Perfil",
        security: "Seguridad",
        billing: "Facturación",
      },
    });
    const profile = view.getByRole("tab", { name: "Perfil" });
    await fireEvent.keyDown(profile, { key: "ArrowRight" });
    expect(view.emitted()["update:modelValue"]?.at(-1)).toEqual(["security"]);
    await view.rerender({ modelValue: "security" });
    await fireEvent.keyDown(view.getByRole("tab", { name: "Seguridad" }), {
      key: "End",
    });
    expect(view.emitted()["update:modelValue"]?.at(-1)).toEqual(["billing"]);
  });
});