fix(storybook): prevent infinite remount of component (#14101)

* fix(storybook): prevent infinite remount of component

* fix: disable flaky `.toMatch()` test

1 files changed, 33 insertions, 54 deletions

diff --git a/packages/frontend/src/components/global/MkAd.stories.impl.ts b/packages/frontend/src/components/global/MkAd.stories.impl.ts
index aef26ab92d..8c0b7ef52f 100644
--- a/packages/frontend/src/components/global/MkAd.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkAd.stories.impl.ts
@@ -9,12 +9,6 @@ import { StoryObj } from '@storybook/vue3';
 import MkAd from './MkAd.vue';
 import { i18n } from '@/i18n.js';
 
-let lock: Promise<undefined> | undefined;
-
-function sleep(ms: number) {
-	return new Promise(resolve => setTimeout(resolve, ms));
-}
-
 const common = {
 	render(args) {
 		return {
@@ -37,56 +31,41 @@ const common = {
 		};
 	},
 	async play({ canvasElement, args }) {
-		if (lock) {
-			console.warn('This test is unexpectedly running twice in parallel, fix it!');
-			console.warn('See also: https://github.com/misskey-dev/misskey/issues/11267');
-			await lock;
+		const canvas = within(canvasElement);
+		const a = canvas.getByRole<HTMLAnchorElement>('link');
+		// FIXME: 通るけどその後落ちるのでコメントアウト
+		// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
+		const img = within(a).getByRole('img');
+		await expect(img).toBeInTheDocument();
+		let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
+		await expect(buttons).toHaveLength(1);
+		const i = buttons[0];
+		await expect(i).toBeInTheDocument();
+		await userEvent.click(i);
+		await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
+		await expect(a).not.toBeInTheDocument();
+		await expect(i).not.toBeInTheDocument();
+		buttons = canvas.getAllByRole<HTMLButtonElement>('button');
+		const hasReduceFrequency = args.specify?.ratio !== 0;
+		await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1);
+		const reduce = hasReduceFrequency ? buttons[0] : null;
+		const back = buttons[hasReduceFrequency ? 1 : 0];
+		if (reduce) {
+			await expect(reduce).toBeInTheDocument();
+			await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
 		}
-
-		let resolve: (value?: any) => void;
-		lock = new Promise(r => resolve = r);
-
-		try {
-			// NOTE: sleep しないと何故か落ちる
-			await sleep(100);
-			const canvas = within(canvasElement);
-			const a = canvas.getByRole<HTMLAnchorElement>('link');
-			// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
-			const img = within(a).getByRole('img');
-			await expect(img).toBeInTheDocument();
-			let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
-			await expect(buttons).toHaveLength(1);
-			const i = buttons[0];
-			await expect(i).toBeInTheDocument();
-			await userEvent.click(i);
-			await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
-			await expect(a).not.toBeInTheDocument();
-			await expect(i).not.toBeInTheDocument();
-			buttons = canvas.getAllByRole<HTMLButtonElement>('button');
-			const hasReduceFrequency = args.specify?.ratio !== 0;
-			await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1);
-			const reduce = hasReduceFrequency ? buttons[0] : null;
-			const back = buttons[hasReduceFrequency ? 1 : 0];
-			if (reduce) {
-				await expect(reduce).toBeInTheDocument();
-				await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
-			}
-			await expect(back).toBeInTheDocument();
-			await expect(back).toHaveTextContent(i18n.ts._ad.back);
-			await userEvent.click(back);
-			await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy());
-			if (reduce) {
-				await expect(reduce).not.toBeInTheDocument();
-			}
-			await expect(back).not.toBeInTheDocument();
-			const aAgain = canvas.getByRole<HTMLAnchorElement>('link');
-			await expect(aAgain).toBeInTheDocument();
-			const imgAgain = within(aAgain).getByRole('img');
-			await expect(imgAgain).toBeInTheDocument();
-		} finally {
-			resolve!();
-			lock = undefined;
+		await expect(back).toBeInTheDocument();
+		await expect(back).toHaveTextContent(i18n.ts._ad.back);
+		await userEvent.click(back);
+		await waitFor(() => expect(canvas.queryByRole('img')).toBeTruthy());
+		if (reduce) {
+			await expect(reduce).not.toBeInTheDocument();
 		}
+		await expect(back).not.toBeInTheDocument();
+		const aAgain = canvas.getByRole<HTMLAnchorElement>('link');
+		await expect(aAgain).toBeInTheDocument();
+		const imgAgain = within(aAgain).getByRole('img');
+		await expect(imgAgain).toBeInTheDocument();
 	},
 	args: {
 		prefer: [],