refactor: Update comments for clarity and add tests for date formatti…

…ng functions

src/components/BrowserRow/BrowserRow.react.js

@@ -28,7 +28,7 @@ export default class BrowserRow extends Component {
     switch(type) {
       case 'Date':
         return formatDateTime(value, this.props.useLocalTime);
-      // ... 其他 case
+      // ... other cases
     }
   }
 

src/components/TimeZoneToggle/TimeZoneToggle.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import TimeZoneToggle from '../TimeZoneToggle.react';
+
+describe('TimeZoneToggle', () => {
+  it('should render UTC text when value is false', () => {
+    const wrapper = mount(<TimeZoneToggle value={false} onChange={() => {}} />);
+    expect(wrapper.find('.option').text()).toBe('UTC');
+    expect(wrapper.find('.switch').hasClass('left')).toBe(true);
+  });
+
+  it('should render Local text when value is true', () => {
+    const wrapper = mount(<TimeZoneToggle value={true} onChange={() => {}} />);
+    expect(wrapper.find('.option').text()).toBe('Local');
+    expect(wrapper.find('.switch').hasClass('right')).toBe(true);
+  });
+
+  it('should call onChange with opposite value when clicked', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(<TimeZoneToggle value={false} onChange={onChange} />);
+
+    wrapper.find('.container').simulate('click');
+    expect(onChange).toHaveBeenCalledWith(true);
+
+    wrapper.setProps({ value: true });
+    wrapper.find('.container').simulate('click');
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  it('should have correct background color based on value', () => {
+    const wrapper = mount(<TimeZoneToggle value={false} onChange={() => {}} />);
+    expect(wrapper.find('.switch').prop('style').backgroundColor).toBe('rgb(204, 204, 204)');
+
+    wrapper.setProps({ value: true });
+    expect(wrapper.find('.switch').prop('style').backgroundColor).toBe('rgb(0, 219, 124)');
+  });
+}); 

src/dashboard/Data/Browser/DataBrowser.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import DataBrowser from '../DataBrowser.react';
+
+describe('DataBrowser TimeZone Feature', () => {
+  let wrapper;
+  const mockLocalStorage = {
+    getItem: jest.fn(),
+    setItem: jest.fn(),
+  };
+
+  beforeEach(() => {
+    global.localStorage = mockLocalStorage;
+  });
+
+  it('should initialize with stored timezone preference', () => {
+    mockLocalStorage.getItem.mockReturnValue('true');
+    wrapper = mount(<DataBrowser {...defaultProps} />);
+    expect(wrapper.state().useLocalTime).toBe(true);
+  });
+
+  it('should toggle timezone and save preference', () => {
+    wrapper = mount(<DataBrowser {...defaultProps} />);
+
+    wrapper.instance().toggleTimeZone();
+    expect(mockLocalStorage.setItem).toHaveBeenCalledWith(
+      'parse_dashboard_useLocalTime',
+      'true'
+    );
+    expect(wrapper.state().useLocalTime).toBe(true);
+
+    wrapper.instance().toggleTimeZone();
+    expect(mockLocalStorage.setItem).toHaveBeenCalledWith(
+      'parse_dashboard_useLocalTime',
+      'false'
+    );
+    expect(wrapper.state().useLocalTime).toBe(false);
+  });
+}); 

src/lib/DateUtils.js

@@ -153,8 +153,8 @@ export function yearMonthDayTimeFormatter(date, useUTC) {
     timeZone: useUTC ? 'UTC' : undefined
   };
   return date.toLocaleString('en-US', options)
-    .replace(',', '')  // 移除日期和时间之间的逗号
-    .replace(/(\d+)\/(\d+)\/(\d+)/, '$3-$1-$2'); // 转换为 yyyy-MM-dd 格式
+    .replace(',', '')  // Remove comma between date and time
+    .replace(/(\d+)\/(\d+)\/(\d+)/, '$3-$1-$2'); // Convert to yyyy-MM-dd format
 }
 
 export function getDateMethod(local, methodName) {
@@ -178,15 +178,15 @@ export function formatDateTime(date, useLocalTime = false) {
 
   const d = new Date(date);
 
-  // 根据useLocalTime决定使用本地时间还是UTC时间
+  // Determine whether to use local time or UTC time based on useLocalTime flag
   const year = useLocalTime ? d.getFullYear() : d.getUTCFullYear();
   const month = (useLocalTime ? d.getMonth() : d.getUTCMonth()) + 1;
   const day = useLocalTime ? d.getDate() : d.getUTCDate();
   const hours = useLocalTime ? d.getHours() : d.getUTCHours();
   const minutes = useLocalTime ? d.getMinutes() : d.getUTCMinutes();
   const seconds = useLocalTime ? d.getSeconds() : d.getUTCSeconds();
 
-  // 补零函数
+  // Pad numbers with leading zeros
   const pad = (num) => String(num).padStart(2, '0');
 
   return `${year}-${pad(month)}-${pad(day)} ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;

src/lib/tests/DateUtils.test.js

@@ -65,3 +65,45 @@ describe('daysInMonth', () => {
     expect(DateUtils.daysInMonth(new Date(2015, 8))).toBe(30);
   });
 });
+
+describe('DateUtils', () => {
+  describe('formatDateTime', () => {
+    const testDate = new Date('2024-03-21T08:00:00.000Z');
+
+    it('should format date in UTC time when useLocalTime is false', () => {
+      const result = DateUtils.formatDateTime(testDate, false);
+      expect(result).toBe('2024-03-21 08:00:00');
+    });
+
+    it('should format date in local time when useLocalTime is true', () => {
+      // 假设本地时区是 UTC+8
+      const result = DateUtils.formatDateTime(testDate, true);
+      expect(result).toBe('2024-03-21 16:00:00');
+    });
+
+    it('should handle null date', () => {
+      const result = DateUtils.formatDateTime(null, false);
+      expect(result).toBe('');
+    });
+
+    it('should handle invalid date', () => {
+      const result = DateUtils.formatDateTime('invalid date', false);
+      expect(result).toBe('');
+    });
+  });
+
+  describe('yearMonthDayTimeFormatter', () => {
+    const testDate = new Date('2024-03-21T08:00:00.000Z');
+
+    it('should format date in UTC format', () => {
+      const result = DateUtils.yearMonthDayTimeFormatter(testDate, true);
+      expect(result).toBe('2024-03-21 08:00:00');
+    });
+
+    it('should format date in local format', () => {
+      const result = DateUtils.yearMonthDayTimeFormatter(testDate, false);
+      // 假设本地时区是 UTC+8
+      expect(result).toBe('2024-03-21 16:00:00');
+    });
+  });
+});