From 3b3f683f8cdff33c8c745e1da99596e7499ca2d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?= Date: Thu, 6 Apr 2023 08:19:49 +0900 Subject: [PATCH] feat(#8149): respect nsfw settings on gallery list (#10481) * feat(#8149): respect nsfw settings on gallery list * ci(#10336): use pull_request * test(#8149): add interaction tests * test(#10336): use `waitFor` * chore: transition --- packages/frontend/.storybook/fakes.ts | 164 ++++++++++++------ packages/frontend/.storybook/generate.tsx | 20 +-- .../MkGalleryPostPreview.stories.impl.ts | 85 +++++++++ .../src/components/MkGalleryPostPreview.vue | 39 ++++- .../components/global/MkAcct.stories.impl.ts | 4 +- .../global/MkAvatar.stories.impl.ts | 4 +- .../components/global/MkUrl.stories.impl.ts | 6 +- .../global/MkUserName.stories.impl.ts | 8 +- 8 files changed, 254 insertions(+), 76 deletions(-) create mode 100644 packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts diff --git a/packages/frontend/.storybook/fakes.ts b/packages/frontend/.storybook/fakes.ts index b620cf68a3..23b82a8ac5 100644 --- a/packages/frontend/.storybook/fakes.ts +++ b/packages/frontend/.storybook/fakes.ts @@ -1,54 +1,116 @@ import type { entities } from 'misskey-js' -export const userDetailed = { - id: 'someuserid', - username: 'miskist', - host: 'misskey-hub.net', - name: 'Misskey User', - 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', - 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', - description: 'I am a cool user!', - ffVisibility: 'public', - fields: [ - { - name: 'Website', - value: 'https://misskey-hub.net', +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 galleryPost(isSensitive = false) { + return { + id: 'somepostid', + createdAt: '2016-12-28T22:49:51.000Z', + updatedAt: '2016-12-28T22:49:51.000Z', + userid: 'someuserid', + user: userDetailed(), + title: 'Some post title', + description: 'Some post description', + fileIds: ['somefileid'], + files: [ + file(isSensitive), + ], + isSensitive, + likedCount: 0, + isLiked: false, + } +} + +export function file(isSensitive = false) { + return { + id: 'somefileid', + createdAt: '2016-12-28T22:49:51.000Z', + name: 'somefile.jpg', + type: 'image/jpeg', + md5: 'f6fc51c73dc21b1fb85ead2cdf57530a', + size: 77752, + isSensitive, + blurhash: 'eQAmoa^-MH8w9ZIvNLSvo^$*MwRPbwtSxutRozjEiwR.RjWBoeozog', + properties: { + width: 1024, + height: 270 }, - ], - followersCount: 1024, - followingCount: 16, - hasPendingFollowRequestFromYou: false, - hasPendingFollowRequestToYou: false, - isAdmin: false, - isBlocked: false, - isBlocking: false, - isBot: false, - isCat: false, - isFollowed: false, - isFollowing: false, - isLocked: false, - isModerator: false, - isMuted: false, - isSilenced: false, - isSuspended: false, - lang: 'en', - location: 'Fediverse', - notesCount: 65536, - pinnedNoteIds: [], - pinnedNotes: [], - pinnedPage: null, - pinnedPageId: null, - publicReactions: false, - securityKeys: false, - twoFactorEnabled: false, - updatedAt: null, - uri: null, - url: null, -} satisfies entities.UserDetailed + url: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true', + thumbnailUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true', + comment: null, + folderId: null, + folder: null, + userId: null, + user: null, + }; +} + +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', + 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', + description: 'I am a cool user!', + ffVisibility: 'public', + fields: [ + { + name: 'Website', + value: 'https://misskey-hub.net', + }, + ], + followersCount: 1024, + followingCount: 16, + hasPendingFollowRequestFromYou: false, + hasPendingFollowRequestToYou: false, + isAdmin: false, + isBlocked: false, + isBlocking: false, + isBot: false, + isCat: false, + isFollowed: false, + isFollowing: false, + isLocked: false, + isModerator: false, + isMuted: false, + isSilenced: false, + isSuspended: false, + lang: 'en', + location: 'Fediverse', + notesCount: 65536, + pinnedNoteIds: [], + pinnedNotes: [], + pinnedPage: null, + pinnedPageId: null, + publicReactions: false, + securityKeys: false, + twoFactorEnabled: false, + updatedAt: null, + uri: null, + url: null, + }; +} diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx index f0865fcc24..b3bbeeb51c 100644 --- a/packages/frontend/.storybook/generate.tsx +++ b/packages/frontend/.storybook/generate.tsx @@ -394,13 +394,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) => { - const stories = component.replace(/\.vue$/, '.stories.ts'); - return writeFile(stories, toStories(component)); - }) - ) -); +// glob('src/{components,pages,ui,widgets}/**/*.vue') +Promise.all([ + glob('src/components/global/*.vue'), + glob('src/components/MkGalleryPostPreview.vue'), +]) + .then((globs) => globs.flat()) + .then((components) => Promise.all(components.map((component) => { + const stories = component.replace(/\.vue$/, '.stories.ts'); + return writeFile(stories, toStories(component)); + }))); diff --git a/packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts b/packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts new file mode 100644 index 0000000000..e46a708192 --- /dev/null +++ b/packages/frontend/src/components/MkGalleryPostPreview.stories.impl.ts @@ -0,0 +1,85 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +import { expect } from '@storybook/jest'; +import { userEvent, waitFor, within } from '@storybook/testing-library'; +import { StoryObj } from '@storybook/vue3'; +import { galleryPost } from '../../.storybook/fakes'; +import MkGalleryPostPreview from './MkGalleryPostPreview.vue'; +export const Default = { + render(args) { + return { + components: { + MkGalleryPostPreview, + }, + setup() { + return { + args, + }; + }, + computed: { + props() { + return { + ...this.args, + }; + }, + }, + template: '', + }; + }, + async play({ canvasElement }) { + const canvas = within(canvasElement); + const links = canvas.getAllByRole('link'); + await expect(links).toHaveLength(2); + await expect(links[0]).toHaveAttribute('href', `/gallery/${galleryPost().id}`); + await expect(links[1]).toHaveAttribute('href', `/@${galleryPost().user.username}@${galleryPost().user.host}`); + }, + args: { + post: galleryPost(), + }, + decorators: [ + () => ({ + template: '
', + }), + ], + parameters: { + layout: 'centered', + }, +} satisfies StoryObj; +export const Hover = { + ...Default, + async play(context) { + await Default.play(context); + const canvas = within(context.canvasElement); + const links = canvas.getAllByRole('link'); + await waitFor(() => userEvent.hover(links[0])); + }, +} satisfies StoryObj; +export const HoverThenUnhover = { + ...Default, + async play(context) { + await Hover.play(context); + const canvas = within(context.canvasElement); + const links = canvas.getAllByRole('link'); + await waitFor(() => userEvent.unhover(links[0])); + }, +} satisfies StoryObj; +export const Sensitive = { + ...Default, + args: { + ...Default.args, + post: galleryPost(true), + }, +} satisfies StoryObj; +export const SensitiveHover = { + ...Hover, + args: { + ...Hover.args, + post: galleryPost(true), + }, +} satisfies StoryObj; +export const SensitiveHoverThenUnhover = { + ...HoverThenUnhover, + args: { + ...HoverThenUnhover.args, + post: galleryPost(true), + }, +} satisfies StoryObj; diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue index 2c5032119f..944f5ad97b 100644 --- a/packages/frontend/src/components/MkGalleryPostPreview.vue +++ b/packages/frontend/src/components/MkGalleryPostPreview.vue @@ -1,7 +1,10 @@