import { within, userEvent } from "@storybook/test"; import { expect } from "@storybook/test"; import { DropdownMenuRoot, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuSub, } from "reka-ui"; import MtButton from "../../form/mt-button/mt-button.vue"; import MtActionMenu from "./mt-action-menu.vue"; import MtActionMenuItem from "../mt-action-menu-item/mt-action-menu-item.vue"; import MtActionMenuGroup from "../mt-action-menu-group/mt-action-menu-group.vue"; import MtAvatar from "../../icons-media/mt-avatar/mt-avatar.vue"; import MtIcon from "../../icons-media/mt-icon/mt-icon.vue"; import meta, { type MtActionMenuMeta, type MtActionMenuStory } from "./mt-action-menu.stories"; import MtText from "@/components/content/mt-text/mt-text.vue"; export default { ...meta, title: "Interaction Tests/Components/Form/mt-action-menu", } as MtActionMenuMeta; // 1. Closed export const VisualTestClosed: MtActionMenuStory = { name: "Closed menu", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, }, template: ` Open menu Documentation `, }), }; // 2. Nested items, all items visible export const VisualTestNestedItemsVisible: MtActionMenuStory = { name: "Nested items with submenu visible", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, MtActionMenuGroup, DropdownMenuSub, }, template: ` Open menu Documentation Move Up Down Left Right Settings `, }), }; // 3. Single group all items have icons export const VisualTestSingleGroupWithIcons: MtActionMenuStory = { name: "Single group with icons", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, }, template: ` Open menu Documentation Duplicate Copy Download `, }), }; // 4. Single group all items have NO icons export const VisualTestSingleGroupNoIcons: MtActionMenuStory = { name: "Single group without icons", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, }, template: ` Open menu Documentation Duplicate Copy Download `, }), }; // 5. Two groups, all items have icons export const VisualTestTwoGroupsWithIcons: MtActionMenuStory = { name: "Two groups with icons", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, MtActionMenuGroup, }, template: ` Open menu Documentation Duplicate Settings Profile `, }), }; // 6. Two groups, no items have icons export const VisualTestTwoGroupsNoIcons: MtActionMenuStory = { name: "Two groups without icons", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, MtActionMenuGroup, }, template: ` Open menu Documentation Duplicate Settings Profile `, }), }; // 7. Two groups, first group has two icons second group has items with icons and items without icons export const VisualTestTwoGroupsMixedIcons: MtActionMenuStory = { name: "Two groups with mixed icons", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, MtActionMenuGroup, }, template: ` Open menu Documentation Duplicate Settings Help Center Profile About `, }), }; // 8. All possible states, disabled and variants export const VisualTestAllStates: MtActionMenuStory = { name: "All states (disabled and variants)", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, MtActionMenuGroup, DropdownMenuSub, }, template: ` Open menu Default item with icon Default item without icon Default with shortcut Disabled with icon Disabled without icon Disabled with shortcut Critical item with icon Critical item without icon Critical with shortcut Critical disabled with icon Critical disabled without icon Sub menu trigger Nested item `, }), }; // 9. Two groups: first with icons, second without export const VisualTestTwoGroupsFirstWithIconsSecondWithout: MtActionMenuStory = { name: "Two groups - first with icons, second without", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, MtActionMenuGroup, }, template: ` Open menu Documentation Duplicate Settings Profile `, }), }; // 10. Four levels of nesting export const VisualTestFourLevelsNested: MtActionMenuStory = { name: "Four levels of nested submenus", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, MtActionMenuGroup, DropdownMenuSub, }, template: ` Open menu Home Documents README.md Projects notes.txt Frontend index.html styles.css app.js Backend config.json Settings `, }), }; // 11. External link items export const VisualTestExternalLinks: MtActionMenuStory = { name: "Items with external links", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, MtActionMenuGroup, }, template: ` Open menu Documentation Help Center External link without icon Settings (no link) Profile (no link) `, }), }; // 12. User profile trigger with matchTriggerWidth export const VisualTestUserProfileTrigger: MtActionMenuStory = { name: "User profile trigger with matchTriggerWidth", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtActionMenuGroup, MtAvatar, MtIcon, MtText, }, template: ` Profile Settings Sign out `, }), }; // Interaction test: clicking menu item export const TestMenuItemClick: MtActionMenuStory = { name: "Menu item responds to click", render: () => ({ components: { DropdownMenuRoot, DropdownMenuPortal, MtActionMenuItem, MtActionMenu, DropdownMenuTrigger, MtButton, }, template: ` Open menu Documentation `, }), play: async ({ canvasElement }) => { const canvas = within(canvasElement); const trigger = canvas.getByTestId("trigger"); await userEvent.click(trigger); // Wait for menu to appear await new Promise((resolve) => setTimeout(resolve, 100)); const menuItem = document.querySelector('[data-testid="menu-item"]'); expect(menuItem).toBeInTheDocument(); }, };