build(#10336): write stories for MkAd
This commit is contained in:
parent
98fd6b5879
commit
70fc25aac1
9 changed files with 223 additions and 18 deletions
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
117
packages/frontend/src/components/global/MkAd.stories.impl.ts
Normal file
117
packages/frontend/src/components/global/MkAd.stories.impl.ts
Normal file
|
@ -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,
|
||||
},
|
||||
};
|
|
@ -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<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,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
|
||||
<MkButton v-if="chosen.ratio !== 0" :class="$style.menuButton" @click="reduceFrequency">{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton>
|
||||
<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';
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue