mirror/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey synced 2024-11-24 15:16:30 +09:00
Code

build(#10336): write some stories

Browse Source
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-04-01 04:20:38 +09:00
parent 85f50f3875
commit 671ce6a531
No known key found for this signature in database
GPG Key ID: 3E87B98A3F6BAB99
9 changed files with 160 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/frontend/.storybook/generate.tsx
View File

@ -100,8 +100,10 @@ declare global {
function toStories(component: string): string {
const msw = `${component.slice(0, -'.vue'.length)}.msw`;
const implStories = `${component.slice(0, -'.vue'.length)}.stories.impl`;
const metaStories = `${component.slice(0, -'.vue'.length)}.stories.meta`;
const hasMsw = existsSync(`${msw}.ts`);
const hasImplStories = existsSync(`${implStories}.ts`);
const hasMetaStories = existsSync(`${metaStories}.ts`);
const base = basename(component);
const dir = dirname(component);
const literal = (
@ -212,6 +214,24 @@ function toStories(component: string): string {
/>
) as estree.ImportDeclaration,
]),
...(hasMetaStories
? [
(
<import-declaration
source={
(<literal value={`./${basename(metaStories)}`} />) as estree.Literal
}
specifiers={[
(
<import-namespace-specifier
local={(<identifier name='storiesMeta' />) as estree.Identifier}
/>
) as estree.ImportNamespaceSpecifier,
]}
/>
) as estree.ImportDeclaration,
]
: []),
(
<variable-declaration
kind={'const' as const}
@ -248,6 +268,19 @@ function toStories(component: string): string {
kind={'init' as const}
/>
) as estree.Property,
...(hasMetaStories
? [
(
<spread-element
argument={
(
<identifier name='storiesMeta' />
) as estree.Identifier
}
/>
) as estree.SpreadElement,
]
: [])
]}
/>
) as estree.ObjectExpression

14
packages/frontend/src/components/global/MkAd.stories.ts
View File

@ -47,17 +47,17 @@ const common = {
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];
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.textContent).toBe(
await expect(reduce).toHaveTextContent(
i18n.ts._ad.reduceFrequencyOfThisAd
);
}
await expect(back).toBeInTheDocument();
await expect(back.textContent).toBe(i18n.ts._ad.back);
await expect(back).toHaveTextContent(i18n.ts._ad.back);
await userEvent.click(back);
if (reduce) {
await expect(reduce).not.toBeInTheDocument();
@ -75,7 +75,7 @@ const common = {
radio: 1,
url: '#test',
},
_hasReduce: true,
__hasReduce: true,
},
parameters: {
layout: 'centered',
@ -125,6 +125,6 @@ export const ZeroRatio = {
...Square.args.specify,
ratio: 0,
},
_hasReduce: false,
__hasReduce: false,
},
};

46
packages/frontend/src/components/global/MkCustomEmoji.stories.impl.ts Normal file
View File

@ -0,0 +1,46 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-duplicates */
import { StoryObj } from '@storybook/vue3';
import MkCustomEmoji from './MkCustomEmoji.vue';
export const Default = {
render(args) {
return {
components: {
MkCustomEmoji,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...args,
};
},
},
template: '<MkCustomEmoji v-bind="props" />',
};
},
args: {
name: 'mi',
url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkCustomEmoji>;
export const Normal = {
...Default,
args: {
...Default.args,
normal: true,
},
};
export const Missing = {
...Default,
args: {
name: Default.args.name,
},
};

26
packages/frontend/src/components/global/MkCustomEmoji.stories.ts
View File

@ -1,11 +1,15 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-default-export */
import { Meta, StoryObj } from '@storybook/vue3';
import MkCustomEmoji from './MkCustomEmoji.vue';
import { Meta } from '@storybook/vue3';
const meta = {
title: 'components/global/MkCustomEmoji',
component: MkCustomEmoji,
} satisfies Meta<typeof MkCustomEmoji>;
export default meta;
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-duplicates */
import { StoryObj } from '@storybook/vue3';
import MkCustomEmoji from './MkCustomEmoji.vue';
export const Default = {
render(args) {
return {
@ -27,8 +31,24 @@ export const Default = {
template: '<MkCustomEmoji v-bind="props" />',
};
},
args: {
name: 'mi',
url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkCustomEmoji>;
export default meta;
export const Normal = {
...Default,
args: {
...Default.args,
normal: true,
},
};
export const Missing = {
...Default,
args: {
name: Default.args.name,
},
};

32
packages/frontend/src/components/global/MkEmoji.stories.impl.ts Normal file
View File

@ -0,0 +1,32 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-duplicates */
import { StoryObj } from '@storybook/vue3';
import MkEmoji from './MkEmoji.vue';
export const Default = {
render(args) {
return {
components: {
MkEmoji,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...args,
};
},
},
template: '<MkEmoji v-bind="props" />',
};
},
args: {
emoji: '❤',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkEmoji>;

12
packages/frontend/src/components/global/MkEmoji.stories.ts
View File

@ -1,11 +1,15 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-default-export */
import { Meta, StoryObj } from '@storybook/vue3';
import MkEmoji from './MkEmoji.vue';
import { Meta } from '@storybook/vue3';
const meta = {
title: 'components/global/MkEmoji',
component: MkEmoji,
} satisfies Meta<typeof MkEmoji>;
export default meta;
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-duplicates */
import { StoryObj } from '@storybook/vue3';
import MkEmoji from './MkEmoji.vue';
export const Default = {
render(args) {
return {
@ -27,8 +31,10 @@ export const Default = {
template: '<MkEmoji v-bind="props" />',
};
},
args: {
emoji: '❤',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkEmoji>;
export default meta;

5
packages/frontend/src/components/global/MkError.stories.meta.ts Normal file
View File

@ -0,0 +1,5 @@
export const argTypes = {
retry: {
action: 'retry',
},
}

2
packages/frontend/src/components/global/MkError.stories.ts
View File

@ -2,9 +2,11 @@
/* eslint-disable import/no-default-export */
import { Meta, StoryObj } from '@storybook/vue3';
import MkError from './MkError.vue';
import * as storiesMeta from './MkError.stories.meta';
const meta = {
title: 'components/global/MkError',
component: MkError,
...storiesMeta,
} satisfies Meta<typeof MkError>;
export const Default = {
render(args) {

4
packages/frontend/src/components/global/MkError.vue
View File

@ -1,5 +1,5 @@
<template>
<Transition :name="$store.state.animation ? '_transition_zoom' : ''" appear>
<Transition :name="animation ? '_transition_zoom' : ''" appear>
<div :class="$style.root">
<img :class="$style.img" src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
@ -11,7 +11,9 @@
<script lang="ts" setup>
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
const animation = $ref(defaultStore.reactiveState.animation);
const emit = defineEmits<{
(ev: 'retry'): void;
}>();