Fix SuperDatePicker isPaused prop update (again). (elastic#2298)

Follow up to elastic#2250. While the approach to add componenDidUpdate() in the PR linked above was the right one, the way the interval was updated didn't work out as intended. The code didn't properly stop any previous running interval. This updated PR changes the code to call stopInterval() in any case similar to how onRefreshChange() works. I also added some more tests to run against the interval updates.

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added href prop to `EuiTab` and converted to TypeScript ([#2275](https://github.com/elastic/eui/pull/2275))
 - Created `EuiInputPopover` component (formally) ([#2269](https://github.com/elastic/eui/pull/2269))
 - Added docs for using [Elastic Charts](https://elastic.github.io/elastic-charts) with EUI ([#2209](https://github.com/elastic/eui/pull/2209))
+- Improved fix for `EuiSuperDatePicker` to update `asyncInterval.isStopped` on a `isPaused` prop change. ([#2298](https://github.com/elastic/eui/pull/2298))
 
 **Bug fixes**
 

src/components/date_picker/super_date_picker/super_date_picker.js

@@ -193,9 +193,8 @@ export class EuiSuperDatePicker extends Component {
   };
 
   componentDidUpdate = () => {
-    if (this.props.isPaused) {
-      this.stopInterval();
-    } else {
+    this.stopInterval();
+    if (!this.props.isPaused) {
       this.startInterval(this.props.refreshInterval);
     }
   };

src/components/date_picker/super_date_picker/super_date_picker.test.js

@@ -50,4 +50,57 @@ describe('EuiSuperDatePicker', () => {
     expect(instanceUpdatedRefresh.asyncInterval.isStopped).toBe(false);
     expect(componentRefresh.prop('isPaused')).toBe(false);
   });
+
+  test('Listen for consecutive super date picker refreshes', async () => {
+    jest.useFakeTimers();
+
+    const onRefresh = jest.fn();
+
+    const componentRefresh = mount(
+      <EuiSuperDatePicker
+        onTimeChange={noop}
+        isPaused={false}
+        onRefresh={onRefresh}
+        refreshInterval={10}
+      />
+    );
+
+    const instanceRefresh = componentRefresh.instance();
+
+    jest.advanceTimersByTime(10);
+    await instanceRefresh.asyncInterval.__pendingFn;
+    jest.advanceTimersByTime(10);
+    await instanceRefresh.asyncInterval.__pendingFn;
+
+    expect(onRefresh).toBeCalledTimes(2);
+
+    jest.useRealTimers();
+  });
+
+  test('Switching refresh interval to pause should stop onRefresh being called.', async () => {
+    jest.useFakeTimers();
+
+    const onRefresh = jest.fn();
+
+    const componentRefresh = mount(
+      <EuiSuperDatePicker
+        onTimeChange={noop}
+        isPaused={false}
+        onRefresh={onRefresh}
+        refreshInterval={10}
+      />
+    );
+
+    const instanceRefresh = componentRefresh.instance();
+
+    jest.advanceTimersByTime(10);
+    await instanceRefresh.asyncInterval.__pendingFn;
+    componentRefresh.setProps({ isPaused: true, refreshInterval: 0 });
+    jest.advanceTimersByTime(10);
+    await instanceRefresh.asyncInterval.__pendingFn;
+
+    expect(onRefresh).toBeCalledTimes(1);
+
+    jest.useRealTimers();
+  });
 });