Is it safe to call Story play function in component play function.

[lubiah]

Summary

Let's say we are having a test which we want it to be run on all components so you define it inside the meta function, like this

const meta: Meta<typeof Component> = {
	component: Component,
	decorators: [(Story) => ({ Component: ModalDecorator, props: { Story } })],
	play: async ({ step, canvasElement }) => {
		await step("Form element has needed properties", async () => {
			const form = canvasElement.querySelector("form");
			await expect(form).toBeInTheDocument();
		});
	}
};
export default meta;
type Story = StoryObj<typeof meta>;

In order to also make sure this play function is played in combination to the component play function, is it advisable to call the parent play function, like this

export const Primary: Story = {
};

export const Secondary: Story = {
	play: async ({ step, canvasElement }) => {
		await meta.play!({ step, canvasElement })
               // other tests
	}
};

Additional information

No response

Create a reproduction

No response