import { mountSuspended } from "@nuxt/test-utils/runtime";
import { afterAll, beforeAll, describe, expect, it } from "vitest";
import VDialogClose from "./dialog-close.vue";
import VDialogRoot from "./dialog-root.vue";
import VDialogTitle from "./dialog-title.vue";
import VDialogTrigger from "./dialog-trigger.vue";
import VDialog from "./dialog.vue";
const TestComponent = {
components: {
VDialogRoot,
VDialogTrigger,
VDialog,
VDialogTitle,
VDialogClose,
},
template: `
<VDialogRoot position="center">
<VDialogTrigger>
<button>Open Dialog</button>
</VDialogTrigger>
<VDialog>
<VDialogTitle>Dialog Heading</VDialogTitle>
<VDialogClose>
<button>Close</button>
</VDialogClose>
</VDialog>
</VDialogRoot>
`,
};
beforeAll(() => {
const teleportTarget = document.createElement("div");
teleportTarget.id = "teleports";
document.body.appendChild(teleportTarget);
});
afterAll(() => {
const teleportTarget = document.getElementById("teleports");
if (teleportTarget) {
document.body.removeChild(teleportTarget);
}
});
describe("dialog", () => {
it("has closed dialog on initial render", async () => {
const DialogRoot = await mountSuspended(TestComponent, { props: { position: "center" } });
const Dialog = DialogRoot.getComponent("VDialog");
expect(DialogRoot.find('[data-testid="dialog-trigger"]').exists()).toBe(true);
expect(Dialog.find('[data-testid="dialog"]').exists()).toBe(true);
});
});
import { mountSuspended } from "@nuxt/test-utils/runtime";
import { afterAll, beforeAll, describe, expect, it } from "vitest";
import VDialogClose from "./dialog-close.vue";
import VDialogRoot from "./dialog-root.vue";
import VDialogTitle from "./dialog-title.vue";
import VDialogTrigger from "./dialog-trigger.vue";
import VDialog from "./dialog.vue";
const TestComponent = {
components: {
VDialogRoot,
VDialogTrigger,
VDialog,
VDialogTitle,
VDialogClose,
},
template: `
<VDialogRoot position="center">
<VDialogTrigger>
<button>Open Dialog</button>
</VDialogTrigger>
<VDialog>
<VDialogTitle>Dialog Heading</VDialogTitle>
<VDialogClose>
<button>Close</button>
</VDialogClose>
</VDialog>
</VDialogRoot>
`,
};
beforeAll(() => {
const teleportTarget = document.createElement("div");
teleportTarget.id = "teleports";
document.body.appendChild(teleportTarget);
});
afterAll(() => {
const teleportTarget = document.getElementById("teleports");
if (teleportTarget) {
document.body.removeChild(teleportTarget);
}
});
describe("dialog", () => {
it("has closed dialog on initial render", async () => {
const DialogRoot = await mountSuspended(TestComponent, { props: { position: "center" } });
const Dialog = DialogRoot.getComponent("VDialog");
expect(DialogRoot.find('[data-testid="dialog-trigger"]').exists()).toBe(true);
expect(Dialog.find('[data-testid="dialog"]').exists()).toBe(true);
});
});