build(#10336): write stories for `MkMisskeyFlavoredMarkdown`

2 files changed, 53 insertions, 6 deletions

diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts
index c594b790c3..720aaa1770 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.impl.ts
@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { StoryObj } from '@storybook/vue3';
 import MkMisskeyFlavoredMarkdown from './MkMisskeyFlavoredMarkdown.vue';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 export const Default = {
 	render(args) {
 		return {
@@ -22,8 +24,28 @@ export const Default = {
 			template: '<MkMisskeyFlavoredMarkdown v-bind="props" />',
 		};
 	},
+	async play({ canvasElement, args }) {
+		const canvas = within(canvasElement);
+		if (args.plain) {
+			const aiHelloMiskist = canvas.getByText('@ai *Hello*, #Miskist!');
+			await expect(aiHelloMiskist).toBeInTheDocument();
+		} else {
+			const ai = canvas.getByText('@ai');
+			await expect(ai).toBeInTheDocument();
+			await expect(ai.closest('a')).toHaveAttribute('href', '/@ai');
+			const hello = canvas.getByText('Hello');
+			await expect(hello).toBeInTheDocument();
+			await expect(hello.style.fontStyle).toBe('oblique');
+			const miskist = canvas.getByText('#Miskist');
+			await expect(miskist).toBeInTheDocument();
+			await expect(miskist).toHaveAttribute('href', args.isNote ?? true ? '/tags/Miskist' : '/user-tags/Miskist');
+		}
+		const heart = canvas.getByAltText('❤');
+		await expect(heart).toBeInTheDocument();
+		await expect(heart).toHaveAttribute('src', '/twemoji/2764.svg');
+	},
 	args: {
-		text: 'Hello, world!',
+		text: '@ai *Hello*, #Miskist! ❤',
 	},
 	parameters: {
 		layout: 'centered',
@@ -43,10 +65,10 @@ export const Nowrap = {
 		nowrap: true,
 	},
 };
-export const IsNote = {
+export const IsNotNote = {
 	...Default,
 	args: {
 		...Default.args,
-		isNote: true,
+		isNote: false,
 	},
 };
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts
index 7103f07ae7..b39951fcc8 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts
@@ -9,6 +9,8 @@ export default meta;
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { StoryObj } from '@storybook/vue3';
 import MkMisskeyFlavoredMarkdown from './MkMisskeyFlavoredMarkdown.vue';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 export const Default = {
 	render(args) {
 		return {
@@ -30,8 +32,31 @@ export const Default = {
 			template: '<MkMisskeyFlavoredMarkdown v-bind="props" />',
 		};
 	},
+	async play({ canvasElement, args }) {
+		const canvas = within(canvasElement);
+		if (args.plain) {
+			const aiHelloMiskist = canvas.getByText('@ai *Hello*, #Miskist!');
+			await expect(aiHelloMiskist).toBeInTheDocument();
+		} else {
+			const ai = canvas.getByText('@ai');
+			await expect(ai).toBeInTheDocument();
+			await expect(ai.closest('a')).toHaveAttribute('href', '/@ai');
+			const hello = canvas.getByText('Hello');
+			await expect(hello).toBeInTheDocument();
+			await expect(hello.style.fontStyle).toBe('oblique');
+			const miskist = canvas.getByText('#Miskist');
+			await expect(miskist).toBeInTheDocument();
+			await expect(miskist).toHaveAttribute(
+				'href',
+				args.isNote ?? true ? '/tags/Miskist' : '/user-tags/Miskist'
+			);
+		}
+		const heart = canvas.getByAltText('❤');
+		await expect(heart).toBeInTheDocument();
+		await expect(heart).toHaveAttribute('src', '/twemoji/2764.svg');
+	},
 	args: {
-		text: 'Hello, world!',
+		text: '@ai *Hello*, #Miskist! ❤',
 	},
 	parameters: {
 		layout: 'centered',
@@ -51,10 +76,10 @@ export const Nowrap = {
 		nowrap: true,
 	},
 };
-export const IsNote = {
+export const IsNotNote = {
 	...Default,
 	args: {
 		...Default.args,
-		isNote: true,
+		isNote: false,
 	},
 };