tracer bundle tests work manually

Author: DellaBitta

app/tests/firestore/web_client/page.tsx

@@ -16,16 +16,18 @@
  */
 import type { Metadata } from 'next'
 import CSRTestRunner from '@/components/app_tests/firestore/csr_test_runner';
+import { buildSerializedFirestoreData, SerializedFirestoreData } from '@/lib/app_tests/firestore/test';
 
 export const metadata: Metadata = {
   title: 'Firestore Web SDK CSR test'
 }
 
-export default function Page() {
+export default async function Page() {
+  const serializedFirestoreData : SerializedFirestoreData = await buildSerializedFirestoreData();
   return (
     <>
       <h1>Firestore CSR Test results:</h1>
-      <CSRTestRunner />
+      <CSRTestRunner serializedFirestoreData={serializedFirestoreData} />
     </>
   );
 }

src/components/app_tests/firestore/csr_test_runner.tsx

@@ -17,22 +17,113 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { testFirestore, initializeTestResults } from '@/lib/app_tests/firestore/test';
+import { deleteApp, initializeApp } from 'firebase/app';
+import { testFirestore, initializeTestResults, SerializedFirestoreData, TestResults } from '@/lib/app_tests/firestore/test';
 import ResultsDisplay from './results_display';
+import {
+  DocumentSnapshot,
+  getFirestore,
+  onSnapshotResume,
+  QuerySnapshot,
+  documentSnapshotFromJSON,
+  querySnapshotFromJSON
+} from 'firebase/firestore';
+import { firebaseConfig } from '@/lib/app_tests/firebase';
+import { OK } from '@/lib/app_tests/util';
 
-export default function CsrTestRunner() {
+function validateDocumentData(documentData): boolean {
+  if (documentData !== undefined) {
+    if (
+      documentData.aBoolean && documentData.aBoolean === true &&
+      documentData.aName && documentData.aName === "A name" &&
+      documentData.anInteger && documentData.anInteger === 1234) {
+      return true;
+    }
+  }
+  return false;
+}
+async function runDeserializationTests(
+  testResults: TestResults,
+  serializedFirestoreData: SerializedFirestoreData
+): Promise<TestResults> {
+  const firebase = initializeApp(firebaseConfig);
+  const firestore = getFirestore(firebase);
+
+  // DocumentSnapshotTests
+  if (serializedFirestoreData.documentSnapshotJson != null) {
+    const snapshot = documentSnapshotFromJSON(firestore, serializedFirestoreData.documentSnapshotJson);
+    const data = snapshot.data();
+    if (validateDocumentData(data)) {
+      testResults.clientSideDocumentSnapshotResult = OK;
+    }
+
+    // onResume Test
+    const bundleDocSnapshotPromise = new Promise<void>((resolve, reject) => {
+      let completed: boolean = false;
+      setTimeout(() => { if (!completed) reject(); }, 2000);
+      const unsubscribe = onSnapshotResume(
+        firestore,
+        serializedFirestoreData.documentSnapshotJson!,
+        (docSnapshot: DocumentSnapshot
+        ) => {
+          if (docSnapshot.exists()) {
+            const docData = docSnapshot.data();
+            if (validateDocumentData(docSnapshot.data())) {
+              unsubscribe();
+              testResults.clientSideDocumentSnapshotOnResumeResult = OK;
+              completed = true;
+              resolve();
+            }
+          }
+        });
+    });
+    await bundleDocSnapshotPromise;
+  }
+
+  // QuerySnapshotTests
+  if (serializedFirestoreData.querySnapshotJson != null) {
+    const snapshot = querySnapshotFromJSON(firestore, serializedFirestoreData.querySnapshotJson);
+    if (snapshot.docs.length === 1 && validateDocumentData(snapshot.docs[0].data())) {
+      testResults.clientSideQuerySnapshotResult = OK;
+    }
+
+    // onResume test
+    const bundleQuerySnapshotPromise = new Promise<void>((resolve, reject) => {
+      let completed: boolean = false;
+      setTimeout(() => { if (!completed) reject(); }, 2000);
+      const unsubscribe = onSnapshotResume(
+        firestore,
+        serializedFirestoreData.querySnapshotJson!,
+        (querySnapshot: QuerySnapshot
+        ) => {
+          if (querySnapshot.docs.length === 1 && validateDocumentData(querySnapshot.docs[0].data())) {
+            testResults.clientSideQuerySnapshotOnResumeResult = OK;
+            unsubscribe();
+            completed = true;
+            resolve();
+          }
+        });
+    });
+    await bundleQuerySnapshotPromise;
+  }
+  return testResults;
+}
+
+export default function CsrTestRunner(props) {
   const [testStatus, setTestStatus] = useState<string>("running...");
-  const [testResults, setTestResults] = useState(initializeTestResults(/* isServer= */ false));
+  const [testResults, setTestResults] = useState(initializeTestResults());
   useEffect(() => {
     const asyncTest = async () => {
-      setTestResults(await testFirestore(/* isServer= */ false));
+      let testResults = await testFirestore(/* isServer= */ false);
+      testResults = await runDeserializationTests(testResults, props.serializedFirestoreData);
+      setTestResults(testResults);
       setTestStatus("Complete!");
     }
     asyncTest().catch((e) => {
       console.error("Error encountered during testing: ", e);
       setTestStatus("Errored!");
     });
-  }, []);
+  }, [props.serializedFirestoreData]);
 
   return (
     <ResultsDisplay statusString={testStatus} testResults={testResults} />

src/components/app_tests/firestore/results_display.tsx

@@ -29,13 +29,22 @@ export default function ResultsDisplay({ statusString, testResults }) {
       <h4 title="getDocResult">getDocResult: {testResults.getDocResult}</h4>
       <h4 title="querySnapshotResult">querySnapshotResult: {testResults.querySnapshotResult}</h4>
       <h4 title="documentSnapshotBundleResult">documentSnapshotBundleResult: {testResults.documentSnapshotBundleResult}</h4>
+      <h4 title="reconstitutedDocDataResult">reconstitutedDocDataResult: {testResults.reconstitutedDocDataResult}</h4>
       <h4 title="documentSnapshotOnSnapshotResumeResult">documentSnapshotOnSnapshotResumeResult: {testResults.documentSnapshotOnSnapshotResumeResult}</h4>
       <h4 title="querySnapshotOnSnapshotResumeResult">querySnapshotOnSnapshotResumeResult: {testResults.querySnapshotOnSnapshotResumeResult}</h4>
       <h4 title="querySnapshotBundleResult">querySnapshotBundleResult: {testResults.querySnapshotBundleResult}</h4>
+      <h4 title="reconstitutedQueryDataResult">reconstitutedQueryDataResult: {testResults.reconstitutedQueryDataResult}</h4>
       <h4 title="deleteDocResult">deleteDocResult: {testResults.deleteDocResult}</h4>
       <h4 title="onSnapshotDeleteDR">onSnapshotDeleteDocResult: {testResults.onSnapshotDeleteDocResult}</h4>
       <h4 title="getDeletedDocResult">getDeletedDocResult: {testResults.getDeletedDocResult}</h4>
       <h4 title="deleteAppResult">deleteAppResult: {testResults.deleteAppResult}</h4>
+      
+      <h3> CSR-side deserialization tests </h3>
+      <h4 title="clientSideDocumentSnapshotResult">clientSideDocumentSnapshotResult: {testResults.clientSideDocumentSnapshotResult}</h4>
+      <h4 title="clientSideDocumentSnapshotOnResumeResult">clientSideDocumentSnapshotOnResumeResult: {testResults.clientSideDocumentSnapshotOnResumeResult}</h4>
+      <h4 title="clientSideQuerySnapshotResult">clientSideQuerySnapshotResult: {testResults.clientSideQuerySnapshotResult}</h4>
+      <h4 title="clientSideQuerySnapshotOnResumeResult">clientSideQuerySnapshotOnResumeResult: {testResults.clientSideQuerySnapshotOnResumeResult}</h4>
+      
       <p />
       <Link href="/">Back to test index</Link>
     </>