Added cucumber tests (wip)

cucumber/features/login.feature

@@ -0,0 +1,38 @@
+Feature: Allow users to login and logout
+
+  As a user
+  I want to login and logout
+  So that I can prove my identity and see personalized data
+
+  Background:
+    Given I am on the home page
+
+  @watch
+  Scenario: A user can login
+    Given I have an account and I logged in
+    When I sign out
+    When I enter my email and password
+    Then I should be logged in
+    And I can edit my profile
+
+  @watch
+  Scenario: A user cannot login with bad information
+    Given I have an account and I logged in
+    When I sign out
+    When I enter incorrect authentication information
+    Then I should see a user not found error
+
+  @watch
+  Scenario: A user can register and login
+    Given I register with some name, password and email
+    Then I should be registered
+    And I should be logged in
+    When I sign out
+    When I enter my email and password
+    Then I should be logged in
+    And I can edit my profile
+
+  @skip
+  Scenario: A user cannot register without accepting service conditions
+    Given I register with some name, password and email but without accept conditions
+    Then I shouldn't be registered

cucumber/features/steps_definitions/helper.js

@@ -0,0 +1,30 @@
+// https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript
+function makeid(size) {
+  let text = '';
+  const possible = 'abcdefghijklmnopqrstuvwxyz0123456789';
+  for (let i = 0; i < size; i += 1) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return text;
+}
+
+export const randomUsername = () => makeid(7);
+
+export const randomPassword = () => randomUsername();
+
+export const randomEmail = () => `${randomUsername()}@example.com`;
+
+export const goHome = (client) => {
+  client.url(process.env.ROOT_URL);
+  client.waitForVisible('#react-root', 10000);
+  expect(client.isVisible('#react-root')).toBe(true);
+  client.waitUntil(() => client.isVisible('.pg-loading-center-middle') === false, 5000);
+  client.waitUntil(() => client.isVisible('.pg-loading-center-middle') === false, 5000);
+  // Close alert
+  if (client.isVisible('.bert-content')) {
+    client.click('.bert-content');
+  }
+  if (client.isVisible('#acceptCookies')) {
+    client.click('#acceptCookies');
+  }
+};

cucumber/features/steps_definitions/hooks.js

@@ -0,0 +1,39 @@
+/* global client */
+
+(function () {
+  module.exports = function () {
+    this.Before(() => {
+      //  global.expect = require('@xolvio/jasmine-expect').expect;
+
+      if (!this.initMyCmds) {
+        client.addCommand('waitForClickable', function elementClickable(selector, timeout) {
+          this.waitForVisible(selector, timeout);
+          this.waitForEnabled(selector, timeout);
+        });
+        this.initMyCmds = true;
+      }
+
+      // server.call('fixtures/reset');
+      // server.call('emailStub/reset');
+      // server.call('emailStub/stub');
+      // server.call('fixtures/stubCloudFrontClient');
+
+      // go to the page first so we have access to the Meteor object
+      // console.log('Before all tests...');
+      // client.url(process.env.ROOT_URL);
+      /* client.executeAsync(function (done) {
+       *   var customer = {
+       *     id: 'randomId',
+       *     email: 'me@example.com',
+       *     subscriptions: {
+       *       data: [{
+       *         current_period_start: 1436716844,
+       *         current_period_end: 1436716844
+       *       }]
+       *     }
+       *   }; */
+      // this call will stub stripe both on the client and server
+      // Meteor.call('stripeStub/stub', customer, done);
+    });
+  };
+}());

cucumber/features/steps_definitions/login.js

@@ -0,0 +1,130 @@
+/* global module expect require process client */
+
+const {
+  goHome, randomUsername, randomPassword, randomEmail
+} = require('./helper.js');
+
+let firstName;
+let lastName;
+let pass;
+let email;
+
+const setUserValues = (isEdit) => {
+  client.waitForVisible('input[name="firstName"]', 5000);
+  firstName = randomUsername();
+  lastName = randomUsername();
+  email = randomEmail();
+  client.setValue('input[name="firstName"]', firstName);
+  client.setValue('input[name="lastName"]', lastName);
+  client.setValue('input[name="emailAddress"]', email);
+  if (isEdit) {
+    client.setValue('input[name="currentPassword"]', pass);
+    pass = randomPassword();
+    client.setValue('input[name="newPassword"]', pass);
+  } else {
+    pass = randomPassword();
+    client.setValue('input[name="password"]', pass);
+  }
+};
+
+module.exports = function doSteps(notos) {
+  this.Given(/^I am on the home page$/, () => {
+    goHome(client);
+  });
+
+  function register() {
+    if (client.isVisible('#logout')) {
+      client.click('#logout');
+    }
+    client.waitForVisible('#signup', 5000);
+    client.click('#signup');
+    setUserValues();
+    if (!notos) {
+      client.click('input[name="tos"]');
+    }
+    client.click('#signUpSubmit');
+  }
+
+  this.Given(/^I have an account and I logged in$/, () => {
+    register();
+  });
+
+  function checkName() {
+    client.waitForVisible('#profile', 5000);
+    client.waitForText('#profile', firstName);
+    client.waitForText('#profile', lastName);
+  }
+
+  this.Then(/^I should be logged in$/, () => {
+    client.waitUntil(() => client.isVisible('#logout') === true, 10000);
+  });
+
+  /* this.Given(/^I am signed out$/, () => {
+   *   client.waitUntil(() => client.isVisible('#logout') === true, 10000);
+   * });
+   */
+
+  function closeAlert() {
+    client.waitForVisible('.bert-alert', 5000);
+    client.click('.bert-content');
+    client.waitUntil(() => client.isVisible('.bert-alert') === false, 10000);
+  }
+
+  this.When(/^I sign out$/, () => {
+    if (client.isVisible('.bert-alert')) {
+      client.waitUntil(() => client.isVisible('.bert-alert') === false, 10000);
+    }
+    client.waitForVisible('#logout', 5000);
+    client.click('#logout');
+  });
+
+  function login(badpass) {
+    client.waitForVisible('#login', 10000);
+    client.waitUntil(() => client.isVisible('.bert-alert') === false, 10000);
+    client.click('#login');
+    client.waitForVisible('#loginSubmit', 5000);
+    client.setValue('input[name="emailAddress"]', email);
+    client.setValue('input[name="password"]', badpass ? randomPassword() : pass);
+    client.click('#loginSubmit');
+    closeAlert();
+  }
+
+  this.When(/^I enter my email and password$/, () => {
+    login();
+  });
+
+  this.Then(/^I can edit my profile$/, () => {
+    client.waitForVisible('#profile', 5000);
+    client.click('#profile');
+    setUserValues(true);
+    client.click('#profileSubmit');
+    closeAlert();
+    checkName();
+  });
+
+  this.When(/^I enter incorrect authentication information$/, () => {
+    login(true);
+  });
+
+  this.Then(/^I should see a user not found error$/, () => {
+    client.waitForVisible('.alert-danger', 10000, true);
+  });
+
+  this.Given(/^I register with some name, password and email$/, () => {
+    register();
+  });
+
+  this.Then(/^I should be registered$/, () => {
+    client.waitForVisible('.bert-alert', 10000, true);
+    closeAlert();
+  });
+
+  this.Given(/^I register with some name, password and email but without accept conditions$/, () => {
+    register(true);
+  });
+
+  this.Then(/^I shouldn't be registered$/, () => {
+    client.waitForVisible('.bert-alert', 10000, true);
+    client.waitForVisible('#login', 10000, true);
+  });
+};

imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js

@@ -1,9 +1,12 @@
+/* eslint-disable import/no-absolute-path */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
 /* import { Nav, NavDropdown } from 'react-bootstrap'; */
 import { translate, Trans } from 'react-i18next';
+import { testId } from '/imports/ui/components/Utils/TestUtils';
+
 /*
    FIXME:
    navitem needs a nav-link class but does not works
@@ -22,10 +25,10 @@ const AuthenticatedNavigation = ({ name, history, props }) => (
     {/* <LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
     <NavItem eventKey={5} href="/subscriptions"><Trans>Mis alertas</Trans></NavItem>
     </LinkContainer> */}
-    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/profile">
+    <LinkContainer id={testId('profile')} className="nav-item" anchorClassName="nav-link" to="/profile">
       <NavItem eventKey={5.1} href="/profile">{name}</NavItem>
     </LinkContainer>
-    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/logout">
+    <LinkContainer id={testId('logout')} className="nav-item" anchorClassName="nav-link" to="/logout">
       <NavItem eventKey={5.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
     </LinkContainer>
     {/* </Nav> */}

imports/ui/components/Navigation/Navigation.js

@@ -1,9 +1,12 @@
+/* eslint-disable import/no-absolute-path */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Trans, translate } from 'react-i18next';
+import { testId } from '/imports/ui/components/Utils/TestUtils';
 import BetaRibbon from '../../components/BetaRibbon/BetaRibbon';
 import PublicNavigation from '../PublicNavigation/PublicNavigation';
 import AuthenticatedNavigation from '../AuthenticatedNavigation/AuthenticatedNavigation';
@@ -38,12 +41,12 @@ const Navigation = props => (
           {/* <LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
           <NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
           </LinkContainer> */}
-          <LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
+          <LinkContainer id={testId('subscriptions')} className="nav-item" anchorClassName="nav-link" to="/subscriptions">
             <NavItem eventKey={1.2} href="/subscriptions">
               {props.authenticated ? <Trans>Mis zonas</Trans> : <Trans>Participar</Trans>}
             </NavItem>
           </LinkContainer>
-          <LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
+          <LinkContainer id={testId('activeFires')} className="nav-item" anchorClassName="nav-link" to="/fires">
             <NavItem eventKey={2} href="/fires">{props.t('activeFires')}</NavItem>
           </LinkContainer>
         </ul>

imports/ui/components/PublicNavigation/PublicNavigation.js

@@ -1,8 +1,11 @@
+/* eslint-disable import/no-absolute-path */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { LinkContainer } from 'react-router-bootstrap';
 /* import { Nav } from 'react-bootstrap'; */
 import { translate } from 'react-i18next';
+import { testId } from '/imports/ui/components/Utils/TestUtils';
+
 /*
    FIXME:
    navitem needs a nav-link class but does not works
@@ -15,10 +18,10 @@ import NavItem from '../NavItem/NavItem';
 const PublicNavigation = props => (
   <ul className="navbar-nav">
     {/* <Nav pullRight> */}
-    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/signup">
+    <LinkContainer id={testId('signup')} className="nav-item" anchorClassName="nav-link" to="/signup">
       <NavItem eventKey={3} href="/signup">{props.t('Registrarse')}</NavItem>
     </LinkContainer>
-    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/login">
+    <LinkContainer id={testId('login')} className="nav-item" anchorClassName="nav-link" to="/login">
       <NavItem eventKey={4} href="/login">{props.t('Iniciar sesión')}</NavItem>
     </LinkContainer>
     {/* </Nav> */}

imports/ui/components/Utils/TestUtils.js

@@ -0,0 +1,9 @@
+import { Meteor } from 'meteor/meteor';
+import { Random } from 'meteor/random';
+
+export const testId = (id) => {
+  if (Meteor.isDevelopment) {
+    return id;
+  }
+  return Random.id;
+};

imports/ui/pages/Login/Login.js

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-absolute-path */
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
@@ -6,6 +8,7 @@ import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { translate } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
+import { testId } from '/imports/ui/components/Utils/TestUtils';
 import Col from '../../components/Col/Col';
 import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButtons';
 import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
@@ -101,7 +104,7 @@ class Login extends React.Component {
                   className="form-control"
                 />
               </FormGroup>
-              <Button type="submit" bsStyle="success">{this.t('Iniciar sesión')}</Button>
+              <Button id={testId('loginSubmit')} type="submit" bsStyle="success">{this.t('Iniciar sesión')}</Button>
               <AccountPageFooter>
                 <p>{this.t('¿No tienes una cuenta?')} <Link to="/signup">{this.t('Regístrate')}</Link>.</p>
               </AccountPageFooter>

imports/ui/pages/Profile/Profile.js

@@ -1,13 +1,15 @@
 /* eslint-disable no-underscore-dangle */
+/* eslint-disable import/no-absolute-path */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
-import Col from '../../components/Col/Col';
 import _ from 'lodash';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
+import { testId } from '/imports/ui/components/Utils/TestUtils';
+import Col from '../../components/Col/Col';
 import { createContainer } from 'meteor/react-meteor-data';
 import InputHint from '../../components/InputHint/InputHint';
 import validate from '../../../modules/validate';
@@ -232,7 +234,7 @@ class Profile extends React.Component {
         />
         <InputHint>{this.t('Usa al menos seis caracteres.')}</InputHint>
       </FormGroup>
-      <Button type="submit" bsStyle="success">{this.t('Guardar perfíl')}</Button>
+      <Button id={testId('profileSubmit')} type="submit" bsStyle="success">{this.t('Guardar perfíl')}</Button>
     </div>) : <div />;
   }
 

imports/ui/pages/Signup/Signup.js

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
+import { testId } from '/imports/ui/components/Utils/TestUtils';
 import Icon from '../../components/Icon/Icon';
 import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButtons';
 import InputHint from '../../components/InputHint/InputHint';
@@ -186,11 +187,11 @@ class Signup extends React.Component {
               />
               <InputHint>{t('Usa al menos seis caracteres.')}</InputHint>
             </FormGroup>
-            <Checkbox inline={false} defaultChecked={this.state.termsAccept} onClick={e => this.setTermsAccept(e.target.checked)}>
+            <Checkbox inline={false} name="tos" defaultChecked={this.state.termsAccept} onClick={e => this.setTermsAccept(e.target.checked)}>
               <Trans className="mark-checkbox" parent="span" i18nKey="termsAccept">Acepto las <a target="_blank" href="/terms">condiciones de servicio</a> de este sitio</Trans>
             </Checkbox>
 
-            <Button type="submit" disabled={!this.state.termsAccept} bsStyle="success">{t('Registrarse')}</Button>
+            <Button id={testId('signUpSubmit')} type="submit" disabled={!this.state.termsAccept} bsStyle="success">{t('Registrarse')}</Button>
             <AccountPageFooter>
               <p>{t('¿Ya tienes un cuenta?')} <Link to={{ pathname: '/login', state: this.state }} >{t('Iniciar sesión')}</Link>.</p>
             </AccountPageFooter>