(feat) add Firestore SSR features to nightly tests (#24)

**General Updates:**
Updates the CI to test against Firebase Next and not Firebase Canary. The Canary target installs the Canary of the previously released version, where as Next installs the upcoming version (which we should test against).

Unfreezes the yarn lock file so that CI installs the latest Next version as it becomes available.

**Additions to the test framework:**
Expands upon Firestore tests to ensure that.

`toJson` and `fromJson` works for:
 * `Bytes`
 * `DocumentSnapshot`
 * `GeoPoint`
 * `QuerySnapshot`
 * `Timestamp`
 * `VectorValue`

Additionally tests that these object type can be serialized server-side then deserialized client-side and their values matched the originals.

Finally, also tests that QuerySnapshot and DocumentSnapshot can be stood up as listeners form their serialized forms.

Author: DellaBitta

app/tests/firestore/web_client/page.tsx

@@ -16,16 +16,21 @@
  */
 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} />
     </>
   );
 }

app/tests/firestore/web_ssr/page.tsx

@@ -26,7 +26,7 @@ export const metadata: Metadata = {
 }
 
 export default async function Page() {
-  const testResults: TestResults = await testFirestore();
+  const testResults: TestResults = await testFirestore(/* isServer= */ true);
   return (
     <>
       <h1>Firestore SSR Test results:</h1>

package.json

@@ -12,7 +12,7 @@
     "test": "playwright test"
   },
   "dependencies": {
-    "firebase": "canary",
+    "firebase": "next",
     "next": "latest",
     "react": "latest",
     "react-dom": "latest"

src/components/app_tests/firestore/csr_test_runner.tsx

@@ -17,22 +17,27 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { testFirestore, initializeTestResults } from '@/lib/app_tests/firestore/test';
+import {
+  initializeTestResults,
+  testSerializedFirestoreData,
+  testFirestore } from '@/lib/app_tests/firestore/test';
 import ResultsDisplay from './results_display';
 
-export default function CsrTestRunner() {
+export default function CsrTestRunner(props) {
   const [testStatus, setTestStatus] = useState<string>("running...");
   const [testResults, setTestResults] = useState(initializeTestResults());
   useEffect(() => {
     const asyncTest = async () => {
-      setTestResults(await testFirestore());
+      let testResults = await testFirestore(/* isServer= */ false);
+      testResults = await testSerializedFirestoreData(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

@@ -27,10 +27,28 @@ export default function ResultsDisplay({ statusString, testResults }) {
       <h4 title="updateDocResult">updateDocResult: {testResults.updateDocResult}</h4>
       <h4 title="onSnapshotUpdateDR">onSnapshotUpdateDocResult: {testResults.onSnapshotUpdateDocResult}</h4>
       <h4 title="getDocResult">getDocResult: {testResults.getDocResult}</h4>
+      <h4 title="querySnapshotGetDocsResult">querySnapshotGetDocsResult: {testResults.querySnapshotGetDocsResult}</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="csrDocumentSnapshotResult">csrDocumentSnapshotResult: {testResults.csrDocumentSnapshotResult}</h4>
+      <h4 title="csrDocumentSnapshotOnResumeResult">csrDocumentSnapshotOnResumeResult: {testResults.csrDocumentSnapshotOnResumeResult}</h4>
+      <h4 title="csrQuerySnapshotResult">csrQuerySnapshotResult: {testResults.csrQuerySnapshotResult}</h4>
+      <h4 title="csrQuerySnapshotOnResumeResult">csrQuerySnapshotOnResumeResult: {testResults.csrQuerySnapshotOnResumeResult}</h4>
+      <h4 title="csrDeserializedBytesResult">csrDeserializedBytesResult: {testResults.csrDeserializedBytesResult}</h4>
+      <h4 title="csrDeserializedGeoPointResult">csrDeserializedGeoPointResult: {testResults.csrDeserializedGeoPointResult}</h4>
+      <h4 title="csrDeserializedTimestampResult">csrDeserializedTimestampResult: {testResults.csrDeserializedTimestampResult}</h4>
+      <h4 title="csrDeserializedVectorValueResult">csrDeserializedVectorValueResult: {testResults.csrDeserializedVectorValueResult}</h4>
+
       <p />
       <Link href="/">Back to test index</Link>
     </>