Added feedback

cucumber/features/feedback.feature

@@ -0,0 +1,22 @@
+@watch
+Feature: Allow users to give feedback
+
+  As a user (authenticated or not)
+  I want to give feedback about this site
+
+  Scenario: A user can login and give feedback
+    Given I am on the zones page
+    And I have an account and I logged in
+    # Because is not verified
+    Then I can send feedback with email
+    When I sign out
+    Then I can send feedback with email
+
+  Scenario: A anon user can give feedback
+    Given I am on the fires page
+    Given I'm not logged
+    Then I can send feedback with email
+
+  Scenario: A user cannot give feedback in home
+    Given I am on the home page
+    Then I cannot send feedback

cucumber/features/general.feature

@@ -1,6 +1,5 @@
 Feature: This app should generate a correct sitemap, etc
 
-  @watch
   Scenario: I verify that a sitemap is generated correctly
     Given the page sitemap.xml
     Then I check that exist this list of pages in the sitemap

cucumber/features/pages.feature

@@ -9,7 +9,6 @@ Feature: Test all secundary pages
       | activeFires | Active Fires     |
     Then I check that all pages works properly
 
-  @watch
   Scenario: Check that all secondary pages work well
     Given a list of page urls and contents
       | login                  | Login                   | true  |

cucumber/features/steps_definitions/feedback.js

@@ -0,0 +1,49 @@
+/* global module expect require process client */
+
+const { randomText, randomEmail } = require('./helper.js');
+
+module.exports = function doSteps() {
+  this.Given(/^I am on the zones page$/, () => {
+    client.url(`${process.env.ROOT_URL}/zones`);
+    if (client.isVisible('#logout')) {
+      client.click('#logout');
+    }
+  });
+
+  this.Then(/^I can send feedback without email$/, () => {
+    client.waitForVisible('#feedback-tab', 10000);
+    client.click('#feedback-tab');
+    client.waitForVisible('#feedback-form', 10000);
+    client.setValue('#feedbackTextarea', randomText(500));
+    client.click('#sendFeedbackBtn');
+    client.waitForVisible('.bert-alert', 10000, true);
+    client.waitUntil(() => client.isVisible('.bert-alert') === false, 10000);
+  });
+
+  this.Then(/^I can send feedback with email$/, () => {
+    client.waitForVisible('#feedback-tab', 10000);
+    client.click('#feedback-tab');
+    client.waitForVisible('#feedback-form', 10000);
+    client.setValue('input[name="email"]', randomEmail());
+    client.setValue('#feedbackTextarea', randomText(500));
+    client.click('#sendFeedbackBtn');
+    client.waitForVisible('.bert-alert', 10000, true);
+    client.waitUntil(() => client.isVisible('.bert-alert') === false, 10000);
+  });
+
+  this.Given(/^I'm not logged$/, () => {
+    client.waitForVisible('#react-root', 5000);
+    if (client.isVisible('#logout')) {
+      client.click('#logout');
+    }
+  });
+
+  this.Given(/^I am on the fires page$/, () => {
+    client.url(`${process.env.ROOT_URL}/fires`);
+  });
+
+  this.Then(/^I cannot send feedback$/, () => {
+    client.waitForVisible('#react-root', 5000);
+    client.waitUntil(() => client.isVisible('#feedback-tab') === false, 10000);
+  });
+};

cucumber/features/steps_definitions/helper.js

@@ -8,6 +8,8 @@ function makeid(size) {
   return text;
 }
 
+export const randomText = n => makeid(n);
+
 export const randomUsername = () => makeid(7);
 
 export const randomPassword = () => randomUsername();

imports/ui/components/Feedback/Feedback.js

@@ -2,14 +2,16 @@
 /* eslint-disable import/no-absolute-path */
 /* eslint-disable import/no-absolute-path */
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { translate } from 'react-i18next';
 import { FormGroup, Button, FormControl } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { withTracker } from 'meteor/react-meteor-data';
-import validate from '../../../modules/validate';
+import { isHome } from '/imports/ui/components/Utils/location';
+import { testId } from '/imports/ui/components/Utils/TestUtils';
+import validate from '/imports/modules/validate';
 
 import './Feedback.scss';
 
@@ -67,50 +69,59 @@ class Feedback extends Component {
   }
 
   render() {
+    // console.log(`Render Feedback because isHome ${this.props.isHome}, email: '${this.props.emailAddress}'`);
+    const disabled = this.props.emailVerified && this.props.emailAddress;
     return (
-      <div id="feedback">
-        <div id="feedback-form" ref={formdiv => (this.formdiv = formdiv)} style={{ display: 'none' }} className="card">
-          <form
-              ref={form => (this.form = form)}
-              className="form card-body"
-              onSubmit={event => event.preventDefault()}
-          >
-            <FormGroup controlId="formEmail">
-              <input
-                  onChange={this.handleChange}
-                  name="email"
-                  className="form-control"
-                  ref={email => (this.email = email)}
-                  placeholder={this.t('Tu correo')}
-                  disabled={this.props.emailVerified}
-                  defaultValue={this.props.emailVerified ? this.props.emailAddress : ''}
-                  type="email"
-              />
-            </FormGroup>
-            <FormGroup
-                controlId="formFeedback"
+      <Fragment>
+        { !this.props.isHome &&
+          <div id="feedback">
+            <div id="feedback-form" ref={formdiv => (this.formdiv = formdiv)} style={{ display: 'none' }} className="card">
+              <form
+                  ref={form => (this.form = form)}
+                  className="form card-body"
+                  onSubmit={event => event.preventDefault()}
+              >
+                <FormGroup controlId="formEmail">
+                  <input
+                      id={testId('emailInput')}
+                      onChange={this.handleChange}
+                      name="email"
+                      className="form-control"
+                      ref={email => (this.email = email)}
+                      placeholder={this.t('Tu correo')}
+                      key={disabled ? 'disabledEmail' : 'enabledEmail'}
+                      disabled={disabled}
+                      defaultValue={disabled ? this.props.emailAddress : ''}
+                      type="email"
+                  />
+                </FormGroup>
+                <FormGroup
+                    controlId="formFeedback"
+                >
+                  <textarea
+                      id={testId('feedbackTextarea')}
+                      className="form-control"
+                      name="feedbackText"
+                      ref={feedbackText => (this.feedbackText = feedbackText)}
+                      placeholder={this.t('Por favor, escribe aquí tu feedback...')}
+                      rows="6"
+                  />
+                  <FormControl.Feedback />
+                </FormGroup>
+                <Button type="submit" bsStyle="success" className="float-right" id={testId('sendFeedbackBtn')} >
+                  {this.t('Enviar')}
+                </Button>
+              </form>
+            </div>
+            <div
+                id="feedback-tab"
+                onClick={(event) => { this.onTabClick(event); }}
             >
-              <textarea
-                  className="form-control"
-                  name="feedbackText"
-                  ref={feedbackText => (this.feedbackText = feedbackText)}
-                  placeholder={this.t('Por favor, escribe aquí tu feedback...')}
-                  rows="6"
-              />
-              <FormControl.Feedback />
-            </FormGroup>
-            <Button type="submit" bsStyle="success" className="float-right" >
-              {this.t('Enviar')}
-            </Button>
-          </form>
-        </div>
-        <div
-            id="feedback-tab"
-            onClick={(event) => { this.onTabClick(event); }}
-        >
-          {this.t('Feedback')}
-        </div>
-      </div>
+              {this.t('Feedback')}
+            </div>
+          </div>
+        }
+      </Fragment>
     );
   }
 }
@@ -118,9 +129,12 @@ class Feedback extends Component {
 Feedback.propTypes = {
   t: PropTypes.func.isRequired,
   emailAddress: PropTypes.string,
-  emailVerified: PropTypes.bool.isRequired
+  emailVerified: PropTypes.bool.isRequired,
+  isHome: PropTypes.bool.isRequired
 };
+
 export default translate([], { wait: true })(withTracker(props => ({
   emailAddress: props.emailAddress,
-  emailVerified: props.emailVerified
+  emailVerified: props.emailVerified,
+  isHome: isHome()
 }))(Feedback));

imports/ui/components/Utils/location.js

@@ -1,14 +1,20 @@
+/* eslint-disable import/no-absolute-path */
+
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
+import history from '/imports/ui/components/History/History';
 
-export const location = new ReactiveVar();
+export const location = new ReactiveVar(history.location.pathname);
 
-export const currentLocation = () => {
-  if (Meteor.isClient) {
-    return window.location.pathname;
-  }
-  return location.get();
-};
+if (Meteor.isClient) {
+  history.listen((loc) => { // , action) => {
+    // console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
+    // console.log(`The last navigation action was ${action}`)
+    location.set(loc.pathname);
+  });
+}
+
+export const currentLocation = () => location.get();
 
 export const currentLocationHref = () => {
   if (Meteor.isClient) {

imports/ui/layouts/App/App.js

@@ -18,7 +18,6 @@ import '/imports/startup/client/meta';
 import '/imports/startup/client/ravenLogger';
 import '/imports/startup/client/geolocation';
 import '/imports/startup/client/piwik-start.js';
-import { isHome } from '/imports/ui/components/Utils/location';
 import Reconnect from '../../components/Reconnect/Reconnect';
 import Navigation from '../../components/Navigation/Navigation';
 import Authenticated from '../../components/Authenticated/Authenticated';
@@ -139,8 +138,8 @@ const App = props => (
               </Switch>
             </Grid>
             <Footer />
-            { Meteor.isDevelopment && !props.isHome && <Feedback {...props} /> }
             <Reconnect {...props} />
+            <Feedback history={history} {...props} />
             {props.i18nReady.get() &&
             <Blaze template="cookieConsent" />
             }
@@ -161,8 +160,7 @@ App.propTypes = {
   i18nReady: PropTypes.object.isRequired,
   userId: PropTypes.string,
   emailAddress: PropTypes.string,
-  emailVerified: PropTypes.bool.isRequired,
-  isHome: PropTypes.bool.isRequired
+  emailVerified: PropTypes.bool.isRequired
 };
 
 const getUserName = name => ({
@@ -178,7 +176,6 @@ export default withTracker(() => {
   const name = user && user.profile && user.profile.name && getUserName(user.profile.name);
   const emailAddress = user && user.emails && user.emails[0].address;
   // console.log(`i18n ready?: ${i18nReady.get()}`);
-  console.log(`isHome?: ${isHome()}`);
   return {
     loading,
     loggingIn,
@@ -188,7 +185,6 @@ export default withTracker(() => {
     roles: !loading && Roles.getRolesForUser(userId),
     userId,
     emailAddress,
-    isHome: isHome(),
     emailVerified: user && user.emails ? user && user.emails && user.emails[0].verified : true
   };
 })(App);