Restructure components

Author: DellaBitta

app/tests/auth/auth_web_client/page.tsx

@@ -14,9 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Link from 'next/link';
-import ClientResults from './client_results';
 import type { Metadata } from 'next'
+import ClientResults from '../components/client_results';
 
 export const metadata: Metadata = {
   title: 'Auth Web SDK CSR test',
@@ -26,9 +25,7 @@ export default function Page() {
   return (
     <>
       <h1>Auth CSR Test results:</h1>
-      <ClientResults/>
-      <p/>
-      <Link href="/">Back to test index</Link>
+      <ClientResults />
     </>
   );
 }

app/tests/auth/auth_web_ssr/page.tsx

@@ -14,26 +14,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import Link from 'next/link';
-import { testAuth, TestAuthResult } from '../../../../lib/auth_test';
+import { testAuth, TestAuthResult } from '../lib/auth_test';
+import AuthResultsDisplay from '../components/auth_results_display';
 
 export default async function Page() {
   const testAuthResult: TestAuthResult = await testAuth(/*isServerAuth=*/true);
   return (
     <>
       <h1>Auth SSR Test results:</h1>
-      <h2 title="testStatus">Tests Complete!</h2>
-      <h4 title="initializeAppResult">initializeAppResult: {testAuthResult.initializeAppResult}</h4>
-      <h4 title="signInAnonymouslyResult">signInAnonymouslyResult: {testAuthResult.signInAnonymouslyResult}</h4>
-      <h4 title="getTokenResult">getTokenResult: {testAuthResult.getTokenResult}</h4>
-      <h4 title="initializeServerAppResult">initializeServerAppResult: {testAuthResult.initializeServerAppResult}</h4>
-      <h4 title="getAuthServerAppResult">getAuthServerAppResult: {testAuthResult.getAuthServerAppResult}</h4>
-      <h4 title="getServerAppUserResult">getServerAppUserResult: {testAuthResult.getServerAppUserResult}</h4>
-      <h4 title="deleteServerAppResult">deleteServerAppResult: {testAuthResult.deleteServerAppResult}</h4>
-      <h4 title="deleteUserResult">deleteUserResult: {testAuthResult.deleteUserResult}</h4>
-      <h4 title="deleteAppResult">deleteAppResult: {testAuthResult.deleteAppResult}</h4>
-      <p />
-      <Link href="/">Back to test index</Link>
+      <AuthResultsDisplay statusString='Tests Complete!' testAuthResult={testAuthResult} />
     </>
   );
 }

app/tests/auth/auth_web_client/client_results.tsx app/tests/auth/components/auth_results_display.tsx

@@ -14,28 +14,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-'use client'
-
-import { useState, useEffect } from 'react'
-import { testAuth, createTestAuthResult } from '../../../../lib/auth_test';
-
-export default function ClientResults() {
-  const [testStatus, setTestStatus] = useState("running...");
-  const [testAuthResult, setTestAuthResult] = useState(createTestAuthResult());
-  useEffect(() => {
-    const asyncTest = async () => {
-      setTestAuthResult(await testAuth());
-      setTestStatus("Complete!");
-    }
-    asyncTest().catch((e) => {
-      console.error("Error encountered during testing: ", e);
-      setTestStatus("Errored!");
-    });
-  }, []);
-
+import Link from 'next/link';
+export default function AuthResultsDisplay({ statusString, testAuthResult }) {
   return (
     <>
-      <h2 title="testStatus">Tests {testStatus}</h2>
+      <h2 title="testStatus">Tests {statusString}</h2>
       <h4 title="initializeAppResult">initializeAppResult: {testAuthResult.initializeAppResult}</h4>
       <h4 title="signInAnonymouslyResult">signInAnonymouslyResult: {testAuthResult.signInAnonymouslyResult}</h4>
       <h4 title="getTokenResult">getTokenResult: {testAuthResult.getTokenResult}</h4>
@@ -45,6 +28,8 @@ export default function ClientResults() {
       <h4 title="deleteServerAppResult">deleteServerAppResult: {testAuthResult.deleteServerAppResult}</h4>
       <h4 title="deleteUserResult">deleteUserResult: {testAuthResult.deleteUserResult}</h4>
       <h4 title="deleteAppResult">deleteAppResult: {testAuthResult.deleteAppResult}</h4>
+      <p />
+      <Link href="/">Back to test index</Link>
     </>
   );
 }

app/tests/auth/components/client_results.tsx

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use client'
+
+import { useState, useEffect } from 'react'
+import { testAuth, createTestAuthResult } from '../lib/auth_test';
+import AuthResultsDisplay from './auth_results_display';
+
+export default function ClientResults() {
+  const [testStatus, setTestStatus] = useState<string>("running...");
+  const [testAuthResult, setTestAuthResult] = useState(createTestAuthResult());
+  useEffect(() => {
+    const asyncTest = async () => {
+      setTestAuthResult(await testAuth());
+      setTestStatus("Complete!");
+    }
+    asyncTest().catch((e) => {
+      console.error("Error encountered during testing: ", e);
+      setTestStatus("Errored!");
+    });
+  }, []);
+
+  return (
+      <AuthResultsDisplay statusString={testStatus} testAuthResult={testAuthResult} />
+  );
+}

lib/auth_test.ts app/tests/auth/lib/auth_test.ts

@@ -16,8 +16,8 @@
  */
 import { deleteApp, initializeApp, initializeServerApp } from 'firebase/app';
 import { deleteUser, getAuth, onAuthStateChanged, signInAnonymously, User } from 'firebase/auth';
-import { firebaseConfig } from './firebase';
-import { OK, OK_SKIPPED, FAILED } from './util';
+import { firebaseConfig } from '../../../../lib/firebase';
+import { OK, OK_SKIPPED, FAILED } from '../../../../lib/util';
 
 export type TestAuthResult = {
   initializeAppResult: string,