implement e2e tests of login and register

jamesjieye · jamesjieye · commit 70d9be67deed · 2018-08-27T03:26:25.000+08:00
diff --git a/front-end/.gitignore b/front-end/.gitignore
@@ -3,6 +3,7 @@ node_modules
 /dist
 
 /tests/e2e/reports/
+/tests/e2e/data/user.js
 selenium-debug.log
 
 # local env files
diff --git a/front-end/nightwatch.config.js b/front-end/nightwatch.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  test_settings: {
+    default: {
+      launch_url: (process.env.LAUNCH_URL || process.env.VUE_DEV_SERVER_URL)
+    },
+    chrome: {
+      desiredCapabilities: {
+        browserName: "chrome",
+        chromeOptions: {
+          args:  ["headless", "no-sandbox", "disable-gpu"]
+        }
+      }
+    }
+  },
+  page_objects_path: 'tests/e2e/page-objects',
+}
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
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
+    "test:integration": "vue-cli-service test:e2e --url http://localhost:8080/",
     "test": "npm run test:unit && npm run test:e2e"
   },
   "dependencies": {
@@ -30,8 +31,11 @@
     "@vue/test-utils": "^1.0.0-beta.24",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^23.0.1",
+    "chance": "^1.0.16",
+    "del": "^3.0.0",
     "moxios": "^0.4.0",
     "node-sass": "^4.9.0",
+    "rw": "^1.3.3",
     "sass-loader": "^7.0.1",
     "vue-template-compiler": "^2.5.17"
   }
diff --git a/front-end/src/router.js b/front-end/src/router.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import HomePage from '@/views/HomePage'
 import LoginPage from '@/views/LoginPage'
 import RegisterPage from '@/views/RegisterPage'
 
@@ -9,6 +10,10 @@ export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes: [{
+    path: '/',
+    name: 'HomePage',
+    component: HomePage
+  }, {
     path: '/login',
     name: 'LoginPage',
     component: LoginPage
diff --git a/front-end/src/views/HomePage.vue b/front-end/src/views/HomePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>Home Page</div>
+  <div><h1 class="page-title">Home Page</h1></div>
 </template>
 
 <script>
diff --git a/front-end/tests/e2e/data/.gitkeep b/front-end/tests/e2e/data/.gitkeep
diff --git a/front-end/tests/e2e/page-objects/HomePage.js b/front-end/tests/e2e/page-objects/HomePage.js
@@ -0,0 +1,10 @@
+module.exports = {
+  url: function () {
+    return this.api.launchUrl
+  },
+  elements: {
+    pageTitle: {
+      selector: 'h1.page-title'
+    }
+  }
+}
diff --git a/front-end/tests/e2e/page-objects/LoginPage.js b/front-end/tests/e2e/page-objects/LoginPage.js
@@ -0,0 +1,21 @@
+module.exports = {
+  url: function () {
+    return this.api.launchUrl + 'login'
+  },
+  elements: {
+    app: '#app',
+    logoImage: 'img.logo',
+    usernameInput: '#username',
+    passwordInput: '#password',
+    submitButton: 'button[type=submit]',
+    formError: '.failed'
+  },
+  commands: [{
+    login: function (username, password) {
+      this
+        .setValue('@usernameInput', username)
+        .setValue('@passwordInput', password)
+        .click('@submitButton')
+    }
+  }]
+}
diff --git a/front-end/tests/e2e/page-objects/RegisterPage.js b/front-end/tests/e2e/page-objects/RegisterPage.js
@@ -0,0 +1,37 @@
+module.exports = {
+  url: function () {
+    return this.api.launchUrl + 'register'
+  },
+  elements: {
+    app: {
+      selector: '#app'
+    },
+    logoImage: {
+      selector: 'img.logo'
+    },
+    usernameInput: {
+      selector: '#username'
+    },
+    emailAddressInput: {
+      selector: '#emailAddress'
+    },
+    passwordInput: {
+      selector: '#password'
+    },
+    submitButton: {
+      selector: 'button[type=submit]'
+    },
+    formError: {
+      selector: '.failed'
+    }
+  },
+  commands: [{
+    register: function (username, emailAddress, password) {
+      this
+        .setValue('@usernameInput', username)
+        .setValue('@emailAddressInput', emailAddress)
+        .setValue('@passwordInput', password)
+        .click('@submitButton')
+    }
+  }]
+}
diff --git a/front-end/tests/e2e/specs/0.register.e2e.js b/front-end/tests/e2e/specs/0.register.e2e.js
@@ -0,0 +1,67 @@
+const path = require('path')
+const del = require('del')
+const Chance = require('chance')
+const rw = require('rw')
+
+const user = {}
+
+module.exports = {
+  before: function () {
+    const userDataPath = path.resolve('tests/e2e/data/user.js')
+    del.sync([userDataPath])
+    // Generating user data
+    const chance = new Chance()
+    const name = chance.name().split(' ')
+    user.firstName = name[0]
+    user.lastName = name[1]
+    user.username = name[0].toLowerCase() + chance.integer({min: 0, max: 1000000})
+    user.emailAddress = user.username + '@e2e.taskagile.com'
+    user.password = 'MyPassword!'
+
+    let fileContent = '// This file is auto generated by ' + path.basename(__filename) + '\n'
+    fileContent += '/* eslint-disable */\n'
+    fileContent += 'module.exports = ' + JSON.stringify(user)
+    fileContent += '\n/* eslint-enable */\n'
+    rw.writeFileSync(userDataPath, fileContent, 'utf8')
+  },
+  'register page renders elements': function (browser) {
+    const registerPage = browser.page.RegisterPage()
+
+    registerPage
+      .navigate()
+      .waitForElementVisible('@app', 500)
+      .assert.visible('@usernameInput')
+      .assert.visible('@emailAddressInput')
+      .assert.visible('@passwordInput')
+      .assert.visible('@submitButton')
+      .assert.hidden('@formError')
+
+    browser.end()
+  },
+  'register with invalid data': function (browser) {
+    const registerPage = browser.page.RegisterPage()
+
+    registerPage
+      .navigate()
+      .register('', '', '')
+
+    // This assertion is just to make sure the page doesn't
+    // redirect to login page. It would be better to assertion
+    // the validation error for each field individually.
+    browser
+      .assert.urlEquals(browser.launchUrl + 'register')
+      .end()
+  },
+  'register with valid data': function (browser) {
+    const registerPage = browser.page.RegisterPage()
+
+    registerPage
+      .navigate()
+      .register(user.username, user.emailAddress, user.password)
+
+    browser.pause(2000)
+    browser
+      .assert.urlEquals(browser.launchUrl + 'login')
+      .end()
+  }
+}
diff --git a/front-end/tests/e2e/specs/1.login.e2e.js b/front-end/tests/e2e/specs/1.login.e2e.js
@@ -0,0 +1,63 @@
+const data = require('../data/user')
+
+module.exports = {
+  'login page renders elements': function (browser) {
+    const loginPage = browser.page.LoginPage()
+
+    loginPage
+      .navigate()
+      .waitForElementVisible('@app', 500)
+      .assert.visible('@usernameInput')
+      .assert.visible('@passwordInput')
+      .assert.visible('@submitButton')
+      .assert.hidden('@formError')
+
+    browser.end()
+  },
+  'login with invalid credentials': function (browser) {
+    const loginPage = browser.page.LoginPage()
+    loginPage
+      .navigate()
+      .login('not-exist', 'incorrect')
+
+    browser.pause(500)
+
+    loginPage
+      .assert.visible('@formError')
+      .assert.containsText('@formError', 'Request failed with status code 400')
+
+    browser
+      .assert.urlEquals(browser.launchUrl + 'login')
+      .end()
+  },
+  'login with username': function (browser) {
+    const loginPage = browser.page.LoginPage()
+    const homePage = browser.page.HomePage()
+    loginPage
+      .navigate()
+      .login(data.username, data.password)
+
+    browser.pause(2000)
+
+    homePage
+      .navigate()
+      .expect.element('@pageTitle').text.to.contain('Home Page')
+
+    browser.end()
+  },
+  'login with email address': function (browser) {
+    const loginPage = browser.page.LoginPage()
+    const homePage = browser.page.HomePage()
+    loginPage
+      .navigate()
+      .login(data.emailAddress, data.password)
+
+    browser.pause(2000)
+
+    homePage
+      .navigate()
+      .expect.element('@pageTitle').text.to.contain('Home Page')
+
+    browser.end()
+  }
+}
diff --git a/front-end/tests/e2e/specs/login.e2e.js b/front-end/tests/e2e/specs/login.e2e.js
diff --git a/pom.xml b/pom.xml
@@ -168,7 +168,7 @@
               <executable>npm</executable>
               <arguments>
                 <argument>run</argument>
-                <argument>test:e2e</argument>
+                <argument>test:integration</argument>
               </arguments>
             </configuration>
           </execution>
