From df2b61fcc6a0deb8aba570b92d646c475de49121 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Fri, 21 Jul 2023 00:11:32 +0200
Subject: [PATCH] fix(frontend): workaround storybook issue (#11334)

---
 .../components/global/MkAd.stories.impl.ts    | 79 +++++++++++--------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/src/components/global/MkAd.stories.impl.ts b/packages/frontend/src/components/global/MkAd.stories.impl.ts
index 58b6cc14c4..17f9ccbbae 100644
--- a/packages/frontend/src/components/global/MkAd.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkAd.stories.impl.ts
@@ -4,6 +4,9 @@ import { userEvent, waitFor, within } from '@storybook/testing-library';
 import { StoryObj } from '@storybook/vue3';
 import MkAd from './MkAd.vue';
 import { i18n } from '@/i18n';
+
+let lock: Promise<undefined> | undefined;
+
 const common = {
 	render(args) {
 		return {
@@ -26,39 +29,53 @@ const common = {
 		};
 	},
 	async play({ canvasElement, args }) {
-		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 waitFor(() => expect(canvasElement).toHaveTextContent(i18n.ts._ad.back));
-		await expect(a).not.toBeInTheDocument();
-		await expect(i).not.toBeInTheDocument();
-		buttons = canvas.getAllByRole<HTMLButtonElement>('button');
-		await expect(buttons).toHaveLength(args.__hasReduce ? 2 : 1);
-		const reduce = args.__hasReduce ? buttons[0] : null;
-		const back = buttons[args.__hasReduce ? 1 : 0];
-		if (reduce) {
-			await expect(reduce).toBeInTheDocument();
-			await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
+		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;
 		}
-		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();
+
+		let resolve: (value?: any) => void;
+		lock = new Promise(r => resolve = r);
+
+		try {
+			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 waitFor(() => expect(canvasElement).toHaveTextContent(i18n.ts._ad.back));
+			await expect(a).not.toBeInTheDocument();
+			await expect(i).not.toBeInTheDocument();
+			buttons = canvas.getAllByRole<HTMLButtonElement>('button');
+			await expect(buttons).toHaveLength(args.__hasReduce ? 2 : 1);
+			const reduce = args.__hasReduce ? buttons[0] : null;
+			const back = buttons[args.__hasReduce ? 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).not.toBeInTheDocument();
-		const aAgain = canvas.getByRole<HTMLAnchorElement>('link');
-		await expect(aAgain).toBeInTheDocument();
-		const imgAgain = within(aAgain).getByRole('img');
-		await expect(imgAgain).toBeInTheDocument();
 	},
 	args: {
 		prefer: [],