@shopware-ag/meteor-component-library/src/components/_internal/mt-floating-ui/mt-floating-ui.interactive.stories.ts

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import { expect } from "@storybook/test";
import { within, userEvent } from "@storybook/test";
import { waitUntil } from "../../../_internal/test-helper";
import meta, {
  Default,
  type MtFloatingUiMeta,
  type MtFloatingUiStory,
} from "./mt-floating-ui.stories";

export default {
  ...meta,
  title: "Components/mt-floating-ui/Interaction tests",
  tags: ["!autodocs"],
} as MtFloatingUiMeta;

export const VisualTestRenderFloatingUi: MtFloatingUiStory = {
  ...Default,
  name: "Render floating ui",
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    await userEvent.click(canvas.getByRole("button", { name: "Toggle floating UI" }));

    await waitUntil(() => document.querySelector(".mt-floating-ui__content"));

    const floatingUi = within(document.querySelector(".mt-floating-ui__content") as HTMLElement);

    expect(floatingUi.getByText("Adjust size")).toBeInTheDocument();
    expect(floatingUi.getByRole("button", { name: "Apply" })).toBeInTheDocument();
  },
};