build(#10336): finalize
This commit is contained in:
Acid Chicken (硫酸鶏)
312
packages/frontend/src/components/global/MkTime.stories.impl.ts
Normal file
312
packages/frontend/src/components/global/MkTime.stories.impl.ts
Normal file
@@ -0,0 +1,312 @@
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
import { expect } from '@storybook/jest';
|
||||
import { StoryObj } from '@storybook/vue3';
|
||||
import MkTime from './MkTime.vue';
|
||||
import { i18n } from '@/i18n';
|
||||
import { dateTimeFormat } from '@/scripts/intl-const';
|
||||
const now = new Date('2023-04-01T00:00:00.000Z');
|
||||
const future = new Date(8640000000000000);
|
||||
const oneHourAgo = new Date(now.getTime() - 3600000);
|
||||
const oneDayAgo = new Date(now.getTime() - 86400000);
|
||||
const oneWeekAgo = new Date(now.getTime() - 604800000);
|
||||
const oneMonthAgo = new Date(now.getTime() - 2592000000);
|
||||
const oneYearAgo = new Date(now.getTime() - 31536000000);
|
||||
export const Empty = {
|
||||
render(args) {
|
||||
return {
|
||||
components: {
|
||||
MkTime,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
args,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
props() {
|
||||
return {
|
||||
...args,
|
||||
};
|
||||
},
|
||||
},
|
||||
template: '<MkTime v-bind="props" />',
|
||||
};
|
||||
},
|
||||
async play({ canvasElement }) {
|
||||
await expect(canvasElement).toHaveTextContent(i18n.ts._ago.invalid);
|
||||
},
|
||||
args: {
|
||||
},
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const RelativeFuture = {
|
||||
...Empty,
|
||||
async play({ canvasElement }) {
|
||||
await expect(canvasElement).toHaveTextContent(i18n.ts._ago.future);
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: future,
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const AbsoluteFuture = {
|
||||
...Empty,
|
||||
async play({ canvasElement, args }) {
|
||||
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: future,
|
||||
mode: 'absolute',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const DetailFuture = {
|
||||
...Empty,
|
||||
async play(context) {
|
||||
await AbsoluteFuture.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(' (');
|
||||
await RelativeFuture.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(')');
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: future,
|
||||
mode: 'detail',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const RelativeNow = {
|
||||
...Empty,
|
||||
async play({ canvasElement }) {
|
||||
await expect(canvasElement).toHaveTextContent(i18n.ts._ago.justNow);
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: now,
|
||||
origin: now,
|
||||
mode: 'relative',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const AbsoluteNow = {
|
||||
...Empty,
|
||||
async play({ canvasElement, args }) {
|
||||
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: now,
|
||||
origin: now,
|
||||
mode: 'absolute',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const DetailNow = {
|
||||
...Empty,
|
||||
async play(context) {
|
||||
await AbsoluteNow.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(' (');
|
||||
await RelativeNow.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(')');
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: now,
|
||||
origin: now,
|
||||
mode: 'detail',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const RelativeOneHourAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement }) {
|
||||
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.hoursAgo', { n: 1 }));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneHourAgo,
|
||||
origin: now,
|
||||
mode: 'relative',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const AbsoluteOneHourAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement, args }) {
|
||||
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneHourAgo,
|
||||
origin: now,
|
||||
mode: 'absolute',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const DetailOneHourAgo = {
|
||||
...Empty,
|
||||
async play(context) {
|
||||
await AbsoluteOneHourAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(' (');
|
||||
await RelativeOneHourAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(')');
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneHourAgo,
|
||||
origin: now,
|
||||
mode: 'detail',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const RelativeOneDayAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement }) {
|
||||
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.daysAgo', { n: 1 }));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneDayAgo,
|
||||
origin: now,
|
||||
mode: 'relative',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const AbsoluteOneDayAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement, args }) {
|
||||
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneDayAgo,
|
||||
origin: now,
|
||||
mode: 'absolute',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const DetailOneDayAgo = {
|
||||
...Empty,
|
||||
async play(context) {
|
||||
await AbsoluteOneDayAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(' (');
|
||||
await RelativeOneDayAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(')');
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneDayAgo,
|
||||
origin: now,
|
||||
mode: 'detail',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const RelativeOneWeekAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement }) {
|
||||
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.weeksAgo', { n: 1 }));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneWeekAgo,
|
||||
origin: now,
|
||||
mode: 'relative',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const AbsoluteOneWeekAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement, args }) {
|
||||
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneWeekAgo,
|
||||
origin: now,
|
||||
mode: 'absolute',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const DetailOneWeekAgo = {
|
||||
...Empty,
|
||||
async play(context) {
|
||||
await AbsoluteOneWeekAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(' (');
|
||||
await RelativeOneWeekAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(')');
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneWeekAgo,
|
||||
origin: now,
|
||||
mode: 'detail',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const RelativeOneMonthAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement }) {
|
||||
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.monthsAgo', { n: 1 }));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneMonthAgo,
|
||||
origin: now,
|
||||
mode: 'relative',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const AbsoluteOneMonthAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement, args }) {
|
||||
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneMonthAgo,
|
||||
origin: now,
|
||||
mode: 'absolute',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const DetailOneMonthAgo = {
|
||||
...Empty,
|
||||
async play(context) {
|
||||
await AbsoluteOneMonthAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(' (');
|
||||
await RelativeOneMonthAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(')');
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneMonthAgo,
|
||||
origin: now,
|
||||
mode: 'detail',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const RelativeOneYearAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement }) {
|
||||
await expect(canvasElement).toHaveTextContent(i18n.t('_ago.yearsAgo', { n: 1 }));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneYearAgo,
|
||||
origin: now,
|
||||
mode: 'relative',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const AbsoluteOneYearAgo = {
|
||||
...Empty,
|
||||
async play({ canvasElement, args }) {
|
||||
await expect(canvasElement).toHaveTextContent(dateTimeFormat.format(args.time));
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneYearAgo,
|
||||
origin: now,
|
||||
mode: 'absolute',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
export const DetailOneYearAgo = {
|
||||
...Empty,
|
||||
async play(context) {
|
||||
await AbsoluteOneYearAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(' (');
|
||||
await RelativeOneYearAgo.play(context);
|
||||
await expect(context.canvasElement).toHaveTextContent(')');
|
||||
},
|
||||
args: {
|
||||
...Empty.args,
|
||||
time: oneYearAgo,
|
||||
origin: now,
|
||||
mode: 'detail',
|
||||
},
|
||||
} satisfies StoryObj<typeof MkTime>;
|
||||
Reference in New Issue
Block a user