From 1521bb088cbafb53f8c829a60748d4bc0469a8cd Mon Sep 17 00:00:00 2001 From: "Acid Chicken (硫酸鶏)" Date: Sat, 1 Apr 2023 16:26:08 +0900 Subject: build(#10336): finalize --- .../src/components/global/MkTime.stories.impl.ts | 312 +++++++++++++++++++++ 1 file changed, 312 insertions(+) create mode 100644 packages/frontend/src/components/global/MkTime.stories.impl.ts (limited to 'packages/frontend/src/components/global/MkTime.stories.impl.ts') diff --git a/packages/frontend/src/components/global/MkTime.stories.impl.ts b/packages/frontend/src/components/global/MkTime.stories.impl.ts new file mode 100644 index 0000000000..fd8e874dc3 --- /dev/null +++ b/packages/frontend/src/components/global/MkTime.stories.impl.ts @@ -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: '', + }; + }, + async play({ canvasElement }) { + await expect(canvasElement).toHaveTextContent(i18n.ts._ago.invalid); + }, + args: { + }, + parameters: { + layout: 'centered', + }, +} satisfies StoryObj; +export const RelativeFuture = { + ...Empty, + async play({ canvasElement }) { + await expect(canvasElement).toHaveTextContent(i18n.ts._ago.future); + }, + args: { + ...Empty.args, + time: future, + }, +} satisfies StoryObj; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; +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; -- cgit v1.3.1-freya