test: add tests for core features

codediodeio · codediodeio · commit 0cda7455601e · 2023-07-23T14:23:22.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 package
+/test-results
diff --git a/dist/components/SignedIn.svelte b/dist/components/SignedIn.svelte
@@ -6,5 +6,5 @@ const user = userStore();
 </script>
   
   {#if $user}
-    <slot user={$user} signOut={() => signOut(auth)} />
+    <slot user={$user} {auth} signOut={() => signOut(auth)} />
   {/if}
diff --git a/dist/components/SignedIn.svelte.d.ts b/dist/components/SignedIn.svelte.d.ts
@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { signOut, type User } from "firebase/auth";
+import { signOut, type User, type Auth } from "firebase/auth";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
@@ -8,6 +8,7 @@ declare const __propDef: {
     slots: {
         default: {
             user: User;
+            auth: Auth;
             signOut: () => Promise<void>;
         };
     };
diff --git a/dist/components/SignedOut.svelte b/dist/components/SignedOut.svelte
@@ -1,7 +1,10 @@
-<script>import { userStore } from "../stores/auth.js";
+<script>import { getFirebaseContext } from "../stores/sdk.js";
+import { userStore } from "../stores/auth.js";
+getFirebaseContext;
+const auth = getFirebaseContext().auth;
 const user = userStore();
 </script>
   
   {#if !$user}
-    <slot />
+    <slot {auth} />
   {/if}
diff --git a/dist/components/SignedOut.svelte.d.ts b/dist/components/SignedOut.svelte.d.ts
@@ -1,11 +1,14 @@
 import { SvelteComponent } from "svelte";
+import type { Auth } from 'firebase/auth';
 declare const __propDef: {
     props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            auth: Auth;
+        };
     };
 };
 export type SignedOutProps = typeof __propDef.props;
diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -7,4 +7,5 @@ import SignedIn from './components/SignedIn.svelte';
 import { docStore } from './stores/firestore.js';
 import { collectionStore } from './stores/firestore.js';
 import { userStore } from './stores/auth.js';
-export { Doc, User, Collection, FirebaseApp, SignedOut, SignedIn, docStore, collectionStore, userStore };
+import { getFirebaseContext } from './stores/sdk.js';
+export { Doc, User, Collection, FirebaseApp, SignedOut, SignedIn, docStore, collectionStore, userStore, getFirebaseContext };
diff --git a/dist/index.js b/dist/index.js
@@ -5,10 +5,10 @@ import Doc from './components/Doc.svelte';
 import FirebaseApp from './components/FirebaseApp.svelte';
 import SignedIn from './components/SignedIn.svelte';
 import SignedOut from './components/SignedOut.svelte';
-// import { docStore, collectionStore } from './stores/stores.js';
 import { userStore } from './stores/auth.js';
 import { docStore, collectionStore  } from './stores/firestore.js';
-
+import { getFirebaseContext } from './stores/sdk.js';
+ 
 export {
     Doc,
     User,
@@ -18,5 +18,6 @@ export {
     SignedIn,
     docStore,
     collectionStore,
-    userStore
+    userStore,
+    getFirebaseContext
 }
diff --git a/dist/stores/firestore.js b/dist/stores/firestore.js
@@ -86,7 +86,7 @@ export function collectionStore(ref, startWith = []) {
 /**
  * experimental, fetch document based on curret user
  */
-export function userDataStore(collectionPath = 'users') {
+export function userDataStore(collectionPath = "users") {
     const user = userStore();
     return derived(user, ($user, set) => {
         if (!$user)
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
-		"test": "playwright test",
+		"test": "playwright test --ui",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "eslint ."
diff --git a/src/lib/components/SignedIn.svelte b/src/lib/components/SignedIn.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
     import { userStore } from "$lib/stores/auth.js";  
     import { getFirebaseContext } from "$lib/stores/sdk.js";
-    import { signOut, type User } from "firebase/auth";
-    
-    interface $$Slots {
-      default: { user: User, signOut: () => Promise<void> }
-    }
+    import { signOut, type User, type Auth } from "firebase/auth";
 
     const auth = getFirebaseContext().auth!;
     const user = userStore()
     
+    interface $$Slots {
+      default: { user: User, auth: Auth, signOut: () => Promise<void> }
+    }
+    
   </script>
   
   {#if $user}
-    <slot user={$user} signOut={() => signOut(auth)} />
+    <slot user={$user} {auth} signOut={() => signOut(auth)} />
   {/if}
diff --git a/src/lib/components/SignedOut.svelte b/src/lib/components/SignedOut.svelte
@@ -1,8 +1,17 @@
 <script lang="ts">
+    import { getFirebaseContext } from "$lib/stores/sdk.js";
     import { userStore } from "$lib/stores/auth.js";
+    import type { Auth, User } from 'firebase/auth';
+    getFirebaseContext
+    const auth = getFirebaseContext().auth!;
     const user = userStore()
+
+    interface $$Slots {
+      default: { auth: Auth }
+    }
+
   </script>
   
   {#if !$user}
-    <slot />
+    <slot {auth} />
   {/if}
diff --git a/src/lib/index.js b/src/lib/index.js
@@ -5,10 +5,10 @@ import Doc from './components/Doc.svelte';
 import FirebaseApp from './components/FirebaseApp.svelte';
 import SignedIn from './components/SignedIn.svelte';
 import SignedOut from './components/SignedOut.svelte';
-// import { docStore, collectionStore } from './stores/stores.js';
 import { userStore } from './stores/auth.js';
 import { docStore, collectionStore  } from './stores/firestore.js';
-
+import { getFirebaseContext } from './stores/sdk.js';
+ 
 export {
     Doc,
     User,
@@ -18,5 +18,6 @@ export {
     SignedIn,
     docStore,
     collectionStore,
-    userStore
+    userStore,
+    getFirebaseContext
 }
diff --git a/src/lib/stores/firestore.ts b/src/lib/stores/firestore.ts
@@ -132,14 +132,13 @@ export function collectionStore<T>(
 /**
  * experimental, fetch document based on curret user
  */
-export function userDataStore<T = DocumentData>(collectionPath = 'users'): Readable<T | null> {
-    const user = userStore();
-    return derived(user, ($user, set) => {
-        if (!$user) return set(null);
-        const fullPath = `${collectionPath}/${$user.uid}`;
-        return docStore<T>(fullPath).subscribe(set);
-    });
+export function userDataStore<T = DocumentData>(
+  collectionPath = "users"
+): Readable<T | null> {
+  const user = userStore();
+  return derived(user, ($user, set) => {
+    if (!$user) return set(null);
+    const fullPath = `${collectionPath}/${$user.uid}`;
+    return docStore<T>(fullPath).subscribe(set);
+  });
 }
-
-
-
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,107 +1,19 @@
 <script lang="ts">
-  import Doc from '$lib/components/Doc.svelte';
-  // import { collectionStore, docStore, userStore } from '$lib/stores';
-  import User from '$lib/components/User.svelte';
-  import { db as firestore, auth } from './firebase.js';
-  import { signInAnonymously, signOut } from "firebase/auth";
-  import { addDoc, collection, Firestore, orderBy, query, refEqual, where } from 'firebase/firestore';
-  import Collection from '$lib/components/Collection.svelte';
-  import FirebaseApp from '$lib/components/FirebaseApp.svelte';
-  import SignedIn from '$lib/components/SignedIn.svelte';
-  import SignedOut from '$lib/components/SignedOut.svelte';
-  import { collectionStore, docStore, userDataStore } from '$lib/stores/firestore.js';
-  import { userStore } from '$lib/stores/auth.js';
+  import { getFirebaseContext } from "$lib/stores/sdk.js";
 
-  async function addPost(uid:string) {
-    const posts = collection(firestore, `users/${uid}/posts`);
-    await addDoc(posts, {
-      content: (Math.random() + 1).toString(36).substring(7),
-      created: Date.now(),
-    });
-  }
-
-  $: makeQuery = (uid:string) => {
-    const q = query(collection(firestore, `users/${uid}/posts`), orderBy('created', 'desc'));
-    return q;
-  }
-
-  // const userData = userDataStore<any>();
-  // const userQuery= userQueryStore('posts');
-
-  const myUser = userStore();
-  const userData = docStore<{ name: string }>('users/Toy8wnsp9AMLdxtP8cR7idM8J263');
-  const users = collectionStore<any>('users');
 
+  const ctx = getFirebaseContext();
 
 </script>
 
 <h1>Welcome to SvelteFire</h1>
 
-  <SignedIn let:user let:signOut>
-    <p>Hi {user.displayName}</p>
-    <button on:click={signOut}>Sign Out</button>
-  </SignedIn>
-
-  <SignedOut>
-    <button on:click={() => signInAnonymously(auth)}>Sign in</button>
-  </SignedOut>
-
-
-
-  <Doc ref="posts/first-post" startWith={{ content: 'sup'}} let:data={post}>
-    <p>{post?.content}</p>
-    <div slot="loading">
-      <p>Loading...</p>
-    </div>
-  </Doc>
-
-  <User let:user>
-
-    <p>Hello {user?.uid}</p>  
-
-    <Doc ref="posts/first-post" let:data={post}>
-      <p>{post?.content}</p>
-      <div slot="loading">
-        <p>Loading...</p>
-      </div>
-    </Doc>
-
-    <h1>Your Posts</h1>
-
-    <Collection ref={makeQuery(user.uid)} startWith={[]} let:data={posts} let:count>
-
-      <p>You've made {count} posts</p>
-
-      <ul>
-        {#each posts as post (post.id)}
-          <li>{post?.content} ... { post.id }</li>
-        {/each}
-      </ul>
-
-      <button on:click={() => addPost(user.uid)}>Add Post</button>
-    </Collection>
-
-
-    <div slot="signedOut">
-      <p>Sign in to do stuff</p>
-      <button on:click={() => signInAnonymously(auth)}>Sign in</button>
-    </div>
-  </User>
-
-  <p>
-    <a href="/ssr">SSR Test</a>
-  </p>
-
-  <h1>User Query</h1>
-
-  {$myUser?.uid}
-
-  <!-- {#each $userQuery as post (post.id)}
-    <li>{post?.content} ... { post.id }</li>
-  {/each} -->
-
-  {$userData?.name}
-
-  {#each $users as user (user.id)}
-    <li>{user?.name} ... { user.id }</li>
-  {/each}
+<ul>
+  <li><a href="/auth-test">Auth Test</a></li>
+  <li><a href="/firestore-test">Firestore Test</a></li>
+  <li><a href="/ssr-test">SSR Test</a></li>
+</ul>
+<ul>
+  <li data-testid="auth">Auth Context: {!!ctx.auth}</li>
+  <li data-testid="firestore">Firestore Context: {!!ctx.firestore}</li>
+</ul>
diff --git a/src/routes/auth-test/+page.svelte b/src/routes/auth-test/+page.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import SignedIn from '$lib/components/SignedIn.svelte';
+  import SignedOut from '$lib/components/SignedOut.svelte';
+  import { signInAnonymously } from "firebase/auth";
+
+
+</script>
+
+<h1>Auth Test</h1>
+
+<SignedIn let:user let:signOut>
+    <h2>Signed In</h2>
+    <p>Hello {user.uid}</p>
+    <button on:click={signOut}>Sign Out</button>
+</SignedIn>
+
+<SignedOut let:auth>
+     <h2>Signed Out</h2>
+    <button on:click={() => signInAnonymously(auth)}>Sign In</button>
+</SignedOut>
diff --git a/src/routes/firestore-test/+page.svelte b/src/routes/firestore-test/+page.svelte
diff --git a/src/routes/ssr-test/+page.svelte b/src/routes/ssr-test/+page.svelte
diff --git a/src/routes/ssr-test/+page.ts b/src/routes/ssr-test/+page.ts
diff --git a/tests/auth.test.ts b/tests/auth.test.ts
diff --git a/tests/firestore.test.ts b/tests/firestore.test.ts
diff --git a/tests/main.test.ts b/tests/main.test.ts
diff --git a/tests/test.ts b/tests/test.ts
