ci4sManagement-cloud/react-ui/src/stories/KFModal.stories.tsx

import CreateExperiment from '@/assets/img/create-experiment.png';
import KFModal from '@/components/KFModal';
import { openAntdModal } from '@/utils/modal';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, screen, userEvent, within } from '@storybook/test';
import { Button } from 'antd';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/KFModal 对话框',
  component: KFModal,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['!autodocs'],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    // backgroundColor: { control: 'color' },
    title: {
      description: '标题',
    },
    open: {
      description: '对话框是否可见',
    },
    children: {
      description: '子元素',
      type: 'string',
    },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: { onCancel: fn(), onOk: fn() },
} satisfies Meta<typeof KFModal>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
/** 作为子组件时，通过 `open` 属性打开或关闭  */
export const Primary: Story = {
  args: {
    title: '创建实验',
    image: CreateExperiment,
    open: false,
    children: '这是一个模态框',
  },
  render: function Render({ onOk, onCancel, ...args }) {
    const [{ open }, updateArgs] = useArgs();
    function onClick() {
      updateArgs({ open: true });
    }
    function handleOk() {
      updateArgs({ open: false });
      onOk?.();
    }

    function handleCancel() {
      updateArgs({ open: false });
      onCancel?.();
    }

    return (
      <>
        <Button type="primary" onClick={onClick}>
          打开 KFModal
        </Button>
        <KFModal {...args} open={open} onOk={handleOk} onCancel={handleCancel} />
      </>
    );
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button', { name: /打开 KFModal/i }));
    const dialog = await screen.findByRole('dialog');
    await expect(dialog).toBeInTheDocument();
  },
};

/** 推荐通过 `openAntdModal` 函数打开 */
export const OpenByFunction: Story = {
  name: '通过函数的方式打开',
  render: function Render() {
    const handleClick = () => {
      const { close } = openAntdModal(KFModal, {
        title: '创建实验',
        image: CreateExperiment,
        children: '这是一个模态框',
        onOk: () => {
          close();
        },
      });
    };
    return (
      <Button type="primary" onClick={handleClick}>
        以函数的方式打开
      </Button>
    );
  },
};