optimize: use jest fake timer to test suspense (#964)

fix #761
solidjs · May 3, 2022 · d849c6e · d849c6e
1 parent d62aa9d
commit d849c6e
Showing 1 changed file with 143 additions and 107 deletions.
diff --git a/packages/solid/web/test/suspense.spec.tsx b/packages/solid/web/test/suspense.spec.tsx
@@ -3,10 +3,18 @@ import "../../test/MessageChannel";
 import { lazy, createSignal, createResource, useTransition, enableScheduling } from "../../src";
 import { render, Suspense, SuspenseList } from "../src";
 
+
 global.queueMicrotask = setImmediate;
 enableScheduling();
 
+beforeEach(() => {
+  jest.useFakeTimers();
+})
+afterEach(() => {
+  jest.useRealTimers();
+})
 describe("Testing Suspense", () => {
+
   let div = document.createElement("div"),
     disposer: () => void,
     resolvers: Function[] = [],
@@ -32,31 +40,44 @@ describe("Testing Suspense", () => {
     expect(div.innerHTML).toBe("Loading");
   });
 
-  test("Toggle Suspense control flow", done => {
+  test("Toggle Suspense control flow", async (done) => {
     for (const r of resolvers) r({ default: ChildComponent });
-    setTimeout(() => {
+
+    queueMicrotask(() => {
       expect(div.innerHTML).toBe("Hi, .Hello ");
       done();
     });
   });
 
-  test("Toggle with refresh transition", done => {
+  test("Toggle with refresh transition", async (done) => {
     const [pending, start] = useTransition();
     let finished = false;
+
     start(() => trigger(true)).then(() => (finished = true));
     expect(div.innerHTML).toBe("Hi, .Hello ");
     expect(finished).toBe(false);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("Hi, .Hello ");
-      expect(pending()).toBe(true);
-      expect(finished).toBe(false);
-    });
-    setTimeout(() => {
+    // wait trigger resource refetch
+    await Promise.resolve();
+
+    expect(div.innerHTML).toBe("Hi, .Hello ");
+    expect(pending()).toBe(true);
+    expect(finished).toBe(false);
+
+    // Exhausts create-resource setTimeout
+    jest.runAllTimers();
+    // wait update suspence state
+    await Promise.resolve();
+    // wait update computation 
+    jest.runAllTicks();
+    jest.runAllTimers();
+    // wait write signal succ
+    queueMicrotask(()=>{
       expect(div.innerHTML).toBe("Hi, Jo.Hello Jo");
       expect(pending()).toBe(false);
       expect(finished).toBe(true);
-      done();
-    }, 400);
+      done()
+    });
+    jest.runAllTicks();
   });
 
   test("dispose", () => {
@@ -87,7 +108,7 @@ describe("SuspenseList", () => {
       return <div>{value()}</div>;
     };
 
-  test("revealOrder together", done => {
+  test("revealOrder together", async () => {
     const div = document.createElement("div"),
       Comp = () => (
         <SuspenseList revealOrder="together">
@@ -104,20 +125,20 @@ describe("SuspenseList", () => {
       );
     const dispose = render(Comp, div);
     expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    }, 110);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    }, 210);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
-      dispose();
-      done();
-    }, 310);
+    jest.advanceTimersByTime(110);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
+    jest.advanceTimersByTime(100);
+    // wait effect update
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
+    dispose();
   });
 
-  test("revealOrder forwards", done => {
+  test("revealOrder forwards", async () => {
     const div = document.createElement("div"),
       Comp = () => (
         <SuspenseList revealOrder="forwards">
@@ -134,20 +155,22 @@ describe("SuspenseList", () => {
       );
     const dispose = render(Comp, div);
     expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    }, 110);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>Loading 3</div>");
-    }, 210);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
-      dispose();
-      done();
-    }, 310);
+
+    jest.advanceTimersByTime(110);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
+    dispose();
   });
 
-  test("revealOrder forwards hidden", done => {
+  test("revealOrder forwards hidden", async () => {
     const div = document.createElement("div"),
       Comp = () => (
         <SuspenseList revealOrder="forwards" tail="hidden">
@@ -164,20 +187,23 @@ describe("SuspenseList", () => {
       );
     const dispose = render(Comp, div);
     expect(div.innerHTML).toBe("");
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("");
-    }, 110);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div>");
-    }, 210);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
-      dispose();
-      done();
-    }, 310);
+
+    jest.advanceTimersByTime(110);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div>");
+
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
+    dispose();
   });
 
-  test("revealOrder forwards", done => {
+  test("revealOrder forwards", async () => {
     const div = document.createElement("div"),
       Comp = () => (
         <SuspenseList revealOrder="forwards">
@@ -194,20 +220,22 @@ describe("SuspenseList", () => {
       );
     const dispose = render(Comp, div);
     expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    }, 110);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>Loading 3</div>");
-    }, 210);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
-      dispose();
-      done();
-    }, 310);
+
+    jest.advanceTimersByTime(110);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
+    dispose();
   });
 
-  test("revealOrder forwards collapse", done => {
+  test("revealOrder forwards collapse", async () => {
     const div = document.createElement("div"),
       Comp = () => (
         <SuspenseList revealOrder="forwards" tail="collapsed">
@@ -224,20 +252,22 @@ describe("SuspenseList", () => {
       );
     const dispose = render(Comp, div);
     expect(div.innerHTML).toBe("<div>Loading 1</div>");
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 1</div>");
-    }, 110);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>Loading 3</div>");
-    }, 210);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
-      dispose();
-      done();
-    }, 310);
+
+    jest.advanceTimersByTime(110);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 1</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
+    dispose();
   });
 
-  test("revealOrder backwards collapse", done => {
+  test("revealOrder backwards collapse", async () => {
     const div = document.createElement("div"),
       Comp = () => (
         <SuspenseList revealOrder="backwards" tail="collapsed">
@@ -254,20 +284,22 @@ describe("SuspenseList", () => {
       );
     const dispose = render(Comp, div);
     expect(div.innerHTML).toBe("<div>Loading 3</div>");
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 3</div>");
-    }, 110);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 3</div>");
-    }, 210);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
-      dispose();
-      done();
-    }, 310);
+
+    jest.advanceTimersByTime(110);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
+    dispose();
   });
 
-  test("nested SuspenseList together", done => {
+  test("nested SuspenseList together", async () => {
     const div = document.createElement("div"),
       Comp = () => (
         <SuspenseList revealOrder="together">
@@ -288,20 +320,22 @@ describe("SuspenseList", () => {
       );
     const dispose = render(Comp, div);
     expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    }, 110);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    }, 210);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
-      dispose();
-      done();
-    }, 310);
+
+    jest.advanceTimersByTime(110);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
+    dispose();
   });
 
-  test("nested SuspenseList forwards", done => {
+  test("nested SuspenseList forwards", async () => {
     const div = document.createElement("div"),
       Comp = () => (
         <SuspenseList revealOrder="forwards">
@@ -322,16 +356,18 @@ describe("SuspenseList", () => {
       );
     const dispose = render(Comp, div);
     expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
-    }, 110);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>Loading 3</div>");
-    }, 210);
-    setTimeout(() => {
-      expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
-      dispose();
-      done();
-    }, 310);
+
+    jest.advanceTimersByTime(110);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>Loading 1</div><div>Loading 2</div><div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>Loading 3</div>");
+
+    jest.advanceTimersByTime(100);
+    await Promise.resolve();
+    expect(div.innerHTML).toBe("<div>A</div><div>B</div><div>C</div>");
+    dispose();
   });
 });