laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

build(#10336): write stories for MkAd

Browse Source
This commit is contained in:
Acid Chicken (硫酸鶏) 2023-03-31 15:52:39 +09:00
parent 98fd6b5879
commit 70fc25aac1
No known key found for this signature in database
GPG Key ID: 3E87B98A3F6BAB99
9 changed files with 223 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/frontend/src/components/global/MkA.stories.impl.ts
View File

@ -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 {

2
packages/frontend/src/components/global/MkA.stories.ts
View File

@ -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
packages/frontend/src/components/global/MkAcct.stories.impl.ts
View File

@ -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';

1
packages/frontend/src/components/global/MkAcct.stories.ts
View File

@ -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
View 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,
},
};

99
packages/frontend/src/components/global/MkAd.stories.ts
View File

@ -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,
},
};

5
packages/frontend/src/components/global/MkAd.vue
View File

@ -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';

7
packages/frontend/src/components/global/MkAvatar.stories.impl.ts
View File

@ -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,
},

7
packages/frontend/src/components/global/MkAvatar.stories.ts
View File

@ -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,
},