Testing Modals about testing-react HOT 4 CLOSED

import { StoryFn, StoryObj } from '@storybook/react';
import React, { ReactElement } from 'react';
import { Dialog, DialogContent, DialogTitle, Grid } from '@mui/material';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';

const MyTestModal = (): ReactElement => {
  return (
    <>
      <Grid container direction={'row'} justifyContent={'center'}>
        <Grid item xs={12}>
          <Dialog
            open={true}
            aria-labelledby="dialog-title"
            scroll={'paper'}
            PaperProps={{
              square: true,
              style: {
                boxShadow: 'initial',
              },
            }}
            maxWidth={'lg'}
          >
            <DialogTitle>
              <h1>My Title</h1>
            </DialogTitle>

            <DialogContent>
              <Grid container direction="row" spacing={4}>
                <Grid item xs={6}>
                  <Grid
                    container
                    direction="row"
                    spacing={3}
                    alignItems="flex-start"
                  >
                    <Grid item xs={6}>
                      <h1>Test Content</h1>
                    </Grid>
                  </Grid>
                </Grid>
              </Grid>
            </DialogContent>
          </Dialog>
        </Grid>
      </Grid>
    </>
  );
};

export default {
  title: 'Runtime-Integration/TestModal/v1.0.0',
  component: MyTestModal,
} as StoryObj<typeof MyTestModal>;

const Template: StoryFn<typeof MyTestModal> = () => <MyTestModal />;

// ----------------------------------------------------------------------------
export const TestModalCase = Template.bind({});
TestModalCase.args = {};

TestModalCase.play = async ({ canvasElement, step }) => {
  const canvas = await within(canvasElement);

  await step('Verify modal title', async () => {
    await expect(canvas.getByText('My Title')).toBeInTheDocument();
  });
};

import { screen } from '@storybook/testing-library'
TestModalCase.play = async ({ canvasElement, step }) => {
  await step('Verify modal title', async () => {
    await expect(screen.getByText('My Title')).toBeInTheDocument();
  });
};