Add datetime click to change value test

react-component · Nov 27, 2019 · 20b246b · 20b246b · vercel · Nov 27, 2019
1 parent f2a0b6f
commit 20b246b
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 21 deletions.
diff --git a/src/panels/DatetimePanel/index.tsx b/src/panels/DatetimePanel/index.tsx
@@ -56,6 +56,7 @@ function DatetimePanel<DateType>(props: DatetimePanelProps<DateType>) {
 
   operationRef.current = {
     onKeyDown: event => {
+      // Switch active panel
       if (event.which === KeyCode.TAB) {
         const nextActivePanel = getNextActive(event.shiftKey ? -1 : 1);
         setActivePanel(nextActivePanel);
@@ -66,6 +67,8 @@ function DatetimePanel<DateType>(props: DatetimePanelProps<DateType>) {
 
         return true;
       }
+
+      // Operate on current active panel
       if (activePanel) {
         const ref =
           activePanel === 'date' ? dateOperationRef : timeOperationRef;
@@ -76,6 +79,8 @@ function DatetimePanel<DateType>(props: DatetimePanelProps<DateType>) {
 
         return true;
       }
+
+      // Switch first active panel if operate without panel
       if (
         [KeyCode.LEFT, KeyCode.RIGHT, KeyCode.UP, KeyCode.DOWN].includes(
           event.which,

diff --git a/tests/keyboard.spec.tsx b/tests/keyboard.spec.tsx
@@ -164,27 +164,71 @@ describe('Keyboard', () => {
           .simulate('keyDown', { which: keyCode });
       }
 
-      it('Tab', () => {
-        const wrapper = mount(<MomentPickerPanel showTime />);
-
-        // Focus Panel
-        wrapper.find('.rc-picker-panel').simulate('focus');
-
-        // Focus Date Panel
-        panelKeyDown(wrapper, KeyCode.TAB);
-        expect(
-          wrapper.find('.rc-picker-date-panel-active').length,
-        ).toBeTruthy();
-
-        // Focus Time Panel
-        panelKeyDown(wrapper, KeyCode.TAB);
-        expect(
-          wrapper.find('.rc-picker-time-panel-active').length,
-        ).toBeTruthy();
-
-        // Close should not focus
-        wrapper.find('.rc-picker-panel').simulate('blur');
-        expect(wrapper.find('.rc-picker-time-panel-active').length).toBeFalsy();
+      describe('switch panels', () => {
+        [
+          {
+            name: 'Tab switch first',
+            operate: (wrapper: Wrapper) => {
+              panelKeyDown(wrapper, KeyCode.TAB);
+            },
+          },
+          {
+            name: 'Arrow switch first',
+            operate: (wrapper: Wrapper) => {
+              // Nothing happen
+              panelKeyDown(wrapper, KeyCode.A);
+
+              // Switch
+              panelKeyDown(wrapper, KeyCode.DOWN);
+            },
+          },
+        ].forEach(({ name, operate }) => {
+          it(name, () => {
+            const onSelect = jest.fn();
+            const wrapper = mount(
+              <MomentPickerPanel onSelect={onSelect} showTime />,
+            );
+
+            // Focus Panel
+            wrapper.find('.rc-picker-panel').simulate('focus');
+
+            // Focus Date Panel
+            operate(wrapper);
+            expect(
+              wrapper.find('.rc-picker-date-panel-active').length,
+            ).toBeTruthy();
+
+            // Select
+            panelKeyDown(wrapper, KeyCode.DOWN);
+            expect(
+              isSame(onSelect.mock.calls[0][0], '1990-09-10'),
+            ).toBeTruthy();
+
+            // Focus Time Panel
+            panelKeyDown(wrapper, KeyCode.TAB);
+            expect(
+              wrapper.find('.rc-picker-time-panel-active').length,
+            ).toBeTruthy();
+
+            // Select
+            onSelect.mockReset();
+            panelKeyDown(wrapper, KeyCode.RIGHT);
+            panelKeyDown(wrapper, KeyCode.DOWN);
+            expect(
+              isSame(
+                onSelect.mock.calls[0][0],
+                '1990-09-10 01:00:00',
+                'second',
+              ),
+            ).toBeTruthy();
+
+            // Close should not focus
+            wrapper.find('.rc-picker-panel').simulate('blur');
+            expect(
+              wrapper.find('.rc-picker-time-panel-active').length,
+            ).toBeFalsy();
+          });
+        });
       });
 
       it('Enter to next view', () => {

diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx
@@ -167,4 +167,40 @@ describe('Panel', () => {
       );
     });
   });
+
+  // This test is safe to remove
+  it('showtime', () => {
+    const onSelect = jest.fn();
+    const wrapper = mount(
+      <MomentPickerPanel
+        showTime={{
+          showSecond: false,
+          defaultValue: getMoment('2001-01-02 01:03:07'),
+        }}
+        defaultValue={getMoment('2001-01-02 01:03:07')}
+        value={null}
+        onSelect={onSelect}
+      />,
+    );
+
+    expect(wrapper.find('.rc-picker-time-panel-column')).toHaveLength(2);
+
+    // Click on date
+    wrapper.selectCell(5);
+    expect(
+      isSame(onSelect.mock.calls[0][0], '1990-09-05 01:03:07'),
+    ).toBeTruthy();
+
+    // Click on time
+    onSelect.mockReset();
+    wrapper
+      .find('ul')
+      .first()
+      .find('li')
+      .at(11)
+      .simulate('click');
+    expect(
+      isSame(onSelect.mock.calls[0][0], '2001-01-02 11:00:00'),
+    ).toBeTruthy();
+  });
 });