Added form browser tests and form email validation.

Gemfile

@@ -37,6 +37,7 @@ gem 'zendesk_api'
 gem 'twitter'
 gem 'koala'
 gem 'mail'
+gem 'email_verifier'
 
 gem 'mime-types'
 

Gemfile.lock

@@ -80,6 +80,7 @@ GEM
       activerecord (>= 3.0, < 5)
       delayed_job (>= 3.0, < 5)
     diffy (3.1.0)
+    dnsruby (1.59.1)
     docile (1.1.5)
     domain_name (0.5.25)
       unf (>= 0.0.5, < 1.0.0)
@@ -91,6 +92,8 @@ GEM
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
+    email_verifier (0.1.0)
+      dnsruby (>= 1.5)
     equalizer (0.0.10)
     erubis (2.7.0)
     eventmachine (1.0.9.1)
@@ -333,6 +336,7 @@ DEPENDENCIES
   diffy
   eco
   em-websocket
+  email_verifier
   eventmachine
   execjs
   guard (>= 2.2.2)

app/assets/javascripts/app/views/channel/form.jst.eco

@@ -101,7 +101,7 @@
 
 <script>
 $(function() {
-  $('#feedback-form').zammad_form({
+  $('#feedback-form').ZammadForm({
 <span class="js-modal-params"></span>
   });
 });

app/controllers/form_controller.rb

@@ -43,6 +43,19 @@ class FormController < ApplicationController
       errors['body'] = 'required'
     end
 
+    # realtime verify
+    if !errors['email']
+      begin
+        checker = EmailVerifier::Checker.new(params[:email])
+        checker.connect
+        if !checker.verify
+          errors['email'] = "Unable to send to '#{params[:email]}'"
+        end
+      rescue => e
+        errors['email'] = e.to_s
+      end
+    end
+
     if errors && !errors.empty?
       render json: {
         errors: errors

public/assets/form/form.html

@@ -14,6 +14,8 @@
 <div id="feedback-form-inline"></div>
 
 
+<div class="js-logDisplay"></div>
+
 <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 
 <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
@@ -39,12 +41,14 @@
 <script id="zammad_form_script" src="http://localhost:3000/assets/form/form.js"></script>
 
 <script>
-$('#feedback-form-modal').zammad_form({
+$('#feedback-form-modal').ZammadForm({
   modal: true,
+  debug: true,
 });
 
- $('#feedback-form-inline').zammad_form({
+ $('#feedback-form-inline').ZammadForm({
   modal: false,
+  debug: true,
 });
 </script>
 

public/assets/form/form.js

@@ -10,19 +10,43 @@
 <script id="zammad_form_script" src="http://localhost:3000/assets/form/form.js"></script>
 <script>
 $(function() {
-  $('#feedback-form').zammad_form({
+  $('#feedback-form').ZammadForm({
     messageTitle: 'Feedback Form',
     messageSubmit: 'Submit',
     messageThankYou: 'Thank you for your inquiry! We\'ll contact you soon as possible.',
+    messageNoConfig: 'Unable to load form config from server. Maybe featrue is disabled.',
     showTitle: true,
-    modal: true
+    modal: true,
+    attributes: [
+      {
+        display: 'Name',
+        name: 'name',
+        tag: 'input',
+        type: 'text',
+        placeholder: 'Your Name',
+      },
+      {
+        display: 'Email',
+        name: 'email',
+        tag: 'input',
+        type: 'email',
+        placeholder: 'Your Email',
+      },
+      {
+        display: 'Message',
+        name: 'body',
+        tag: 'textarea',
+        placeholder: 'Your Message...',
+        rows: 7,
+      },
+    ]
   });
 });
 </script>
 
 */
 
-  var pluginName = 'zammad_form',
+  var pluginName = 'ZammadForm',
   defaults = {
     debug: false,
     noCSS: false,
@@ -30,6 +54,30 @@ $(function() {
     messageTitle: 'Zammad Form',
     messageSubmit: 'Submit',
     messageThankYou: 'Thank you for your inquiry! We\'ll contact you soon as possible.',
+    messageNoConfig: 'Unable to load form config from server. Maybe featrue is disabled.',
+    attributes: [
+      {
+        display: 'Name',
+        name: 'name',
+        tag: 'input',
+        type: 'text',
+        placeholder: 'Your Name',
+      },
+      {
+        display: 'Email',
+        name: 'email',
+        tag: 'input',
+        type: 'email',
+        placeholder: 'Your Email',
+      },
+      {
+        display: 'Message',
+        name: 'body',
+        tag: 'textarea',
+        placeholder: 'Your Message...',
+        rows: 7,
+      },
+    ]
   };
 
   function Plugin( element, options ) {
@@ -53,30 +101,6 @@ $(function() {
 
     this._config  = {}
 
-    this.attributes = [
-      {
-        display: 'Name',
-        name: 'name',
-        tag: 'input',
-        type: 'text',
-        placeholder: 'Your Name',
-      },
-      {
-        display: 'Email',
-        name: 'email',
-        tag: 'input',
-        type: 'email',
-        placeholder: 'Your Email',
-      },
-      {
-        display: 'Message',
-        name: 'body',
-        tag: 'textarea',
-        placeholder: 'Your Message...',
-        rows: 7,
-      },
-    ]
-
     this.init();
   }
 
@@ -84,23 +108,29 @@ $(function() {
   Plugin.prototype.init = function () {
     var _this = this
 
-    _this.log('init')
+    _this.log('debug', 'init')
 
     if (!_this.options.noCSS) {
       _this.loadCss(_this.css_location)
     }
 
-    _this.log('endpoint_config: ' + _this.endpoint_config)
-    _this.log('endpoint_submit: ' + _this.endpoint_submit)
+    _this.log('debug', 'endpoint_config: ' + _this.endpoint_config)
+    _this.log('debug', 'endpoint_submit: ' + _this.endpoint_submit)
 
     // load config
     $.ajax({
       url: _this.endpoint_config,
     }).done(function(data) {
-      _this.log('config:', data)
+      _this.log('debug', 'config:', data)
       _this._config = data
-    }).fail(function() {
-      alert('Faild to load form config!')
+    }).fail(function(jqXHR, textStatus, errorThrown) {
+      if (jqXHR.status == 401) {
+        _this.log('error', 'Faild to load form config, feature is disabled!')
+      }
+      else {
+        _this.log('error', 'Faild to load form config!')
+      }
+      _this.noConfig()
     });
 
     // show form
@@ -132,6 +162,19 @@ $(function() {
   Plugin.prototype.submit = function() {
     var _this = this
 
+    // check min modal open time
+    if (_this.modalOpenTime) {
+      var currentTime = new Date().getTime()
+      var diff = currentTime - _this.modalOpenTime.getTime()
+      _this.log('debug', 'currentTime', currentTime)
+      _this.log('debug', 'modalOpenTime', _this.modalOpenTime.getTime())
+      _this.log('debug', 'diffTime', diff)
+      if (diff < 1000*8) {
+        alert('Sorry, you look like an robot!')
+        return
+      }
+    }
+
     $.ajax({
       method: 'post',
       url: _this.endpoint_submit,
@@ -169,9 +212,7 @@ $(function() {
     if (!params.title) {
       params.title = this.options.messageTitle
     }
-
-    _this.log('params', params)
-
+    _this.log('debug', 'params', params)
     return params
   }
 
@@ -185,6 +226,8 @@ $(function() {
   Plugin.prototype.render = function(e) {
     var _this = this
     _this.closeModal()
+    _this.modalOpenTime = new Date()
+    _this.log('debug', 'modalOpenTime:', _this.modalOpenTime)
 
     var element = '<div class="modal">\
       <div class="modal-backdrop js-close"></div>\
@@ -202,7 +245,7 @@ $(function() {
     if (this.options.showTitle && this.options.messageTitle != '') {
       $form.append('<h2>' + this.options.messageTitle + '</h2>')
     }
-    $.each(this.attributes, function( index, value ) {
+    $.each(this.options.attributes, function( index, value ) {
       var item = $('<div class="form-group"><label>' + value.display + '</label></div>')
       if (value.tag == 'input') {
         item.append('<input class="form-control" name="' + value.name + '" type="' + value.type + '" placeholder="' + value.placeholder + '">')
@@ -245,15 +288,43 @@ $(function() {
 
   // thanks
   Plugin.prototype.thanks = function(e) {
-    var thanks = $('<div class="js-thankyou">' + this.options.messageThankYou + '</div>')
-    this.$form.html(thanks)
+    var message = $('<div class="js-thankyou">' + this.options.messageThankYou + '</div>')
+    this.$form.html(message)
+  }
+
+  // unable to load config
+  Plugin.prototype.noConfig = function(e) {
+    var message = $('<div class="js-noConfig">' + this.options.messageNoConfig + '</div>')
+    if (this.$form) {
+      this.$form.html(message)
+    }
+    this.$element.html(message)
   }
 
   // log method
   Plugin.prototype.log = function() {
-    if (this.options.debug) {
-      console.log(this._name, arguments)
+    var args = Array.prototype.slice.call(arguments)
+    var level = args.shift()
+    if (!this.options.debug && level == 'debug') {
+      return
     }
+    args.unshift(this._name + '||' + level)
+    console.log.apply(console, args)
+
+    var logString = ''
+    $.each( args, function(index, item) {
+      logString = logString + ' '
+      if (typeof item == 'object') {
+        logString = logString + JSON.stringify(item)
+      }
+      else if (item && item.toString) {
+        logString = logString + item.toString()
+      }
+      else {
+        logString = logString + item
+      }
+    })
+    $('.js-logDisplay').prepend('<div>' + logString + '</div>')
   }
 
   $.fn[pluginName] = function ( options ) {

script/build/test_slice_tests.sh

@@ -23,6 +23,7 @@ elif [ "$LEVEL" == '2' ]; then
   rm test/browser/auth_test.rb
   rm test/browser/chat_test.rb
   rm test/browser/customer_ticket_create_test.rb
+  rm test/browser/form_test.rb
   rm test/browser/maintenance_message_test.rb
   rm test/browser/manage_test.rb
   rm test/browser/prefereces_test.rb
@@ -43,6 +44,7 @@ elif [ "$LEVEL" == '3' ]; then
   rm test/browser/agent_ticket_*.rb
   rm test/browser/auth_test.rb
   rm test/browser/customer_ticket_create_test.rb
+  rm test/browser/form_test.rb
   rm test/browser/maintenance_message_test.rb
   rm test/browser/manage_test.rb
   rm test/browser/signup_password_change_and_reset_test.rb

test/browser/form_test.rb

@@ -0,0 +1,281 @@
+# encoding: utf-8
+require 'browser_test_helper'
+
+class FormTest < TestCase
+
+  def test_basic
+    agent = browser_instance
+    login(
+      browser: agent,
+      username: 'master@example.com',
+      password: 'test',
+      url: browser_url,
+    )
+    tasks_close_all(
+      browser: agent,
+    )
+
+    # disable form
+    click(
+      browser: agent,
+      css: 'a[href="#manage"]',
+    )
+    click(
+      browser: agent,
+      css: 'a[href="#channels/form"]',
+    )
+    switch(
+      browser: agent,
+      css: '#content .js-formSetting',
+      type: 'off',
+    )
+    sleep 2
+
+    customer = browser_instance
+    location(
+      browser: customer,
+      url:     "#{browser_url}/assets/form/form.html",
+    )
+    sleep 4
+    match(
+      browser: customer,
+      css: '.js-logDisplay',
+      value: 'Faild to load form config, feature is disabled',
+    )
+    switch(
+      browser: agent,
+      css: '#content .js-formSetting',
+      type: 'on',
+    )
+    sleep 2
+
+    reload(
+      browser: customer,
+    )
+    sleep 4
+    match_not(
+      browser: customer,
+      css: '.js-logDisplay',
+      value: 'Faild to load form config, feature is disabled',
+    )
+
+    exists_not(
+      browser: customer,
+      css: 'body div.modal',
+    )
+
+    # modal dialog
+    click(
+      browser: customer,
+      css: '#feedback-form-modal',
+    )
+    exists(
+      browser: customer,
+      css: 'body div.modal',
+    )
+
+    # fill form valid data - but too fast
+    set(
+      browser: customer,
+      css: 'body div.modal [name="name"]',
+      value: 'some name',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="email"]',
+      value: 'discard@znuny.com',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="body"]',
+      value: "some text\nnew line",
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal button[type="submit"]',
+    )
+
+    # check warning
+    alert = customer.switch_to.alert
+    alert.dismiss()
+    sleep 10
+
+    # fill form invalid data - within correct time
+    set(
+      browser: customer,
+      css: 'body div.modal [name="name"]',
+      value: 'some name',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="email"]',
+      value: 'invalid_email',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="body"]',
+      value: "some text\nnew line",
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal button[type="submit"]',
+    )
+    sleep 10
+    exists(
+      browser: customer,
+      css: 'body div.modal',
+    )
+
+    # fill form valid data
+    set(
+      browser: customer,
+      css: 'body div.modal [name="email"]',
+      value: 'discard@znuny.com',
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal button[type="submit"]',
+    )
+    watch_for(
+      browser: customer,
+      css:     'body div.modal',
+      value:   'Thank you for your inquiry',
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal .js-close',
+    )
+    exists_not(
+      browser: customer,
+      css: 'body div.modal',
+    )
+
+    # fill form invalid data - within correct time
+    click(
+      browser: customer,
+      css: '#feedback-form-modal',
+    )
+    sleep 10
+    set(
+      browser: customer,
+      css: 'body div.modal [name="name"]',
+      value: '',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="email"]',
+      value: 'discard@znuny.com',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="body"]',
+      value: "some text\nnew line",
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal button[type="submit"]',
+    )
+    exists(
+      browser: customer,
+      css: 'body div.modal .has-error [name="name"]',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="name"]',
+      value: 'some sender',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="body"]',
+      value: '',
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal button[type="submit"]',
+    )
+    exists(
+      browser: customer,
+      css: 'body div.modal .has-error [name="body"]',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="body"]',
+      value: 'new body',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="email"]',
+      value: 'somebody@notexistinginanydomainspacealsonothere.nowhere',
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal button[type="submit"]',
+    )
+    exists(
+      browser: customer,
+      css: 'body div.modal .has-error [name="email"]',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="email"]',
+      value: 'notexistinginanydomainspacealsonothere@znuny.com',
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal button[type="submit"]',
+    )
+    exists(
+      browser: customer,
+      css: 'body div.modal .has-error [name="email"]',
+    )
+    set(
+      browser: customer,
+      css: 'body div.modal [name="email"]',
+      value: 'discard@znuny.com',
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal button[type="submit"]',
+    )
+    watch_for(
+      browser: customer,
+      css:     'body div.modal',
+      value:   'Thank you for your inquiry',
+    )
+    click(
+      browser: customer,
+      css: 'body div.modal .js-close',
+    )
+    exists_not(
+      browser: customer,
+      css: 'body div.modal',
+    )
+
+    # inline form
+    set(
+      browser: customer,
+      css: '.zammad-form [name="name"]',
+      value: 'Some Name',
+    )
+    set(
+      browser: customer,
+      css: '.zammad-form [name="email"]',
+      value: 'discard@znuny.com',
+    )
+    set(
+      browser: customer,
+      css: '.zammad-form [name="body"]',
+      value: 'some text',
+    )
+    click(
+      browser: customer,
+      css: '.zammad-form button[type="submit"]',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-form',
+      value:   'Thank you for your inquiry',
+    )
+  end
+
+end