Move network selection to login module - Closes #89

src/app/components/login/login.js

@@ -11,21 +11,32 @@ app.component('login', {
     onLogin: '&',
   },
   controller: class login {
-    constructor($scope, $rootScope, $timeout, $document, $mdDialog, $mdMedia, $cookies) {
+    constructor($scope, $rootScope, $timeout, $document, $mdDialog, $mdMedia, $cookies, $peers) {
       this.$scope = $scope;
       this.$rootScope = $rootScope;
       this.$timeout = $timeout;
       this.$document = $document;
       this.$mdDialog = $mdDialog;
       this.$mdMedia = $mdMedia;
       this.$cookies = $cookies;
+      this.$peers = $peers;
 
       this.$scope.$watch('$ctrl.input_passphrase', this.isValidPassphrase.bind(this));
       this.$timeout(this.devTestAccount.bind(this), 200);
 
       this.$scope.$watch(() => this.$mdMedia('xs') || this.$mdMedia('sm'), (wantsFullScreen) => {
         this.$scope.customFullscreen = wantsFullScreen === true;
       });
+
+      this.$scope.$watch('$ctrl.$peers.currentPeerConfig', () => {
+        this.$peers.setActive(this.$peers.currentPeerConfig);
+      });
+
+      $scope.$watch('$ctrl.$peers.stack', (val) => {
+        if (val && !this.$peers.currentPeerConfig.node) {
+          this.$peers.setActive($peers.stack.official[0]);
+        }
+      });
     }
 
     reset() {

src/app/components/login/login.pug

@@ -2,10 +2,15 @@ md-card
   md-card-title
     md-card-title-text
       span.md-title Sign In
-  md-card-content
+  md-card-content(flex='100', flex-gt-sm='70', flex-offset-gt-sm='15')
     form(ng-submit='$ctrl.doTheLogin()')
       md-input-container.md-block(md-is-error='$ctrl.valid === 0')
-        label Enter your passphrase
+        label.select Choose your network node
+        md-select(ng-model='$ctrl.$peers.currentPeerConfig', aria-label='Peer')
+          md-optgroup(ng-repeat='(name, peers) in $ctrl.$peers.stack', ng-if='peers.length', label='{{ name }}')
+            md-option(ng-repeat='peer in peers', ng-value='peer') {{ peer.node }}{{ peer.port ? ':' + peer.port : '' }}
+      md-input-container.md-block(md-is-error='$ctrl.valid === 0')
+        label.pass Enter your passphrase
         input(type="{{ $ctrl.show_passphrase ? 'text' : 'password' }}", ng-model='$ctrl.input_passphrase', ng-disabled='$ctrl.generatingNewPassphrase', autofocus)
       md-input-container.md-block
         md-checkbox.md-primary(ng-model="$ctrl.show_passphrase", aria-label="Show passphrase") Show passphrase

src/app/components/main/main.js

@@ -16,14 +16,19 @@ app.component('main', {
       this.error = error;
 
       this.$scope.$on('login', this.login.bind(this));
-      this.$scope.$on('peerUpdate', this.update.bind(this));
-
-      $scope.$watch('$ctrl.$peers.active', (peer, old) => {
-        if (peer && old) {
-          this.$peers.check();
-          this.$rootScope.$broadcast('peerUpdate');
-        }
+      this.$scope.$on('peerUpdate', () => {
+        this.update.bind(this);
       });
+
+      /**
+       * Since we're setting network nodes in login we won't need this one
+       */
+      // $scope.$watch('$ctrl.$peers.active', (peer, old) => {
+      //   if (peer && old) {
+      //     this.$peers.check();
+      //     this.$rootScope.$broadcast('peerUpdate');
+      //   }
+      // });
     }
 
     reset() {
@@ -65,7 +70,6 @@ app.component('main', {
 
     update() {
       this.reset();
-
       return this.$peers.active.getAccountPromise(this.address)
         .then((res) => {
           this.account = res;

src/app/components/top/top.js

@@ -6,12 +6,8 @@ app.component('top', {
     account: '<',
   },
   controller: class top {
-    constructor($peers, $scope) {
+    constructor($peers) {
       this.$peers = $peers;
-
-      $scope.$watch('$ctrl.$peers.currentPeerConfig', () => {
-        this.$peers.setActive(this.$peers.currentPeerConfig);
-      });
     }
   },
 });

src/app/components/top/top.pug

@@ -9,9 +9,7 @@ md-content(layout='column', layout-gt-xs='row')
         i.material-icons.offline(ng-show='!$ctrl.$peers.online') error
         i.material-icons.online(ng-show='$ctrl.$peers.online') check circle
       span.md-title.title Peer
-      md-select(ng-model='$ctrl.$peers.currentPeerConfig', aria-label='Peer')
-        md-optgroup(ng-repeat='(name, peers) in $ctrl.$peers.stack', ng-if='peers.length', label='{{ name }}')
-          md-option(ng-repeat='peer in peers', ng-value='peer') {{ peer.node }}{{ peer.port ? ':' + peer.port : '' }}
+      div.address.value {{ $ctrl.$peers.currentPeerConfig.node }}:{{ $ctrl.$peers.currentPeerConfig.port }}
   md-card.offline-hide(flex-gt-xs=33)
     md-card-content(layout='column', layout-align='center center')
       span.md-title.title Balance

src/karma.conf.js

@@ -95,6 +95,7 @@ module.exports = function (config) {
     // If true, Karma captures browsers, runs the tests and exits
     singleRun: !opts.live,
     client: {
+      captureConsole: true,
       mocha: {
         opts: 'test/mocha.opts', // You can set opts to equal true then plugin will load opts from default location 'test/mocha.opts'
       },

src/spec/spec.js

@@ -28,6 +28,7 @@ function checkErrorMessage(message) {
 
 function launchApp() {
   browser.ignoreSynchronization = true;
+  browser.driver.manage().window().setSize(1000, 1000);
   browser.get('http://localhost:8080#?peerStack=localhost');
 }
 
@@ -83,11 +84,15 @@ function testNewAccount() {
   launchApp();
 
   element.all(by.css('.md-button.md-primary')).get(0).click();
+  /**
+   * To generate a random pattern of mousemove events, we're randomizing the x,y pairs that
+   * based on even/odd valkuds of i will locate right/left halves of screen
+   */
   for (let i = 0; i < 250; i++) {
     browser.actions()
     .mouseMove(element(by.css('body')), {
-      x: Math.floor(Math.random() * 1000),
-      y: Math.floor(Math.random() * 1000),
+      x: 500 + (Math.floor((((i % 2) * 2) - 1) * (249 + (Math.random() * 250)))),
+      y: 500 + (Math.floor((((i % 2) * 2) - 1) * (249 + (Math.random() * 250)))),
     }).perform();
     browser.sleep(5);
   }
@@ -120,22 +125,19 @@ function testAddress() {
 }
 
 function testPeer() {
-  login(masterAccount);
-  waitForElemAndCheckItsText('.peer md-select-value .md-text', 'localhost:4000');
+  expect(element.all(by.css('form md-select md-select-value span:first-child')).get(0).getText()).toEqual('Choose your network node');
 }
 
 function testChangePeer() {
-  login(masterAccount);
-
-  const peerElem = element(by.css('.peer md-select-value'));
-  browser.wait(EC.presenceOf(peerElem), waitTime);
+  const peerElem = element(by.css('form md-select'));
+  // browser.wait(EC.presenceOf(peerElem), waitTime);
   peerElem.click();
 
   const optionElem = element.all(by.css('md-select-menu md-optgroup md-option')).get(0);
   browser.wait(EC.presenceOf(optionElem), waitTime);
   optionElem.click();
 
-  waitForElemAndCheckItsText('.peer md-select-value .md-text', 'node01.lisk.io');
+  waitForElemAndCheckItsText('form md-select-value .md-text', 'node01.lisk.io');
 }
 
 function testShowBalance() {
@@ -177,16 +179,17 @@ function testLoadMoreTransactions() {
   const moreButton = element(by.css('transactions button.more'));
   browser.wait(EC.presenceOf(moreButton), waitTime);
   moreButton.click();
+  browser.sleep(200);
 
   expect(element.all(by.css('transactions table tbody tr')).count()).toEqual(20);
 }
 
 describe('Lisk Nano functionality', () => {
   it('should allow to login', testLogin);
   it('should allow to logout', testLogout);
-  it('should show address', testAddress);
   it('should show peer', testPeer);
   it('should allow to change peer', testChangePeer);
+  it('should show address', testAddress);
   it('should show balance', testShowBalance);
   it('should allow to send transaction when enough funds and correct address form', testSend);
   it('should not allow to send transaction when not enough funds', testSendWithNotEnoughFunds);

src/test/components/login/login.spec.js

@@ -32,9 +32,14 @@ describe('Login component', () => {
     expect(element.find('.md-title').text()).to.equal(HEADER_TEXT);
   });
 
-  const LABEL_TEXT = 'Enter your passphrase';
-  it(`should contain a form with label saying "${LABEL_TEXT}"`, () => {
-    expect(element.find('form label').text()).to.equal(LABEL_TEXT);
+  const PASS_LABEL_TEXT = 'Enter your passphrase';
+  it(`should contain a form input with label saying "${PASS_LABEL_TEXT}"`, () => {
+    expect(element.find('form md-input-container label.pass').text()).to.equal(PASS_LABEL_TEXT);
+  });
+
+  const SELECT_LABEL_TEXT = 'Choose your network node';
+  it(`should contain a select element with label saying "${SELECT_LABEL_TEXT}"`, () => {
+    expect(element.find('form md-input-container label.select').text()).to.equal(SELECT_LABEL_TEXT);
   });
 
   it('should contain an input field', () => {

src/webpack.config.babel.js

@@ -16,6 +16,7 @@ const PATHS = {
 };
 
 const common = {
+  devtool: 'source-map',
   entry: nodeEnvironment === 'test' ? {} : {
     app: PATHS.app,
   },