Added unit test for functions

TODO: e2e testing and UI unit test

Author: soechun

package-lock.json

@@ -16,6 +16,9 @@
   "dependencies": {
     "bootstrap": "^4.0.0-beta.2",
     "bootstrap-vue": "^1.4.1",
+    "chai-as-promised": "^7.1.1",
+    "github-username-regex": "^1.0.0",
+    "karma-chrome-launcher": "^2.2.0",
     "vue": "^2.5.2",
     "vue-resource": "^1.3.5",
     "vue-router": "^3.0.1"
@@ -39,7 +42,7 @@
     "copy-webpack-plugin": "^4.0.1",
     "cross-env": "^5.0.1",
     "cross-spawn": "^5.0.1",
-    "css-loader": "^0.28.0",
+    "css-loader": "^0.28.9",
     "eslint": "^4.15.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-friendly-formatter": "^3.0.0",
@@ -55,14 +58,15 @@
     "html-webpack-plugin": "^2.30.1",
     "inject-loader": "^3.0.0",
     "karma": "^1.4.1",
+    "karma-chai-as-promised": "^0.1.2",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-phantomjs-shim": "^1.4.0",
     "karma-sinon-chai": "^1.3.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "^2.0.2",
+    "karma-webpack": "^2.0.9",
     "mocha": "^3.2.0",
     "nightwatch": "^0.9.12",
     "node-notifier": "^5.1.2",
@@ -79,12 +83,13 @@
     "shelljs": "^0.7.6",
     "sinon": "^4.0.0",
     "sinon-chai": "^2.8.0",
+    "style-loader": "^0.19.1",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
+    "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0"

package.json

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <input type="text" id="username" v-model="username" placeholder="github username"/>
+    <b-btn @click="findFriends" variant="info" class="m-1">
+      Find Friends
+    </b-btn>
+    <br/>
+    <br/>
+    <div v-if="error" id="error">
+      <div>{{errorMessage}}</div>
+    </div>
+    <div v-else-if="friends.length > 0" id="friend-list">
+      <div v-for="friend in friends"
+      :key="friend.login">
+        {{friend.login}}
+      </div>
+    </div>
+
+    <div v-if="loading" id="loading">
+        Searching Git Friends....
+    </div>
+  </div>
+</template>
+
+<script>
+
+import githubUsernameRegex from 'github-username-regex'
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      username: '',
+      error: false,
+      errorMessage: '',
+      loading: false,
+      friends: [],
+      githubURL: 'https://api.github.com/users/'
+    }
+  },
+  methods: {
+    // find a friend that u follow and follow u
+    matchFriends (followers, following) {
+      var followersHash = {}
+      for (var i = 0; i < followers.length; i++) {
+        followersHash[followers[i].login] = followers[i]
+      }
+      // use the hash table above to find out if u follow ur follower.
+      var friends = following.filter(function (each) {
+        if (followersHash[each.login]) {
+          return true
+        }
+      }, followersHash)
+      return friends
+    },
+    validUsername (username) {
+      return githubUsernameRegex.test(username)
+    },
+    async checkUserExists (username) {
+      try {
+        let user = await this.$http.get(this.githubURL + this.username)
+        if (user.data.login) {
+          return true
+        }
+        return false
+      } catch (error) {
+        return false
+      }
+    },
+    // main function to request api call and find out your git friends
+    async findFriends () {
+      this.error = false
+      this.errorMessage = ''
+      this.loading = true
+
+      // Check if username belongs to github
+      if (!this.validUsername(this.username)) {
+        this.error = true
+        this.errorMessage = 'This username seems wrong. Try again'
+        this.loading = false
+        return
+      }
+
+      // check if the user exists
+      let userExists = await this.checkUserExists(this.username)
+      if (!userExists) {
+        this.error = true
+        this.errorMessage = 'Sorry, this user does not exists.  You should go and get that username.'
+        this.loading = false
+        return
+      }
+
+      // Get followers and following
+      const followingAppend = '/following'
+      const followersAppend = '/followers'
+      let following = await this.$http.get(this.githubURL + this.username + followingAppend)
+      let followers = await this.$http.get(this.githubURL + this.username + followersAppend)
+
+      this.friends = this.matchFriends(followers.data, following.data)
+      if (this.friends.length < 1) {
+        this.error = true
+        this.errorMessage = 'Sorry to hear that you have no friend. add me @soechun'
+      }
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/GitFriend.vue

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import HelloWorld from '@/components/GitFriend'
 
 Vue.use(Router)
 

src/components/HelloWorld.vue

@@ -11,8 +11,19 @@ module.exports = function karmaConfig (config) {
     // 1. install corresponding karma launcher
     //    http://karma-runner.github.io/0.13/config/browsers.html
     // 2. add it to the `browsers` array below.
-    browsers: ['PhantomJS'],
-    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
+    browsers: ['Chrome'],
+    frameworks: ['mocha', 'sinon-chai','phantomjs-shim'],
+    plugins: [
+      require('karma-mocha'), 
+      require('karma-webpack'), 
+      require('karma-sourcemap-loader'),
+      require('karma-sinon-chai'),
+      require('karma-phantomjs-shim'),
+      require('karma-spec-reporter'),
+      require('karma-coverage'),
+      require('karma-phantomjs-launcher'),
+      require('karma-chrome-launcher')
+    ],
     reporters: ['spec', 'coverage'],
     files: ['./index.js'],
     preprocessors: {

src/router/index.js

@@ -0,0 +1,23 @@
+import GitFriend from '@/components/GitFriend'
+
+describe('GitFriend.vue', () => {
+  it('should return correct array that contains elements present on both side', () => {
+    expect(GitFriend.methods.matchFriends(
+      [{login: 1}, {login: 3}, {login: 2}],
+      [{login: 3}, {login: 2}])).deep.equal([{login: 3}, {login: 2}])
+  })
+  
+  it('should validate the username is acceptable to github', () => {
+    expect(GitFriend.methods.validUsername('soechun')).to.equal(true)
+    expect(GitFriend.methods.validUsername('#')).to.equal(false)
+  })
+
+  it('should check if the user exists', () => {
+    GitFriend.methods.checkUserExists('soechun').then(function (result) {
+      result.should.equal(true)
+    })
+    GitFriend.methods.checkUserExists('12312123123123123').then(function (result) {
+      result.should.equal(false)
+    })
+  })
+})