From c5b49be4c861d95c63e84cb7c99d3bb3cc8e7eac Mon Sep 17 00:00:00 2001
From: Yixuan Xu <yixuanxu94@outlook.com>
Date: Sat, 16 May 2020 12:19:26 +0800
Subject: [PATCH] tests: Add test for refetchInterval (#498)

* Add test for refetchInterval
Close #405

* Trigger CI

* avoid use snapshot

Co-authored-by: Tanner Linsley <tannerlinsley@gmail.com>
---
 src/tests/suspense.test.js |  7 +++-
 src/tests/useQuery.test.js | 75 +++++++++++++++++++++++++++++++++++++-
 2 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/tests/suspense.test.js b/src/tests/suspense.test.js
index e3904a10fb..c7f95f899f 100644
--- a/src/tests/suspense.test.js
+++ b/src/tests/suspense.test.js
@@ -1,4 +1,9 @@
-import { render, waitForElement, fireEvent, cleanup } from '@testing-library/react'
+import {
+  render,
+  waitForElement,
+  fireEvent,
+  cleanup,
+} from '@testing-library/react'
 import * as React from 'react'
 
 import { useQuery, ReactQueryCacheProvider, queryCache } from '../index'
diff --git a/src/tests/useQuery.test.js b/src/tests/useQuery.test.js
index 659980ce0e..84c20e5130 100644
--- a/src/tests/useQuery.test.js
+++ b/src/tests/useQuery.test.js
@@ -1,4 +1,11 @@
-import { render, act, waitForElement, fireEvent, cleanup } from '@testing-library/react'
+import {
+  render,
+  act,
+  waitForElement,
+  fireEvent,
+  cleanup,
+  waitForDomChange,
+} from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import * as React from 'react'
 
@@ -998,4 +1005,70 @@ describe('useQuery', () => {
 
     await waitForElement(() => rendered.getByText('rendered'))
   })
+
+  it('should update data upon interval changes', async () => {
+    let count = 0
+    function Page() {
+      const [int, setInt] = React.useState(200)
+      const { data } = useQuery('/api', () => count++, {
+        refetchInterval: int,
+      })
+      return (
+        <div onClick={() => setInt(num => (num < 400 ? num + 100 : 0))}>
+          count: {data}
+        </div>
+      )
+    }
+    const { container } = render(<Page />)
+    expect(container.firstChild.textContent).toEqual('count: ')
+    await waitForDomChange({ container }) // mount
+    expect(container.firstChild.textContent).toEqual('count: 0')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 210))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 1')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 50))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 1')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 150))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 2')
+    await act(() => {
+      fireEvent.click(container.firstElementChild)
+      // it will clear 200ms timer and setup a new 300ms timer
+      return new Promise(res => setTimeout(res, 200))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 2')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 110))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 3')
+    await act(() => {
+      // wait for new 300ms timer
+      return new Promise(res => setTimeout(res, 310))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 4')
+    await act(() => {
+      fireEvent.click(container.firstElementChild)
+      // it will clear 300ms timer and setup a new 400ms timer
+      return new Promise(res => setTimeout(res, 300))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 4')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 110))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 5')
+    await act(() => {
+      fireEvent.click(container.firstElementChild)
+      // it will clear 400ms timer and stop
+      return new Promise(res => setTimeout(res, 110))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 5')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 110))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 5')
+  })
 })