Add unit tests and fix map load

.github/workflows/deploy.yml

@@ -17,6 +17,9 @@ jobs:
         run: |
           npm ci
           cd functions && npm ci
+        
+      - name: Run Vue.js unit tests
+        run: npm run test:unit
       
       - run: npm run build
       - uses: w9jds/firebase-action@master
@@ -24,6 +27,10 @@ jobs:
           args: deploy
         env:
           FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
+      
+      - name: Run Firebase integration tests
+        run: npm run test
+        working-directory: ./functions
 
       - name: Update Firestore database with train data
         uses: satak/webrequest-action@master

.github/workflows/integrate.yml

@@ -17,10 +17,9 @@ jobs:
         run: |
           npm ci
           cd functions && npm ci
-
-      - name: Run tests
-        run: npm run test
-        working-directory: ./functions
+      
+      - name: Run Vue.js unit tests
+        run: npm run test:unit
 
       - name: Build environment
         run: npm run build

README.md

@@ -1,10 +1,13 @@
-# Running Build & Deploying it to Firebase
+# Manual Firebase Build & Deploy
 `npm run build && firebase deploy`
 
-# Running Firebase Tests
+# Run Vue.js Unit Tests
+`npm run test:unit`
+
+# Run Firebase Integration Tests
 `cd functions && npm run test`
 
-# Running Locally
+# Run Locally
 1. Ensure you have Java 11 or greater installed. 
 2. Run `npm install` in the traintracker directory. 
 3. Run `npm install` in the functions directory. 
@@ -16,8 +19,8 @@ To kill the npm process do `CTRL + C` in your terminal.
 To kill the firebase emulators run `fg` to bring the process to the foreground, then do `CTRL + C`
 
 # Links 
-Deployed site: [irishrailtracker.web.app](https://irishrailtracker.web.app/) 
+Deployed Site: [irishrailtracker.web.app](https://irishrailtracker.web.app/) 
 
 Jira: [trainenthusiasts.atlassian.net](https://trainenthusiasts.atlassian.net/jira/software/projects/TE/boards/1)
 
-Github: [github.com/0hAodha/traintracker](https://github.com/0hAodha/traintracker)
+GitHub: [github.com/0hAodha/traintracker](https://github.com/0hAodha/traintracker)

package.json

@@ -3,8 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
     "build": "vite build",
+    "test:unit": "vue-cli-service test:unit",
+    "dev": "vite",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -26,6 +27,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/cli-plugin-unit-mocha": "~5.0.0",
+    "@vue/test-utils": "^2.0.0-0",
+    "chai": "^4.2.0",
     "vite": "^4.0.0"
   }
 }

src/components/Navbar.vue

@@ -8,6 +8,7 @@
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
+    
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
@@ -21,10 +22,9 @@
           <a v-if="isLoggedIn" class="nav-link"><router-link to="/account">Account Settings</router-link></a>
         </li>
         <li class="nav-item">
-          <a v-if="isLoggedIn" class="nav-link"><router-link style="text-decoration: none; color: black; font-weight: 100;"  @click="logout" to="/" class="navlink">Logout</router-link></a>
+          <a v-if="isLoggedIn" id="logout" class="nav-link"><router-link style="text-decoration: none; color: black; font-weight: 100;" @click="logout" to="/" class="navlink">Logout</router-link></a>
           <a v-if="!isLoggedIn" class="nav-link"><router-link to="/signup">Sign Up</router-link></a>
         </li>
-        
       </ul>
     </div>
   </div>

src/pages/MapPage.vue

@@ -201,7 +201,11 @@ export default {
         },
 
         getPreferences() {
-          if (!store.loggedIn) return
+          if (!store.loggedIn) {
+            this.loader.hide()
+            return
+          }
+
           const functions = getFunctions(app);
           let host = window.location.hostname
           if (host === '127.0.0.1' || host == 'localhost') {
@@ -226,10 +230,12 @@ export default {
               this.decideShowStations()
               this.decideShowTrains()
               this.readyToDisplayMap = true
+              this.loader.hide()
             }
           })
           .catch((error) => {
             this.readyToDisplayMap = true
+            this.loader.hide()
           })
         },
 
@@ -416,7 +422,7 @@ export default {
                       }
 
                       store.setInsights(insights);
-                      this.loader.hide()
+                      // this.loader.hide()
                       // request the user's preferences
                       this.getPreferences()
                     })

tests/unit/Navbar.spec.js

@@ -0,0 +1,42 @@
+import { expect } from 'chai'
+import { shallowMount, RouterLinkStub } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Navbar from '@/components/Navbar.vue'
+
+describe('Navbar.vue Component Test', () => {
+  let wrapper;
+  let componentInstance;
+  beforeEach(() => {
+    wrapper = shallowMount(Navbar, {
+      global: {
+        stubs: {
+          'router-link': RouterLinkStub
+        }
+      }
+    })
+    componentInstance = wrapper.vm;
+  })
+
+  it('Not logged in test', () => {
+    expect(wrapper.text()).to.include('Irish Rail Tracker');
+    expect(wrapper.text()).to.include('Home');
+    expect(wrapper.text()).to.include('Insights');
+    expect(wrapper.text()).to.include('Login');
+    expect(wrapper.text()).to.include('Sign Up');
+  }),
+
+  it('Logged in test', () => {
+    // re-render the component
+    wrapper.setData({isLoggedIn: true})
+    nextTick(() => {
+      expect(wrapper.text()).to.include('Irish Rail Tracker');
+      expect(wrapper.text()).to.include('Home');
+      expect(wrapper.text()).to.include('Insights');
+      expect(wrapper.text()).to.include('Account Settings');
+      expect(wrapper.text()).to.include('Logout');
+    })
+  })
+})
+
+
+// wrapper.find('input[type=checkbox]').setChecked();