@hero-design/rn 8.89.0-alpha.0 → 8.89.0-alpha.2

package/src/components/Calendar/__tests__/CalendarRange.spec.tsx

@@ -0,0 +1,284 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import CalendarRange from '../CalendarRange';
+import { theme } from '../../..';
+
+Date.now = jest.fn(() => new Date(2022, 10, 2).valueOf());
+
+describe('CalendarRange', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+    const onTitlePress = jest.fn();
+    const onPreviousPress = jest.fn();
+    const onNextPress = jest.fn();
+    const { getByText, queryAllByTestId, queryByTestId, queryAllByText } =
+      renderWithTheme(
+        <CalendarRange
+          value={{
+            startDate: new Date('2022-10-12'),
+            endDate: new Date('2022-10-15'),
+          }}
+          visibleDate={new Date('2022-10-12')}
+          onChange={onChange}
+          onTitlePress={onTitlePress}
+          onPreviousPress={onPreviousPress}
+          onNextPress={onNextPress}
+          markedDates={[
+            new Date('2022-10-11'),
+            new Date('2022-10-12'),
+            new Date('2022-10-13'),
+            new Date('2022-10-14'),
+            new Date('2022-10-15'),
+          ]}
+        />
+      );
+
+    expect(getByText('October 2022')).toBeTruthy();
+    expect(getByText('Mo')).toBeTruthy();
+    expect(getByText('Tu')).toBeTruthy();
+    expect(getByText('We')).toBeTruthy();
+    expect(getByText('Th')).toBeTruthy();
+    expect(getByText('Fr')).toBeTruthy();
+    expect(getByText('Sa')).toBeTruthy();
+    expect(getByText('Su')).toBeTruthy();
+
+    expect(queryAllByTestId('calendar-date-cell')).toHaveLength(42);
+    expect(queryAllByTestId('calendar-disabled-cell')).toHaveLength(0);
+    expect(queryAllByTestId('calendar-date-mark')).toHaveLength(5);
+
+    // Test range selection
+    fireEvent.press(queryAllByText('11')[0]); // Select start date
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-11'),
+      endDate: new Date('2022-10-15'),
+    });
+
+    fireEvent.press(queryAllByText('20')[0]); // Select end date
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-12'),
+      endDate: new Date('2022-10-20'),
+    });
+
+    fireEvent.press(queryByTestId('previous-icon-button'));
+    expect(onPreviousPress).toBeCalled();
+
+    fireEvent.press(queryByTestId('next-icon-button'));
+    expect(onNextPress).toBeCalled();
+
+    fireEvent.press(getByText('October 2022'));
+    expect(onTitlePress).toBeCalled();
+  });
+
+  it('renders correctly with minDate and maxDate', () => {
+    const onChange = jest.fn();
+    const onTitlePress = jest.fn();
+    const onPreviousPress = jest.fn();
+    const onNextPress = jest.fn();
+    const { getByText, queryByText, queryAllByTestId, queryByTestId } =
+      renderWithTheme(
+        <CalendarRange
+          value={{
+            startDate: new Date('2022-10-12'),
+            endDate: new Date('2022-10-15'),
+          }}
+          visibleDate={new Date('2022-10-12')}
+          onChange={onChange}
+          onTitlePress={onTitlePress}
+          onPreviousPress={onPreviousPress}
+          onNextPress={onNextPress}
+          minDate={new Date('2022-10-10')}
+          maxDate={new Date('2022-10-20')}
+        />
+      );
+    const startDateCell = queryAllByTestId('selected-date-cell')[0]; // 12
+    expect(startDateCell).toHaveStyle({
+      backgroundColor: theme.colors.primary,
+    });
+
+    const firstHighlightedCell = queryAllByTestId('calendar-date-cell')[3]; // 13
+    expect(firstHighlightedCell).toHaveStyle({
+      backgroundColor: theme.colors.highlightedSurface,
+    });
+
+    const secondHighlightedCell = queryAllByTestId('calendar-date-cell')[4]; // 14
+    expect(secondHighlightedCell).toHaveStyle({
+      backgroundColor: theme.colors.highlightedSurface,
+    });
+
+    const endDateCell = queryAllByTestId('selected-date-cell')[1]; // 15
+    expect(endDateCell).toHaveStyle({
+      backgroundColor: theme.colors.primary,
+    });
+
+    expect(queryAllByTestId('calendar-date-cell')).toHaveLength(11);
+    expect(queryAllByTestId('calendar-disabled-cell')).toHaveLength(31);
+
+    expect(queryByText('2')).toBeNull();
+    expect(queryByText('28')).toBeNull();
+
+    fireEvent.press(queryByTestId('previous-icon-button'));
+    expect(onPreviousPress).not.toBeCalled();
+
+    fireEvent.press(queryByTestId('next-icon-button'));
+    expect(onNextPress).not.toBeCalled();
+
+    fireEvent.press(queryAllByTestId('calendar-disabled-cell')[0]);
+    expect(onChange).not.toBeCalled();
+
+    // Test range selection within constraints
+    fireEvent.press(getByText('17')); // Select start date
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-12'),
+      endDate: new Date('2022-10-17'),
+    });
+
+    fireEvent.press(getByText('11')); // Select end date
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-11'),
+      endDate: new Date('2022-10-15'),
+    });
+  });
+
+  it('handles range selection correctly', () => {
+    const onChange = jest.fn();
+    const { getByText } = renderWithTheme(
+      <CalendarRange
+        value={{
+          startDate: new Date('2022-10-12'),
+          endDate: new Date('2022-10-15'),
+        }}
+        visibleDate={new Date('2022-10-12')}
+        onChange={onChange}
+      />
+    );
+    // Select start date
+    fireEvent.press(getByText('11'));
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-11'),
+      endDate: new Date('2022-10-15'),
+    });
+
+    // Select end date
+    fireEvent.press(getByText('20'));
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-12'),
+      endDate: new Date('2022-10-20'),
+    });
+
+    // Select new start date (should clear end date)
+    fireEvent.press(getByText('13'));
+    expect(onChange).toHaveBeenCalledWith({
+      startDate: new Date('2022-10-13'),
+      endDate: undefined,
+    });
+  });
+
+  it('disables onTitlePress when onMonthChange is passed', () => {
+    const onTitlePress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <CalendarRange
+        visibleDate={new Date(2022, 10, 5)}
+        onTitlePress={onTitlePress}
+        minDate={new Date(2022, 10, 3)}
+        maxDate={new Date(2022, 10, 27)}
+        onMonthChange={jest.fn()}
+      />
+    );
+
+    fireEvent.press(getByTestId('calendar-month-picker'));
+    expect(onTitlePress).toHaveBeenCalledTimes(0);
+  });
+
+  it.each`
+    platform
+    ${'ios'}
+    ${'android'}
+  `('renders correct picker on $platform', ({ platform: mockedPlatform }) => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: mockedPlatform,
+      select: () => null,
+    }));
+
+    const { getByTestId, queryByText } = renderWithTheme(
+      <CalendarRange
+        visibleDate={new Date(2022, 10, 5)}
+        minDate={new Date(2022, 10, 3)}
+        maxDate={new Date(2022, 10, 27)}
+        onMonthChange={jest.fn()}
+      />
+    );
+
+    fireEvent.press(getByTestId('calendar-month-picker'));
+
+    // Pickers are mocked at packages/rn/testUtils/setup.tsx
+    if (mockedPlatform === 'ios') {
+      expect(queryByText('IOS picker')).toBeDefined();
+    } else {
+      expect(queryByText('Android picker')).toBeDefined();
+    }
+  });
+
+  it.each`
+    platform
+    ${'ios'}
+    ${'android'}
+  `(
+    'onToggleMonthPicker is called when toggling month year picker on $platform',
+    ({ platform: mockedPlatform }) => {
+      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+        OS: mockedPlatform,
+        select: () => null,
+      }));
+
+      const onToggleMonthPicker = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <CalendarRange
+          visibleDate={new Date(2022, 10, 5)}
+          minDate={new Date(2022, 10, 3)}
+          maxDate={new Date(2022, 10, 27)}
+          onMonthChange={jest.fn()}
+          onToggleMonthPicker={onToggleMonthPicker}
+        />
+      );
+
+      fireEvent.press(getByTestId('calendar-month-picker'));
+      expect(onToggleMonthPicker).toHaveBeenCalled();
+    }
+  );
+
+  it('shows marked dates correctly', () => {
+    const markedDates = [
+      new Date(2022, 10, 5),
+      new Date(2022, 10, 6),
+      new Date(2022, 10, 7),
+    ];
+
+    const { queryAllByTestId } = renderWithTheme(
+      <CalendarRange
+        visibleDate={new Date(2022, 10, 5)}
+        markedDates={markedDates}
+      />
+    );
+
+    expect(queryAllByTestId('calendar-date-mark')).toHaveLength(3);
+  });
+
+  it('highlights dates in range', () => {
+    const { getAllByTestId } = renderWithTheme(
+      <CalendarRange
+        value={{
+          startDate: new Date(2022, 10, 5),
+          endDate: new Date(2022, 10, 10),
+        }}
+        visibleDate={new Date(2022, 10, 5)}
+      />
+    );
+
+    // Should have highlighted cells between start and end date
+    const highlightedCells = getAllByTestId('calendar-date-cell').filter(
+      (cell) => cell.props.isHighlighted
+    );
+    expect(highlightedCells.length).toBeGreaterThan(0);
+  });
+});

package/src/components/Calendar/__tests__/CalendarRangeConnector.spec.tsx

@@ -0,0 +1,73 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import SelectedDate from '../CalendarRangeConnector';
+
+describe('CalendarRangeConnector', () => {
+  const defaultProps = {
+    date: new Date(2022, 10, 10),
+    onPress: jest.fn(),
+    itemWidth: 120,
+  };
+
+  it('renders correctly with basic props', () => {
+    const { toJSON } = renderWithTheme(<SelectedDate {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    isStart  | showConnector
+    ${true}  | ${true}
+    ${false} | ${true}
+    ${true}  | ${false}
+    ${false} | ${false}
+  `(
+    'renders correctly with connector variations',
+    ({ isStart, showConnector }) => {
+      const { toJSON } = renderWithTheme(
+        <SelectedDate
+          {...defaultProps}
+          isStart={isStart}
+          showConnector={showConnector}
+        />
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('renders mark when date is marked', () => {
+    const { queryByTestId } = renderWithTheme(
+      <SelectedDate {...defaultProps} marked />
+    );
+    expect(queryByTestId('calendar-date-mark')).toBeTruthy();
+  });
+
+  it('does not render mark when date is not marked', () => {
+    const { queryByTestId } = renderWithTheme(
+      <SelectedDate {...defaultProps} />
+    );
+    expect(queryByTestId('calendar-date-mark')).toBeNull();
+  });
+
+  it('does not render connector when showConnector is false', () => {
+    const { queryByTestId } = renderWithTheme(
+      <SelectedDate {...defaultProps} isStart />
+    );
+    expect(queryByTestId('range-connector')).toBeNull();
+  });
+
+  it('handles press events', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <SelectedDate {...defaultProps} onPress={onPress} />
+    );
+
+    fireEvent.press(getByTestId('selected-date-cell'));
+    expect(onPress).toHaveBeenCalled();
+  });
+
+  it('displays correct date number', () => {
+    const { getByText } = renderWithTheme(<SelectedDate {...defaultProps} />);
+    expect(getByText('10')).toBeTruthy();
+  });
+});