Skip to content

Commit

Permalink
fix(frontend): fix Storybook type errors (#13779)
Browse files Browse the repository at this point in the history 
* fix(frontend): fix Storybook type errors

* fix: `hasReduce` doesn't work in args
  • Loading branch information
@zyoshoka
zyoshoka authored May 1, 2024
1 parent d2a5bb3 commit 9c057e6
Show file tree
Hide file tree
Showing 17 changed files with 953 additions and 733 deletions.
10 changes: 7 additions & 3 deletions packages/frontend/.storybook/fakes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export function galleryPost(isSensitive = false) {
id: 'somepostid',
createdAt: '2016-12-28T22:49:51.000Z',
updatedAt: '2016-12-28T22:49:51.000Z',
userid: 'someuserid',
userId: 'someuserid',
user: userDetailed(),
title: 'Some post title',
description: 'Some post description',
Expand Down Expand Up @@ -75,9 +75,8 @@ export function userDetailed(id = 'someuserid', username = 'miskist', host = 'mi
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',
avatarDecorations: [],
emojis: [],
emojis: {},
bannerBlurhash: 'eQA^IW^-MH8w9tE8I=S^o{$*R4RikXtSxutRozjEnNR.RQadoyozog',
bannerColor: '#000000',
bannerUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
birthday: '2014-06-20',
createdAt: '2016-12-28T22:49:51.000Z',
Expand Down Expand Up @@ -118,11 +117,16 @@ export function userDetailed(id = 'someuserid', username = 'miskist', host = 'mi
publicReactions: false,
securityKeys: false,
twoFactorEnabled: false,
usePasswordLessLogin: false,
twoFactorBackupCodesStock: 'none',
updatedAt: null,
lastFetchedAt: null,
uri: null,
url: null,
movedTo: null,
alsoKnownAs: null,
notify: 'none',
memo: null
};
}

Expand Down
26 changes: 10 additions & 16 deletions packages/frontend/.storybook/generate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,23 +82,16 @@ function h<T extends estree.Node>(
return Object.assign(props || {}, { type }) as T;
}

declare global {
namespace JSX {
type Element = estree.Node;
type ElementClass = never;
type ElementAttributesProperty = never;
type ElementChildrenAttribute = never;
type IntrinsicAttributes = never;
type IntrinsicClassAttributes<T> = never;
type IntrinsicElements = {
[T in keyof typeof generator as ToKebab<SplitCamel<Uncapitalize<T>>>]: {
[K in keyof Omit<
Parameters<(typeof generator)[T]>[0],
'type'
>]?: Parameters<(typeof generator)[T]>[0][K];
};
declare namespace h.JSX {
type Element = estree.Node;
type IntrinsicElements = {
[T in keyof typeof generator as ToKebab<SplitCamel<Uncapitalize<T>>>]: {
[K in keyof Omit<
Parameters<(typeof generator)[T]>[0],
'type'
>]?: Parameters<(typeof generator)[T]>[0][K];
};
}
};
}

function toStories(component: string): Promise<string> {
Expand Down Expand Up @@ -388,6 +381,7 @@ function toStories(component: string): Promise<string> {
'/* eslint-disable @typescript-eslint/explicit-function-return-type */\n' +
'/* eslint-disable import/no-default-export */\n' +
'/* eslint-disable import/no-duplicates */\n' +
'/* eslint-disable import/order */\n' +
generate(program, { generator }) +
(hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''),
{
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/.storybook/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const config = {
disableTelemetry: true,
},
async viteFinal(config) {
const replacePluginForIsChromatic = config.plugins?.findIndex((plugin) => plugin && (plugin as Partial<Plugin>)?.name === 'replace') ?? -1;
const replacePluginForIsChromatic = config.plugins?.findIndex((plugin: Plugin) => plugin && plugin.name === 'replace') ?? -1;
if (~replacePluginForIsChromatic) {
config.plugins?.splice(replacePluginForIsChromatic, 1);
}
Expand Down
3 changes: 2 additions & 1 deletion packages/frontend/.storybook/mocks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
import { type SharedOptions, http, HttpResponse } from 'msw';

export const onUnhandledRequest = ((req, print) => {
if (req.url.hostname !== 'localhost' || /^\/(?:client-assets\/|fluent-emojis?\/|iframe.html$|node_modules\/|src\/|sb-|static-assets\/|vite\/)/.test(req.url.pathname)) {
const url = new URL(req.url);
if (url.hostname !== 'localhost' || /^\/(?:client-assets\/|fluent-emojis?\/|iframe.html$|node_modules\/|src\/|sb-|static-assets\/|vite\/)/.test(url.pathname)) {
return
}
print.warning()
Expand Down
38 changes: 19 additions & 19 deletions packages/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,24 +78,24 @@
"devDependencies": {
"@misskey-dev/eslint-plugin": "1.0.0",
"@misskey-dev/summaly": "5.0.3",
"@storybook/addon-actions": "8.0.0-beta.6",
"@storybook/addon-essentials": "8.0.0-beta.6",
"@storybook/addon-interactions": "8.0.0-beta.6",
"@storybook/addon-links": "8.0.0-beta.6",
"@storybook/addon-mdx-gfm": "8.0.0-beta.6",
"@storybook/addon-storysource": "8.0.0-beta.6",
"@storybook/blocks": "8.0.0-beta.6",
"@storybook/components": "8.0.0-beta.6",
"@storybook/core-events": "8.0.0-beta.6",
"@storybook/manager-api": "8.0.0-beta.6",
"@storybook/preview-api": "8.0.0-beta.6",
"@storybook/react": "8.0.0-beta.6",
"@storybook/react-vite": "8.0.0-beta.6",
"@storybook/test": "8.0.0-beta.6",
"@storybook/theming": "8.0.0-beta.6",
"@storybook/types": "8.0.0-beta.6",
"@storybook/vue3": "8.0.0-beta.6",
"@storybook/vue3-vite": "8.0.0-beta.6",
"@storybook/addon-actions": "8.0.9",
"@storybook/addon-essentials": "8.0.9",
"@storybook/addon-interactions": "8.0.9",
"@storybook/addon-links": "8.0.9",
"@storybook/addon-mdx-gfm": "8.0.9",
"@storybook/addon-storysource": "8.0.9",
"@storybook/blocks": "8.0.9",
"@storybook/components": "8.0.9",
"@storybook/core-events": "8.0.9",
"@storybook/manager-api": "8.0.9",
"@storybook/preview-api": "8.0.9",
"@storybook/react": "8.0.9",
"@storybook/react-vite": "8.0.9",
"@storybook/test": "8.0.9",
"@storybook/theming": "8.0.9",
"@storybook/types": "8.0.9",
"@storybook/vue3": "8.0.9",
"@storybook/vue3-vite": "8.0.9",
"@testing-library/vue": "8.0.2",
"@types/escape-regexp": "0.0.3",
"@types/estree": "1.0.5",
Expand Down Expand Up @@ -129,7 +129,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"start-server-and-test": "2.0.3",
"storybook": "8.0.0-beta.6",
"storybook": "8.0.9",
"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
"vite-plugin-turbosnap": "1.0.3",
"vitest": "0.34.6",
Expand Down
15 changes: 13 additions & 2 deletions packages/frontend/src/components/MkAccountMoved.stories.impl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
*/

/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import { HttpResponse, http } from 'msw';
import { commonHandlers } from '../../.storybook/mocks.js';
import { userDetailed } from '../../.storybook/fakes.js';
import MkAccountMoved from './MkAccountMoved.vue';
export const Default = {
Expand All @@ -29,10 +32,18 @@ export const Default = {
};
},
args: {
username: userDetailed().username,
host: userDetailed().host,
movedTo: userDetailed().id,
},
parameters: {
layout: 'centered',
msw: {
handlers: [
...commonHandlers,
http.post('/api/users/show', async ({ request }) => {
action('POST /api/users/show')(await request.json());
return HttpResponse.json(userDetailed());
}),
],
},
},
} satisfies StoryObj<typeof MkAccountMoved>;
20 changes: 19 additions & 1 deletion packages/frontend/src/components/MkAnnouncementDialog.stories.impl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@
*/

/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { action } from '@storybook/addon-actions';
import { StoryObj } from '@storybook/vue3';
import { HttpResponse, http } from 'msw';
import { commonHandlers } from '../../.storybook/mocks.js';
import MkAnnouncementDialog from './MkAnnouncementDialog.vue';
export const Default = {
render(args) {
Expand All @@ -23,8 +26,13 @@ export const Default = {
...this.args,
};
},
events() {
return {
closed: action('closed'),
};
},
},
template: '<MkAnnouncementDialog v-bind="props" />',
template: '<MkAnnouncementDialog v-bind="props" v-on="events" />',
};
},
args: {
Expand All @@ -38,10 +46,20 @@ export const Default = {
imageUrl: null,
display: 'dialog',
needConfirmationToRead: false,
silence: false,
forYou: true,
},
},
parameters: {
layout: 'centered',
msw: {
handlers: [
...commonHandlers,
http.post('/api/i/read-announcement', async ({ request }) => {
action('POST /api/i/read-announcement')(await request.json());
return HttpResponse.json();
}),
],
},
},
} satisfies StoryObj<typeof MkAnnouncementDialog>;
6 changes: 6 additions & 0 deletions packages/frontend/src/components/MkSignupDialog.rules.stories.impl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,16 @@ export const Empty = {
expect(buttons.at(-1)).toBeEnabled();
},
args: {
// @ts-expect-error serverRules is for test
serverRules: [],
tosUrl: null,
},
decorators: [
(_, context) => ({
setup() {
// @ts-expect-error serverRules is for test
instance.serverRules = context.args.serverRules;
// @ts-expect-error tosUrl is for test
instance.tosUrl = context.args.tosUrl;
onBeforeUnmount(() => {
// FIXME: 呼び出されない
Expand All @@ -76,6 +79,7 @@ export const ServerRulesOnly = {
...Empty,
args: {
...Empty.args,
// @ts-expect-error serverRules is for test
serverRules: [
'ルール',
],
Expand All @@ -85,13 +89,15 @@ export const TOSOnly = {
...Empty,
args: {
...Empty.args,
// @ts-expect-error tosUrl is for test
tosUrl: 'https://example.com/tos',
},
} satisfies StoryObj<typeof MkSignupServerRules>;
export const ServerRulesAndTOS = {
...Empty,
args: {
...Empty.args,
// @ts-expect-error serverRules is for test
serverRules: ServerRulesOnly.args.serverRules,
tosUrl: TOSOnly.args.tosUrl,
},
Expand Down
22 changes: 12 additions & 10 deletions packages/frontend/src/components/global/MkAd.stories.impl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
*/

/* eslint-disable @typescript-eslint/explicit-function-return-type */
import { expect, userEvent, waitFor, within } from '@storybook/test';
import { StoryObj } from '@storybook/vue3';
import MkAd from './MkAd.vue';
import { i18n } from '@/i18n.js';

let lock: Promise<undefined> | undefined;

Expand All @@ -30,7 +32,6 @@ const common = {
template: '<MkAd v-bind="props" />',
};
},
/* FIXME: disabled because it still didn’t pass after applying #11267
async play({ canvasElement, args }) {
if (lock) {
console.warn('This test is unexpectedly running twice in parallel, fix it!');
Expand All @@ -44,21 +45,22 @@ const common = {
try {
const canvas = within(canvasElement);
const a = canvas.getByRole<HTMLAnchorElement>('link');
await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
// await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
const img = within(a).getByRole('img');
await expect(img).toBeInTheDocument();
let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
await expect(buttons).toHaveLength(1);
const i = buttons[0];
await expect(i).toBeInTheDocument();
await userEvent.click(i);
await waitFor(() => expect(canvasElement).toHaveTextContent(i18n.ts._ad.back));
// await expect(canvasElement).toHaveTextContent(i18n.ts._ad.back);
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];
const hasReduceFrequency = args.specify?.ratio !== 0;
await expect(buttons).toHaveLength(hasReduceFrequency ? 2 : 1);
const reduce = hasReduceFrequency ? buttons[0] : null;
const back = buttons[hasReduceFrequency ? 1 : 0];
if (reduce) {
await expect(reduce).toBeInTheDocument();
await expect(reduce).toHaveTextContent(i18n.ts._ad.reduceFrequencyOfThisAd);
Expand All @@ -80,15 +82,16 @@ const common = {
lock = undefined;
}
},
*/
args: {
prefer: [],
specify: {
id: 'someadid',
radio: 1,
ratio: 1,
url: '#test',
place: '',
imageUrl: '',
dayOfWeek: 7,
},
__hasReduce: true,
},
parameters: {
layout: 'centered',
Expand Down Expand Up @@ -138,6 +141,5 @@ export const ZeroRatio = {
...Square.args.specify,
ratio: 0,
},
__hasReduce: false,
},
} satisfies StoryObj<typeof MkAd>;
3 changes: 2 additions & 1 deletion packages/frontend/src/components/global/MkAvatar.stories.impl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const common = {
},
decorators: [
(Story, context) => ({
// eslint-disable-next-line quotes
// @ts-expect-error size is for test
template: `<div :style="{ display: 'grid', width: '${context.args.size}px', height: '${context.args.size}px' }"><story/></div>`,
}),
],
Expand All @@ -45,6 +45,7 @@ export const ProfilePage = {
...common,
args: {
...common.args,
// @ts-expect-error size is for test
size: 120,
indicator: true,
},
Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/src/components/global/MkCondensedLine.stories.impl.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export const Default = {
};
},
args: {
// @ts-expect-error text is for test
text: 'This is a condensed line.',
},
parameters: {
Expand All @@ -41,4 +42,5 @@ export const ContainerIs100px = {
template: '<div style="width: 100px;"><story/></div>',
}),
],
// @ts-expect-error text is for test
} satisfies StoryObj<typeof MkCondensedLine>;
7 changes: 5 additions & 2 deletions packages/frontend/src/components/global/MkError.stories.meta.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/

import { Meta } from '@storybook/vue3';
import MkError from './MkError.vue';

export const argTypes = {
retry: {
onRetry: {
action: 'retry',
},
};
} satisfies Meta<typeof MkError>['argTypes'];
Loading

1 comment on commit 9c057e6

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Chromatic detects changes. Please review the changes on Chromatic.

Please sign in to comment.