Merge branch 'main' into insightsRevamp

.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
+      - name: Run Vue.js unit tests
-        run: npm run test
+        run: npm run test:unit
-        working-directory: ./functions
 
       - 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

@@ -8,44 +8,57 @@
   <div style="padding-bottom: 7px;" id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1" v-on:click.stop="handleClick">
     <div id="prefHeader">STATIONS</div>
       <div class="container-fluid" @change="decideShowStations();">
+        <div class="form-check form-switch">
+          <input @change="selectAllStations();" class="form-check-input" type="checkbox" role="switch" id="showAllStations" v-model="showAllStations"/>
+          <label class="form-check-label" for="showAllStations">All Stations</label>
+        </div>
+        <hr/>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showMainlandStations" v-model="showMainlandStations"/>
-          <label class="form-check-label" for="showMainlandStations">Mainline Stations</label>
+          <label class="form-check-label" for="showMainlandStations">Mainline</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showDARTStations" v-model="showDARTStations"/>
-          <label class="form-check-label" for="showDARTStations">DART Stations</label>
+          <label class="form-check-label" for="showDARTStations">DART</label>
         </div>
       </div>
+      <hr/>
       <div id="prefHeader">TRAINS</div>
       <div class="container-fluid" @change="decideShowTrains();">
+        <div class="form-check form-switch">
+          <input @change="selectAllTrains();" class="form-check-input" type="checkbox" role="switch" id="showAllTrains" v-model="showAllTrains"/>
+          <label class="form-check-label" for="showAllTrains">All Trains</label>
+        </div>
+        <hr/>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showMainland" v-model="showMainland"/>
-          <label class="form-check-label" for="showMainland">Mainline Trains</label>
+          <label class="form-check-label" for="showMainland">Mainline</label>
-        </div>
-        <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="showLate" v-model="showLate"/>
-          <label class="form-check-label" for="showLate">Late Trains</label>
-        </div>
-        <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="showOnTime" v-model="showOnTime"/>
-          <label class="form-check-label" for="showOnTime">On-time Trains</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showDART" v-model="showDART"/>
           <label class="form-check-label" for="showDART">DARTs</label>
         </div>
+        <hr/>
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" role="switch" id="showOnTime" v-model="showOnTime"/>
+          <label class="form-check-label" for="showOnTime">On-Time</label>
+        </div>
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" role="switch" id="showLate" v-model="showLate"/>
+          <label class="form-check-label" for="showLate">Late</label>
+        </div>
+        <hr/>
+        <div class="form-check form-switch">
+          <input class="form-check-input" type="checkbox" role="switch" id="showNotYetRunning" v-model="showNotYetRunning"/>
+          <label class="form-check-label" for="showNotYetRunning">Not-Yet Running</label>
+        </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showRunning" v-model="showRunning"/>
-          <label class="form-check-label" for="showRunning">Running Trains</label>
+          <label class="form-check-label" for="showRunning">Running</label>
         </div>
         <div class="form-check form-switch">
           <input class="form-check-input" type="checkbox" role="switch" id="showTerminated" v-model="showTerminated"/>
-          <label class="form-check-label" for="showTerminated">Terminated Trains</label>
+          <label class="form-check-label" for="showTerminated">Terminated</label>
-        </div>
-        <div class="form-check form-switch">
-          <input class="form-check-input" type="checkbox" role="switch" id="showNotYetRunning" v-model="showNotYetRunning"/>
-          <label class="form-check-label" for="showNotYetRunning">Not-yet Running Trains</label>
         </div>
       </div>
       <button id="savePref" class="btn btn-outline-info" v-if="store.loggedIn" @click="postPreferences()">Save Preferences</button>
@@ -157,8 +170,10 @@ export default {
           toast,
           loader,
 
+          showAllStations: true,
           showMainlandStations: true, 
           showDARTStations: true,
+          showAllTrains: true,
           showLate: true,
           showOnTime: true,
           showMainland: true,
@@ -201,7 +216,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 +245,12 @@ export default {
               this.decideShowStations()
               this.decideShowTrains()
               this.readyToDisplayMap = true
+              this.loader.hide()
             }
           })
           .catch((error) => {
             this.readyToDisplayMap = true
+            this.loader.hide()
           })
         },
 
@@ -289,6 +310,23 @@ export default {
           }
         },
 
+        // method to select all stations 
+        selectAllStations() {
+            this.showDARTStations = this.showAllStations; 
+            this.showMainlandStations = this.showAllStations;
+        },
+
+        // method to select all trains 
+        selectAllTrains() {
+          this.showLate = this.showAllTrains; 
+          this.showOnTime = this.showAllTrains;
+          this.showMainland = this.showAllTrains;
+          this.showDART = this.showAllTrains;
+          this.showRunning = this.showAllTrains;
+          this.showTerminated = this.showAllTrains;
+          this.showNotYetRunning = this.showAllTrains;
+        },
+
         // method to display a selected train
         getSelectedTrain(i) {
           store.setSelectedTrain(this.allTrains[i]);
@@ -416,7 +454,7 @@ export default {
                       }
 
                       store.setInsights(insights);
-                      this.loader.hide()
+                      // this.loader.hide()
                       // request the user's preferences
                       this.getPreferences()
                     })
@@ -569,6 +607,5 @@ export default {
   left:5%;
   top: 18%;
   }
-  
 }
 </style>

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();