test: add stories for MkChannelPreview

packages/frontend/.storybook/fakes.ts

@@ -17,6 +17,27 @@ export function abuseUserReport() {
 	};
 }
 
+export function channel() {
+	return {
+		id: 'somechannelid',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		lastNotedAt: '2023-01-01T00:00:00.000Z',
+		name: 'AKANE☆CHANNEL',
+		description: 'sweetie sweet',
+		userId: 'someuserid',
+		bannerUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		pinnedNoteIds: ['somenoteid'],
+		color: '#eb613f',
+		isArchived: false,
+		usersCount: 16,
+		notesCount: 1024,
+		isFollowing: false,
+		isFavorited: false,
+		hasUnreadNote: false,
+		pinnedNotes: [note()],
+	}
+}
+
 export function galleryPost(isSensitive = false) {
 	return {
 		id: 'somepostid',
@@ -60,6 +81,31 @@ export function file(isSensitive = false) {
 	};
 }
 
+export function note() {
+	return {
+		id: 'somenoteid',
+		createdAt: '2016-12-28T22:49:51.000Z',
+		userId: 'someuserid',
+		user: userDetailed(),
+		text: 'make some noise',
+		cw: 'sing along',
+		visibility: 'public',
+		localOnly: false,
+		reactionAcceptance: null,
+		renoteCount: 4,
+		repliesCount: 2,
+		reactions: {
+			'👍': 16,
+			':yo@.:': 8,
+		},
+		reactionEmojis: {},
+		fileIds: [],
+		files: [],
+		replyId: null,
+		renoteId: null,
+	}
+}
+
 export function userDetailed(id = 'someuserid', username = 'miskist', host = 'misskey-hub.net', name = 'Misskey User'): entities.UserDetailed {
 	return {
 		id,

packages/frontend/.storybook/generate.tsx

@@ -396,7 +396,7 @@ function toStories(component: string): string {
 // glob('src/{components,pages,ui,widgets}/**/*.vue')
 Promise.all([
 	glob('src/components/global/*.vue'),
-	glob('src/components/Mk{A,B}*.vue'),
+	glob('src/components/Mk{A,B,C}*.vue'),
 	glob('src/components/MkDigitalClock.vue'),
 	glob('src/components/MkGalleryPostPreview.vue'),
 	glob('src/components/MkSignupServerRules.vue'),

packages/frontend/package.json

@@ -77,24 +77,24 @@
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
-		"@storybook/addon-actions": "7.0.15",
-		"@storybook/addon-essentials": "7.0.15",
-		"@storybook/addon-interactions": "7.0.15",
-		"@storybook/addon-links": "7.0.15",
-		"@storybook/addon-storysource": "7.0.15",
-		"@storybook/addons": "7.0.15",
-		"@storybook/blocks": "7.0.15",
-		"@storybook/core-events": "7.0.15",
+		"@storybook/addon-actions": "7.0.18",
+		"@storybook/addon-essentials": "7.0.18",
+		"@storybook/addon-interactions": "7.0.18",
+		"@storybook/addon-links": "7.0.18",
+		"@storybook/addon-storysource": "7.0.18",
+		"@storybook/addons": "7.0.18",
+		"@storybook/blocks": "7.0.18",
+		"@storybook/core-events": "7.0.18",
 		"@storybook/jest": "0.1.0",
-		"@storybook/manager-api": "7.0.15",
-		"@storybook/preview-api": "7.0.15",
-		"@storybook/react": "7.0.15",
-		"@storybook/react-vite": "7.0.15",
+		"@storybook/manager-api": "7.0.18",
+		"@storybook/preview-api": "7.0.18",
+		"@storybook/react": "7.0.18",
+		"@storybook/react-vite": "7.0.18",
 		"@storybook/testing-library": "0.1.0",
-		"@storybook/theming": "7.0.15",
-		"@storybook/types": "7.0.15",
-		"@storybook/vue3": "7.0.15",
-		"@storybook/vue3-vite": "7.0.15",
+		"@storybook/theming": "7.0.18",
+		"@storybook/types": "7.0.18",
+		"@storybook/vue3": "7.0.18",
+		"@storybook/vue3-vite": "7.0.18",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/vue": "7.0.0",
 		"@types/escape-regexp": "0.0.1",
@@ -133,7 +133,7 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"start-server-and-test": "2.0.0",
-		"storybook": "7.0.15",
+		"storybook": "7.0.18",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"summaly": "github:misskey-dev/summaly",
 		"vite-plugin-turbosnap": "1.0.2",

packages/frontend/src/components/MkChannelFollowButton.stories.impl.ts

@@ -0,0 +1,109 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { action } from '@storybook/addon-actions';
+import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { StoryObj } from '@storybook/vue3';
+import { rest } from 'msw';
+import { channel } from '../../.storybook/fakes';
+import { commonHandlers } from '../../.storybook/mocks';
+import MkChannelFollowButton from './MkChannelFollowButton.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkChannelFollowButton,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...this.args,
+					};
+				},
+				events() {
+					return {
+						
+					};
+				},
+			},
+			template: '<MkChannelFollowButton v-bind="props" v-on="events" />',
+		};
+	},
+	args: {
+		channel: channel(),
+	},
+	parameters: {
+		layout: 'centered',
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/channels/follow', async (req, res, ctx) => {
+					action('POST /api/channels/follow')(await req.json());
+					return res(ctx.status(204));
+				}),
+				rest.post('/api/channels/unfollow', async (req, res, ctx) => {
+					action('POST /api/channels/unfollow')(await req.json());
+					return res(ctx.status(204));
+				}),
+			],
+		},
+	},
+} satisfies StoryObj<typeof MkChannelFollowButton>;
+export const Following = {
+	...Default,
+	async play({ canvasElement }) {
+		const canvas = within(canvasElement);
+		const button = canvas.getByRole('button');
+		await waitFor(() => userEvent.click(button));
+	},
+	parameters: {
+		...Default.parameters,
+		msw: {
+			handlers: [
+				...commonHandlers,
+				rest.post('/api/channels/follow', async (req, res, ctx) => {
+					action('POST /api/channels/follow')(await req.json());
+					await new Promise(() => {});
+				}),
+				rest.post('/api/channels/unfollow', async (req, res, ctx) => {
+					action('POST /api/channels/unfollow')(await req.json());
+					await new Promise(() => {});
+				}),
+			],
+		},
+	},
+}
+export const Followed = {
+	...Default,
+	args: {
+		...Default.args,
+		channel: {
+			...channel(),
+			isFollowing: true,
+		},
+	},
+} satisfies StoryObj<typeof MkChannelFollowButton>;
+export const Full = {
+	...Default,
+	args: {
+		...Default.args,
+		full: true,
+	},
+} satisfies StoryObj<typeof MkChannelFollowButton>;
+export const FullFollowing = {
+	...Following,
+	args: {
+		...Following.args,
+		full: true,
+	},
+} satisfies StoryObj<typeof MkChannelFollowButton>;
+export const FullFollowed = {
+	...Followed,
+	args: {
+		...Followed.args,
+		full: true,
+	},
+} satisfies StoryObj<typeof MkChannelFollowButton>;

packages/frontend/src/components/MkChannelList.stories.impl.ts

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

packages/frontend/src/components/MkChannelPreview.stories.impl.ts

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