Merge pull request #79 from 0hAodha/updateTests

Add more unit tests and update integration tests

README.md

@@ -1,13 +1,6 @@
-# Manual Firebase Build & Deploy
+# Irish Rail Tracker
-`npm run build && firebase deploy`
+## Setup
-
+### Local Installation
-# Run Vue.js Unit Tests
-`npm run test:unit`
-
-# Run Firebase Integration Tests
-`cd functions && npm run test`
-
-# 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. 
@@ -18,9 +11,17 @@ You will need to click the "Populate Database" and "Fetch Data" buttons to get d
 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 
+### Manual Firebase Deployment
+`npm run build && firebase deploy`
+
+## Testing
+### Vue.js Unit Tests
+`npm run test:unit`
+
+## Firebase Integration Tests
+`cd functions && npm run test`
+
+## Links
 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)

functions/test/index.test.js

@@ -18,6 +18,12 @@ describe('Firebase cloud function tests', function() {
         expect(result.body.data[0]).haveOwnProperty('TrainCode');
         expect(result.body.data[0]).haveOwnProperty('TrainDate');
         expect(result.body.data[0]).haveOwnProperty('TrainType');
+        expect(result.body.data[0]).haveOwnProperty('Destination');
+        expect(result.body.data[0]).haveOwnProperty('Origin');
+
+        if (result.body.data[0]["TrainStatus"] != "N") {
+            expect(result.body.data[0]).haveOwnProperty('Punctuality');
+        }
     }),
 
     this.timeout(100000);

src/components/TrainSidebar.vue

@@ -53,14 +53,14 @@
           <div id="publicMessageIcon">
             <img id="publicMessageImage" src="../assets/publicMessageIcon.png">
           </div>
-          <p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
+          <p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>{{ store.selectedTrain["PublicMessage"][0] }}</p>
         </div>
 
         <div v-else id="notRunningPublicMessageDiv">
           <div id="publicMessageIcon">
             <img id="publicMessageImage" src="../assets/publicMessageIcon.png">
           </div>
-          <p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
+          <p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>{{ store.selectedTrain["PublicMessage"][0] }}</p>
         </div>
 
         <div v-if="store.selectedTrain['TrainStatus'][0] != 'N'" id="punctualityDiv">

src/pages/AccountPage.vue

@@ -204,7 +204,6 @@ export default {
 </script>
 
 <style scoped>
-
 h1 {
     color:black;
     text-align: center;
@@ -292,37 +291,33 @@ input {
 }
 
 @media screen and (max-width: 786px) {
-
-    
     #mainDiv{
-    position: inherit;
+        position: inherit;
-    padding: 15px;
+        padding: 15px;
-    background-color: rgb(255, 255, 255);
+        background-color: rgb(255, 255, 255);
-    width: 90%;
+        width: 90%;
-    height: 80%;
+        height: 80%;
-    top: 14%;
+        top: 14%;
-    text-align: left;
+        text-align: left;
-    box-shadow: 0 0 4px 4px #b6b6b6;
+        box-shadow: 0 0 4px 4px #b6b6b6;
     }
 
     #delAcc {
-    position: absolute;
+        position: absolute;
-    bottom: 10px;
+        bottom: 10px;
-    left:10px;
+        left:10px;
-    height: 10%;
+        height: 10%;
     }
 
     #delPref {
-    width: 50%;
+        width: 50%;
-    left: 150px;
+        left: 150px;
-    right: 10px;
+        right: 10px;
-    height: 10%;
+        height: 10%;
     }
 
     button{
-    font-size: 12px;
+        font-size: 12px;
     }
-
 }
-
+</style>
-</style>

src/pages/MapPage.vue

@@ -16,7 +16,7 @@
       <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">Show Stations</label>
+          <label class="form-check-label" for="showAllStations">All Stations</label>
         </div>
         <hr/>
         <div class="form-check form-switch">
@@ -33,7 +33,7 @@
       <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">Show Trains</label>
+          <label class="form-check-label" for="showAllTrains">All Trains</label>
         </div>
         <hr/>
         <div class="form-check form-switch">
@@ -177,7 +177,7 @@ export default {
           zoom: 7,
           rotation: 0,
           minZoom:6,
-          maxZoom:10,
+          maxZoom:13,
 
           showTrains: [],
           showStations: [],

src/pages/SignUpPage.vue

@@ -5,14 +5,14 @@
     <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="avatar">
     <h1>Sign Up</h1>
     <p>Email Address</p>
-    <input type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
+    <input id="emailInput" type="email" v-model="email" aria-describedby="emailHelp" placeholder="Enter email">
     <p>Password (6+ characters)</p>
     <div id="imgDiv">
         <img v-if="showPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showPassword = !this.showPassword" alt="show">
         <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showPassword = !this.showPassword">
       </div>
-    <input v-if="showPassword" type="text" v-model="password" placeholder="Enter password">
+    <input id="passwordInput" v-if="showPassword" type="text" v-model="password" placeholder="Enter password">
-    <input v-else type="password" v-model="password" placeholder="Enter password">
+    <input id="passwordInput" v-else type="password" v-model="password" placeholder="Enter password">
     <input @click="signup" type="submit" name="" value="Sign Up">
     <a><router-link to="/login">Already have an account?</router-link></a>
   </div>

tests/unit/404Page.spec.js

@@ -0,0 +1,20 @@
+import { expect } from 'chai'
+import { shallowMount, RouterLinkStub } from '@vue/test-utils'
+import page404 from '@/pages/404Page.vue'
+
+describe('404Page.vue Component Test', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(page404, {
+      global: {
+        stubs: {
+          'router-link': RouterLinkStub
+        }
+      }
+    })
+  })
+
+  it('Mount test', () => {
+    expect(wrapper.text()).to.include('404');
+  })
+})

tests/unit/LoginPage.spec.js

@@ -0,0 +1,35 @@
+import { expect } from 'chai'
+import { shallowMount, RouterLinkStub } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import LoginPage from '@/pages/LoginPage.vue'
+
+describe('LoginPage.vue Component Test', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(LoginPage, {
+      global: {
+        stubs: {
+          'router-link': RouterLinkStub
+        }
+      }
+    })
+  })
+
+  it('Mount test', () => {
+    expect(wrapper.text()).to.include('Login');
+    expect(wrapper.text()).to.include('Email Address');
+    expect(wrapper.text()).to.include('Password');
+    expect(wrapper.text()).to.include('Forgot password?');
+    expect(wrapper.text()).to.include('Don\'t have an account?');
+  }),
+
+  it('Forgot password test', () => {
+    wrapper.setData({forgotPassword: true})
+    nextTick(() => {
+      expect(wrapper.text()).to.include('Forgot Password');
+      expect(wrapper.text()).to.include('Email Address');
+      expect(wrapper.text()).to.include('Send Reset Email');
+      expect(wrapper.text()).to.include('Go Back');
+    })
+  })
+})

tests/unit/Navbar.spec.js

@@ -36,7 +36,4 @@ describe('Navbar.vue Component Test', () => {
       expect(wrapper.text()).to.include('Logout');
     })
   })
-})
+})
-
-
-// wrapper.find('input[type=checkbox]').setChecked();

tests/unit/SignUpPage.spec.js

@@ -0,0 +1,23 @@
+import { expect } from 'chai'
+import { shallowMount, RouterLinkStub } from '@vue/test-utils'
+import SignUpPage from '@/pages/SignUpPage.vue'
+
+describe('SignUpPage.vue Component Test', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(SignUpPage, {
+      global: {
+        stubs: {
+          'router-link': RouterLinkStub
+        }
+      }
+    })
+  })
+
+  it('Mount test', async() => {
+    expect(wrapper.text()).to.include('Sign Up');
+    expect(wrapper.text()).to.include('Email Address');
+    expect(wrapper.text()).to.include('Password');
+    expect(wrapper.text()).to.include('Already have an account?');
+  })
+})