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,7 +69,11 @@ 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 (
+      <Fragment>
+        { !this.props.isHome &&
           <div id="feedback">
             <div id="feedback-form" ref={formdiv => (this.formdiv = formdiv)} style={{ display: 'none' }} className="card">
               <form
@@ -77,13 +83,15 @@ class Feedback extends Component {
               >
                 <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')}
-                  disabled={this.props.emailVerified}
+                      key={disabled ? 'disabledEmail' : 'enabledEmail'}
-                  defaultValue={this.props.emailVerified ? this.props.emailAddress : ''}
+                      disabled={disabled}
+                      defaultValue={disabled ? this.props.emailAddress : ''}
                       type="email"
                   />
                 </FormGroup>
@@ -91,6 +99,7 @@ class Feedback extends Component {
                     controlId="formFeedback"
                 >
                   <textarea
+                      id={testId('feedbackTextarea')}
                       className="form-control"
                       name="feedbackText"
                       ref={feedbackText => (this.feedbackText = feedbackText)}
@@ -99,7 +108,7 @@ class Feedback extends Component {
                   />
                   <FormControl.Feedback />
                 </FormGroup>
-            <Button type="submit" bsStyle="success" className="float-right" >
+                <Button type="submit" bsStyle="success" className="float-right" id={testId('sendFeedbackBtn')} >
                   {this.t('Enviar')}
                 </Button>
               </form>
@@ -111,6 +120,8 @@ class Feedback extends Component {
               {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) {
-  if (Meteor.isClient) {
+  history.listen((loc) => { // , action) => {
-    return window.location.pathname;
+    // console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
-  }
+    // console.log(`The last navigation action was ${action}`)
-  return location.get();
+    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,
+  emailVerified: PropTypes.bool.isRequired
-  isHome: 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);