Merge pull request #605 from LiskHQ/564-save-network-to-cookie

Migrate "Save network to cookie" - Closes #564
LiskArchive · Aug 17, 2017 · 525eb04 · 525eb04
2 parents 9ebf3b7 + 6e156da
commit 525eb04
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 15 deletions.
diff --git a/Jenkinsfile b/Jenkinsfile
@@ -69,10 +69,6 @@ node('lisk-nano-01'){
         sh '''
         export ON_JENKINS=true
 
-	# Start xvfb
-        export DISPLAY=:99
-        Xvfb :99 -ac -screen 0 1280x1024x24 &
-
         # Run test
         cd $WORKSPACE
         npm run test

diff --git a/features/login.feature b/features/login.feature
@@ -21,6 +21,17 @@ Feature: Login page
     Then I should be logged in
     And I should see text "Testnet" in "peer network" element
 
+  Scenario: should remember the selected network
+    Given I'm on login page
+    When I fill in "wagon stock borrow episode laundry kitten salute link globe zero feed marble" to "passphrase" field
+    And I select option no. 2 from "network" select
+    And I click "login button"
+    And I click "logout button"
+    And I fill in "wagon stock borrow episode laundry kitten salute link globe zero feed marble" to "passphrase" field
+    And I click "login button"
+    Then I should be logged in
+    And I should see text "Testnet" in "peer network" element
+
   @ignore
   Scenario: should allow to create a new account
     Given I'm on login page

diff --git a/features/step_definitions/generic.step.js b/features/step_definitions/generic.step.js
@@ -102,6 +102,7 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
     browser.driver.manage().window().setSize(1000, 1000);
     browser.get('http://localhost:8080/');
     browser.manage().addCookie({ name: 'address', value: 'http://localhost:4000' });
+    browser.manage().addCookie({ name: 'network', value: '2' });
     browser.get('http://localhost:8080/');
     waitForElemAndSendKeys('.passphrase input', accounts[accountName].passphrase);
     waitForElemAndClickIt('.login-button', callback);

diff --git a/src/components/login/loginFormComponent.js b/src/components/login/loginFormComponent.js
@@ -32,6 +32,11 @@ class LoginFormComponent extends React.Component {
       address: '',
       network: 0,
     };
+
+    this.validators = {
+      address: this.validateUrl,
+      passphrase: this.validatePassphrase,
+    };
   }
 
   componentDidMount() {
@@ -42,9 +47,14 @@ class LoginFormComponent extends React.Component {
   componentDidUpdate() {
     if (this.props.account && this.props.account.address) {
       this.props.history.replace('/main/transactions');
+      if (this.state.address) {
+        Cookies.set('address', this.state.address);
+      }
+      Cookies.set('network', this.state.network);
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
   validateUrl(value) {
     const addHttp = (url) => {
       const reg = /^(?:f|ht)tps?:\/\//i;
@@ -60,24 +70,26 @@ class LoginFormComponent extends React.Component {
     }
 
     const data = { address: value, addressValidity };
-    this.setState(data);
     return data;
   }
 
+  // eslint-disable-next-line class-methods-use-this
   validatePassphrase(value) {
     const data = { passphrase: value };
     if (!value || value === '') {
       data.passphraseValidity = 'Empty passphrase';
     } else {
       data.passphraseValidity = isValidPassphrase(value) ? '' : 'Invalid passphrase';
     }
-
-    this.setState(data);
     return data;
   }
 
   changeHandler(name, value) {
-    this.setState({ [name]: value });
+    const validator = this.validators[name] || (() => ({}));
+    this.setState({
+      [name]: value,
+      ...validator(value),
+    });
   }
 
   onLoginSubmission(passphrase) {
@@ -96,10 +108,13 @@ class LoginFormComponent extends React.Component {
   devPreFill() {
     const address = Cookies.get('address');
     const passphrase = Cookies.get('passphrase');
+    const network = parseInt(Cookies.get('network'), 10) || 0;
 
-    this.setState({ network: address ? 2 : 0 });
-    this.validateUrl(address);
-    this.validatePassphrase(passphrase);
+    this.setState({
+      network,
+      ...this.validators.address(address),
+      ...this.validators.passphrase(passphrase),
+    });
   }
 
   render() {
@@ -117,13 +132,14 @@ class LoginFormComponent extends React.Component {
           this.state.network === 2 &&
           <Input type='text' label='Node address' name='address' className='address'
             value={this.state.address} error={this.state.addressValidity}
-            onChange={this.validateUrl.bind(this)} />
+            onChange={this.changeHandler.bind(this, 'address')} />
         }
         <Input type={this.state.showPassphrase ? 'text' : 'password'}
           label='Enter your passphrase' name='passphrase'
           className='passphrase'
           error={this.state.passphraseValidity === 'Invalid passphrase' ? 'Invalid passphrase' : ''}
-          value={this.state.passphrase} onChange={this.validatePassphrase.bind(this)} />
+          value={this.state.passphrase}
+          onChange={this.changeHandler.bind(this, 'passphrase')} />
         <Checkbox
           checked={this.state.showPassphrase}
           label="Show passphrase"

diff --git a/src/components/login/loginFormComponent.test.js b/src/components/login/loginFormComponent.test.js
@@ -5,6 +5,7 @@ import { spy } from 'sinon';
 import sinonChai from 'sinon-chai';
 import { mount, shallow } from 'enzyme';
 import Lisk from 'lisk-js';
+import Cookies from 'js-cookie';
 import LoginFormComponent from './loginFormComponent';
 
 chai.use(sinonChai);
@@ -78,6 +79,33 @@ describe('LoginFormComponent', () => {
     });
   });
 
+  describe('componentDidUpdate', () => {
+    const address = 'http:localhost:8080';
+    const props = {
+      account: { address: 'dummy' },
+      history: {
+        replace: spy(),
+      },
+    };
+
+    it('calls this.props.history.replace(\'/main/transactions\')', () => {
+      const wrapper = mount(<LoginFormComponent />, options);
+      wrapper.setProps(props);
+      expect(props.history.replace).to.have.been.calledWith('/main/transactions');
+    });
+
+    it('calls Cookies.set(\'address\', address) if this.state.address', () => {
+      const spyFn = spy(Cookies, 'set');
+      const wrapper = mount(<LoginFormComponent />, options);
+      wrapper.setState({ address });
+      wrapper.setProps(props);
+      expect(spyFn).to.have.been.calledWith('address', address);
+
+      spyFn.restore();
+      Cookies.remove('address');
+    });
+  });
+
   describe('validateUrl', () => {
     it('should set address and addressValidity="" for a valid address', () => {
       const validURL = 'http://localhost:8080';
@@ -151,8 +179,8 @@ describe('LoginFormComponent', () => {
   describe('changeHandler', () => {
     it('call setState with matching data', () => {
       const wrapper = shallow(<LoginFormComponent />, options);
-      const key = 'address';
-      const value = 'http://llocalhost:8080';
+      const key = 'network';
+      const value = 0;
       const spyFn = spy(LoginFormComponent.prototype, 'setState');
       wrapper.instance().changeHandler(key, value);
       expect(spyFn).to.have.been.calledWith({ [key]: value });