Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

test(#10336): add components/Mk[A-B].* stories

Browse source
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-04-04 22:15:17 +09:00
parent 31233467ac
commit 80161afc14
No known key found for this signature in database
GPG key ID: 3E87B98A3F6BAB99
20 changed files with 562 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CONTRIBUTING.md
View file

@ -245,7 +245,6 @@ You can override the default story by creating a impl story file (`MyComponent.s
```ts
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-duplicates */
import { StoryObj } from '@storybook/vue3';
import MyComponent from './MyComponent.vue';
export const Default = {

31
packages/frontend/.storybook/fakes.ts
View file

@ -1,10 +1,28 @@
import type { entities } from 'misskey-js'
export const userDetailed = {
id: 'someuserid',
username: 'miskist',
host: 'misskey-hub.net',
name: 'Misskey User',
export function abuseUserReport() {
return {
id: 'someabusereportid',
createdAt: '2016-12-28T22:49:51.000Z',
comment: 'This user is a spammer!',
resolved: false,
reporterId: 'reporterid',
targetUserId: 'targetuserid',
assigneeId: 'assigneeid',
reporter: userDetailed('reporterid', 'reporter', 'misskey-hub.net', 'Reporter'),
targetUser: userDetailed('targetuserid', 'target', 'misskey-hub.net', 'Target'),
assignee: userDetailed('assigneeid', 'assignee', 'misskey-hub.net', 'Assignee'),
me: null,
forwarded: false,
};
}
export function userDetailed(id = 'someuserid', username = 'miskist', host = 'misskey-hub.net', name = 'Misskey User'): entities.UserDetailed {
return {
id,
username,
host,
name,
onlineStatus: 'unknown',
avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
avatarBlurhash: 'eQFRshof5NWBRi},juayfPju53WB?0ofs;s*a{ofjuay^SoMEJR%ay',
@ -51,4 +69,5 @@ export const userDetailed = {
updatedAt: null,
uri: null,
url: null,
} satisfies entities.UserDetailed
};
}

27
packages/frontend/.storybook/generate.tsx
View file

@ -118,7 +118,7 @@ function toStories(component: string): string {
.replace(/[-.]|^(?=\d)/g, '_')
.replace(/(?<=^[^A-Z_]*$)/, '_')}
/> as estree.Identifier;
const parameters = (
const parameters =
<object-expression
properties={[
<property
@ -137,9 +137,8 @@ function toStories(component: string): string {
]
: []),
]}
/>
) as estree.ObjectExpression;
const program = (
/> as estree.ObjectExpression;
const program =
<program
body={[
<import-declaration
@ -379,11 +378,11 @@ function toStories(component: string): string {
declaration={(<identifier name='meta' />) as estree.Identifier}
/> as estree.ExportDefaultDeclaration,
]}
/>
) as estree.Program;
/> as estree.Program;
return format(
'/* eslint-disable @typescript-eslint/explicit-function-return-type */\n' +
'/* eslint-disable import/no-default-export */\n' +
'/* eslint-disable import/no-duplicates */\n' +
generate(program, { generator }) +
(hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''),
{
@ -394,13 +393,13 @@ function toStories(component: string): string {
);
}
// glob('src/{components,pages,ui,widgets}/**/*.vue').then(
glob('src/components/global/**/*.vue').then(
(components) =>
Promise.all(
components.map((component) => {
// glob('src/{components,pages,ui,widgets}/**/*.vue')
Promise.all([
glob('src/components/global/*.vue'),
glob('src/components/Mk{A,B}*.vue'),
])
.then((globs) => globs.flat())
.then((components) => Promise.all(components.map((component) => {
const stories = component.replace(/\.vue$/, '.stories.ts');
return writeFile(stories, toStories(component));
})
)
);
})));

10
packages/frontend/.storybook/mocks.ts
View file

@ -8,6 +8,16 @@ export const onUnhandledRequest = ((req, print) => {
}) satisfies SharedOptions['onUnhandledRequest'];
export const commonHandlers = [
rest.get('/fluent-emoji/:codepoints.png', async (req, res, ctx) => {
const { codepoints } = req.params;
const value = await fetch(`https://raw.githubusercontent.com/misskey-dev/emojis/main/dist/${codepoints}.png`).then((response) => response.blob());
return res(ctx.set('Content-Type', 'image/png'), ctx.body(value));
}),
rest.get('/fluent-emojis/:codepoints.png', async (req, res, ctx) => {
const { codepoints } = req.params;
const value = await fetch(`https://raw.githubusercontent.com/misskey-dev/emojis/main/dist/${codepoints}.png`).then((response) => response.blob());
return res(ctx.set('Content-Type', 'image/png'), ctx.body(value));
}),
rest.get('/twemoji/:codepoints.svg', async (req, res, ctx) => {
const { codepoints } = req.params;
const value = await fetch(`https://unpkg.com/@discordapp/twemoji@14.1.2/dist/svg/${codepoints}.svg`).then((response) => response.blob());

37
packages/frontend/package.json
View file

@ -74,23 +74,24 @@
"vuedraggable": "next"
},
"devDependencies": {
"@storybook/addon-essentials": "7.0.2",
"@storybook/addon-interactions": "7.0.2",
"@storybook/addon-links": "7.0.2",
"@storybook/addon-storysource": "7.0.2",
"@storybook/addons": "7.0.2",
"@storybook/blocks": "7.0.2",
"@storybook/core-events": "7.0.2",
"@storybook/jest": "0.1.0",
"@storybook/manager-api": "7.0.2",
"@storybook/preview-api": "7.0.2",
"@storybook/react": "7.0.2",
"@storybook/react-vite": "7.0.2",
"@storybook/testing-library": "0.0.14-next.1",
"@storybook/theming": "7.0.2",
"@storybook/types": "7.0.2",
"@storybook/vue3": "7.0.2",
"@storybook/vue3-vite": "7.0.2",
"@storybook/addon-actions": "^7.0.2",
"@storybook/addon-essentials": "^7.0.2",
"@storybook/addon-interactions": "^7.0.2",
"@storybook/addon-links": "^7.0.2",
"@storybook/addon-storysource": "^7.0.2",
"@storybook/addons": "^7.0.2",
"@storybook/blocks": "^7.0.2",
"@storybook/core-events": "^7.0.2",
"@storybook/jest": "~0.1.0",
"@storybook/manager-api": "^7.0.2",
"@storybook/preview-api": "^7.0.2",
"@storybook/react": "^7.0.2",
"@storybook/react-vite": "^7.0.2",
"@storybook/testing-library": "~0.0.14-next.1",
"@storybook/theming": "^7.0.2",
"@storybook/types": "^7.0.2",
"@storybook/vue3": "^7.0.2",
"@storybook/vue3-vite": "^7.0.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/vue": "^6.6.1",
"@types/escape-regexp": "0.0.1",
@ -128,7 +129,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"start-server-and-test": "2.0.0",
"storybook": "7.0.2",
"storybook": "^7.0.2",
"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
"summaly": "github:misskey-dev/summaly",
"vitest": "^0.29.8",

49
packages/frontend/src/components/MkAbuseReport.stories.impl.ts Normal file
View file

@ -0,0 +1,49 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { abuseUserReport } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAbuseReport from './MkAbuseReport.vue';
export const Default = {
render(args) {
return {
components: {
MkAbuseReport,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
events() {
return {
resolved: action('resolved'),
};
},
},
template: '<MkAbuseReport v-bind="props" v-on="events" />',
};
},
args: {
report: abuseUserReport(),
},
parameters: {
layout: 'fullscreen',
msw: {
handlers: [
...commonHandlers,
rest.post('/api/admin/resolve-abuse-user-report', async (req, res, ctx) => {
action('POST /api/admin/resolve-abuse-user-report')(await req.json());
return res(ctx.json({}));
}),
],
},
},
} satisfies StoryObj<typeof MkAbuseReport>;

49
packages/frontend/src/components/MkAbuseReportWindow.stories.impl.ts Normal file
View file

@ -0,0 +1,49 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { userDetailed } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAbuseReportWindow from './MkAbuseReportWindow.vue';
export const Default = {
render(args) {
return {
components: {
MkAbuseReportWindow,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
events() {
return {
'closed': action('closed'),
};
},
},
template: '<MkAbuseReportWindow v-bind="props" v-on="events" />',
};
},
args: {
user: userDetailed(),
},
parameters: {
layout: 'centered',
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/report-abuse', async (req, res, ctx) => {
action('POST /api/users/report-abuse')(await req.json());
return res(ctx.json({}));
}),
],
},
},
} satisfies StoryObj<typeof MkAbuseReportWindow>;

56
packages/frontend/src/components/MkAchievements.stories.impl.ts Normal file
View file

@ -0,0 +1,56 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { userDetailed } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAchievements from './MkAchievements.vue';
import { ACHIEVEMENT_TYPES } from '@/scripts/achievements';
export const Empty = {
render(args) {
return {
components: {
MkAchievements,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkAchievements v-bind="props" />',
};
},
args: {
user: userDetailed(),
},
parameters: {
layout: 'fullscreen',
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/achievements', (req, res, ctx) => {
return res(ctx.json([]));
}),
],
},
},
} satisfies StoryObj<typeof MkAchievements>;
export const All = {
...Empty,
parameters: {
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/achievements', (req, res, ctx) => {
return res(ctx.json(ACHIEVEMENT_TYPES.map((name) => ({ name, unlockedAt: 0 }))));
}),
],
},
},
} satisfies StoryObj<typeof MkAchievements>;

9
packages/frontend/src/components/MkAnalogClock.stories.impl.ts
View file

@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import MkAnalogClock from './MkAnalogClock.vue';
import isChromatic from 'chromatic';
export const Default = {
render(args) {
return {
@ -22,6 +23,14 @@ export const Default = {
template: '<MkAnalogClock v-bind="props" />',
};
},
args: {
now: isChromatic() ? () => new Date('2023-01-01T10:10:30') : undefined,
},
decorators: [
() => ({
template: '<div style="container-type:inline-size;height:100%"><div style="height:100cqmin;margin:auto;width:100cqmin"><story/></div></div>',
}),
],
parameters: {
layout: 'fullscreen',
},

12
packages/frontend/src/components/MkAnalogClock.vue
View file

@ -99,6 +99,7 @@ const props = withDefaults(defineProps<{
graduations?: 'none' | 'dots' | 'numbers';
fadeGraduations?: boolean;
sAnimation?: 'none' | 'elastic' | 'easeOut';
now?: () => Date;
}>(), {
numbers: false,
thickness: 0.1,
@ -107,6 +108,7 @@ const props = withDefaults(defineProps<{
graduations: 'dots',
fadeGraduations: true,
sAnimation: 'elastic',
now: () => new Date(),
});
const graduationsMajor = computed(() => {
@ -145,11 +147,17 @@ let disableSAnimate = $ref(false);
let sOneRound = false;
function tick() {
const now = new Date();
now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
const now = props.now();
now.setMinutes(now.getMinutes() + now.getTimezoneOffset() + props.offset);
const previousS = s.value;
const previousM = m.value;
const previousH = h.value;
s = now.getSeconds();
m = now.getMinutes();
h = now.getHours();
if (previousS === s && previousM === m && previousH === h) {
return;
}
hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
mAngle = Math.PI * (m + s / 60) / 30;
if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)

2
packages/frontend/src/components/MkAsUi.stories.impl.ts Normal file
View file

@ -0,0 +1,2 @@
import MkAsUi from './MkAsUi.vue';
void MkAsUi;

126
packages/frontend/src/components/MkAutocomplete.stories.impl.ts Normal file
View file

@ -0,0 +1,126 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { userDetailed } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAutocomplete from './MkAutocomplete.vue';
import MkInput from './MkInput.vue';
const common = {
render(args) {
return {
components: {
MkAutocomplete,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
events() {
return {
open: action('open'),
closed: action('closed'),
};
},
},
template: '<MkAutocomplete v-bind="props" v-on="events" :textarea="textarea" />',
};
},
args: {
close: action('close'),
x: 0,
y: 0,
},
decorators: [
(_, context) => ({
components: {
MkInput,
},
data() {
return {
q: context.args.q,
textarea: null,
};
},
methods: {
inputMounted() {
this.textarea = this.$refs.input.$refs.inputEl;
},
},
template: '<MkInput v-model="q" ref="input" @vue:mounted="inputMounted"/><story v-if="textarea" :q="q" :textarea="textarea"/>',
}),
],
parameters: {
controls: {
exclude: ['textarea'],
},
layout: 'centered',
},
} satisfies StoryObj<typeof MkAutocomplete>;
export const User = {
...common,
args: {
...common.args,
type: 'user',
q: 'm',
},
parameters: {
...common.parameters,
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/search-by-username-and-host', (req, res, ctx) => {
return res(ctx.json([
userDetailed('44', 'mizuki', 'misskey-hub.net', 'Mizuki'),
userDetailed('49', 'momoko', 'misskey-hub.net', 'Momoko'),
]));
}),
],
},
},
};
export const Hashtag = {
...common,
args: {
...common.args,
type: 'hashtag',
q: '気象',
},
parameters: {
...common.parameters,
msw: {
handlers: [
...commonHandlers,
rest.post('/api/hashtags/search', (req, res, ctx) => {
return res(ctx.json([
'気象警報注意報',
'気象警報',
'気象情報',
]));
}),
],
},
},
};
export const Emoji = {
...common,
args: {
...common.args,
type: 'emoji',
q: 'smile',
},
} satisfies StoryObj<typeof MkAutocomplete>;
export const MfmTag = {
...common,
args: {
...common.args,
type: 'mfmTag',
},
} satisfies StoryObj<typeof MkAutocomplete>;

46
packages/frontend/src/components/MkAvatars.stories.impl.ts Normal file
View file

@ -0,0 +1,46 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { StoryObj } from '@storybook/vue3';
import { rest } from 'msw';
import { userDetailed } from '../../.storybook/fakes';
import { commonHandlers } from '../../.storybook/mocks';
import MkAvatars from './MkAvatars.vue';
export const Default = {
render(args) {
return {
components: {
MkAvatars,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkAvatars v-bind="props" />',
};
},
args: {
userIds: ['17', '20', '18'],
},
parameters: {
layout: 'centered',
msw: {
handlers: [
...commonHandlers,
rest.post('/api/users/show', (req, res, ctx) => {
return res(ctx.json([
userDetailed('17'),
userDetailed('20'),
userDetailed('18'),
]));
}),
],
},
},
} satisfies StoryObj<typeof MkAvatars>;

55
packages/frontend/src/components/MkButton.stories.impl.ts
View file

@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable import/no-default-export */
/* eslint-disable import/no-duplicates */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import MkButton from './MkButton.vue';
export const Default = {
@ -20,11 +20,60 @@ export const Default = {
...this.args,
};
},
},
template: '<MkButton v-bind="props">Text</MkButton>',
events() {
return {
click: action('click'),
};
},
},
template: '<MkButton v-bind="props" v-on="events">Text</MkButton>',
};
},
args: {
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkButton>;
export const Primary = {
...Default,
args: {
...Default.args,
primary: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Gradate = {
...Default,
args: {
...Default.args,
gradate: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Rounded = {
...Default,
args: {
...Default.args,
rounded: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Danger = {
...Default,
args: {
...Default.args,
danger: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Small = {
...Default,
args: {
...Default.args,
small: true,
},
} satisfies StoryObj<typeof MkButton>;
export const Large = {
...Default,
args: {
...Default.args,
large: true,
},
} satisfies StoryObj<typeof MkButton>;

4
packages/frontend/src/components/global/MkAcct.stories.impl.ts
View file

@ -25,7 +25,7 @@ export const Default = {
},
args: {
user: {
...userDetailed,
...userDetailed(),
host: null,
},
},
@ -37,7 +37,7 @@ export const Detail = {
...Default,
args: {
...Default.args,
user: userDetailed,
user: userDetailed(),
detail: true,
},
} satisfies StoryObj<typeof MkAcct>;

4
packages/frontend/src/components/global/MkAvatar.stories.impl.ts
View file

@ -24,7 +24,7 @@ const common = {
};
},
args: {
user: userDetailed,
user: userDetailed(),
},
decorators: [
(Story, context) => ({
@ -49,7 +49,7 @@ export const ProfilePageCat = {
args: {
...ProfilePage.args,
user: {
...userDetailed,
...userDetailed(),
isCat: true,
},
},

36
packages/frontend/src/components/global/MkError.stories.impl.ts Normal file
View file

@ -0,0 +1,36 @@
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import MkError from './MkError.vue';
export const Default = {
render(args) {
return {
components: {
MkError,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
events() {
return {
retry: action('retry'),
};
},
},
template: '<MkError v-bind="props" v-on="events" />',
};
},
args: {
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkError>;

3
packages/frontend/src/components/global/MkTime.vue
View file

@ -8,6 +8,7 @@
</template>
<script lang="ts" setup>
import isChromatic from 'chromatic/isChromatic';
import { onUnmounted } from 'vue';
import { i18n } from '@/i18n';
import { dateTimeFormat } from '@/scripts/intl-const';
@ -17,7 +18,7 @@ const props = withDefaults(defineProps<{
origin?: Date | null;
mode?: 'relative' | 'absolute' | 'detail';
}>(), {
origin: null,
origin: isChromatic() ? new Date('2023-04-01T00:00:00Z') : null,
mode: 'relative',
});

8
packages/frontend/src/components/global/MkUserName.stories.impl.ts
View file

@ -26,10 +26,10 @@ export const Default = {
};
},
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(userDetailed.name);
await expect(canvasElement).toHaveTextContent(userDetailed().name);
},
args: {
user: userDetailed,
user: userDetailed(),
},
parameters: {
layout: 'centered',
@ -38,12 +38,12 @@ export const Default = {
export const Anonymous = {
...Default,
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(userDetailed.username);
await expect(canvasElement).toHaveTextContent(userDetailed().username);
},
args: {
...Default.args,
user: {
...userDetailed,
...userDetailed(),
name: null,
},
},

3
pnpm-lock.yaml
View file

@ -763,6 +763,9 @@ importers:
specifier: next
version: 4.1.0(vue@3.2.47)
devDependencies:
'@storybook/addon-actions':
specifier: ^7.0.2
version: 7.0.2(react-dom@18.2.0)(react@18.2.0)
'@storybook/addon-essentials':
specifier: 7.0.2
version: 7.0.2(react-dom@18.2.0)(react@18.2.0)