import MtText from "@/components/content/mt-text/mt-text.vue"; import meta from "./mt-modal.stories"; import MtModal from "./mt-modal.vue"; import MtModalRoot from "./sub-components/mt-modal-root.vue"; import MtModalTrigger from "./sub-components/mt-modal-trigger.vue"; import MtButton from "@/components/form/mt-button/mt-button.vue"; import { ref } from "vue"; import { defineStory } from "@/_internal/story-helper"; import { expect, within } from "@storybook/test"; export default { ...meta, title: "Interaction Tests/Overlay/mt-modal", }; export const VisualTestContent = { name: "Render the modal with content", render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtModalTrigger, MtButton, MtText }, setup() { return { args, }; }, template: "

", }), }; export const VisualTestInsetContent = { name: "Render the modal with inset content", args: { inset: true, }, render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtModalTrigger, MtButton, MtText }, setup() { return { args, }; }, template: "

", }), }; export const VisualTestOverflowingContent = { name: "Render with overflowing content", render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtButton, MtText }, setup() { return { args, }; }, template: `

`, }), }; export const VisualTestTeleportFeature = defineStory({ name: "Render the modal with the teleport feature", render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtButton, MtText }, setup() { const isOpen = ref(false); return { args, isOpen, }; }, template: `

The modal should also working inside a container with a transform

Toggle modal

`, }), play: async ({ canvasElement }) => { const canvas = within(canvasElement); const triggerButton = canvas.getByRole("button", { name: "Toggle modal" }); await triggerButton.click(); // Get body as a within element because the modal is rendered in a portal const body = within(document.querySelector("body") as HTMLElement); // Get the modal const modal = body.getByRole("dialog"); // Check if the modal is visible await expect(modal).toBeTruthy(); }, }); export const TestOpeningAnimation = { name: "Animates when modal opens", render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtModalTrigger, MtButton, MtText }, setup() { return { args, }; }, template: "

Open modal

", }), }; export const VisualTestSmallModal = { name: "Render the modal at a small width", args: { width: "s", }, render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtButton, MtText }, setup() { return { args, }; }, template: "

", }), }; export const VisualTestMediumModal = { name: "Render the modal at a medium width", args: { width: "m", }, render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtButton, MtText }, setup() { return { args, }; }, template: "

", }), }; export const VisualTestLargeModal = { name: "Render the modal at a large width", args: { width: "l", }, render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtButton, MtText }, setup() { return { args, }; }, template: "

", }), }; export const VisualTestExtraLargeModal = { name: "Render the modal at an extra large width", args: { width: "xl", }, render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtButton, MtText }, setup() { return { args, }; }, template: "

", }), }; export const VisualTestFullWidthModal = { name: "Render the modal at full width", args: { width: "full", }, render: (args: unknown) => ({ components: { MtModal, MtModalRoot, MtButton, MtText }, setup() { return { args, }; }, template: "

", }), };