Private fn chat no jquery

This commit is contained in:
Felix Niklas 2019-01-22 07:12:32 +01:00 committed by Martin Edenhofer
parent 74ec8912bd
commit 9e5318fdb5
11 changed files with 5210 additions and 42 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -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; }

View file

@ -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;

View file

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

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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

View file

@ -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