build(#10336): write stories for MkMisskeyFlavoredMarkdown

This commit is contained in:
Acid Chicken (硫酸鶏) 2023-04-01 13:47:59 +09:00
parent 2b831da1d1
commit c6d12c21db
No known key found for this signature in database
GPG key ID: 3E87B98A3F6BAB99
2 changed files with 53 additions and 6 deletions

View file

@ -1,6 +1,8 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3'; import { StoryObj } from '@storybook/vue3';
import MkMisskeyFlavoredMarkdown from './MkMisskeyFlavoredMarkdown.vue'; import MkMisskeyFlavoredMarkdown from './MkMisskeyFlavoredMarkdown.vue';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
export const Default = { export const Default = {
render(args) { render(args) {
return { return {
@ -22,8 +24,28 @@ export const Default = {
template: '<MkMisskeyFlavoredMarkdown v-bind="props" />', 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: { args: {
text: 'Hello, world!', text: '@ai *Hello*, #Miskist! ❤',
}, },
parameters: { parameters: {
layout: 'centered', layout: 'centered',
@ -43,10 +65,10 @@ export const Nowrap = {
nowrap: true, nowrap: true,
}, },
}; };
export const IsNote = { export const IsNotNote = {
...Default, ...Default,
args: { args: {
...Default.args, ...Default.args,
isNote: true, isNote: false,
}, },
}; };

View file

@ -9,6 +9,8 @@ export default meta;
/* eslint-disable @typescript-eslint/explicit-function-return-type */ /* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3'; import { StoryObj } from '@storybook/vue3';
import MkMisskeyFlavoredMarkdown from './MkMisskeyFlavoredMarkdown.vue'; import MkMisskeyFlavoredMarkdown from './MkMisskeyFlavoredMarkdown.vue';
import { within } from '@storybook/testing-library';
import { expect } from '@storybook/jest';
export const Default = { export const Default = {
render(args) { render(args) {
return { return {
@ -30,8 +32,31 @@ export const Default = {
template: '<MkMisskeyFlavoredMarkdown v-bind="props" />', 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: { args: {
text: 'Hello, world!', text: '@ai *Hello*, #Miskist! ❤',
}, },
parameters: { parameters: {
layout: 'centered', layout: 'centered',
@ -51,10 +76,10 @@ export const Nowrap = {
nowrap: true, nowrap: true,
}, },
}; };
export const IsNote = { export const IsNotNote = {
...Default, ...Default,
args: { args: {
...Default.args, ...Default.args,
isNote: true, isNote: false,
}, },
}; };