From a45e2c903979ae04b210523c3eae29b88a698672 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Oliva?= Date: Fri, 4 Aug 2023 12:24:59 +0200 Subject: [PATCH] Add SSR tests --- package-lock.json | 15 +++--- package.json | 1 + packages/core/src/Subscribe.test.tsx | 33 +++++++++++-- .../core/src/bind/connectObservable.test.tsx | 48 +++++++++++++++++++ .../pipeableStreamToObservable.ts | 41 ++++++++++++++++ 5 files changed, 128 insertions(+), 10 deletions(-) create mode 100644 packages/core/src/test-helpers/pipeableStreamToObservable.ts diff --git a/package-lock.json b/package-lock.json index b09d6450..7f416fe8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "react-rxjs", + "name": "re-rxjs", "lockfileVersion": 2, "requires": true, "packages": { @@ -12,6 +12,7 @@ "@babel/preset-env": "^7.22.7", "@babel/preset-typescript": "^7.22.5", "@testing-library/react": "^14.0.0", + "@types/node": "^20.4.7", "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", "@vitest/coverage-v8": "^0.33.0", @@ -2545,9 +2546,9 @@ } }, "node_modules/@types/node": { - "version": "20.4.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.1.tgz", - "integrity": "sha512-JIzsAvJeA/5iY6Y/OxZbv1lUcc8dNSE77lb2gnBH+/PJ3lFR1Ccvgwl5JWnHAkNHcRsT0TbpVOsiMKZ1F/yyJg==", + "version": "20.4.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.7.tgz", + "integrity": "sha512-bUBrPjEry2QUTsnuEjzjbS7voGWCc30W0qzgMf90GPeDGFRakvrz47ju+oqDAKCXLUCe39u57/ORMl/O/04/9g==", "dev": true }, "node_modules/@types/prop-types": { @@ -8538,9 +8539,9 @@ } }, "@types/node": { - "version": "20.4.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.1.tgz", - "integrity": "sha512-JIzsAvJeA/5iY6Y/OxZbv1lUcc8dNSE77lb2gnBH+/PJ3lFR1Ccvgwl5JWnHAkNHcRsT0TbpVOsiMKZ1F/yyJg==", + "version": "20.4.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.7.tgz", + "integrity": "sha512-bUBrPjEry2QUTsnuEjzjbS7voGWCc30W0qzgMf90GPeDGFRakvrz47ju+oqDAKCXLUCe39u57/ORMl/O/04/9g==", "dev": true }, "@types/prop-types": { diff --git a/package.json b/package.json index 48d27ce2..cf7ec503 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@babel/preset-env": "^7.22.7", "@babel/preset-typescript": "^7.22.5", "@testing-library/react": "^14.0.0", + "@types/node": "^20.4.7", "@types/react": "^18.2.14", "@types/react-dom": "^18.2.6", "@vitest/coverage-v8": "^0.33.0", diff --git a/packages/core/src/Subscribe.test.tsx b/packages/core/src/Subscribe.test.tsx index 69aae456..359b76ef 100644 --- a/packages/core/src/Subscribe.test.tsx +++ b/packages/core/src/Subscribe.test.tsx @@ -7,9 +7,20 @@ import { } from "@rx-state/core" import { act, render, screen } from "@testing-library/react" import React, { StrictMode, useEffect, useState } from "react" -import { defer, EMPTY, NEVER, Observable, of, startWith, Subject } from "rxjs" -import { describe, it, expect, vi } from "vitest" -import { bind, RemoveSubscribe, Subscribe as OriginalSubscribe } from "./" +import { renderToPipeableStream } from "react-dom/server" +import { + defer, + EMPTY, + lastValueFrom, + NEVER, + Observable, + of, + startWith, + Subject, +} from "rxjs" +import { describe, expect, it, vi } from "vitest" +import { bind, Subscribe as OriginalSubscribe, RemoveSubscribe } from "./" +import { pipeableStreamToObservable } from "./test-helpers/pipeableStreamToObservable" import { TestErrorBoundary } from "./test-helpers/TestErrorBoundary" import { useStateObservable } from "./useStateObservable" @@ -432,6 +443,22 @@ describe("Subscribe", () => { unmount() }) }) + + describe("On SSR", () => { + // Testing-library doesn't support SSR yet https://github.com/testing-library/react-testing-library/issues/561 + + it("Renders the fallback", async () => { + const stream = renderToPipeableStream( + Loading}> +
Content
+ , + ) + const result = await lastValueFrom(pipeableStreamToObservable(stream)) + + expect(result).toContain("
Loading
") + expect(result).not.toContain("
Content
") + }) + }) }) describe("RemoveSubscribe", () => { diff --git a/packages/core/src/bind/connectObservable.test.tsx b/packages/core/src/bind/connectObservable.test.tsx index ae347143..3c0e8583 100644 --- a/packages/core/src/bind/connectObservable.test.tsx +++ b/packages/core/src/bind/connectObservable.test.tsx @@ -10,6 +10,7 @@ import { defer, EMPTY, from, + lastValueFrom, merge, NEVER, Observable, @@ -34,6 +35,8 @@ import { useStateObservable, } from "../" import { TestErrorBoundary } from "../test-helpers/TestErrorBoundary" +import { renderToPipeableStream } from "react-dom/server" +import { pipeableStreamToObservable } from "../test-helpers/pipeableStreamToObservable" const wait = (ms: number) => new Promise((res) => setTimeout(res, ms)) @@ -939,4 +942,49 @@ describe("connectObservable", () => { }) expect(queryByText("Result 10")).not.toBeNull() }) + + describe("The hook on SSR", () => { + // Testing-library doesn't support SSR yet https://github.com/testing-library/react-testing-library/issues/561 + + it("returns the value if the state observable has a subscription", async () => { + const [useState, state$] = bind(of(5)) + state$.subscribe() + const Component = () => { + const value = useState() + return
Value: {value}
+ } + const stream = renderToPipeableStream() + const result = await lastValueFrom(pipeableStreamToObservable(stream)) + + // Sigh... + expect(result).toEqual("
Value: 5
") + }) + + it("throws Missing Subscribe if the state observable doesn't have a subscription nor a default value", async () => { + const [useState] = bind(of(5)) + const Component = () => { + const value = useState() + return
Value: {value}
+ } + const stream = renderToPipeableStream() + try { + await lastValueFrom(pipeableStreamToObservable(stream)) + } catch (ex: any) { + expect(ex.message).to.equal("Missing Subscribe!") + } + expect.assertions(1) + }) + + it("returns the default value if the observable didn't emit yet", async () => { + const [useState] = bind(of(5), 3) + const Component = () => { + const value = useState() + return
Value: {value}
+ } + const stream = renderToPipeableStream() + const result = await lastValueFrom(pipeableStreamToObservable(stream)) + + expect(result).toEqual("
Value: 3
") + }) + }) }) diff --git a/packages/core/src/test-helpers/pipeableStreamToObservable.ts b/packages/core/src/test-helpers/pipeableStreamToObservable.ts new file mode 100644 index 00000000..d3f9ab9e --- /dev/null +++ b/packages/core/src/test-helpers/pipeableStreamToObservable.ts @@ -0,0 +1,41 @@ +import { PipeableStream } from "react-dom/server" +import { Observable, scan } from "rxjs" +import { PassThrough } from "stream" + +export function pipeableStreamToObservable( + stream: PipeableStream, +): Observable { + return new Observable((subscriber) => { + const passthrough = new PassThrough() + const sub = readStream$(passthrough) + .pipe(scan((acc, v) => acc + v, "")) + .subscribe(subscriber) + + stream.pipe(passthrough) + + return () => { + sub.unsubscribe() + } + }) +} + +function readStream$(stream: NodeJS.ReadableStream) { + return new Observable((subscriber) => { + const dataHandler = (data: T) => subscriber.next(data) + stream.addListener("data", dataHandler) + + const errorHandler = (error: any) => subscriber.error(error) + stream.addListener("error", errorHandler) + + const closeHandler = () => subscriber.complete() + stream.addListener("close", closeHandler) + stream.addListener("end", closeHandler) + + return () => { + stream.removeListener("data", dataHandler) + stream.removeListener("error", errorHandler) + stream.removeListener("close", closeHandler) + stream.removeListener("end", closeHandler) + } + }) +}