Commit 9172c45b authored by Phil Hughes's avatar Phil Hughes

Added simulate drag JS for tests

parent c7b210eb
(function () {
'use strict';
function simulateEvent(el, type, options) {
var event;
var ownerDocument = el.ownerDocument;
options = options || {};
if (/^mouse/.test(type)) {
event = ownerDocument.createEvent('MouseEvents');
event.initMouseEvent(type, true, true, ownerDocument.defaultView,
options.button, options.screenX, options.screenY, options.clientX, options.clientY,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
} else {
event = ownerDocument.createEvent('CustomEvent');
event.initCustomEvent(type, true, true, ownerDocument.defaultView,
options.button, options.screenX, options.screenY, options.clientX, options.clientY,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
event.dataTransfer = {
data: {},
setData: function (type, val) {
this.data[type] = val;
},
getData: function (type) {
return this.data[type];
}
};
}
if (el.dispatchEvent) {
el.dispatchEvent(event);
} else if (el.fireEvent) {
el.fireEvent('on' + type, event);
}
return event;
}
function getTraget(target) {
var el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
var children = el.children;
return (
children[target.index] ||
children[target.index === 'first' ? 0 : -1] ||
children[target.index === 'last' ? children.length - 1 : -1]
);
}
function getRect(el) {
var rect = el.getBoundingClientRect();
var width = rect.right - rect.left;
var height = rect.bottom - rect.top;
return {
x: rect.left,
y: rect.top,
cx: rect.left + width / 2,
cy: rect.top + height / 2,
w: width,
h: height,
hw: width / 2,
wh: height / 2
};
}
function simulateDrag(options, callback) {
options.to.el = options.to.el || options.from.el;
var fromEl = getTraget(options.from);
var toEl = getTraget(options.to);
var scrollable = options.scrollable;
var fromRect = getRect(fromEl);
var toRect = getRect(toEl);
var startTime = new Date().getTime();
var duration = options.duration || 1000;
simulateEvent(fromEl, 'mousedown', {button: 0});
options.ontap && options.ontap();
requestAnimationFrame(function () {
options.ondragstart && options.ondragstart();
});
requestAnimationFrame(function loop() {
var progress = (new Date().getTime() - startTime) / duration;
var x = (fromRect.cx + (toRect.cx - fromRect.cx) * progress) - scrollable.scrollLeft;
var y = fromRect.cy + (toRect.cy - fromRect.cy) * progress;
var overEl = fromEl.ownerDocument.elementFromPoint(x, y);
simulateEvent(overEl, 'mousemove', {
clientX: x,
clientY: y
});
if (progress < 1) {
requestAnimationFrame(loop);
} else {
options.ondragend && options.ondragend();
simulateEvent(toEl, 'mouseup');
}
});
return {
target: fromEl,
fromList: fromEl.parentNode,
toList: toEl.parentNode
};
}
// Export
window.simulateEvent = simulateEvent;
window.simulateDrag = simulateDrag;
})();
......@@ -23,18 +23,33 @@
}
.issue-boards-page {
.content-wrapper {
display: -webkit-flex;
display: flex;
}
.sub-nav,
.issues-filters {
-webkit-flex: none;
flex: none;
}
.page-with-sidebar {
display: -webkit-flex;
display: flex;
min-height: 100vh;
max-height: 100vh;
}
.issue-boards-content {
display: -webkit-flex;
display: flex;
height: 100%;
width: 100%;
.content {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 100%;
}
......@@ -42,8 +57,10 @@
}
.boards-list {
display: -webkit-flex;
display: flex;
height: 100%;
-webkit-flex: 1;
flex: 1;
min-height: 455px;
padding-top: 25px;
padding-right: ($gl-padding / 2);
......@@ -52,17 +69,19 @@
}
.board {
display: -webkit-flex;
display: flex;
min-width: 400px;
max-width: 400px;
height: 100%;
padding-right: ($gl-padding / 2);
padding-left: ($gl-padding / 2);
}
.board-inner {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
height: 100%;
width: 100%;
font-size: $issue-boards-font-size;
background: $background-color;
......@@ -162,6 +181,7 @@
}
.board-list {
-webkit-flex: 1;
flex: 1;
margin: 0;
padding: 5px;
......
......@@ -4,6 +4,7 @@
- content_for :page_specific_javascripts do
= page_specific_javascript_tag('boards/boards_bundle.js')
= page_specific_javascript_tag('boards/test_utils/simulate_drag.js') if Rails.env.test?
= render "projects/issues/head"
......
......@@ -86,6 +86,7 @@ module Gitlab
config.assets.precompile << "network/network_bundle.js"
config.assets.precompile << "profile/profile_bundle.js"
config.assets.precompile << "boards/boards_bundle.js"
config.assets.precompile << "boards/test_utils/simulate_drag.js"
config.assets.precompile << "lib/utils/*.js"
config.assets.precompile << "lib/*.js"
config.assets.precompile << "u2f.js"
......
require 'rails_helper'
describe 'Issue Boards', feature: true, js: true do
let(:project) { create(:project) }
let(:user) { create(:user) }
before do
project.team << [user, :master]
login_as(user)
visit namespace_project_boards_path(project.namespace, project)
end
it 'shows default lists' do
lists = all('.board')
page.within lists.first do
expect(page).to have_content 'Backlog'
end
page.within lists.last do
expect(page).to have_content 'Done'
end
end
it 'removes blank state list' do
click_button 'Nevermind, i\'ll use my own'
expect(page).to have_selector('.board', count: 2)
end
it 'can drag card to new list' do
sleep 0.5
lists = all('.board')
drag_to(list_from_index: 0, list_to_index: 1)
page.within lists[1].find('.board-list') do
expect(page).to have_content('Test')
expect(page).to have_selector('.card', count: 2)
page.within first('.card .card-footer') do
expect(page).to have_content 'Frontend'
end
end
end
it 'removes all labels from card' do
sleep 0.5
lists = all('.board')
drag_to(list_from_index: 1, list_to_index: 3)
page.within lists[3].find('.board-list') do
expect(page).to have_content('Frontend bug')
expect(page).to have_selector('.card', count: 2)
page.within first('.card .card-footer') do
expect(page).not_to have_content 'Frontend'
end
end
page.within lists[1].find('.board-list') do
expect(page).not_to have_content('Frontend bug')
expect(page).not_to have_selector('.card')
end
end
def drag_to(list_from_index: 0, card_index: 0, to_index: 0, list_to_index: 0)
evaluate_script("simulateDrag({scrollable: document.getElementById('board-app'), from: {el: $('.board-list').eq(#{list_from_index}).get(0), index: #{card_index}}, to: {el: $('.board-list').eq(#{list_to_index}).get(0), index: #{to_index}}});")
sleep 1
end
end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment