From 63485cd861ce0c66e3bac79f5b048e8845ee3499 Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Wed, 10 Feb 2016 14:54:07 +0100
Subject: [PATCH] Added browser tests for searchable_select and column_select.
 Streamline of test files.

---
 .../app/lib/app_post/column_select.coffee     |  2 +-
 .../app/views/generic/column_select.jst.eco   |  6 +-
 app/views/tests/form_column_select.html.erb   | 22 +++++++
 app/views/tests/form_extended.html.erb        |  2 +-
 .../tests/form_searchable_select.html.erb     | 22 +++++++
 app/views/tests/form_trim.html.erb            |  2 +-
 app/views/tests/form_validation.html.erb      |  2 +-
 app/views/tests/html_utils.html.erb           |  2 +-
 app/views/tests/model_ui.html.erb             |  2 +-
 config/routes/test.rb                         | 26 ++++----
 public/assets/tests/form_column_select.js     | 53 ++++++++++++++++
 .../{form-extended.js => form_extended.js}    |  0
 public/assets/tests/form_searchable_select.js | 62 +++++++++++++++++++
 .../tests/{form-trim.js => form_trim.js}      |  0
 ...{form-validation.js => form_validation.js} |  0
 .../tests/{html-utils.js => html_utils.js}    |  0
 .../assets/tests/{model-ui.js => model_ui.js} |  0
 test/browser/aab_unit_test.rb                 | 38 ++++++++----
 18 files changed, 208 insertions(+), 33 deletions(-)
 create mode 100644 app/views/tests/form_column_select.html.erb
 create mode 100644 app/views/tests/form_searchable_select.html.erb
 create mode 100644 public/assets/tests/form_column_select.js
 rename public/assets/tests/{form-extended.js => form_extended.js} (100%)
 create mode 100644 public/assets/tests/form_searchable_select.js
 rename public/assets/tests/{form-trim.js => form_trim.js} (100%)
 rename public/assets/tests/{form-validation.js => form_validation.js} (100%)
 rename public/assets/tests/{html-utils.js => html_utils.js} (100%)
 rename public/assets/tests/{model-ui.js => model_ui.js} (100%)

diff --git a/app/assets/javascripts/app/lib/app_post/column_select.coffee b/app/assets/javascripts/app/lib/app_post/column_select.coffee
index 8ce6a520c..135f317ec 100644
--- a/app/assets/javascripts/app/lib/app_post/column_select.coffee
+++ b/app/assets/javascripts/app/lib/app_post/column_select.coffee
@@ -88,7 +88,7 @@ class App.ColumnSelect extends Spine.Controller
 
   onFilterKeydown: (event) ->
     return if event.keyCode != 13
-    
+
     firstVisibleOption = @poolOptions.not('.is-filtered').not('.is-hidden').first()
     if firstVisibleOption
       @select firstVisibleOption.attr('data-value')
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/column_select.jst.eco b/app/assets/javascripts/app/views/generic/column_select.jst.eco
index b60d40b1b..8c1031be9 100644
--- a/app/assets/javascripts/app/views/generic/column_select.jst.eco
+++ b/app/assets/javascripts/app/views/generic/column_select.jst.eco
@@ -8,16 +8,16 @@
   multiple
 >
   <% for option in @attribute.options: %>
-  <option value="<%= option.value %>"><%= option.name %></option>
+  <option value="<%= option.value %>" <%= ' selected' if option.selected %>><%= option.name %></option>
   <% end %>
 </select>
-<div class="columnSelect-column columnSelect-column--selected js-selected">
+<div class="columnSelect-column columnSelect-column--selected js-selected" data-name="<%= @attribute.name %>">
   <div class="u-placeholder u-unselectable js-placeholder<%= ' is-hidden' if @values.length %>"><%- @T('Nothing selected') %></div>
   <% for option in @attribute.options: %>
   <div class="columnSelect-option js-remove js-option<%= ' is-hidden' if !option.selected %>" data-value="<%= option.value %>"><%= option.name %></div>
   <% end %>
 </div>
-<div class="columnSelect-column columnSelect-column--sidebar">
+<div class="columnSelect-column columnSelect-column--sidebar" data-name="<%= @attribute.name %>">
   <% if @attribute.options.length > 10: %>
   <div class="columnSelect-search">
     <%- @Icon('magnifier') %>
diff --git a/app/views/tests/form_column_select.html.erb b/app/views/tests/form_column_select.html.erb
new file mode 100644
index 000000000..9c3ecf8a3
--- /dev/null
+++ b/app/views/tests/form_column_select.html.erb
@@ -0,0 +1,22 @@
+
+<link rel="stylesheet" href="/assets/tests/qunit-1.10.0.css">
+<script src="/assets/tests/qunit-1.10.0.js"></script>
+<script src="/assets/tests/form_column_select.js"></script>
+
+<style type="text/css">
+body {
+  padding-top: 0px;
+}
+</style>
+
+<script type="text/javascript">
+</script>
+
+<div id="qunit" class="u-dontfold"></div>
+
+<div>
+  <form class="form-stacked pull-left">
+    <div id="forms"></div>
+    <button type="submit" class="btn btn-primary submit">Submit</button>
+  </form>
+</div>
diff --git a/app/views/tests/form_extended.html.erb b/app/views/tests/form_extended.html.erb
index f1cebbc57..572b80c6d 100644
--- a/app/views/tests/form_extended.html.erb
+++ b/app/views/tests/form_extended.html.erb
@@ -1,7 +1,7 @@
 
 <link rel="stylesheet" href="/assets/tests/qunit-1.10.0.css">
 <script src="/assets/tests/qunit-1.10.0.js"></script>
-<script src="/assets/tests/form-extended.js"></script>
+<script src="/assets/tests/form_extended.js"></script>
 
 <style type="text/css">
 body {
diff --git a/app/views/tests/form_searchable_select.html.erb b/app/views/tests/form_searchable_select.html.erb
new file mode 100644
index 000000000..5c585ba79
--- /dev/null
+++ b/app/views/tests/form_searchable_select.html.erb
@@ -0,0 +1,22 @@
+
+<link rel="stylesheet" href="/assets/tests/qunit-1.10.0.css">
+<script src="/assets/tests/qunit-1.10.0.js"></script>
+<script src="/assets/tests/form_searchable_select.js"></script>
+
+<style type="text/css">
+body {
+  padding-top: 0px;
+}
+</style>
+
+<script type="text/javascript">
+</script>
+
+<div id="qunit" class="u-dontfold"></div>
+
+<div>
+  <form class="form-stacked pull-left">
+    <div id="forms"></div>
+    <button type="submit" class="btn btn-primary submit">Submit</button>
+  </form>
+</div>
diff --git a/app/views/tests/form_trim.html.erb b/app/views/tests/form_trim.html.erb
index 219ed5dc8..1bcb1cc51 100644
--- a/app/views/tests/form_trim.html.erb
+++ b/app/views/tests/form_trim.html.erb
@@ -1,7 +1,7 @@
 
 <link rel="stylesheet" href="/assets/tests/qunit-1.10.0.css">
 <script src="/assets/tests/qunit-1.10.0.js"></script>
-<script src="/assets/tests/form-trim.js"></script>
+<script src="/assets/tests/form_trim.js"></script>
 
 <style type="text/css">
 body {
diff --git a/app/views/tests/form_validation.html.erb b/app/views/tests/form_validation.html.erb
index 22c588882..cf94eea6a 100644
--- a/app/views/tests/form_validation.html.erb
+++ b/app/views/tests/form_validation.html.erb
@@ -1,6 +1,6 @@
 <link rel="stylesheet" href="/assets/tests/qunit-1.10.0.css">
 <script src="/assets/tests/qunit-1.10.0.js"></script>
-<script src="/assets/tests/form-validation.js"></script>
+<script src="/assets/tests/form_validation.js"></script>
 
 <style type="text/css">
 body {
diff --git a/app/views/tests/html_utils.html.erb b/app/views/tests/html_utils.html.erb
index 1a19f66f8..d8edcd2d7 100644
--- a/app/views/tests/html_utils.html.erb
+++ b/app/views/tests/html_utils.html.erb
@@ -1,7 +1,7 @@
 
 <link rel="stylesheet" href="/assets/tests/qunit-1.10.0.css">
 <script src="/assets/tests/qunit-1.10.0.js"></script>
-<script src="/assets/tests/html-utils.js"></script>
+<script src="/assets/tests/html_utils.js"></script>
 
 <style type="text/css">
 body {
diff --git a/app/views/tests/model_ui.html.erb b/app/views/tests/model_ui.html.erb
index fe08e6629..15d1f02cb 100644
--- a/app/views/tests/model_ui.html.erb
+++ b/app/views/tests/model_ui.html.erb
@@ -1,7 +1,7 @@
 
 <link rel="stylesheet" href="/assets/tests/qunit-1.10.0.css">
 <script src="/assets/tests/qunit-1.10.0.js"></script>
-<script src="/assets/tests/model-ui.js"></script>
+<script src="/assets/tests/model_ui.js"></script>
 
 <style type="text/css">
 body {
diff --git a/config/routes/test.rb b/config/routes/test.rb
index 19ec957e3..986d311c7 100644
--- a/config/routes/test.rb
+++ b/config/routes/test.rb
@@ -1,16 +1,18 @@
 Zammad::Application.routes.draw do
 
-  match '/tests-core',            to: 'tests#core',            via: :get
-  match '/tests-ui',              to: 'tests#ui',              via: :get
-  match '/tests-model',           to: 'tests#model',           via: :get
-  match '/tests-model-ui',        to: 'tests#model_ui',        via: :get
-  match '/tests-form',            to: 'tests#form',            via: :get
-  match '/tests-form-trim',       to: 'tests#form_trim',       via: :get
-  match '/tests-form-extended',   to: 'tests#form_extended',   via: :get
-  match '/tests-form-validation', to: 'tests#form_validation', via: :get
-  match '/tests-table',           to: 'tests#table',           via: :get
-  match '/tests-html-utils',      to: 'tests#html_utils',      via: :get
-  match '/tests-taskbar',         to: 'tests#taskbar',         via: :get
-  match '/tests/wait/:sec',       to: 'tests#wait',            via: :get
+  match '/tests_core',                    to: 'tests#core',            via: :get
+  match '/tests_ui',                      to: 'tests#ui',              via: :get
+  match '/tests_model',                   to: 'tests#model',           via: :get
+  match '/tests_model_ui',                to: 'tests#model_ui',        via: :get
+  match '/tests_form',                    to: 'tests#form',            via: :get
+  match '/tests_form_trim',               to: 'tests#form_trim',       via: :get
+  match '/tests_form_extended',           to: 'tests#form_extended',   via: :get
+  match '/tests_form_validation',         to: 'tests#form_validation', via: :get
+  match '/tests_form_column_select',      to: 'tests#form_column_select', via: :get
+  match '/tests_form_searchable_select',  to: 'tests#form_searchable_select', via: :get
+  match '/tests_table',                   to: 'tests#table',           via: :get
+  match '/tests_html_utils',              to: 'tests#html_utils',      via: :get
+  match '/tests_taskbar',                 to: 'tests#taskbar',         via: :get
+  match '/tests/wait/:sec',               to: 'tests#wait',            via: :get
 
 end
diff --git a/public/assets/tests/form_column_select.js b/public/assets/tests/form_column_select.js
new file mode 100644
index 000000000..413ab6f7e
--- /dev/null
+++ b/public/assets/tests/form_column_select.js
@@ -0,0 +1,53 @@
+
+// column_select
+test( "column_select check", function() {
+
+  $('#forms').append('<hr><h1>column_select check</h1><form id="form1"></form>')
+  var el = $('#form1')
+  var defaults = {
+    column_select2: ['aaa', 'bbb'],
+  }
+  var options = {
+    'aaa': 'aaa display',
+    'bbb': 'bbb display',
+    'ccc': 'ccc display',
+  }
+  new App.ControllerForm({
+    el:        el,
+    model:     {
+      configure_attributes: [
+        { name: 'column_select1', display: 'ColumnSelect1', tag: 'column_select', options: options, null: true, default: defaults['column_select1'] },
+        { name: 'column_select2', display: 'ColumnSelect2', tag: 'column_select', options: options, null: false, default: defaults['column_select2'] },
+      ]
+    },
+    autofocus: true
+  })
+
+  var params = App.ControllerForm.params( el )
+  var test_params = {
+    column_select2: ['aaa', 'bbb'],
+  }
+  deepEqual( params, test_params, 'form param check' )
+
+  // add and remove selections
+  $('[data-name="column_select1"] .js-pool .js-option[data-value="bbb"]').click()
+
+  params = App.ControllerForm.params( el )
+  test_params = {
+    column_select1: 'bbb',
+    column_select2: ['aaa', 'bbb'],
+  }
+  deepEqual( params, test_params, 'form param check' )
+
+  $('[data-name="column_select1"] .js-pool .js-option[data-value="aaa"]').click()
+  $('[data-name="column_select2"] .js-pool .js-option[data-value="ccc"]').click()
+  $('[data-name="column_select2"].js-selected .js-option[data-value="aaa"]').click()
+
+  params = App.ControllerForm.params( el )
+  test_params = {
+    column_select1: ['aaa', 'bbb'],
+    column_select2: ['bbb', 'ccc'],
+  }
+  deepEqual( params, test_params, 'form param check' )
+
+});
diff --git a/public/assets/tests/form-extended.js b/public/assets/tests/form_extended.js
similarity index 100%
rename from public/assets/tests/form-extended.js
rename to public/assets/tests/form_extended.js
diff --git a/public/assets/tests/form_searchable_select.js b/public/assets/tests/form_searchable_select.js
new file mode 100644
index 000000000..4628bff54
--- /dev/null
+++ b/public/assets/tests/form_searchable_select.js
@@ -0,0 +1,62 @@
+// searchable_select
+test( "searchable_select check", function() {
+
+  $('#forms').append('<hr><h1>searchable_select check</h1><form id="form1"></form>')
+  var el = $('#form1')
+  var defaults = {
+    searchable_select2: 'bbb',
+  }
+  var options = {
+    'aaa': 'aaa display',
+    'bbb': 'bbb display',
+    'ccc': 'ccc display',
+  }
+  new App.ControllerForm({
+    el:        el,
+    model:     {
+      configure_attributes: [
+        { name: 'searchable_select1', display: 'SearchableSelect1', tag: 'searchable_select', options: options, null: true, default: defaults['searchable_select1'] },
+        { name: 'searchable_select2', display: 'SearchableSelect2', tag: 'searchable_select', options: options, null: false, default: defaults['searchable_select2'] },
+      ]
+    },
+    autofocus: true
+  })
+
+  var params = App.ControllerForm.params( el )
+  var test_params = {
+    searchable_select1: '',
+    searchable_select2: 'bbb',
+  }
+  deepEqual( params, test_params, 'form param check' )
+
+  // change selection
+  $('[name="searchable_select1"].js-shadow + .js-input').focus().val('').trigger('input')
+  var entries = $('[name="searchable_select1"]').closest('.searchableSelect').find('.js-optionsList li:not(.is-hidden)').length
+  equal(entries, 3, 'dropdown count')
+  $('[name="searchable_select1"].js-shadow + .js-input').focus().val('ccc display').trigger('input')
+  var entries = $('[name="searchable_select1"]').closest('.searchableSelect').find('.js-optionsList li:not(.is-hidden)').length
+  equal(entries, 1, 'dropdown count')
+  $('[name="searchable_select1"]').closest('.searchableSelect').find('.js-optionsList li:not(.is-hidden)').first().click()
+  params = App.ControllerForm.params( el )
+  test_params = {
+    searchable_select1: 'ccc',
+    searchable_select2: 'bbb',
+  }
+  deepEqual( params, test_params, 'form param check' )
+
+  $('[name="searchable_select2"].js-shadow + .js-input').focus().val('').trigger('input')
+  var entries = $('[name="searchable_select2"]').closest('.searchableSelect').find('.js-optionsList li:not(.is-hidden)').length
+  equal(entries, 3, 'dropdown count')
+  $('[name="searchable_select2"].js-shadow + .js-input').focus().val('ccc display').trigger('input')
+  var entries = $('[name="searchable_select2"]').closest('.searchableSelect').find('.js-optionsList li:not(.is-hidden)').length
+  equal(entries, 1, 'dropdown count')
+  $('[name="searchable_select2"]').closest('.searchableSelect').find('.js-optionsList li:not(.is-hidden)').first().click()
+
+  params = App.ControllerForm.params( el )
+  test_params = {
+    searchable_select1: 'ccc',
+    searchable_select2: 'ccc',
+  }
+  deepEqual( params, test_params, 'form param check' )
+
+});
diff --git a/public/assets/tests/form-trim.js b/public/assets/tests/form_trim.js
similarity index 100%
rename from public/assets/tests/form-trim.js
rename to public/assets/tests/form_trim.js
diff --git a/public/assets/tests/form-validation.js b/public/assets/tests/form_validation.js
similarity index 100%
rename from public/assets/tests/form-validation.js
rename to public/assets/tests/form_validation.js
diff --git a/public/assets/tests/html-utils.js b/public/assets/tests/html_utils.js
similarity index 100%
rename from public/assets/tests/html-utils.js
rename to public/assets/tests/html_utils.js
diff --git a/public/assets/tests/model-ui.js b/public/assets/tests/model_ui.js
similarity index 100%
rename from public/assets/tests/model-ui.js
rename to public/assets/tests/model_ui.js
diff --git a/test/browser/aab_unit_test.rb b/test/browser/aab_unit_test.rb
index 6b11065cd..4d082d235 100644
--- a/test/browser/aab_unit_test.rb
+++ b/test/browser/aab_unit_test.rb
@@ -4,7 +4,7 @@ require 'browser_test_helper'
 class AAbUnitTest < TestCase
   def test_core
     @browser = browser_instance
-    location( url: browser_url + '/tests-core' )
+    location( url: browser_url + '/tests_core' )
     sleep 10
     match(
       css: '.result .failed',
@@ -14,21 +14,21 @@ class AAbUnitTest < TestCase
 
   def test_ui
     @browser = browser_instance
-    location( url: browser_url + '/tests-ui' )
+    location( url: browser_url + '/tests_ui' )
     sleep 8
     match(
       css: '.result .failed',
       value: '0',
     )
 
-    location( url: browser_url + '/tests-model' )
+    location( url: browser_url + '/tests_model' )
     sleep 8
     match(
       css: '.result .failed',
       value: '0',
     )
 
-    location( url: browser_url + '/tests-model-ui' )
+    location( url: browser_url + '/tests_model_ui' )
     sleep 8
     match(
       css: '.result .failed',
@@ -38,27 +38,41 @@ class AAbUnitTest < TestCase
 
   def test_form
     @browser = browser_instance
-    location( url: browser_url + '/tests-form' )
-    sleep 8
+    location( url: browser_url + '/tests_form' )
+    sleep 4
     match(
       css: '.result .failed',
       value: '0',
     )
 
-    location( url: browser_url + '/tests-form-trim' )
+    location( url: browser_url + '/tests_form_trim' )
     match(
       css: '.result .failed',
       value: '0',
     )
 
-    location( url: browser_url + '/tests-form-extended' )
-    sleep 8
+    location( url: browser_url + '/tests_form_extended' )
+    sleep 4
     match(
       css: '.result .failed',
       value: '0',
     )
 
-    location( url: browser_url + '/tests-form-validation' )
+    location( url: browser_url + '/tests_form_searchable_select' )
+    sleep 2
+    match(
+      css: '.result .failed',
+      value: '0',
+    )
+
+    location( url: browser_url + '/tests_form_column_select' )
+    sleep 2
+    match(
+      css: '.result .failed',
+      value: '0',
+    )
+
+    location( url: browser_url + '/tests_form_validation' )
     sleep 4
     match(
       css: '.result .failed',
@@ -68,14 +82,14 @@ class AAbUnitTest < TestCase
 
   def test_table
     @browser = browser_instance
-    location( url: browser_url + '/tests-table' )
+    location( url: browser_url + '/tests_table' )
     sleep 4
     match(
       css: '.result .failed',
       value: '0',
     )
 
-    location( url: browser_url + '/tests-html-utils' )
+    location( url: browser_url + '/tests_html_utils' )
     sleep 4
     match(
       css: '.result .failed',