Private fn chat no jquery

public/assets/chat/chat.css

@@ -10,7 +10,6 @@
   border-radius: 5px 5px 0 0;
   will-change: bottom;
   display: none;
-  -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   z-index: 999; }
@@ -20,9 +19,10 @@
       width: 100%;
       border-radius: 0 !important;
       font-size: 16px; } }
+  .zammad-chat--animate {
+    transition: transform 500ms; }
 
 .zammad-chat.zammad-chat-is-loaded {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   opacity: 0; }
@@ -49,6 +49,7 @@
   background: #379ad7;
   color: white;
   line-height: 2.5em;
+  height: 2.5em;
   box-shadow: 0 -1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.3) inset, 0 -1px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.13);
   position: relative;
   border-radius: 5px 5px 0 0;
@@ -134,28 +135,15 @@
   background: #52c782; }
 
 .zammad-chat-agent-status[data-status="connecting"]:before {
-  -webkit-animation: linear connect-fade 600ms infinite alternate;
   animation: linear connect-fade 600ms infinite alternate;
   background: #faab00; }
 
-@-webkit-keyframes connect-fade {
-  from {
-    opacity: .5;
-    -webkit-transform: scale(0.6);
-    transform: scale(0.6); }
-  to {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1); } }
-
 @keyframes connect-fade {
   from {
     opacity: .5;
-    -webkit-transform: scale(0.6);
     transform: scale(0.6); }
   to {
     opacity: 1;
-    -webkit-transform: scale(1);
     transform: scale(1); } }
 
 .zammad-chat-modal {
@@ -169,13 +157,10 @@
   background: white;
   z-index: 1;
   padding: 20px;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center; }
   .zammad-chat-modal:empty {
@@ -196,10 +181,8 @@
 
 .zammad-scroll-hint {
   background: #f9fafa;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   border-bottom: 1px solid #e8e8e8;
@@ -217,15 +200,14 @@
   padding: 0.5em 1em;
   overflow: auto;
   background: white;
-  -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   display: none;
-  -webkit-overflow-scrolling: touch; }
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain; }
   @media only screen and (max-width: 768px) {
     .zammad-chat-body {
       height: auto;
-      -webkit-flex: 1;
       -ms-flex: 1;
       flex: 1; } }
 
@@ -289,41 +271,25 @@
   height: 0.55em;
   width: 0.55em;
   display: inline-block;
-  -webkit-animation: ease-in-out load-fade 600ms infinite alternate;
   animation: ease-in-out load-fade 600ms infinite alternate; }
 
 .zammad-chat-loading-circle + .zammad-chat-loading-circle {
-  -webkit-animation-delay: .13s;
   animation-delay: .13s; }
 
 .zammad-chat-loading-circle + .zammad-chat-loading-circle + .zammad-chat-loading-circle {
-  -webkit-animation-delay: .26s;
   animation-delay: .26s; }
 
-@-webkit-keyframes load-fade {
-  from {
-    opacity: .5;
-    -webkit-transform: scale(0.6);
-    transform: scale(0.6); }
-  67% {
-    opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1); } }
-
 @keyframes load-fade {
   from {
     opacity: .5;
-    -webkit-transform: scale(0.6);
     transform: scale(0.6); }
   67% {
     opacity: 1;
-    -webkit-transform: scale(1);
     transform: scale(1); } }
 
 .zammad-chat-controls {
   overflow: hidden;
   display: none;
-  -webkit-align-items: flex-end;
   -ms-flex-align: end;
   align-items: flex-end;
   border-top: 1px solid #ededed;
@@ -335,7 +301,6 @@
   background: white; }
 
 .zammad-chat-is-open .zammad-chat-controls {
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
 
@@ -356,7 +321,6 @@
   box-shadow: none;
   box-sizing: content-box;
   outline: none;
-  -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   overflow: auto; }

public/assets/chat/chat.scss

@@ -19,6 +19,10 @@
     border-radius: 0 !important;
     font-size: 16px;
   }
+
+  &--animate {
+    transition: transform 500ms;
+  }
 }
 .zammad-chat.zammad-chat-is-loaded {
   display: flex;
@@ -50,6 +54,7 @@
   background: hsl(203,67%,53%);
   color: white;
   line-height: 2.5em;
+  height: 2.5em;
   box-shadow:
     0 -1px rgba(0,0,0,.1),
     0 1px rgba(255,255,255,.3) inset,
@@ -231,6 +236,7 @@
   flex: 1;
   display: none;
   -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
 
   @media only screen and (max-width: 768px) {
     height: auto;

public/assets/chat/gulpfile.js

@@ -37,6 +37,23 @@ gulp.task('js', function(){
     .pipe(gulp.dest('./'));
 });
 
+
+gulp.task('no-jquery', function(){
+  var templates = gulp.src('views/*.eco')
+    .pipe(eco({namespace: 'zammadChatTemplates'}));
+
+  var js = gulp.src('chat-no-jquery.coffee')
+    .pipe(plumber())
+    .pipe(coffee({bare: true}).on('error', gutil.log));
+
+  return merge(templates, js)
+    .pipe(concat('chat-no-jquery.js'))
+    .pipe(gulp.dest('./'))
+    .pipe(uglify())
+    .pipe(rename({ extname: '.min.js' }))
+    .pipe(gulp.dest('./'));
+});
+
 gulp.task('default', function(){
   var cssWatcher = gulp.watch(['chat.scss'], ['css']);
   cssWatcher.on('change', function(event) {
@@ -47,4 +64,9 @@ gulp.task('default', function(){
   jsWatcher.on('change', function(event) {
     console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
   });
+
+  var js2Watcher = gulp.watch(['chat-no-jquery.coffee'], ['no-jquery']);
+  js2Watcher.on('change', function(event) {
+    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
+  });
 });

public/assets/chat/znuny-no-jquery-open_by_button.html

@@ -0,0 +1,174 @@
+<!doctype html>
+<html lang="de-de">
+<head>
+  <meta charset="utf-8">
+  <title>Zammad Chat</title>
+  <link rel="stylesheet" href="znuny.css">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <style>
+    body {
+      margin: 0;
+      font-family: sans-serif;
+    }
+
+    .mockup {
+      vertical-align: bottom;
+    }
+
+    .settings {
+      position: fixed;
+      left: 20px;
+      top: 20px;
+      background: white;
+      font-size: 14px;
+      padding: 10px;
+      border-radius: 5px;
+      box-shadow: 0 3px 10px rgba(0,0,0,.3);
+      width: 500px;
+    }
+
+    .settings input {
+      vertical-align: middle;
+    }
+    .settings input + input {
+      margin-right: 3px;
+    }
+
+    table td:first-child {
+      text-align: right;
+      padding-right: 0;
+    }
+
+    table td.log {
+      text-align: left;
+      padding-right: 0;
+      word-break: break-all;
+    }
+
+    td {
+      padding: 5px;
+    }
+
+    h2 {
+      font-size: 1em;
+      margin: 0;
+    }
+
+    @media only screen and (max-width: 768px) {
+      .settings {
+        display: none;
+      }
+    }
+
+    .Box {
+      background: hsl(0,0%,91%);
+      width: 26px;
+      height: 24px;
+      color: hsl(0,0%,47%);
+      float: left;
+    }
+    .Box.Active {
+      background: hsl(0,0%,36%);
+      color: white;
+    }
+  </style>
+</head>
+<body>
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+
+<form class="settings" onsubmit="return false">
+  <table>
+    <tr>
+      <td><h2>Settings</h2>
+      <td>
+    <tr>
+      <td>
+        <input id="flat" type="checkbox" onchange="updateStyle(this.form)">
+      <td>
+        <label for="flat">Flat Design</label>
+    <tr>
+      <td>
+        <input type="color" id="color" value="#AE99D6" oninput="updateStyle(this.form)">
+      <td>
+        <label for="color">Color</label>
+    <tr>
+      <td>
+        <input type="range" id="fontSize" value="12" min="11" max="18" name="fontSize" oninput="updateStyle(this.form)">
+        <output for="fontSize" id="fontSizeOutput" style="width: 20px; display: inline-block">12</output>px
+      <td>
+        <label for="fontSize">Font Size</label>
+    <tr>
+      <td>
+      <td><button class="open-zammad-chat">Open Chat</button>
+    <tr>
+      <td class="log"><h2>Log</h2>
+      <td>
+    <tr>
+      <td colspan="2" class="log js-chatLogDisplay">
+  </table>
+</form>
+
+<script src="chat-no-jquery.js"></script>
+<script>
+  function getSearchParameters() {
+        var prmstr = window.location.search.substr(1);
+        return prmstr != null && prmstr != '' ? transformToAssocArray(prmstr) : {};
+  }
+  function transformToAssocArray( prmstr ) {
+      var params = {};
+      var prmarr = prmstr.split('&');
+      for ( var i = 0; i < prmarr.length; i++) {
+          var tmparr = prmarr[i].split('=');
+          params[tmparr[0]] = tmparr[1];
+      }
+      return params;
+  }
+  var hostname = window.location.hostname;
+  var port = window.location.port;
+  var params = getSearchParameters();
+  var host = 'ws://'+ (location.host || 'localhost').split(':')[0] +':6042'
+  if (params['port']) {
+    host = 'ws://' + hostname + ':' + params['port']
+  }
+  cssUrl = 'http://' + hostname + ':' + port + '/assets/chat/chat.css'
+
+  var chat = new ZammadChat({
+    chatId: 1,
+    host: host,
+    cssUrl: cssUrl,
+    debug: true,
+    background: '#494d52',
+    flat: true,
+    show: false,
+    idleTimeout: 1,
+    idleTimeoutIntervallCheck: 0.5,
+    inactiveTimeout: 2,
+    inactiveTimeoutIntervallCheck: 0.5,
+    waitingListTimeout: 1.2,
+    waitingListTimeoutIntervallCheck: 0.5,
+  });
+
+  function updateStyle(form){
+    chat.el.classList.toggle('zammad-chat--flat', form.flat.checked);
+    var surfaces = document.querySelectorAll('.zammad-chat-header, .zammad-chat-message--customer .zammad-chat-message-body, .zammad-chat-button');
+    for(var i=0; i<surfaces.length; i++){
+      surfaces[i].style.background = form.color.value;
+    }
+    chat.options.background = form.color.value;
+    chat.el.style.fontSize = form.fontSize.value +'px';
+    form.fontSizeOutput.textContent = form.fontSize.value;
+  }
+</script>
+</body>
+</html>

public/assets/chat/znuny-no-jquery.html

@@ -0,0 +1,173 @@
+<!doctype html>
+<html lang="de-de">
+<head>
+  <meta charset="utf-8">
+  <title>Zammad Chat</title>
+  <link rel="stylesheet" href="znuny.css">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <style>
+    body {
+      margin: 0;
+      font-family: sans-serif;
+    }
+
+    .mockup {
+      vertical-align: bottom;
+    }
+
+    .settings {
+      position: fixed;
+      left: 20px;
+      top: 20px;
+      background: white;
+      font-size: 14px;
+      padding: 10px;
+      border-radius: 5px;
+      box-shadow: 0 3px 10px rgba(0,0,0,.3);
+      width: 500px;
+    }
+
+    .settings input {
+      vertical-align: middle;
+    }
+    .settings input + input {
+      margin-right: 3px;
+    }
+
+    table td:first-child {
+      text-align: right;
+      padding-right: 0;
+    }
+
+    table td.log {
+      text-align: left;
+      padding-right: 0;
+      word-break: break-all;
+    }
+
+    td {
+      padding: 5px;
+    }
+
+    h2 {
+      font-size: 1em;
+      margin: 0;
+    }
+
+    @media only screen and (max-width: 768px) {
+      .settings {
+        display: none;
+      }
+    }
+
+    .Box {
+      background: hsl(0,0%,91%);
+      width: 26px;
+      height: 24px;
+      color: hsl(0,0%,47%);
+      float: left;
+    }
+    .Box.Active {
+      background: hsl(0,0%,36%);
+      color: white;
+    }
+  </style>
+</head>
+<body>
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+<img class="mockup" width="100%" src="znuny.png">
+
+<form class="settings" onsubmit="return false">
+  <table>
+    <tr>
+      <td><h2>Settings</h2>
+      <td>
+    <tr>
+      <td>
+        <input id="flat" type="checkbox" onchange="updateStyle(this.form)">
+      <td>
+        <label for="flat">Flat Design</label>
+    <tr>
+      <td>
+        <input type="color" id="color" value="#AE99D6" oninput="updateStyle(this.form)">
+      <td>
+        <label for="color">Color</label>
+    <tr>
+      <td>
+        <input type="range" id="fontSize" value="12" min="11" max="18" name="fontSize" oninput="updateStyle(this.form)">
+        <output for="fontSize" id="fontSizeOutput" style="width: 20px; display: inline-block">12</output>px
+      <td>
+        <label for="fontSize">Font Size</label>
+    <tr>
+      <td>
+      <td><button class="open-zammad-chat">Open Chat</button>
+    <tr>
+      <td class="log"><h2>Log</h2>
+      <td>
+    <tr>
+      <td colspan="2" class="log js-chatLogDisplay">
+  </table>
+</form>
+
+<script src="chat-no-jquery.js"></script>
+<script>
+  function getSearchParameters() {
+        var prmstr = window.location.search.substr(1);
+        return prmstr != null && prmstr != '' ? transformToAssocArray(prmstr) : {};
+  }
+  function transformToAssocArray( prmstr ) {
+      var params = {};
+      var prmarr = prmstr.split('&');
+      for ( var i = 0; i < prmarr.length; i++) {
+          var tmparr = prmarr[i].split('=');
+          params[tmparr[0]] = tmparr[1];
+      }
+      return params;
+  }
+  var hostname = window.location.hostname;
+  var port = window.location.port;
+  var params = getSearchParameters();
+  var host = 'ws://'+ (location.host || 'localhost').split(':')[0] +':6042'
+  if (params['port']) {
+    host = 'ws://' + hostname + ':' + params['port']
+  }
+  cssUrl = 'http://' + hostname + ':' + port + '/assets/chat/chat.css'
+
+  var chat = new ZammadChat({
+    chatId: 1,
+    host: host,
+    cssUrl: cssUrl,
+    debug: true,
+    background: '#494d52',
+    flat: true,
+    idleTimeout: 1,
+    idleTimeoutIntervallCheck: 0.5,
+    inactiveTimeout: 2,
+    inactiveTimeoutIntervallCheck: 0.5,
+    waitingListTimeout: 1.2,
+    waitingListTimeoutIntervallCheck: 0.5,
+  });
+
+  function updateStyle(form){
+    chat.el.classList.toggle('zammad-chat--flat', form.flat.checked);
+    var surfaces = document.querySelectorAll('.zammad-chat-header, .zammad-chat-message--customer .zammad-chat-message-body, .zammad-chat-button');
+    for(var i=0; i<surfaces.length; i++){
+      surfaces[i].style.background = form.color.value;
+    }
+    chat.options.background = form.color.value;
+    chat.el.style.fontSize = form.fontSize.value +'px';
+    form.fontSizeOutput.textContent = form.fontSize.value;
+  }
+</script>
+</body>
+</html>

public/assets/chat/znuny.html

@@ -157,7 +157,6 @@
     debug: true,
     background: '#494d52',
     flat: true,
-    show: true,
     idleTimeout: 1,
     idleTimeoutIntervallCheck: 0.5,
     inactiveTimeout: 2,

script/build/test_slice_tests.sh

@@ -59,6 +59,7 @@ if [ "$LEVEL" == '1' ]; then
   rm test/browser/agent_user_profile_test.rb
   # test/browser/auth_test.rb
   rm test/browser/chat_test.rb
+  rm test/browser/chat_no_jquery_test.rb
   rm test/browser/customer_ticket_create_fields_test.rb
   rm test/browser/customer_ticket_create_test.rb
   rm test/browser/first_steps_test.rb
@@ -140,6 +141,7 @@ elif [ "$LEVEL" == '2' ]; then
   rm test/browser/agent_user_profile_test.rb
   rm test/browser/auth_test.rb
   rm test/browser/chat_test.rb
+  rm test/browser/chat_no_jquery_test.rb
   rm test/browser/customer_ticket_create_fields_test.rb
   rm test/browser/customer_ticket_create_test.rb
   rm test/browser/first_steps_test.rb
@@ -221,6 +223,7 @@ elif [ "$LEVEL" == '3' ]; then
   rm test/browser/agent_user_profile_test.rb
   rm test/browser/auth_test.rb
   rm test/browser/chat_test.rb
+  rm test/browser/chat_no_jquery_test.rb
   rm test/browser/customer_ticket_create_fields_test.rb
   rm test/browser/customer_ticket_create_test.rb
   rm test/browser/first_steps_test.rb
@@ -302,6 +305,7 @@ elif [ "$LEVEL" == '4' ]; then
   rm test/browser/agent_user_profile_test.rb
   rm test/browser/auth_test.rb
   rm test/browser/chat_test.rb
+  rm test/browser/chat_no_jquery_test.rb
   # test/browser/customer_ticket_create_fields_test.rb
   # test/browser/customer_ticket_create_test.rb
   rm test/browser/first_steps_test.rb
@@ -382,6 +386,7 @@ elif [ "$LEVEL" == '5' ]; then
   # test/browser/agent_user_profile_test.rb
   rm test/browser/auth_test.rb
   rm test/browser/chat_test.rb
+  rm test/browser/chat_no_jquery_test.rb
   rm test/browser/customer_ticket_create_fields_test.rb
   rm test/browser/customer_ticket_create_test.rb
   rm test/browser/first_steps_test.rb
@@ -465,6 +470,7 @@ elif [ "$LEVEL" == '6' ]; then
   rm test/browser/agent_user_profile_test.rb
   rm test/browser/auth_test.rb
   # test/browser/chat_test.rb
+  # test/browser/chat_no_jquery_test.rb
   rm test/browser/customer_ticket_create_fields_test.rb
   rm test/browser/customer_ticket_create_test.rb
   # test/browser/first_steps_test.rb

test/browser/chat_no_jquery_test.rb

@@ -0,0 +1,864 @@
+require 'browser_test_helper'
+
+class ChatNoJqueryTest < TestCase
+
+  def test_basic
+    chat_url = "#{browser_url}/assets/chat/znuny-no-jquery.html?port=#{ENV['WS_PORT']}"
+    agent = browser_instance
+    login(
+      browser:  agent,
+      username: 'master@example.com',
+      password: 'test',
+      url:      browser_url,
+    )
+    tasks_close_all(
+      browser: agent,
+    )
+
+    # disable chat
+    click(
+      browser: agent,
+      css:     'a[href="#manage"]',
+    )
+    click(
+      browser: agent,
+      css:     '.content.active a[href="#channels/chat"]',
+    )
+    switch(
+      browser: agent,
+      css:     '.content.active .js-chatSetting',
+      type:    'off',
+    )
+
+    # nav bar shuld be gone
+    sleep 2
+    exists_not(
+      browser: agent,
+      css:     'a[href="#customer_chat"]',
+    )
+    sleep 15
+
+    customer = browser_instance
+    location(
+      browser: customer,
+      url:     chat_url,
+    )
+    sleep 4
+    exists_not(
+      browser: customer,
+      css:     '.zammad-chat',
+    )
+    match(
+      browser: customer,
+      css:     '.settings',
+      value:   '{"state":"chat_disabled"}',
+    )
+    click(
+      browser: agent,
+      css:     'a[href="#manage"]',
+    )
+    click(
+      browser: agent,
+      css:     '.content.active a[href="#channels/chat"]',
+    )
+    switch(
+      browser: agent,
+      css:     '.content.active .js-chatSetting',
+      type:    'on',
+    )
+    sleep 15 # wait for rerendering
+    switch(
+      browser: agent,
+      css:     '#navigation .js-chatMenuItem .js-switch',
+      type:    'off',
+    )
+    click(
+      browser: agent,
+      css:     'a[href="#customer_chat"]',
+      wait:    2,
+    )
+    match_not(
+      browser: agent,
+      css:     '.active.content',
+      value:   'disabled',
+    )
+
+    reload(
+      browser: customer,
+    )
+    sleep 4
+    exists_not(
+      browser: customer,
+      css:     '.zammad-chat',
+    )
+    match_not(
+      browser: customer,
+      css:     '.settings',
+      value:   '{"state":"chat_disabled"}',
+    )
+    match(
+      browser: customer,
+      css:     '.settings',
+      value:   '{"event":"chat_status_customer","data":{"state":"offline"}}',
+    )
+    click(
+      browser: agent,
+      css:     'a[href="#customer_chat"]',
+    )
+    switch(
+      browser: agent,
+      css:     '#navigation .js-chatMenuItem .js-switch',
+      type:    'on',
+    )
+    reload(
+      browser: customer,
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      timeout: 5,
+    )
+    match_not(
+      browser: customer,
+      css:     '.settings',
+      value:   '{"state":"chat_disabled"}',
+    )
+    match_not(
+      browser: customer,
+      css:     '.settings',
+      value:   '{"event":"chat_status_customer","data":{"state":"offline"}}',
+    )
+    match(
+      browser: customer,
+      css:     '.settings',
+      value:   '"data":{"state":"online"}',
+    )
+
+    # init chat
+    click(
+      browser: customer,
+      css:     '.zammad-chat .js-chat-open',
+    )
+    exists(
+      browser: customer,
+      css:     '.zammad-chat-is-shown',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(waiting|warte)',
+    )
+    watch_for(
+      browser: agent,
+      css:     '.js-chatMenuItem .counter',
+      value:   '1',
+    )
+    click(
+      browser: customer,
+      css:     '.zammad-chat .js-chat-toggle .zammad-chat-header-icon',
+    )
+    watch_for_disappear(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(waiting|warte)',
+    )
+    watch_for_disappear(
+      browser: agent,
+      css:     '.js-chatMenuItem .counter',
+    )
+
+  end
+
+  def test_basic_usecase1
+    chat_url = "#{browser_url}/assets/chat/znuny-no-jquery.html?port=#{ENV['WS_PORT']}"
+    agent = browser_instance
+    login(
+      browser:  agent,
+      username: 'master@example.com',
+      password: 'test',
+      url:      browser_url,
+    )
+    tasks_close_all(
+      browser: agent,
+    )
+    click(
+      browser: agent,
+      css:     'a[href="#customer_chat"]',
+    )
+    agent.find_elements(css: '.active .chat-window .js-disconnect:not(.is-hidden)').each(&:click)
+    agent.find_elements(css: '.active .chat-window .js-close').each(&:click)
+
+    customer = browser_instance
+    location(
+      browser: customer,
+      url:     chat_url,
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      timeout: 5,
+    )
+    click(
+      browser: customer,
+      css:     '.js-chat-open',
+    )
+    exists(
+      browser: customer,
+      css:     '.zammad-chat-is-shown',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(waiting|warte)',
+    )
+
+    click(
+      browser: agent,
+      css:     '.active .js-acceptChat',
+    )
+    sleep 2
+    exists_not(
+      browser: agent,
+      css:     '.active .chat-window .chat-status.is-modified',
+    )
+    match(
+      browser: agent,
+      css:     '.active .chat-window .js-body',
+      value:   chat_url,
+    )
+    set(
+      browser: agent,
+      css:     '.active .chat-window .js-customerChatInput',
+      value:   'my name is me',
+    )
+    click(
+      browser: agent,
+      css:     '.active .chat-window .js-send',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-agent-status',
+      value:   'online',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   'my name is me',
+    )
+    set(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-input',
+      value:   'my name is customer',
+    )
+    click(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-send',
+    )
+    watch_for(
+      browser: agent,
+      css:     '.active .chat-window',
+      value:   'my name is customer',
+    )
+    exists(
+      browser: agent,
+      css:     '.active .chat-window .chat-status.is-modified',
+    )
+    click(
+      browser: agent,
+      css:     '.active .chat-window .js-customerChatInput',
+    )
+    exists_not(
+      browser: agent,
+      css:     '.active .chat-window .chat-status.is-modified',
+    )
+    click(
+      browser: customer,
+      css:     '.js-chat-toggle .zammad-chat-header-icon',
+    )
+    watch_for(
+      browser: agent,
+      css:     '.active .chat-window',
+      value:   'closed the conversation',
+    )
+  end
+
+  def test_basic_usecase2
+    chat_url = "#{browser_url}/assets/chat/znuny-no-jquery.html?port=#{ENV['WS_PORT']}"
+    agent = browser_instance
+    login(
+      browser:  agent,
+      username: 'master@example.com',
+      password: 'test',
+      url:      browser_url,
+    )
+    tasks_close_all(
+      browser: agent,
+    )
+    click(
+      browser: agent,
+      css:     'a[href="#customer_chat"]',
+    )
+    agent.find_elements(css: '.active .chat-window .js-disconnect:not(.is-hidden)').each(&:click)
+    agent.find_elements(css: '.active .chat-window .js-close').each(&:click)
+
+    customer = browser_instance
+    location(
+      browser: customer,
+      url:     chat_url,
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      timeout: 5,
+    )
+    click(
+      browser: customer,
+      css:     '.js-chat-open',
+    )
+    exists(
+      browser: customer,
+      css:     '.zammad-chat-is-shown',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(waiting|warte)',
+    )
+    click(
+      browser: agent,
+      css:     '.active .js-acceptChat',
+    )
+    sleep 2
+    exists_not(
+      browser: agent,
+      css:     '.active .chat-window .chat-status.is-modified',
+    )
+
+    # keep focus outside of chat window to check .chat-status.is-modified later
+    click(
+      browser: agent,
+      css:     '#global-search',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-agent-status',
+      value:   'online',
+    )
+    set(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-input',
+      value:   'my name is customer',
+    )
+    click(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-send',
+    )
+    watch_for(
+      browser: agent,
+      css:     '.active .chat-window',
+      value:   'my name is customer',
+    )
+    exists(
+      browser: agent,
+      css:     '.active .chat-window .chat-status.is-modified',
+    )
+    set(
+      browser: agent,
+      css:     '.active .chat-window .js-customerChatInput',
+      value:   'my name is me',
+    )
+    exists_not(
+      browser: agent,
+      css:     '.active .chat-window .chat-status.is-modified',
+    )
+    click(
+      browser: agent,
+      css:     '.active .chat-window .js-send',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   'my name is me',
+    )
+    click(
+      browser: agent,
+      css:     '.active .chat-window .js-disconnect:not(.is-hidden)',
+    )
+    click(
+      browser: agent,
+      css:     '.active .chat-window .js-close',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-agent-status',
+      value:   'offline',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(Chat closed by|Chat beendet von)',
+    )
+    click(
+      browser: customer,
+      css:     '.zammad-chat .js-chat-toggle .zammad-chat-header-icon',
+    )
+    watch_for_disappear(
+      browser: customer,
+      css:     '.zammad-chat-is-open',
+    )
+    agent.find_elements(css: '.active .chat-window .js-disconnect:not(.is-hidden)').each(&:click)
+    agent.find_elements(css: '.active .chat-window .js-close').each(&:click)
+    sleep 2
+    click(
+      browser: customer,
+      css:     '.zammad-chat .js-chat-open',
+    )
+    exists(
+      browser: customer,
+      css:     '.zammad-chat-is-shown',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(waiting|warte)',
+    )
+    click(
+      browser: agent,
+      css:     '.active .js-acceptChat',
+    )
+    sleep 2
+    exists_not(
+      browser: agent,
+      css:     '.active .chat-window .chat-status.is-modified',
+    )
+    exists(
+      browser: agent,
+      css:     '.active .chat-window .chat-status',
+    )
+  end
+
+  def test_basic_usecase3
+    chat_url = "#{browser_url}/assets/chat/znuny-no-jquery.html?port=#{ENV['WS_PORT']}"
+    agent = browser_instance
+    login(
+      browser:  agent,
+      username: 'master@example.com',
+      password: 'test',
+      url:      browser_url,
+    )
+    tasks_close_all(
+      browser: agent,
+    )
+    click(
+      browser: agent,
+      css:     'a[href="#customer_chat"]',
+    )
+    agent.find_elements(css: '.active .chat-window .js-disconnect:not(.is-hidden)').each(&:click)
+    agent.find_elements(css: '.active .chat-window .js-close').each(&:click)
+
+    # set chat preferences
+    click(
+      browser: agent,
+      css:     '.active .js-settings',
+    )
+
+    modal_ready(browser: agent)
+    set(
+      browser: agent,
+      css:     '.modal [name="chat::phrase::1"]',
+      value:   'Hi Stranger!;My Greeting',
+    )
+    click(
+      browser: agent,
+      css:     '.modal .js-submit',
+    )
+    modal_disappear(browser: agent)
+
+    customer = browser_instance
+    location(
+      browser: customer,
+      url:     chat_url,
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      timeout: 5,
+    )
+    click(
+      browser: customer,
+      css:     '.js-chat-open',
+    )
+    exists(
+      browser: customer,
+      css:     '.zammad-chat-is-shown',
+    )
+    watch_for(
+      browser: agent,
+      css:     '.active .js-badgeWaitingCustomers',
+      value:   '1',
+    )
+    click(
+      browser: agent,
+      css:     '.active .js-acceptChat',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   'Hi Stranger|My Greeting',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-agent-status',
+      value:   'online',
+    )
+    match(
+      browser: agent,
+      css:     '.active .chat-window .js-body',
+      value:   chat_url,
+    )
+    set(
+      browser: agent,
+      css:     '.active .chat-window .js-customerChatInput',
+      value:   'my name is me',
+    )
+    click(
+      browser: agent,
+      css:     '.active .chat-window .js-send',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   'my name is me',
+    )
+    set(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-input',
+      value:   'my name is customer',
+    )
+    click(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-send',
+    )
+    watch_for(
+      browser: agent,
+      css:     '.active .chat-window',
+      value:   'my name is customer',
+    )
+    click(
+      browser: agent,
+      css:     '.active .chat-window .js-customerChatInput',
+    )
+    reload(
+      browser: customer,
+    )
+    exists(
+      browser: customer,
+      css:     '.zammad-chat',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   'Hi Stranger|My Greeting',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   'my name is me',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   'my name is customer',
+    )
+    location(
+      browser: customer,
+      url:     "#{chat_url}#new_hash",
+    )
+    sleep 2
+    match(
+      browser: agent,
+      css:     '.active .chat-window .js-body',
+      value:   "#{chat_url}#new_hash",
+    )
+    click(
+      browser: customer,
+      css:     '.zammad-chat .js-chat-toggle .zammad-chat-header-icon',
+    )
+    watch_for(
+      browser: agent,
+      css:     '.active .chat-window',
+      value:   'closed the conversation',
+    )
+  end
+
+  def test_open_chat_by_button
+    chat_url = "#{browser_url}/assets/chat/znuny-no-jquery-open_by_button.html?port=#{ENV['WS_PORT']}"
+    agent = browser_instance
+    login(
+      browser:  agent,
+      username: 'master@example.com',
+      password: 'test',
+      url:      browser_url,
+    )
+    tasks_close_all(
+      browser: agent,
+    )
+    click(
+      browser: agent,
+      css:     'a[href="#customer_chat"]',
+    )
+    agent.find_elements(css: '.active .chat-window .js-disconnect:not(.is-hidden)').each(&:click)
+    agent.find_elements(css: '.active .chat-window .js-close').each(&:click)
+
+    customer = browser_instance
+    location(
+      browser: customer,
+      url:     chat_url,
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      timeout: 5,
+    )
+    exists_not(
+      browser: customer,
+      css:     '.zammad-chat-is-shown',
+    )
+    exists_not(
+      browser: customer,
+      css:     '.zammad-chat-is-open',
+    )
+    click(
+      browser: customer,
+      css:     '.open-zammad-chat',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat-is-shown',
+      timeout: 4,
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat-is-open',
+      timeout: 4,
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(waiting|warte)',
+    )
+    click(
+      browser: customer,
+      css:     '.zammad-chat-header-icon-close',
+    )
+    watch_for_disappear(
+      browser: customer,
+      css:     '.zammad-chat-is-shown',
+      timeout: 4,
+    )
+    watch_for_disappear(
+      browser: customer,
+      css:     '.zammad-chat-is-open',
+      timeout: 4,
+    )
+  end
+
+  def test_timeouts
+    chat_url = "#{browser_url}/assets/chat/znuny-no-jquery.html?port=#{ENV['WS_PORT']}"
+    agent = browser_instance
+    login(
+      browser:  agent,
+      username: 'master@example.com',
+      password: 'test',
+      url:      browser_url,
+    )
+    tasks_close_all(
+      browser: agent,
+    )
+    click(
+      browser: agent,
+      css:     'a[href="#customer_chat"]',
+    )
+    agent.find_elements(css: '.active .chat-window .js-disconnect:not(.is-hidden)').each(&:click)
+    agent.find_elements(css: '.active .chat-window .js-close').each(&:click)
+
+    exists(
+      browser: agent,
+      css:     '#navigation .js-chatMenuItem .js-switch input[checked]'
+    )
+
+    # no customer action, hide widget
+    customer = browser_instance
+    location(
+      browser: customer,
+      url:     chat_url,
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      timeout: 5,
+    )
+    watch_for_disappear(
+      browser: customer,
+      css:     '.zammad-chat',
+      timeout: 95,
+    )
+
+    # no agent action, show sorry screen
+    reload(
+      browser: customer,
+    )
+    exists(
+      browser: customer,
+      css:     '.zammad-chat',
+    )
+    click(
+      browser: customer,
+      css:     '.js-chat-open',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(waiting|warte)',
+      timeout: 35,
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(takes longer|dauert länger)',
+      timeout: 120,
+    )
+
+    # check if agent is offline, idle timeout, chat not answered
+    exists_not(
+      browser: agent,
+      css:     '#navigation .js-chatMenuItem .js-switch input[checked]'
+    )
+    switch(
+      browser: agent,
+      css:     '#navigation .js-chatMenuItem .js-switch',
+      type:    'on',
+    )
+
+    # no customer action, show sorry screen
+    reload(
+      browser: customer,
+    )
+    exists(
+      browser: customer,
+      css:     '.zammad-chat',
+    )
+    click(
+      browser: customer,
+      css:     '.js-chat-open',
+    )
+    watch_for(
+      browser: agent,
+      css:     '.js-chatMenuItem .counter',
+      value:   '1',
+    )
+    click(
+      browser: agent,
+      css:     '.active .js-acceptChat',
+    )
+    sleep 2
+    set(
+      browser: agent,
+      css:     '.active .chat-window .js-customerChatInput',
+      value:   'agent is asking',
+    )
+    click(
+      browser: agent,
+      css:     '.active .chat-window .js-send',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   'agent is asking',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(Since you didn\'t respond|Da Sie in den letzten)',
+      timeout: 150,
+    )
+
+    agent.find_elements( { css: '.active .chat-window .js-close' } ).each(&:click)
+    sleep 2
+    click(
+      browser: customer,
+      css:     '.js-restart',
+    )
+    sleep 5
+    click(
+      browser: customer,
+      css:     '.js-chat-open',
+    )
+    exists(
+      browser: customer,
+      css:     '.zammad-chat-is-shown',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   '(waiting|warte)',
+    )
+    click(
+      browser: agent,
+      css:     '.active .js-acceptChat',
+    )
+    sleep 2
+    exists(
+      browser: agent,
+      css:     '.active .chat-window .chat-status',
+    )
+    set(
+      browser: agent,
+      css:     '.active .chat-window .js-customerChatInput',
+      value:   'my name is me',
+    )
+    click(
+      browser: agent,
+      css:     '.active .chat-window .js-send',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat .zammad-chat-agent-status',
+      value:   'online',
+    )
+    watch_for(
+      browser: customer,
+      css:     '.zammad-chat',
+      value:   'my name is me',
+    )
+
+  end
+
+  def disable_chat
+    login(
+      browser:  agent,
+      username: 'master@example.com',
+      password: 'test',
+      url:      browser_url,
+    )
+    tasks_close_all(
+      browser: agent,
+    )
+
+    # disable chat
+    click(
+      browser: agent,
+      css:     'a[href="#manage"]',
+    )
+    click(
+      browser: agent,
+      css:     '.content.active a[href="#channels/chat"]',
+    )
+    switch(
+      browser: agent,
+      css:     '.content.active .js-chatSetting',
+      type:    'off',
+    )
+  end
+
+end