fix(frontend): fix Storybook type errors (#13779)

* fix(frontend): fix Storybook type errors

* fix: `hasReduce` doesn't work in args
This commit is contained in:
zyoshoka 2024-05-01 16:39:16 +09:00 committed by GitHub
parent d2a5bb39e3
commit 9c057e6854
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 952 additions and 732 deletions

View File

@ -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',
@ -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',
@ -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
};
}

View File

@ -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> {
@ -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') : ''),
{

View File

@ -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);
}

View File

@ -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()

View File

@ -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",
@ -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",

View File

@ -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 = {
@ -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>;

View File

@ -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) {
@ -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: {
@ -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>;

View File

@ -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: 呼び出されない
@ -76,6 +79,7 @@ export const ServerRulesOnly = {
...Empty,
args: {
...Empty.args,
// @ts-expect-error serverRules is for test
serverRules: [
'ルール',
],
@ -85,6 +89,7 @@ export const TOSOnly = {
...Empty,
args: {
...Empty.args,
// @ts-expect-error tosUrl is for test
tosUrl: 'https://example.com/tos',
},
} satisfies StoryObj<typeof MkSignupServerRules>;
@ -92,6 +97,7 @@ export const ServerRulesAndTOS = {
...Empty,
args: {
...Empty.args,
// @ts-expect-error serverRules is for test
serverRules: ServerRulesOnly.args.serverRules,
tosUrl: TOSOnly.args.tosUrl,
},

View File

@ -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;
@ -30,7 +32,6 @@ const common = {
template: '<MkAd v-bind="props" />',
};
},
/* FIXME: disabled because it still didnt pass after applying #11267
async play({ canvasElement, args }) {
if (lock) {
console.warn('This test is unexpectedly running twice in parallel, fix it!');
@ -44,7 +45,7 @@ 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');
@ -52,13 +53,14 @@ const common = {
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);
@ -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',
@ -138,6 +141,5 @@ export const ZeroRatio = {
...Square.args.specify,
ratio: 0,
},
__hasReduce: false,
},
} satisfies StoryObj<typeof MkAd>;

View File

@ -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>`,
}),
],
@ -45,6 +45,7 @@ export const ProfilePage = {
...common,
args: {
...common.args,
// @ts-expect-error size is for test
size: 120,
indicator: true,
},

View File

@ -28,6 +28,7 @@ export const Default = {
};
},
args: {
// @ts-expect-error text is for test
text: 'This is a condensed line.',
},
parameters: {
@ -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>;

View File

@ -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'];

View File

@ -33,7 +33,6 @@ export const Empty = {
await waitFor(async () => await wait);
},
args: {
static: true,
tabs: [],
},
parameters: {
@ -71,8 +70,8 @@ export const IconOnly = {
...Icon.args,
tabs: [
{
...Icon.args.tabs[0],
title: undefined,
key: Icon.args.tabs[0].key,
icon: Icon.args.tabs[0].icon,
iconOnly: true,
},
],

View File

@ -38,7 +38,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts">
export type Tab = {
key: string;
title: string;
onClick?: (ev: MouseEvent) => void;
} & (
| {

View File

@ -60,7 +60,7 @@ export const RelativeFuture = {
export const AbsoluteFuture = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
},
args: {
...Empty.args,
@ -97,7 +97,7 @@ export const RelativeNow = {
export const AbsoluteNow = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
},
args: {
...Empty.args,
@ -136,7 +136,7 @@ export const RelativeOneHourAgo = {
export const AbsoluteOneHourAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
},
args: {
...Empty.args,
@ -175,7 +175,7 @@ export const RelativeOneDayAgo = {
export const AbsoluteOneDayAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
},
args: {
...Empty.args,
@ -214,7 +214,7 @@ export const RelativeOneWeekAgo = {
export const AbsoluteOneWeekAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
},
args: {
...Empty.args,
@ -253,7 +253,7 @@ export const RelativeOneMonthAgo = {
export const AbsoluteOneMonthAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
},
args: {
...Empty.args,
@ -292,7 +292,7 @@ export const RelativeOneYearAgo = {
export const AbsoluteOneYearAgo = {
...Empty,
async play({ canvasElement, args }) {
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(typeof args.time === 'string' ? new Date(args.time) : args.time ?? undefined));
},
args: {
...Empty.args,

View File

@ -30,7 +30,7 @@ export const Default = {
};
},
async play({ canvasElement }) {
await expect(canvasElement).toHaveTextContent(userDetailed().name);
await expect(canvasElement).toHaveTextContent(userDetailed().name as string);
},
args: {
user: userDetailed(),

File diff suppressed because it is too large Load Diff