test: initialize e2e-testing with login page (#698)

Fixes: #697

e2e/protractor.conf.js

@@ -4,7 +4,7 @@
 const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
-  allScriptsTimeout: 11000,
+  allScriptsTimeout: 60000,
   specs: [
     './src/**/*.e2e-spec.ts'
   ],
@@ -17,7 +17,7 @@ exports.config = {
   framework: 'jasmine2',
   jasmineNodeOpts: {
     showColors: true,
-    defaultTimeoutInterval: 30000,
+    defaultTimeoutInterval: 60000,
     print: function() {}
   },
   onPrepare() {

e2e/src/app.e2e-spec.ts

@@ -1,21 +0,0 @@
-import { browser } from 'protractor';
-import { AppPage } from './app.po';
-
-describe('app', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display login page and login into app', () => {
-    page.navigateTo();
-    expect(browser.getCurrentUrl()).toContain('/login');
-    page.login();
-  });
-
-  it('should display hello message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Hello world !');
-  });
-});

e2e/src/app.po.ts

@@ -1,32 +0,0 @@
-/*
- * Use the Page Object pattern to define the page under test.
- * See docs/coding-guide/e2e-tests.md for more info.
- */
-
-import { browser, element, by } from 'protractor';
-
-export class AppPage {
-  usernameField = element(by.css('input[formControlName="username"]'));
-  passwordField = element(by.css('input[formControlName="password"]'));
-  loginButton = element(by.css('button[type="submit"]'));
-
-  constructor() {
-    // Forces default language
-    this.navigateTo();
-    browser.executeScript(() => localStorage.setItem('language', 'en-US'));
-  }
-
-  navigateTo() {
-    return browser.get('/');
-  }
-
-  login() {
-    this.usernameField.sendKeys('test');
-    this.passwordField.sendKeys('123');
-    this.loginButton.click();
-  }
-
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
-}

e2e/src/login/login.e2e-spec.ts

@@ -0,0 +1,24 @@
+import { browser, by, element } from 'protractor';
+import { LoginPage } from './login.po';
+
+describe('app', () => {
+  let page: LoginPage;
+
+  beforeAll(() => {
+    page = new LoginPage();
+  });
+
+  it('should display login page', () => {
+    expect(browser.getCurrentUrl()).toContain('/login');
+  });
+
+  it('should display error with invalid credentials', () => {
+    page.invalidLogin();
+    expect(element(by.tagName('mat-error')).isPresent()).toBe(true);
+  });
+
+  it('should login into the app', () => {
+    page.validLogin();
+  });
+
+});

e2e/src/login/login.po.ts

@@ -0,0 +1,41 @@
+/** Protractor Imports */
+import { browser, element, by } from 'protractor';
+
+/**
+ * Login Page e2e page object
+ */
+export class LoginPage {
+
+  /** username field */
+  usernameField = element(by.css('input[formControlName="username"]'));
+  /** password field */
+  passwordField = element(by.css('input[formControlName="password"]'));
+  /** login button */
+  loginButton = element(by.cssContainingText('.login-button', 'Login'));
+
+  /** Forces default language */
+  constructor() {
+    this.navigateTo();
+    browser.executeScript(() => localStorage.setItem('language', 'en-US'));
+  }
+
+  /** Navigate to specified url */
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  /** Login with correct credentials */
+  validLogin() {
+    this.usernameField.sendKeys('mifos');
+    this.passwordField.sendKeys('password');
+    this.loginButton.click();
+  }
+
+  /** Login with incorrect credentials */
+  invalidLogin() {
+    this.usernameField.sendKeys('test');
+    this.passwordField.sendKeys('123');
+    this.loginButton.click();
+  }
+
+}