From 70fc25aac17ffcce7fd58738eadbfa5b64dec30c 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: Fri, 31 Mar 2023 15:52:39 +0900 Subject: [PATCH] build(#10336): write stories for `MkAd` --- .../src/components/global/MkA.stories.impl.ts | 2 +- .../src/components/global/MkA.stories.ts | 2 +- .../components/global/MkAcct.stories.impl.ts | 1 - .../src/components/global/MkAcct.stories.ts | 1 - .../components/global/MkAd.stories.impl.ts | 117 ++++++++++++++++++ .../src/components/global/MkAd.stories.ts | 99 ++++++++++++++- .../frontend/src/components/global/MkAd.vue | 5 +- .../global/MkAvatar.stories.impl.ts | 7 +- .../src/components/global/MkAvatar.stories.ts | 7 +- 9 files changed, 223 insertions(+), 18 deletions(-) create mode 100644 packages/frontend/src/components/global/MkAd.stories.impl.ts diff --git a/packages/frontend/src/components/global/MkA.stories.impl.ts b/packages/frontend/src/components/global/MkA.stories.impl.ts index 3afec7f81a..780aa55376 100644 --- a/packages/frontend/src/components/global/MkA.stories.impl.ts +++ b/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 { diff --git a/packages/frontend/src/components/global/MkA.stories.ts b/packages/frontend/src/components/global/MkA.stories.ts index 5bb6b3b5a8..cdc5d13f6a 100644 --- a/packages/frontend/src/components/global/MkA.stories.ts +++ b/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 { diff --git a/packages/frontend/src/components/global/MkAcct.stories.impl.ts b/packages/frontend/src/components/global/MkAcct.stories.impl.ts index 3fce64c51d..61bf06f8a5 100644 --- a/packages/frontend/src/components/global/MkAcct.stories.impl.ts +++ b/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'; diff --git a/packages/frontend/src/components/global/MkAcct.stories.ts b/packages/frontend/src/components/global/MkAcct.stories.ts index adac7e0c3e..95b1286c75 100644 --- a/packages/frontend/src/components/global/MkAcct.stories.ts +++ b/packages/frontend/src/components/global/MkAcct.stories.ts @@ -7,7 +7,6 @@ const meta = { } satisfies Meta; 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'; diff --git a/packages/frontend/src/components/global/MkAd.stories.impl.ts b/packages/frontend/src/components/global/MkAd.stories.impl.ts new file mode 100644 index 0000000000..c5c5354222 --- /dev/null +++ b/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: '', + }; + }, + async play({ canvasElement, args }) { + const canvas = within(canvasElement); + const a = canvas.getByRole('link'); + await expect(a.href).toMatch(/^https?:\/\/.*#test$/); + const img = within(a).getByRole('img'); + await expect(img).toBeInTheDocument(); + let buttons = canvas.getAllByRole('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('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('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; +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, + }, +}; diff --git a/packages/frontend/src/components/global/MkAd.stories.ts b/packages/frontend/src/components/global/MkAd.stories.ts index 9f4dc320ba..29b3fd53eb 100644 --- a/packages/frontend/src/components/global/MkAd.stories.ts +++ b/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 MkAd from './MkAd.vue'; +import { Meta } from '@storybook/vue3'; const meta = { title: 'components/global/MkAd', component: MkAd, } satisfies Meta; -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: '', }; }, + async play({ canvasElement, args }) { + const canvas = within(canvasElement); + const a = canvas.getByRole('link'); + await expect(a.href).toMatch(/^https?:\/\/.*#test$/); + const img = within(a).getByRole('img'); + await expect(img).toBeInTheDocument(); + let buttons = canvas.getAllByRole('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('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('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; -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, + }, +}; diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue index e0304c8bc5..998eb1ef38 100644 --- a/packages/frontend/src/components/global/MkAd.vue +++ b/packages/frontend/src/components/global/MkAd.vue @@ -10,8 +10,8 @@
Ads by {{ host }}
- {{ $ts._ad.reduceFrequencyOfThisAd }} - + {{ i18n.ts._ad.reduceFrequencyOfThisAd }} +
@@ -20,6 +20,7 @@