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: '', }; }, + 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: '', }; }, + 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, }, };