Merge pull request #577 from LiskHQ/565-re-enable-e2e-tests

Re-enable e2e tests for features already working in React - Closes #565

README.md

@@ -71,17 +71,15 @@ npm run test-live
 
 ### Setup
 
-To setup protractor as described on http://www.protractortest.org/#/ run:
+Setup protractor
 
 ```
-npm install -g protractor
-webdriver-manager update
-webdriver-manager start
+./node_modules/protractor/bin/webdriver-manager update
 ```
 
 Setup a lisk test node to run on localhost:4000 as described in https://github.com/LiskHQ/lisk#tests
 
-Make sure that the Lisk version of the node matches version in https://github.com/LiskHQ/lisk-nano/blob/development/src/app/services/peers/peer.js#L16
+And run it with [pm2](http://pm2.keymetrics.io/).
 
 ### Run
 

e2e-test-setup.sh

@@ -9,9 +9,9 @@ fi
 
 pwd=`pwd`
 cd $1
-forever stop app.js
+pm2 stop app.js
 dropdb lisk_test && createdb lisk_test
-forever start app.js
+pm2 start app.js
 sleep 5
 cd $pwd
 

features/login.feature

@@ -11,11 +11,15 @@ Feature: Login page
     And I select option no. 1 from "network" select
     And I click "login button"
     Then I should be logged in
+    And I should see text "Mainnet" in "peer network" element
 
-  Scenario: should allow to change network
+  Scenario: should allow to login to Testnet
     Given I'm on login page
-    When I select option no. 2 from "network" select
-    Then the option "Testnet" is selected in "network" select
+    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"
+    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

features/menu.feature

@@ -9,39 +9,33 @@ Feature: Top right menu
     And I click "ok button"
     Then I should see alert dialog with title "Success" and text "Second passphrase registration was successfully submitted. It can take several seconds before it is processed."
 
-  @ignore
   Scenario: should not allow to set 2nd passphrase again
     Given I'm logged in as "second passphrase account"
     Then There is no "register second passphrase" in main menu
 
-  @ignore
   Scenario: should not allow to set 2nd passphrase if not enough funds for the fee
     Given I'm logged in as "empty account"
     When I click "register second passphrase" in main menu
-    Then I should see "Not enough LSK to pay 5 LSK fee" error message
+    Then I should see "Insufficient funds for 5 LSK fee" error message
     And "next button" should be disabled
 
-  @ignore
   Scenario: should allow to exit 2nd passphrase registration dialog
     Given I'm logged in as "genesis"
     When I click "register second passphrase" in main menu
     And I click "cancel button"
     Then I should see no "modal dialog"
 
-  @ignore
   Scenario: should allow to register a delegate
     Given I'm logged in as "delegate candidate"
     When I click "register as delegate" in main menu
     And I fill in "test" to "username" field
     And I click "register button"
     Then I should see alert dialog with title "Success" and text "Delegate registration was successfully submitted. It can take several seconds before it is processed."
 
-  @ignore
   Scenario: should not allow to register a delegate again
     Given I'm logged in as "delegate"
     Then There is no "register as delegate" in main menu
 
-  @ignore
   Scenario: should allow to register a delegate with second passphrase
     Given I'm logged in as "second passphrase account"
     When I click "register as delegate" in main menu
@@ -50,18 +44,16 @@ Feature: Top right menu
     And I click "register button"
     Then I should see alert dialog with title "Success" and text "Delegate registration was successfully submitted. It can take several seconds before it is processed."
 
-  @ignore
   Scenario: should allow to exit delegate registration dialog
     Given I'm logged in as "genesis"
     When I click "register as delegate" in main menu
     And I click "cancel button"
     Then I should see no "modal dialog"
 
-  @ignore
   Scenario: should not allow to register delegate if not enough funds for the fee
     Given I'm logged in as "empty account"
     When I click "register as delegate" in main menu
-    Then I should see "Not enough LSK to pay 25 LSK fee" error message
+    Then I should see "Insufficient funds for 25 LSK fee" error message
     And "register button" should be disabled
 
   Scenario: should allow to sign message

features/send.feature

@@ -1,5 +1,4 @@
 Feature: Send dialog
-  @ignore
   Scenario: should allow to send when enough funds and correct address form
     Given I'm logged in as "genesis"
     When I click "send button"
@@ -8,30 +7,26 @@ Feature: Send dialog
     And I click "submit button"
     Then I should see alert dialog with title "Success" and text "Your transaction of 1 LSK to 537318935439898807L was accepted and will be processed in a few seconds."
 
-  @ignore
   Scenario: should not allow to send when not enough funds
     Given I'm logged in as "empty account"
     When I click "send button"
     And I fill in "1" to "amount" field
     And I fill in "537318935439898807L" to "recipient" field
     Then I should see "Insufficient funds" error message
 
-  @ignore
   Scenario: should not allow to send when invalid address
     Given I'm logged in as "any account"
     When I click "send button"
     And I fill in "1243409812409" to "recipient" field
     And I fill in "1" to "amount" field
     Then I should see "Invalid" error message
 
-  @ignore
   Scenario: should allow to exit send dialog
-    Given I'm logged in as "send all account"
+    Given I'm logged in as "any account"
     When I click "send button"
     And I click "cancel button"
     Then I should see no "modal dialog"
 
-  @ignore
   Scenario: should allow to send all funds 
     Given I'm logged in as "send all account"
     When I click "send button"
@@ -40,7 +35,6 @@ Feature: Send dialog
     And I click "submit button"
     Then I should see alert dialog with title "Success" and text "Your transaction of 101 LSK to 537318935439898807L was accepted and will be processed in a few seconds."
 
-  @ignore
   Scenario: should allow to send with second passphrase
     Given I'm logged in as "second passphrase account"
     When I click "send button"

features/step_definitions/generic.step.js

@@ -26,7 +26,7 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
     const selectorClass = `.${fieldName.replace(/ /g, '-')}`;
     const secondPassphrase = accounts[accountName].secondPassphrase;
     browser.sleep(500);
-    waitForElemAndSendKeys(`input${selectorClass}, textarea${selectorClass}`, secondPassphrase, callback);
+    waitForElemAndSendKeys(`${selectorClass} input, ${selectorClass} textarea`, secondPassphrase, callback);
   });
 
 
@@ -46,13 +46,14 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
   });
 
   When('I click "{elementName}" in "{menuName}" menu', (elementName, menuName, callback) => {
-    waitForElemAndClickIt(`.md-icon-button.${menuName.replace(/ /g, '-')}`);
+    waitForElemAndClickIt(`.${menuName.replace(/ /g, '-')}`);
     browser.sleep(1000);
-    waitForElemAndClickIt(`md-menu-item .md-button.${elementName.replace(/ /g, '-')}`, callback);
+    waitForElemAndClickIt(`.${elementName.replace(/ /g, '-')}`, callback);
   });
 
   When('I select option no. {index} from "{selectName}" select', (index, selectName, callback) => {
     waitForElemAndClickIt(`.${selectName}`);
+    browser.sleep(500);
     const optionElem = element.all(by.css(`.${selectName} ul li`)).get(index - 1);
     browser.wait(EC.presenceOf(optionElem), waitTime);
     optionElem.click().then(callback);
@@ -69,7 +70,7 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
   });
 
   Then('I should see table with {lineCount} lines', (lineCount, callback) => {
-    browser.sleep(3500);
+    browser.sleep(500);
     expect(element.all(by.css('table tbody tr')).count()).to.eventually.equal(parseInt(lineCount, 10))
       .and.notify(callback);
   });
@@ -81,7 +82,8 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
   });
 
   Then('I should see "{text}" error message', (text, callback) => {
-    waitForElemAndCheckItsText('.md-input-message-animation, .error-message', text, callback);
+    browser.sleep(500);
+    waitForElemAndCheckItsText('.error-message, .theme__error___2k5Jz', text, callback);
   });
 
   Then('"{elementName}" should be disabled', (elementName, callback) => {

features/step_definitions/menu.step.js

@@ -14,7 +14,7 @@ defineSupportCode(({ When, Then }) => {
   });
 
   Then('There is no "{itemSelector}" in main menu', (itemSelector, callback) => {
-    waitForElemAndClickIt('header .md-icon-button');
+    waitForElemAndClickIt('.main-menu-icon-button');
     browser.sleep(1000);
     expect(element.all(by.css(`md-menu-item .md-button.${itemSelector.replace(/ /g, '-')}`)).count()).to.eventually.equal(0)
       .and.notify(callback);

features/step_definitions/transactions.step.js

@@ -5,7 +5,7 @@ const { waitForElemAndClickIt } = require('../support/util.js');
 defineSupportCode(({ When }) => {
   When('I click "{elementName}" element on table row no. {index}', (elementName, index, callback) => {
     const selectorClass = `.${elementName.replace(/ /g, '-')}`;
-    waitForElemAndClickIt(`transactions tr:nth-child(${index}) ${selectorClass}`, callback);
+    waitForElemAndClickIt(`table tr:nth-child(${index}) ${selectorClass}`, callback);
   });
 });
 

features/step_definitions/voting.step.js

@@ -8,7 +8,7 @@ const expect = chai.expect;
 
 defineSupportCode(({ When, Then }) => {
   When('I click checkbox on table row no. {index}', (index, callback) => {
-    waitForElemAndClickIt(`delegates tr:nth-child(${index}) md-checkbox`, callback);
+    waitForElemAndClickIt(`table tr:nth-child(${index}) td label`, callback);
   });
 
   When('Search twice for "{searchTerm}" in vote dialog', (searchTerm, callback) => {
@@ -19,7 +19,7 @@ defineSupportCode(({ When, Then }) => {
   });
 
   Then('I should see delegates list with {count} lines', (count, callback) => {
-    expect(element.all(by.css('md-menu-item.vote-list-item')).count())
+    expect(element.all(by.css('.my-votes-button li')).count())
       .to.eventually.equal(parseInt(count, 10))
       .and.notify(callback);
   });

features/support/util.js

@@ -30,8 +30,8 @@ function waitForElemAndSendKeys(selector, keys, callback) {
 }
 
 function checkAlertDialog(title, text, callback) {
-  waitForElemAndCheckItsText('md-dialog h2', title);
-  waitForElemAndCheckItsText('md-dialog .md-dialog-content-body', text, () => {
+  waitForElemAndCheckItsText('.modal-dialog h1', title);
+  waitForElemAndCheckItsText('.modal-dialog .modal-dialog-body', text, () => {
     if (callback) callback();
   });
 }

features/top.feature

@@ -1,5 +1,4 @@
 Feature: Main page top area
-  @ignore
   Scenario: should allow to logout
     Given I'm logged in as "any account"
     When I click "logout button"

features/transactions.feature

@@ -4,7 +4,6 @@ Feature: Transactions tab
     When I click tab number 1
     Then I should see table with 20 lines
 
-  @ignore
   Scenario: should allow send to address 
     Given I'm logged in as "genesis"
     When I click tab number 1
@@ -13,15 +12,13 @@ Feature: Transactions tab
     And I click "submit button"
     Then I should see alert dialog with title "Success" and text "Your transaction of 100 LSK to 537318935439898807L was accepted and will be processed in a few seconds."
 
-  @ignore
   Scenario: should allow to repeat the transaction
     Given I'm logged in as "genesis"
     When I click tab number 1
     And I click "amount" element on table row no. 1
     And I click "submit button"
     Then I should see alert dialog with title "Success" and text "Your transaction of 100 LSK to 537318935439898807L was accepted and will be processed in a few seconds."
 
-  @ignore
   Scenario: should provide "No transactions" message
     Given I'm logged in as "empty account"
     When I click tab number 1

features/voting.feature

@@ -1,48 +1,41 @@
 Feature: Voting tab
-  @ignore
   Scenario: should allow to view delegates
     Given I'm logged in as "any account"
     When I click tab number 2
-    Then I should see table with 20 lines
+    Then I should see table with 100 lines
 
-  @ignore
   Scenario: should allow to view delegates with cold account
     Given I'm logged in as "empty account"
     When I click tab number 2
-    Then I should see table with 20 lines
+    Then I should see table with 100 lines
 
-  @ignore
   Scenario: should allow to search delegates
     Given I'm logged in as "any account"
     When I click tab number 2
     And I fill in "genesis_42" to "search" field
     Then I should see table with 1 lines
 
-  @ignore
   Scenario: search delegates should provide "no results" message
     Given I'm logged in as "any account"
     When I click tab number 2
     And I fill in "doesntexist" to "search" field
-    Then I should see table with 1 lines
+    Then I should see table with 0 lines
     And I should see text "No delegates found" in "empty message" element
 
-  @ignore
   Scenario: should allow to view my votes
     Given I'm logged in as "genesis"
     When I click tab number 2
     And I click "my votes button"
     Then I should see delegates list with 101 lines
 
-  @ignore
   Scenario: should not allow to vote if not enough funds for the fee
     Given I'm logged in as "empty account"
     When I click tab number 2
     And I click checkbox on table row no. 3
     And I click "vote button"
-    Then I should see "Not enough LSK to pay 1 LSK fee" error message
+    Then I should see "Insufficient funds for 1 LSK fee" error message
     And "submit button" should be disabled
 
-  @ignore
   Scenario: should allow to select delegates in the "Voting" tab and vote for them
     Given I'm logged in as "delegate candidate"
     When I click tab number 2
@@ -53,7 +46,6 @@ Feature: Voting tab
     And I click "submit button"
     Then I should see alert dialog with title "Success" and text "Your votes were successfully submitted. It can take several seconds before they are processed."
 
-  @ignore
   Scenario: should allow to vote with second passphrase account
     Given I'm logged in as "second passphrase account"
     When I click tab number 2
@@ -74,7 +66,6 @@ Feature: Voting tab
     And I click "submit button"
     Then I should see alert dialog with title "Success" and text "Your votes were successfully submitted. It can take several seconds before they are processed."
 
-  @ignore
   Scenario: should allow to remove votes form delegates
     Given I'm logged in as "genesis"
     When I click tab number 2
@@ -84,7 +75,6 @@ Feature: Voting tab
     And I click "submit button"
     Then I should see alert dialog with title "Success" and text "Your votes were successfully submitted. It can take several seconds before they are processed."
 
-  @ignore
   Scenario: should allow to exit vote dialog
     Given I'm logged in as "genesis"
     When I click tab number 2

src/components/account/account.js

@@ -30,7 +30,7 @@ const Account = ({
             <span id="accountStatus" className="status">
               {status}
             </span>
-            <p className="inner primary">
+            <p className="inner primary peer-network">
               {peers.data.options.name}
             </p>
             <p className="inner secondary peer">

src/components/actionBar/index.js

@@ -19,7 +19,7 @@ const ActionBar = ({
       label={primaryButton.label}
       fee={primaryButton.fee}
       balance={account ? account.balance : 0}
-      className={primaryButton.className || 'submit-button'}
+      customClassName={primaryButton.className || 'submit-button'}
       disabled={primaryButton.disabled}
       onClick={primaryButton.onClick} />
   </section>

src/components/dialog/dialogElement.js

@@ -31,13 +31,15 @@ class DialogElement extends Component {
               <IconButton className={`${styles['x-button']} x-button`} onClick={this.closeDialog.bind(this)} icon='close'/>
             </Navigation>
           </AppBar>
-          {this.props.dialog.childComponent ?
-            <this.props.dialog.childComponent
-              {...(this.props.dialog.childComponentProps || {})}
-              closeDialog={this.closeDialog.bind(this)}
-              /> :
-            null
-          }
+          <div className='modal-dialog-body'>
+            {this.props.dialog.childComponent ?
+              <this.props.dialog.childComponent
+                {...(this.props.dialog.childComponentProps || {})}
+                closeDialog={this.closeDialog.bind(this)}
+                /> :
+              null
+            }
+          </div>
         </div>
       </Dialog>
     );