[ML] Enforce pause when it's set to false with 0 refresh interval

elastic · Dec 22, 2020 · d1dc1b1 · d1dc1b1
1 parent 9bc2fcc
commit d1dc1b1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 80 deletions.
diff --git a/...c/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.test.tsx b/...c/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.test.tsx
@@ -5,15 +5,31 @@
  */
 
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
 
 import { EuiSuperDatePicker } from '@elastic/eui';
 
+import { useUrlState } from '../../../util/url_state';
 import { mlTimefilterRefresh$ } from '../../../services/timefilter_refresh_service';
 
 import { DatePickerWrapper } from './date_picker_wrapper';
 
+jest.mock('@elastic/eui', () => {
+  const EuiSuperDatePickerMock = jest.fn(() => {
+    return null;
+  });
+  return { EuiSuperDatePicker: EuiSuperDatePickerMock };
+});
+
+jest.mock('../../../util/url_state', () => {
+  return {
+    useUrlState: jest.fn(() => {
+      return [{ refreshInterval: { value: 0, pause: true } }, jest.fn()];
+    }),
+  };
+});
+
 jest.mock('../../../contexts/kibana', () => ({
   useMlKibana: () => {
     return {
@@ -25,9 +41,11 @@ jest.mock('../../../contexts/kibana', () => ({
               timefilter: {
                 getRefreshInterval: jest.fn(),
                 setRefreshInterval: jest.fn(),
-                getTime: jest.fn(),
-                isAutoRefreshSelectorEnabled: jest.fn(),
-                isTimeRangeSelectorEnabled: jest.fn(),
+                getTime: jest.fn(() => {
+                  return { from: '', to: '' };
+                }),
+                isAutoRefreshSelectorEnabled: jest.fn(() => true),
+                isTimeRangeSelectorEnabled: jest.fn(() => true),
                 getRefreshIntervalUpdate$: jest.fn(),
                 getTimeUpdate$: jest.fn(),
                 getEnabledUpdated$: jest.fn(),
@@ -41,11 +59,12 @@ jest.mock('../../../contexts/kibana', () => ({
   },
 }));
 
-const noop = () => {};
+const MockedEuiSuperDatePicker = EuiSuperDatePicker as jest.MockedClass<typeof EuiSuperDatePicker>;
 
 describe('Navigation Menu: <DatePickerWrapper />', () => {
   beforeEach(() => {
     jest.useFakeTimers();
+    MockedEuiSuperDatePicker.mockClear();
   });
 
   afterEach(() => {
@@ -56,66 +75,22 @@ describe('Navigation Menu: <DatePickerWrapper />', () => {
     const refreshListener = jest.fn();
     const refreshSubscription = mlTimefilterRefresh$.subscribe(refreshListener);
 
-    const wrapper = mount(
-      <MemoryRouter>
-        <DatePickerWrapper />
-      </MemoryRouter>
-    );
+    const wrapper = mount(<DatePickerWrapper />);
     expect(wrapper.find(DatePickerWrapper)).toHaveLength(1);
     expect(refreshListener).toBeCalledTimes(0);
 
     refreshSubscription.unsubscribe();
   });
 
-  // The following tests are written against EuiSuperDatePicker
-  // instead of DatePickerWrapper. DatePickerWrapper uses hooks and we cannot write tests
-  // with async hook updates yet until React 16.9 is available.
-  test('Listen for consecutive super date picker refreshs.', async () => {
-    const onRefresh = jest.fn();
-
-    const componentRefresh = mount(
-      <EuiSuperDatePicker
-        onTimeChange={noop}
-        isPaused={false}
-        onRefresh={onRefresh}
-        refreshInterval={10}
-      />
-    );
-
-    const instanceRefresh = componentRefresh.instance();
-
-    jest.advanceTimersByTime(10);
-    // @ts-ignore
-    await instanceRefresh.asyncInterval.__pendingFn;
-    jest.advanceTimersByTime(10);
-    // @ts-ignore
-    await instanceRefresh.asyncInterval.__pendingFn;
-
-    expect(onRefresh).toBeCalledTimes(2);
-  });
+  test('should not allow disabled pause with 0 refresh interval', () => {
+    // arrange
+    (useUrlState as jest.Mock).mockReturnValue([{ refreshInterval: { pause: false, value: 0 } }]);
+
+    // act
+    render(<DatePickerWrapper />);
 
-  test('Switching refresh interval to pause should stop onRefresh being called.', async () => {
-    const onRefresh = jest.fn();
-
-    const componentRefresh = mount(
-      <EuiSuperDatePicker
-        onTimeChange={noop}
-        isPaused={false}
-        onRefresh={onRefresh}
-        refreshInterval={10}
-      />
-    );
-
-    const instanceRefresh = componentRefresh.instance();
-
-    jest.advanceTimersByTime(10);
-    // @ts-ignore
-    await instanceRefresh.asyncInterval.__pendingFn;
-    componentRefresh.setProps({ isPaused: true, refreshInterval: 0 });
-    jest.advanceTimersByTime(10);
-    // @ts-ignore
-    await instanceRefresh.asyncInterval.__pendingFn;
-
-    expect(onRefresh).toBeCalledTimes(1);
+    // assert
+    const calledWith = MockedEuiSuperDatePicker.mock.calls[0][0];
+    expect(calledWith.isPaused).toBe(true);
   });
 });
diff --git a/...public/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.tsx b/...public/application/components/navigation_menu/date_picker_wrapper/date_picker_wrapper.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC, Fragment, useCallback, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { Subscription } from 'rxjs';
 import { debounce } from 'lodash';
 
@@ -122,24 +122,25 @@ export const DatePickerWrapper: FC = () => {
     setRefreshInterval({ pause, value });
   }
 
-  return (
-    <Fragment>
-      {(isAutoRefreshSelectorEnabled || isTimeRangeSelectorEnabled) && (
-        <div className="mlNavigationMenu__datePickerWrapper">
-          <EuiSuperDatePicker
-            start={time.from}
-            end={time.to}
-            isPaused={refreshInterval.pause}
-            isAutoRefreshOnly={!isTimeRangeSelectorEnabled}
-            refreshInterval={refreshInterval.value}
-            onTimeChange={updateFilter}
-            onRefresh={updateLastRefresh}
-            onRefreshChange={updateInterval}
-            recentlyUsedRanges={recentlyUsedRanges}
-            dateFormat={dateFormat}
-          />
-        </div>
-      )}
-    </Fragment>
-  );
+  /**
+   * Enforce pause when it's set to false with 0 refresh interval.
+   */
+  const isPaused = refreshInterval.pause || (!refreshInterval.pause && !refreshInterval.value);
+
+  return isAutoRefreshSelectorEnabled || isTimeRangeSelectorEnabled ? (
+    <div className="mlNavigationMenu__datePickerWrapper">
+      <EuiSuperDatePicker
+        start={time.from}
+        end={time.to}
+        isPaused={isPaused}
+        isAutoRefreshOnly={!isTimeRangeSelectorEnabled}
+        refreshInterval={refreshInterval.value}
+        onTimeChange={updateFilter}
+        onRefresh={updateLastRefresh}
+        onRefreshChange={updateInterval}
+        recentlyUsedRanges={recentlyUsedRanges}
+        dateFormat={dateFormat}
+      />
+    </div>
+  ) : null;
 };