Added browser tests for searchable_select and column_select. Streamline of test files.

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')

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') %>

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>

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 {

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>

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 {

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 {

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 {

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 {

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

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' )
+
+});

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' )
+
+});

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',