build registration form

jamesjieye · jamesjieye · commit 7443b10c0e63 · 2018-08-26T10:13:09.000+08:00
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
diff --git a/front-end/package.json b/front-end/package.json
@@ -11,6 +11,7 @@
     "test": "npm run test:unit && npm run test:e2e"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
     "jquery": "^3.3.1",
     "popper.js": "^1.14.4",
@@ -25,9 +26,10 @@
     "@vue/cli-plugin-unit-jest": "^3.0.1",
     "@vue/cli-service": "^3.0.1",
     "@vue/eslint-config-standard": "^3.0.1",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/test-utils": "^1.0.0-beta.24",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^23.0.1",
+    "moxios": "^0.4.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "vue-template-compiler": "^2.5.17"
diff --git a/front-end/src/main.js b/front-end/src/main.js
@@ -2,6 +2,17 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import axios from 'axios'
+
+// Bootstrap axios
+axios.defaults.baseURL = '/api'
+axios.defaults.headers.common.Accept = 'application/json'
+axios.interceptors.response.use(
+  response => response,
+  (error) => {
+    return Promise.reject(error)
+  }
+)
 
 Vue.config.productionTip = false
 
diff --git a/front-end/src/services/registration/__mocks__/index.js b/front-end/src/services/registration/__mocks__/index.js
@@ -0,0 +1,9 @@
+export default {
+  register (detail) {
+    return new Promise((resolve, reject) => {
+      detail.emailAddress === 'sunny@local'
+        ? resolve({result: 'success'})
+        : reject(new Error('User already exist'))
+    })
+  }
+}
diff --git a/front-end/src/services/registration/index.js b/front-end/src/services/registration/index.js
@@ -0,0 +1,17 @@
+import axios from 'axios'
+
+export default {
+  /**
+   * Register a new user
+   * @param {Object} detail registration detail
+   */
+  register (detail) {
+    return new Promise((resolve, reject) => {
+      axios.post('/registrations', detail).then(({data}) => {
+        resolve(data)
+      }).catch((error) => {
+        reject(error)
+      })
+    })
+  }
+}
diff --git a/front-end/src/views/RegisterPage.vue b/front-end/src/views/RegisterPage.vue
@@ -6,18 +6,19 @@
           <img class="logo" src="/static/images/logo.png">
           <div class="tagline">Open source task management tool</div>
         </div>
-        <form>
+        <form @submit.prevent="submitForm">
+          <div v-show="errorMessage" class="alert alert-danger failed">{{ errorMessage }}</div>
           <div class="form-group">
             <label for="username">Username</label>
-            <input type="text" class="form-control" id="username">
+            <input type="text" class="form-control" id="username" v-model="form.username">
           </div>
           <div class="form-group">
             <label for="emailAddress">Email address</label>
-            <input type="email" class="form-control" id="emailAddress">
+            <input type="email" class="form-control" id="emailAddress" v-model="form.emailAddress">
           </div>
           <div class="form-group">
             <label for="password">Password</label>
-            <input type="password" class="form-control" id="password">
+            <input type="password" class="form-control" id="password" v-model="form.password">
           </div>
           <button type="submit" class="btn btn-primary btn-block">Create account</button>
           <p class="accept-terms text-muted">By clicking “Create account”, you agree to our <a href="#">terms of service</a> and <a href="#">privacy policy</a>.</p>
@@ -38,8 +39,29 @@
 </template>
 
 <script>
+import registrationService from '@/services/registration'
+
 export default {
-  name: "RegisterPage"
+  name: 'RegisterPage',
+  data: function () {
+    return {
+      form: {
+        username: '',
+        emailAddress: '',
+        password: ''
+      },
+      errorMessage: ''
+    }
+  },
+  methods: {
+    submitForm () {
+      registrationService.register(this.form).then(() => {
+        this.$router.push({name: 'LoginPage'})
+      }).catch((error) => {
+        this.errorMessage = 'Failed to register user. ' + error.message
+      })
+    }
+  }
 }
 </script>
 
@@ -61,13 +83,15 @@ export default {
     line-height: 180%;
     color: #666;
   }
-  .logo {
+
+ .logo {
     max-width: 150px;
     margin: 0 auto;
   }
 }
 
 .register-form {
+
   .form-group label {
     font-weight: bold;
     color: #555;
@@ -94,4 +118,5 @@ export default {
     color: #666;
   }
 }
+
 </style>
diff --git a/front-end/tests/unit/RegisterPage.spec.js b/front-end/tests/unit/RegisterPage.spec.js
@@ -1,18 +1,94 @@
-import Vue from 'vue'
+import { mount, createLocalVue } from '@vue/test-utils'
 import RegisterPage from '@/views/RegisterPage'
+import VueRouter from 'vue-router'
+
+// Adding Vue Router to the test so that
+// we can access vm.$router
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+const router = new VueRouter()
+
+// Mock dependency registratioService
+jest.mock('@/services/registration')
 
 describe('RegisterPage.vue', () => {
-  it('should render correct contents', () => {
-    const Constructor = Vue.extend(RegisterPage)
-    const vm = new Constructor().$mount()
-    expect(vm.$el.querySelector('.logo').getAttribute('src'))
+  let wrapper
+  let fieldUsername
+  let fieldEmailAddress
+  let fieldPassword
+  let buttonSubmit
+
+  beforeEach(() => {
+    wrapper = mount(RegisterPage, {
+      localVue,
+      router
+    })
+    fieldUsername = wrapper.find('#username')
+    fieldEmailAddress = wrapper.find('#emailAddress')
+    fieldPassword = wrapper.find('#password')
+    buttonSubmit = wrapper.find('form button[type="submit"]')
+  })
+
+  afterAll(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('should render registration form', () => {
+    expect(wrapper.find('.logo').attributes().src)
       .toEqual('/static/images/logo.png')
-    expect(vm.$el.querySelector('.tagline').textContent)
+    expect(wrapper.find('.tagline').text())
       .toEqual('Open source task management tool')
-    expect(vm.$el.querySelector('#username').value).toEqual('')
-    expect(vm.$el.querySelector('#emailAddress').value).toEqual('')
-    expect(vm.$el.querySelector('#password').value).toEqual('')
-    expect(vm.$el.querySelector('form button[type="submit"]').textContent)
-      .toEqual('Create account')
+    expect(fieldUsername.element.value).toEqual('')
+    expect(fieldEmailAddress.element.value).toEqual('')
+    expect(fieldPassword.element.value).toEqual('')
+    expect(buttonSubmit.text()).toEqual('Create account')
+  })
+
+  it('should contain data model with initial values', () => {
+    expect(wrapper.vm.form.username).toEqual('')
+    expect(wrapper.vm.form.emailAddress).toEqual('')
+    expect(wrapper.vm.form.password).toEqual('')
+  })
+
+  it('should have form inputs bound with data model', () => {
+    const username = 'sunny'
+    const emailAddress = 'sunny@local'
+    const password = 'VueJsRocks!'
+
+    wrapper.vm.form.username = username
+    wrapper.vm.form.emailAddress = emailAddress
+    wrapper.vm.form.password = password
+    expect(fieldUsername.element.value).toEqual(username)
+    expect(fieldEmailAddress.element.value).toEqual(emailAddress)
+    expect(fieldPassword.element.value).toEqual(password)
+  })
+
+  it('should have form submit event handler `submitForm`', () => {
+    const stub = jest.fn()
+    wrapper.setMethods({submitForm: stub})
+    buttonSubmit.trigger('submit')
+    expect(stub).toBeCalled()
+  })
+
+  it('should register when it is a new user', () => {
+    const stub = jest.fn()
+    wrapper.vm.$router.push = stub
+    wrapper.vm.form.username = 'sunny'
+    wrapper.vm.form.emailAddress = 'sunny@local'
+    wrapper.vm.form.password = 'Jest!'
+    wrapper.vm.submitForm()
+    wrapper.vm.$nextTick(() => {
+      expect(stub).toHaveBeenCalledWith({name: 'LoginPage'})
+    })
+  })
+
+  it('should fail it is not a new user', () => {
+    // In the mock, only sunny@local is new user
+    wrapper.vm.form.emailAddress = 'ted@local'
+    expect(wrapper.find('.failed').isVisible()).toBe(false)
+    wrapper.vm.submitForm()
+    wrapper.vm.$nextTick(null, () => {
+      expect(wrapper.find('.failed').isVisible()).toBe(true)
+    })
   })
 })
diff --git a/front-end/tests/unit/services.registration.spec.js b/front-end/tests/unit/services.registration.spec.js
@@ -0,0 +1,42 @@
+import moxios from 'moxios'
+import registrationService from '@/services/registration'
+
+describe('services/registration', () => {
+  beforeEach(() => {
+    moxios.install()
+  })
+
+  afterEach(() => {
+    moxios.uninstall()
+  })
+
+  it('should pass the response to caller when request succeeded', () => {
+    expect.assertions(2)
+    moxios.wait(() => {
+      let request = moxios.requests.mostRecent()
+      expect(request).toBeTruthy()
+      request.respondWith({
+        status: 200,
+        response: {result: 'success'}
+      })
+    })
+    return registrationService.register().then(data => {
+      expect(data.result).toEqual('success')
+    })
+  })
+
+  it('should propagate the error to caller when request failed', () => {
+    expect.assertions(2)
+    moxios.wait(() => {
+      let request = moxios.requests.mostRecent()
+      expect(request).toBeTruthy()
+      request.reject({
+        status: 400,
+        response: {message: 'Bad request'}
+      })
+    })
+    return registrationService.register().catch(error => {
+      expect(error.response.message).toEqual('Bad request')
+    })
+  })
+})
