56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import { fireEvent, render } from "@testing-library/vue";
|
|
import { describe, expect, it } from "vitest";
|
|
import { h } from "vue";
|
|
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"]);
|
|
});
|
|
|
|
it("keeps tab and panel relationships unique across instances", () => {
|
|
const props = {
|
|
label: "Cuenta",
|
|
modelValue: "profile",
|
|
items: [{ id: "profile", label: "Perfil" }],
|
|
};
|
|
const view = render({
|
|
setup: () => () =>
|
|
h("div", [
|
|
h(DsTabs, props, { profile: () => "Perfil" }),
|
|
h(DsTabs, props, { profile: () => "Perfil" }),
|
|
]),
|
|
});
|
|
const [firstTab, secondTab] = view.getAllByRole("tab");
|
|
const [firstPanel, secondPanel] = view.getAllByRole("tabpanel");
|
|
|
|
expect(firstTab?.id).not.toBe(secondTab?.id);
|
|
expect(firstPanel?.id).not.toBe(secondPanel?.id);
|
|
expect(firstTab?.getAttribute("aria-controls")).toBe(firstPanel?.id);
|
|
expect(firstPanel?.getAttribute("aria-labelledby")).toBe(firstTab?.id);
|
|
});
|
|
});
|