From fbb72b2b985e489566270b1ced6924d20aebe02a Mon Sep 17 00:00:00 2001
From: Josep M Sobrepere <josepot@gmail.com>
Date: Thu, 27 Aug 2020 15:43:57 +0200
Subject: [PATCH] test(suspense): test suspended components resolving at
 different times

---
 .../core/src/bind/connectObservable.test.tsx  | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/packages/core/src/bind/connectObservable.test.tsx b/packages/core/src/bind/connectObservable.test.tsx
index 454e625..12389eb 100644
--- a/packages/core/src/bind/connectObservable.test.tsx
+++ b/packages/core/src/bind/connectObservable.test.tsx
@@ -14,6 +14,7 @@ import {
   Subject,
   throwError,
   Observable,
+  concat,
 } from "rxjs"
 import { delay, scan, startWith, map, switchMap } from "rxjs/operators"
 import { bind, SUSPENSE } from "../"
@@ -470,4 +471,42 @@ describe("connectObservable", () => {
 
     expect(errorCallback).not.toHaveBeenCalled()
   })
+
+  it("handles combined Suspended components that resolve at different times", async () => {
+    let nSideEffects = 0
+    const fast$ = defer(() => {
+      nSideEffects++
+      return of("fast")
+    }).pipe(delay(5))
+    const slow$ = defer(() => {
+      nSideEffects++
+      return of("slow")
+    }).pipe(delay(2500))
+
+    const [useFast] = bind(concat(of(SUSPENSE), fast$))
+    const [useSlow] = bind(concat(of(SUSPENSE), slow$))
+
+    const Fast: React.FC = () => <>{useFast()}</>
+    const Slow: React.FC = () => <>{useSlow()}</>
+
+    expect(nSideEffects).toBe(0)
+
+    render(
+      <Suspense fallback={<div>Loading...</div>}>
+        <Slow />
+        <Fast />
+      </Suspense>,
+    )
+
+    expect(screen.queryByText("Loading...")).not.toBeNull()
+
+    expect(nSideEffects).toBe(2)
+
+    await componentAct(async () => {
+      await wait(2600)
+    })
+
+    expect(screen.queryByText("Loading...")).toBeNull()
+    expect(nSideEffects).toBe(2)
+  })
 })