build(#10336): write stories for MkAd

packages/frontend/src/components/global/MkA.stories.impl.ts

@@ -2,8 +2,8 @@
 import { expect } from '@storybook/jest';
 import { userEvent, within } from '@storybook/testing-library';
 import { StoryObj } from '@storybook/vue3';
-import MkA from './MkA.vue';
 import { tick } from '@/scripts/test-utils';
+import MkA from './MkA.vue';
 export const Default = {
 	render(args) {
 		return {

packages/frontend/src/components/global/MkA.stories.ts

@@ -10,8 +10,8 @@ export default meta;
 import { expect } from '@storybook/jest';
 import { userEvent, within } from '@storybook/testing-library';
 import { StoryObj } from '@storybook/vue3';
-import MkA from './MkA.vue';
 import { tick } from '@/scripts/test-utils';
+import MkA from './MkA.vue';
 export const Default = {
 	render(args) {
 		return {

packages/frontend/src/components/global/MkAcct.stories.impl.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-/* eslint-disable import/no-duplicates */
 import { StoryObj } from '@storybook/vue3';
 import { userDetailed } from '../../../.storybook/fakes';
 import MkAcct from './MkAcct.vue';

packages/frontend/src/components/global/MkAcct.stories.ts

@@ -7,7 +7,6 @@ const meta = {
 } satisfies Meta<typeof MkAcct>;
 export default meta;
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-/* eslint-disable import/no-duplicates */
 import { StoryObj } from '@storybook/vue3';
 import { userDetailed } from '../../../.storybook/fakes';
 import MkAcct from './MkAcct.vue';

packages/frontend/src/components/global/MkAd.stories.impl.ts

@@ -0,0 +1,117 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect } from '@storybook/jest';
+import { userEvent, within } from '@storybook/testing-library';
+import { StoryObj } from '@storybook/vue3';
+import MkAd from './MkAd.vue';
+const common = {
+	render(args) {
+		return {
+			components: {
+				MkAd,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAd v-bind="props" />',
+		};
+	},
+	async play({ canvasElement, args }) {
+		const canvas = within(canvasElement);
+		const a = canvas.getByRole<HTMLAnchorElement>('link');
+		await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
+		const img = within(a).getByRole('img');
+		await expect(img).toBeInTheDocument();
+		let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
+		await expect(buttons).toHaveLength(1);
+		const i = buttons[0];
+		await expect(i).toBeInTheDocument();
+		await userEvent.click(i);
+		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];
+		if (reduce) {
+			await expect(reduce).toBeInTheDocument();
+		}
+		await expect(back).toBeInTheDocument();
+		await userEvent.click(back);
+		if (reduce) {
+			await expect(reduce).not.toBeInTheDocument();
+		}
+		await expect(back).not.toBeInTheDocument();
+		const aAgain = canvas.getByRole<HTMLAnchorElement>('link');
+		await expect(aAgain).toBeInTheDocument();
+		const imgAgain = within(aAgain).getByRole('img');
+		await expect(imgAgain).toBeInTheDocument();
+	},
+	args: {
+		prefer: [],
+		specify: {
+			id: 'someadid',
+			radio: 1,
+			url: '#test',
+		},
+		_hasReduce: true,
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkAd>;
+export const Square = {
+	...common,
+	args: {
+		...common.args,
+		specify: {
+			...common.args.specify,
+			place: 'square',
+			imageUrl:
+				'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
+		},
+	},
+};
+export const Horizontal = {
+	...common,
+	args: {
+		...common.args,
+		specify: {
+			...common.args.specify,
+			place: 'horizontal',
+			imageUrl:
+				'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		},
+	},
+};
+export const HorizontalBig = {
+	...common,
+	args: {
+		...common.args,
+		specify: {
+			...common.args.specify,
+			place: 'horizontal-big',
+			imageUrl:
+				'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		},
+	},
+};
+export const ZeroRatio = {
+	...Square,
+	args: {
+		...Square.args,
+		specify: {
+			...Square.args.specify,
+			ratio: 0,
+		},
+		_hasReduce: false,
+	},
+};

packages/frontend/src/components/global/MkAd.stories.ts

@@ -1,12 +1,17 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
-import { Meta, StoryObj } from '@storybook/vue3';
+import { Meta } from '@storybook/vue3';
-import MkAd from './MkAd.vue';
 const meta = {
 	title: 'components/global/MkAd',
 	component: MkAd,
 } satisfies Meta<typeof MkAd>;
-export const Default = {
+export default meta;
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { expect } from '@storybook/jest';
+import { userEvent, within } from '@storybook/testing-library';
+import { StoryObj } from '@storybook/vue3';
+import MkAd from './MkAd.vue';
+const common = {
 	render(args) {
 		return {
 			components: {
@@ -27,8 +32,94 @@ export const Default = {
 			template: '<MkAd v-bind="props" />',
 		};
 	},
+	async play({ canvasElement, args }) {
+		const canvas = within(canvasElement);
+		const a = canvas.getByRole<HTMLAnchorElement>('link');
+		await expect(a.href).toMatch(/^https?:\/\/.*#test$/);
+		const img = within(a).getByRole('img');
+		await expect(img).toBeInTheDocument();
+		let buttons = canvas.getAllByRole<HTMLButtonElement>('button');
+		await expect(buttons).toHaveLength(1);
+		const i = buttons[0];
+		await expect(i).toBeInTheDocument();
+		await userEvent.click(i);
+		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];
+		if (reduce) {
+			await expect(reduce).toBeInTheDocument();
+		}
+		await expect(back).toBeInTheDocument();
+		await userEvent.click(back);
+		if (reduce) {
+			await expect(reduce).not.toBeInTheDocument();
+		}
+		await expect(back).not.toBeInTheDocument();
+		const aAgain = canvas.getByRole<HTMLAnchorElement>('link');
+		await expect(aAgain).toBeInTheDocument();
+		const imgAgain = within(aAgain).getByRole('img');
+		await expect(imgAgain).toBeInTheDocument();
+	},
+	args: {
+		prefer: [],
+		specify: {
+			id: 'someadid',
+			radio: 1,
+			url: '#test',
+		},
+		_hasReduce: true,
+	},
 	parameters: {
 		layout: 'centered',
 	},
 } satisfies StoryObj<typeof MkAd>;
-export default meta;
+export const Square = {
+	...common,
+	args: {
+		...common.args,
+		specify: {
+			...common.args.specify,
+			place: 'square',
+			imageUrl:
+				'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
+		},
+	},
+};
+export const Horizontal = {
+	...common,
+	args: {
+		...common.args,
+		specify: {
+			...common.args.specify,
+			place: 'horizontal',
+			imageUrl:
+				'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		},
+	},
+};
+export const HorizontalBig = {
+	...common,
+	args: {
+		...common.args,
+		specify: {
+			...common.args.specify,
+			place: 'horizontal-big',
+			imageUrl:
+				'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/fedi.jpg?raw=true',
+		},
+	},
+};
+export const ZeroRatio = {
+	...Square,
+	args: {
+		...Square.args,
+		specify: {
+			...Square.args.specify,
+			ratio: 0,
+		},
+		_hasReduce: false,
+	},
+};

packages/frontend/src/components/global/MkAd.vue

@@ -10,8 +10,8 @@
 		<div :class="$style.menuContainer">
 			<div>Ads by {{ host }}</div>
 			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
-			<MkButton v-if="chosen.ratio !== 0" :class="$style.menuButton" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
+			<MkButton v-if="chosen.ratio !== 0" :class="$style.menuButton" @click="reduceFrequency">{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton>
-			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
+			<button class="_textButton" @click="toggleMenu">{{ i18n.ts._ad.back }}</button>
 		</div>
 	</div>
 </div>
@@ -20,6 +20,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import { host } from '@/config';
 import MkButton from '@/components/MkButton.vue';

packages/frontend/src/components/global/MkAvatar.stories.impl.ts

@@ -3,7 +3,7 @@
 import { StoryObj } from '@storybook/vue3';
 import { userDetailed } from '../../../.storybook/fakes';
 import MkAvatar from './MkAvatar.vue';
-export const Default = {
+const common = {
 	render(args) {
 		return {
 			components: {
@@ -25,7 +25,6 @@ export const Default = {
 		};
 	},
 	args: {
-		size: 48,
 		user: userDetailed,
 	},
 	decorators: [
@@ -39,9 +38,9 @@ export const Default = {
 	},
 } satisfies StoryObj<typeof MkAvatar>;
 export const ProfilePage = {
-	...Default,
+	...common,
 	args: {
-		...Default.args,
+		...common.args,
 		size: 120,
 		indicator: true,
 	},

packages/frontend/src/components/global/MkAvatar.stories.ts

@@ -11,7 +11,7 @@ export default meta;
 import { StoryObj } from '@storybook/vue3';
 import { userDetailed } from '../../../.storybook/fakes';
 import MkAvatar from './MkAvatar.vue';
-export const Default = {
+const common = {
 	render(args) {
 		return {
 			components: {
@@ -33,7 +33,6 @@ export const Default = {
 		};
 	},
 	args: {
-		size: 48,
 		user: userDetailed,
 	},
 	decorators: [
@@ -47,9 +46,9 @@ export const Default = {
 	},
 } satisfies StoryObj<typeof MkAvatar>;
 export const ProfilePage = {
-	...Default,
+	...common,
 	args: {
-		...Default.args,
+		...common.args,
 		size: 120,
 		indicator: true,
 	},