test: add test setup with emulator

Author: posva

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "vue-fire-store"
+  }
+}

.github/workflows/test.yml

@@ -23,6 +23,7 @@ jobs:
         with:
           node-version: '16'
           cache: 'pnpm'
+        - run: npm i -g firebase-tools
 
       - name: Install
         run: pnpm install
@@ -31,7 +32,7 @@ jobs:
         run: pnpm run lint
 
       - name: Test
-        run: pnpm run test:unit
+        run: firebase emulators:exec --only firestore 'pnpm run test:unit'
 
       - name: Build
         run: pnpm run build

.gitignore

@@ -9,3 +9,4 @@ package-lock.json
 .DS_Store
 temp
 roadmap.md
+*-debug.log

firebase.json

@@ -0,0 +1,23 @@
+{
+  "firestore": {
+    "rules": "firestore.rules"
+  },
+  "emulators": {
+    "auth": {
+      "port": 9099
+    },
+    "firestore": {
+      "port": 8080
+    },
+    "database": {
+      "port": 8081
+    },
+    "storage": {
+      "port": 9199
+    },
+    "ui": {
+      "enabled": true
+    },
+    "singleProjectMode": true
+  }
+}

firestore.rules

@@ -0,0 +1,11 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    match /__tests/{document=**} {
+      allow read, write;
+    }
+    match /{document=**} {
+      allow read, write: if false;
+    }
+  }
+}

package.json

@@ -37,6 +37,8 @@
     "lint:fix": "pnpm run lint --write",
     "test:types": "tsc --build tsconfig.json",
     "test:unit": "vitest --coverage",
+    "firebase:emulators": "firebase emulators:start --only firestore",
+    "test:dev": "vitest",
     "test": "pnpm run lint && pnpm run test:unit run && pnpm run build"
   },
   "keywords": [
@@ -68,12 +70,14 @@
   "devDependencies": {
     "@vitest/coverage-c8": "^0.24.1",
     "@vue/runtime-core": "^3.2.40",
+    "@vue/test-utils": "^2.1.0",
     "chalk": "^5.1.2",
     "conventional-changelog-cli": "^2.0.34",
     "enquirer": "^2.3.6",
     "execa": "^6.1.0",
     "firebase": "^9.12.1",
     "focus-visible": "^5.2.0",
+    "happy-dom": "^7.5.10",
     "lint-staged": "^13.0.3",
     "minimist": "^1.2.7",
     "p-series": "^3.0.0",

playground/firestore.rules

@@ -1,3 +1,4 @@
+rules_version = '2';
 service cloud.firestore {
   match /databases/{database}/documents {
   	match /todos/{todoId} {
@@ -38,4 +39,4 @@ service cloud.firestore {
       allow write: if false;
     }
   }
-}
+}

playground/package.json

@@ -17,6 +17,7 @@
     "vuefire": "workspace:*"
   },
   "devDependencies": {
+    "@firebase/app-types": "^0.8.0",
     "@types/node": "^16.11.65",
     "@vitejs/plugin-vue": "^3.0.3",
     "@vue/tsconfig": "^0.1.3",

playground/src/pages/config.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { doc } from 'firebase/firestore';
+import { doc } from 'firebase/firestore'
 import { ref } from 'vue'
-import { firestoreBind } from 'vuefire';
-import { useFirestore } from '@/firebase;
+import { firestoreBind } from 'vuefire'
+import { useFirestore } from '@/firebase'
 
-
-const db = useFirestore();
+const db = useFirestore()
 const configRef = doc(db, 'configs', 'jORwjIykFo2NmkdzTkhU')
+const itemRef = doc(db, 'tests', 'item')
 
-const config = ref(null)
-firestoreBind(config, configRef)
+const config = ref()
+firestoreBind(config, itemRef)
+// firestoreBind(config, configRef)
 </script>
 
 <template>

playground/src/pages/index.vue

@@ -1,15 +1,21 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { useRouter } from 'vue-router/auto';
+import { computed } from 'vue'
+import { useRouter } from 'vue-router/auto'
 
 const router = useRouter()
-const routes = computed(() => router.getRoutes().filter(route => !route.path.includes(':') && !route.children.length))
+const routes = computed(() =>
+  router
+    .getRoutes()
+    .filter(route => !route.path.includes(':') && !route.children.length)
+)
 </script>
 
 <template>
   <ul>
     <li v-for="route in routes">
-      <RouterLink :to="{ name: route.name }" v-slot="{ href }">{{ href }}</RouterLink>
+      <RouterLink :to="{ name: route.name }" v-slot="{ href }">{{
+        href
+      }}</RouterLink>
     </li>
   </ul>
 </template>

playground/src/pages/nested-collections.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { collection } from 'firebase/firestore';
+import { collection } from 'firebase/firestore'
 import { ref } from 'vue'
-import { firestoreBind } from 'vuefire';
-import { useFirestore } from '@/firebase;
+import { firestoreBind } from 'vuefire'
+import { useFirestore } from '@/firebase'
 
-const db = useFirestore();
+const db = useFirestore()
 const tweetsRef = collection(db, 'tweets')
 const nestedRef = collection(db, 'nested')
 const momentsRef = collection(db, 'moments')