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

1 files changed, 85 insertions, 0 deletions

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: '<MkGalleryPostPreview v-bind="props" />',
+		};
+	},
+	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: '<div style="width:260px"><story /></div>',
+		}),
+	],
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+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<typeof MkGalleryPostPreview>;
+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<typeof MkGalleryPostPreview>;
+export const Sensitive = {
+	...Default,
+	args: {
+		...Default.args,
+		post: galleryPost(true),
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const SensitiveHover = {
+	...Hover,
+	args: {
+		...Hover.args,
+		post: galleryPost(true),
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;
+export const SensitiveHoverThenUnhover = {
+	...HoverThenUnhover,
+	args: {
+		...HoverThenUnhover.args,
+		post: galleryPost(true),
+	},
+} satisfies StoryObj<typeof MkGalleryPostPreview>;