From 9849aab40283cbde2184e74d4795aec8ef8ccba3 Mon Sep 17 00:00:00 2001 From: zyoshoka <107108195+zyoshoka@users.noreply.github.com> Date: Sat, 8 Jun 2024 18:00:54 +0900 Subject: [PATCH] test(#10336): add `components/MkC.*` stories (#13830) * test(storybook): add `components/MkC.*` stories * test(storybook): add some tests * test: add sleep * test: comment-out flaky test * test(storybook): add test for `MkChannelFollowButton` * chore(storybook): tweak sleep duration in `MkChannelFollowButton` story test * fix(chromatic): add delay to `MkChannelList` * chore: replace `mswDecorator` with `mswLoader` * fix(storybook): tweak some parameters * chore: serve static files * fix(chromatic): add delay to `MkCwButton` * chore: delete logging for debug * fix: add right click in `MkContextMenu` play * refactor: remove unused imports --- packages/frontend/.storybook/fakes.ts | 60 +++++++++ packages/frontend/.storybook/generate.tsx | 2 +- packages/frontend/.storybook/main.ts | 1 + packages/frontend/.storybook/preview.ts | 4 +- packages/frontend/package.json | 2 + .../MkChannelFollowButton.stories.impl.ts | 77 ++++++++++++ .../src/components/MkChannelFollowButton.vue | 5 +- .../components/MkChannelList.stories.impl.ts | 65 ++++++++++ .../MkChannelPreview.stories.impl.ts | 43 +++++++ .../src/components/MkChart.stories.impl.ts | 117 ++++++++++++++++++ packages/frontend/src/components/MkChart.vue | 90 ++++++++------ .../components/MkChartLegend.stories.impl.ts | 7 ++ .../components/MkChartTooltip.stories.impl.ts | 7 ++ .../components/MkClickerGame.stories.impl.ts | 79 ++++++++++++ .../frontend/src/components/MkClickerGame.vue | 2 +- .../components/MkClipPreview.stories.impl.ts | 43 +++++++ .../components/MkCode.core.stories.impl.ts | 7 ++ .../src/components/MkCode.stories.impl.ts | 44 +++++++ .../components/MkCodeEditor.stories.impl.ts | 62 ++++++++++ .../components/MkCodeInline.stories.impl.ts | 37 ++++++ .../components/MkColorInput.stories.impl.ts | 50 ++++++++ .../components/MkContainer.stories.impl.ts | 7 ++ .../components/MkContextMenu.stories.impl.ts | 58 +++++++++ .../MkCropperDialog.stories.impl.ts | 75 +++++++++++ ...kCustomEmojiDetailedDialog.stories.impl.ts | 38 ++++++ .../src/components/MkCwButton.stories.impl.ts | 89 +++++++++++++ packages/frontend/src/scripts/test-utils.ts | 10 ++ pnpm-lock.yaml | 88 +++++++------ 28 files changed, 1083 insertions(+), 86 deletions(-) create mode 100644 packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts create mode 100644 packages/frontend/src/components/MkChannelList.stories.impl.ts create mode 100644 packages/frontend/src/components/MkChannelPreview.stories.impl.ts create mode 100644 packages/frontend/src/components/MkChart.stories.impl.ts create mode 100644 packages/frontend/src/components/MkChartLegend.stories.impl.ts create mode 100644 packages/frontend/src/components/MkChartTooltip.stories.impl.ts create mode 100644 packages/frontend/src/components/MkClickerGame.stories.impl.ts create mode 100644 packages/frontend/src/components/MkClipPreview.stories.impl.ts create mode 100644 packages/frontend/src/components/MkCode.core.stories.impl.ts create mode 100644 packages/frontend/src/components/MkCode.stories.impl.ts create mode 100644 packages/frontend/src/components/MkCodeEditor.stories.impl.ts create mode 100644 packages/frontend/src/components/MkCodeInline.stories.impl.ts create mode 100644 packages/frontend/src/components/MkColorInput.stories.impl.ts create mode 100644 packages/frontend/src/components/MkContainer.stories.impl.ts create mode 100644 packages/frontend/src/components/MkContextMenu.stories.impl.ts create mode 100644 packages/frontend/src/components/MkCropperDialog.stories.impl.ts create mode 100644 packages/frontend/src/components/MkCustomEmojiDetailedDialog.stories.impl.ts create mode 100644 packages/frontend/src/components/MkCwButton.stories.impl.ts diff --git a/packages/frontend/.storybook/fakes.ts b/packages/frontend/.storybook/fakes.ts index 3a24ccb248..fdb155261b 100644 --- a/packages/frontend/.storybook/fakes.ts +++ b/packages/frontend/.storybook/fakes.ts @@ -22,6 +22,66 @@ export function abuseUserReport() { }; } +export function channel(id = 'somechannelid', name = 'Some Channel', bannerUrl: string | null = 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true'): entities.Channel { + return { + id, + createdAt: '2016-12-28T22:49:51.000Z', + lastNotedAt: '2016-12-28T22:49:51.000Z', + name, + description: null, + userId: null, + bannerUrl, + pinnedNoteIds: [], + color: '#000', + isArchived: false, + usersCount: 1, + notesCount: 1, + isSensitive: false, + allowRenoteToExternal: false, + }; +} + +export function clip(id = 'someclipid', name = 'Some Clip'): entities.Clip { + return { + id, + createdAt: '2016-12-28T22:49:51.000Z', + lastClippedAt: null, + userId: 'someuserid', + user: { + id: 'someuserid', + name: 'Misskey User', + username: 'miskist', + host: 'misskey-hub.net', + 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: {}, + badgeRoles: [], + onlineStatus: 'unknown', + }, + notesCount: undefined, + name, + description: 'Some clip description', + isPublic: false, + favoritedCount: 0, + }; +} + +export function emojiDetailed(id = 'someemojiid', name = 'some_emoji'): entities.EmojiDetailed { + return { + id, + aliases: ['alias1', 'alias2'], + name, + category: 'emojiCategory', + host: null, + url: '/client-assets/about-icon.png', + license: null, + isSensitive: false, + localOnly: false, + roleIdsThatCanBeUsedThisEmojiAsReaction: ['roleId1', 'roleId2'], + }; +} + export function galleryPost(isSensitive = false) { return { id: 'somepostid', diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx index d74c83a500..d21eea9d17 100644 --- a/packages/frontend/.storybook/generate.tsx +++ b/packages/frontend/.storybook/generate.tsx @@ -397,7 +397,7 @@ function toStories(component: string): Promise { const globs = await Promise.all([ glob('src/components/global/Mk*.vue'), glob('src/components/global/RouterView.vue'), - glob('src/components/Mk{A,B}*.vue'), + glob('src/components/Mk[A-C]*.vue'), glob('src/components/MkDigitalClock.vue'), glob('src/components/MkGalleryPostPreview.vue'), glob('src/components/MkSignupServerRules.vue'), diff --git a/packages/frontend/.storybook/main.ts b/packages/frontend/.storybook/main.ts index d3822942cd..9f318cf449 100644 --- a/packages/frontend/.storybook/main.ts +++ b/packages/frontend/.storybook/main.ts @@ -15,6 +15,7 @@ const _dirname = fileURLToPath(new URL('.', import.meta.url)); const config = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + staticDirs: [{ from: '../assets', to: '/client-assets' }], addons: [ getAbsolutePath('@storybook/addon-essentials'), getAbsolutePath('@storybook/addon-interactions'), diff --git a/packages/frontend/.storybook/preview.ts b/packages/frontend/.storybook/preview.ts index 982a2979ac..73ee007fb8 100644 --- a/packages/frontend/.storybook/preview.ts +++ b/packages/frontend/.storybook/preview.ts @@ -7,7 +7,7 @@ import { FORCE_REMOUNT } from '@storybook/core-events'; import { addons } from '@storybook/preview-api'; import { type Preview, setup } from '@storybook/vue3'; import isChromatic from 'chromatic/isChromatic'; -import { initialize, mswDecorator } from 'msw-storybook-addon'; +import { initialize, mswLoader } from 'msw-storybook-addon'; import { userDetailed } from './fakes.js'; import locale from './locale.js'; import { commonHandlers, onUnhandledRequest } from './mocks.js'; @@ -122,7 +122,6 @@ const preview = { } return story; }, - mswDecorator, (Story, context) => { return { setup() { @@ -137,6 +136,7 @@ const preview = { }; }, ], + loaders: [mswLoader], parameters: { controls: { exclude: /^__/, diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 56b824c0c5..66940a1601 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -104,6 +104,7 @@ "@types/node": "20.12.7", "@types/punycode": "2.1.4", "@types/sanitize-html": "2.11.0", + "@types/seedrandom": "3.0.8", "@types/throttle-debounce": "5.0.2", "@types/tinycolor2": "1.4.6", "@types/uuid": "9.0.8", @@ -128,6 +129,7 @@ "prettier": "3.2.5", "react": "18.3.1", "react-dom": "18.3.1", + "seedrandom": "3.0.5", "start-server-and-test": "2.0.3", "storybook": "8.0.9", "storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme", diff --git a/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts b/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts new file mode 100644 index 0000000000..b99620da22 --- /dev/null +++ b/packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts @@ -0,0 +1,77 @@ +/* + * SPDX-FileCopyrightText: syuilo and misskey-project + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable import/no-default-export */ +import { StoryObj } from '@storybook/vue3'; +import { HttpResponse, http } from 'msw'; +import { action } from '@storybook/addon-actions'; +import { expect, userEvent, within } from '@storybook/test'; +import { channel } from '../../.storybook/fakes.js'; +import { commonHandlers } from '../../.storybook/mocks.js'; +import MkChannelFollowButton from './MkChannelFollowButton.vue'; +import { semaphore } from '@/scripts/test-utils.js'; +import { i18n } from '@/i18n.js'; + +function sleep(ms: number) { + return new Promise(resolve => setTimeout(resolve, ms)); +} + +const s = semaphore(); +export const Default = { + render(args) { + return { + components: { + MkChannelFollowButton, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '', + }; + }, + args: { + channel: channel(), + full: true, + }, + async play({ canvasElement }) { + await s.acquire(); + await sleep(1000); + const canvas = within(canvasElement); + const buttonElement = canvas.getByRole('button'); + await expect(buttonElement).toHaveTextContent(i18n.ts.follow); + await userEvent.click(buttonElement); + await sleep(1000); + await expect(buttonElement).toHaveTextContent(i18n.ts.unfollow); + await sleep(100); + await userEvent.click(buttonElement); + s.release(); + }, + parameters: { + layout: 'centered', + msw: { + handlers: [ + ...commonHandlers, + http.post('/api/channels/follow', async ({ request }) => { + action('POST /api/channels/follow')(await request.json()); + return HttpResponse.json({}); + }), + http.post('/api/channels/unfollow', async ({ request }) => { + action('POST /api/channels/unfollow')(await request.json()); + return HttpResponse.json({}); + }), + ], + }, + }, +} satisfies StoryObj; diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue index 6b1b380e41..841d37a568 100644 --- a/packages/frontend/src/components/MkChannelFollowButton.vue +++ b/packages/frontend/src/components/MkChannelFollowButton.vue @@ -26,17 +26,18 @@ SPDX-License-Identifier: AGPL-3.0-only