build(#10336): write stories for `MkMisskeyFlavoredMarkdown`
This commit is contained in:
parent
2b831da1d1
commit
c6d12c21db
|
@ -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,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue