test(datepicker): add panel open ui test

packages/semi-ui/datePicker/_story/RenderDate/index.js

@@ -2,20 +2,30 @@ import React from 'react';
 import DatePicker from '../../index';
 import { Tooltip } from '@douyinfe/semi-ui';
 
+/**
+ * 使用 Chromatic UI 测试
+ */
 export default function Demo() {
     const dateStyle = { width: '100%', height: '100%', border: '1px solid #0077FA', display: 'flex', justifyContent: 'center', alignItems: 'center' };
+    const defaultValue = new Date('2021-01-10 00:00:00');
     const renderDate = (dayNumber, fullDate) => {
         if (dayNumber === 1) {
             return <Tooltip content={'Always Day 1'} >
                 <div style={dateStyle}>{dayNumber}</div>
-            </Tooltip>
+            </Tooltip>;
         }
         return dayNumber;
     };
     return (
         <div>
             <div>通过 renderDate 可以自定义日期的显示内容</div>
-            <DatePicker renderDate={renderDate} />
+            <DatePicker defaultValue={defaultValue} defaultOpen renderDate={renderDate} />
         </div>
     );
 }
+Demo.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 300,
+    },
+};

packages/semi-ui/datePicker/_story/RenderFullDate/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import DatePicker from '../../index';
+import { DatePicker, Space } from '@douyinfe/semi-ui';
 import classNames from 'classnames';
 import '@douyinfe/semi-foundation/datePicker/datePicker.scss'; 
+import './index.scss';
 
+/**
+ * 开启 Chromatic UI 测试
+ */
 export default function Demo() {
     const dayStyle = {
         display: 'flex',
@@ -33,24 +37,40 @@ export default function Demo() {
             </div>
         );
     };
+    const props = {
+        defaultOpen: true,
+        position: 'bottomLeft',
+        autoAdjustOverflow: false,
+    };
+    const singleDefaultValue = new Date('2021-01-08');
+    const multipleDefaultValue = [new Date('2021-01-08'), new Date('2021-01-09'), new Date('2021-01-10'), new Date('2021-01-19')];
+    const rangeDefaultValue = [new Date('2021-12-08'), new Date('2021-01-20')];
 
     return (
-        <div>
+        <>
             <div>
                 通过 renderFullDate 可以自定义日期单元格子的渲染，API 提供日期的当前状态：是否被选中，是否是当前日等。
             </div>  
-            <div>
-                单选选中
-                <DatePicker style={{ width: '230px' }} renderFullDate={renderFullDate} />
-            </div>
-            <div>
-                多选选中
-                <DatePicker style={{ width: '230px' }} multiple={true} renderFullDate={renderFullDate} />
-            </div>
-            <div>
-                范围选中
-                <DatePicker style={{ width: '230px' }} type={'dateRange'} renderFullDate={renderFullDate} />
-            </div>
-        </div>
+            <Space wrap spacing={[12, 400]}>
+                <div>
+                    单选选中
+                    <DatePicker {...props} style={{ width: '230px' }} renderFullDate={renderFullDate} defaultValue={singleDefaultValue} />
+                </div>
+                <div>
+                    多选选中
+                    <DatePicker {...props} style={{ width: '230px' }} multiple={true} renderFullDate={renderFullDate} defaultValue={multipleDefaultValue} />
+                </div>
+                <div>
+                    范围选中
+                    <DatePicker {...props} style={{ width: '230px' }} type={'dateRange'} renderFullDate={renderFullDate} defaultValue={rangeDefaultValue} />
+                </div>
+            </Space>
+        </>
     );
 }
+Demo.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 300,
+    },
+};

packages/semi-ui/datePicker/_story/datePicker.stories.js

@@ -36,7 +36,7 @@ import DatePickerSlot from './DatePickerSlot';
 import DatePickerTimeZone from './DatePickerTimeZone';
 import BetterRangePicker from './BetterRangePicker';
 import SyncSwitchMonth from './SyncSwitchMonth';
-import { YearButton } from './v2';
+export * from './v2';
 
 export default {
   title: 'DatePicker',
@@ -67,7 +67,6 @@ export {
   DatePickerTimeZone,
   BetterRangePicker,
   SyncSwitchMonth,
-  YearButton
 }
 
 const demoDiv = {
@@ -108,6 +107,12 @@ export const DatePickerDefault = () => (
     />
   </div>
 );
+DatePickerDefault.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    delay: 300
+  }
+};
 
 export const DatePickerCallbacks = () => {
   const printArgs = (...args) => console.log(...args);
@@ -806,3 +811,4 @@ export const FixTriggerRenderClosePanel = () => {
   );
 };
 FixTriggerRenderClosePanel.storyName = "fix triggerRender close bug"
+

packages/semi-ui/datePicker/_story/v2/PanelOpen.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { DatePicker, Space } from '@douyinfe/semi-ui';
+
+/**
+ * Test with Chromatic
+ */
+export default function App() {
+    // 使用过去的时间，避免当前日变动引入 UI 测试失败
+    const defaultValue = new Date('2021-01-01 00:00:00');
+    const props = {
+        defaultOpen: true,
+        position: 'bottomLeft',
+        autoAdjustOverflow: false,
+        defaultPickerValue: defaultValue,
+        needConfirm: true,
+    };
+    const spacing = [48, 400];
+    // 使用过去的时间，避免当前日变动引入 UI 测试失败
+    const defaultRangeValue = [defaultValue, new Date('2021-03-31 00:00:00')];
+    return (
+        <Space wrap spacing={spacing}>
+            <DatePicker {...props} type="month" defaultValue={defaultValue} />
+            <DatePicker {...props} type="dateTimeRange" defaultValue={defaultRangeValue} density="compact" />
+            <DatePicker {...props} type="dateTimeRange" defaultValue={defaultRangeValue} />
+        </Space>
+    );
+}
+
+App.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 300,
+    },
+};
+App.storyName = 'defaultOpen';

packages/semi-ui/datePicker/_story/v2/index.js

@@ -1 +1,2 @@
-export { default as YearButton } from './YearButton';
+export { default as YearButton } from './YearButton';
+export { default as PanelOpen  } from './PanelOpen';