fix(core): storybook stability for date (#6300)

tests/storybook/package.json

@@ -50,6 +50,7 @@
     "serve": "^14.2.1",
     "storybook": "^7.6.17",
     "storybook-dark-mode": "^3.0.3",
+    "storybook-mock-date-decorator": "^1.0.2",
     "wait-on": "^7.2.0"
   },
   "peerDependencies": {

tests/storybook/src/stories/core.stories.tsx

@@ -9,6 +9,7 @@ import {
   reactRouterParameters,
   withRouter,
 } from 'storybook-addon-react-router-v6';
+import { mockDateDecorator } from 'storybook-mock-date-decorator';
 
 const FakeApp = () => {
   const location = useLocation();
@@ -196,7 +197,7 @@ ImportPage.play = async ({ canvasElement }) => {
   });
   await userEvent.click(screen.getByTestId('editor-option-menu-import'));
 };
-ImportPage.decorators = [withRouter];
+ImportPage.decorators = [withRouter, mockDateDecorator];
 ImportPage.parameters = {
   reactRouter: reactRouterParameters({
     routing: reactRouterOutlets(topLevelRoutes),
@@ -204,6 +205,7 @@ ImportPage.parameters = {
       path: '/',
     },
   }),
+  date: new Date('Mon, 25 Mar 2024 08:39:07 GMT'),
 };
 
 export const OpenAppPage: StoryFn = () => {

tests/storybook/src/stories/image-preview-modal.stories.tsx

@@ -1,6 +1,6 @@
 import { BlockSuiteEditor } from '@affine/core/components/blocksuite/block-suite-editor';
 import { ImagePreviewModal } from '@affine/core/components/image-preview';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { Doc } from '@toeverything/infra';
 import {
   initEmptyPage,
@@ -11,13 +11,14 @@ import {
 } from '@toeverything/infra';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { mockDateDecorator } from 'storybook-mock-date-decorator';
 
 export default {
   title: 'Component/ImagePreviewModal',
   component: ImagePreviewModal,
 } satisfies Meta;
 
-export const Default = () => {
+export const Default: StoryFn = () => {
   const workspace = useService(Workspace);
   const pageManager = useService(PageManager);
 
@@ -64,7 +65,7 @@ export const Default = () => {
   }, [pageManager, workspace]);
 
   if (!page) {
-    return null;
+    return <div />;
   }
 
   return (
@@ -88,3 +89,8 @@ export const Default = () => {
     </ServiceProviderContext.Provider>
   );
 };
+
+Default.decorators = [mockDateDecorator];
+Default.parameters = {
+  date: new Date('Mon, 25 Mar 2024 08:39:07 GMT'),
+};