diff --git a/tests/integration/components/draggable-object-test.js b/tests/integration/components/draggable-object-test.js
index 845fcc4..eb8d6fe 100644
--- a/tests/integration/components/draggable-object-test.js
+++ b/tests/integration/components/draggable-object-test.js
@@ -9,11 +9,11 @@ module('Integration | Component | draggable object', function(hooks){
test('draggable object renders', async function(assert) {
assert.expect(2);
-
+
await render(hbs`{{draggable-object}}`);
assert.equal(this.element.innerText.trim(), '');
-
+
await render(hbs`
{{#draggable-object}}
template block text
@@ -22,95 +22,95 @@ module('Integration | Component | draggable object', function(hooks){
assert.equal(this.element.innerText.trim(), 'template block text');
});
-
+
test('Draggable Object is draggable', async function(assert) {
assert.expect(3);
-
+
let event = new MockEvent();
-
+
this.set('dragMoveAction', (event) => assert.ok(event));
-
+
await render(hbs`
{{#draggable-object content=myObject class='draggable-object' dragMoveAction=(action dragMoveAction)}}
Hi
{{/draggable-object}}
`);
-
+
let componentSelector = '.draggable-object';
-
+
await triggerEvent(componentSelector, 'dragstart', event);
-
+
assert.equal(find(componentSelector).classList.contains('is-dragging-object'), true);
-
+
await triggerEvent(componentSelector, 'drag', event);
-
+
await triggerEvent(componentSelector, 'dragend', event);
-
+
assert.equal(find(componentSelector).classList.contains('is-dragging-object'), false);
-
+
});
-
+
test('Draggable Object is only draggable from handle', async function(assert) {
assert.expect(6);
-
+
let event = new MockEvent();
-
+
await render(hbs`
{{#draggable-object content=myObject class='draggable-object' dragHandle='.js-dragHandle'}}
Main Component
{{/draggable-object}}
`);
-
+
let componentSelector = '.draggable-object';
-
+
//does not drag from main component
await triggerEvent(componentSelector, 'dragstart', event);
assert.equal(find(componentSelector).classList.contains('is-dragging-object'), false);
-
+
//end drag
await triggerEvent(componentSelector, 'dragend', event);
-
+
assert.equal(find(componentSelector).classList.contains('is-dragging-object'), false);
-
+
//make sure parent element does not have draggable attribute until handle is clicked
assert.equal(find(componentSelector).getAttribute('draggable'), "false");
-
+
await triggerEvent('.js-dragHandle', 'mouseover');
-
+
assert.equal(find(componentSelector).getAttribute('draggable'), "true");
-
+
//Drag should start now that the handle is down
await triggerEvent(componentSelector, 'dragstart', event);
-
+
assert.equal(find(componentSelector).classList.contains('is-dragging-object'), true);
-
+
//Drag has ended draggable attribute should be removed
await triggerEvent(componentSelector, 'dragend', event);
-
+
assert.equal(find(componentSelector).getAttribute('draggable'), "false");
-
+
});
-
+
test('Draggable hooks are overridable', async function(assert) {
assert.expect(2);
-
+
let event = new MockEvent();
-
+
this.set('dragStartAction', (event) => assert.ok(event));
-
+
this.set('dragEndAction', (event) => assert.ok(event));
-
+
await render(hbs`
{{#draggable-object class='draggable-object' dragStartHook=(action dragStartAction) dragEndHook=(action dragEndAction)}}
{{/draggable-object}}
`);
-
+
let componentSelector = '.draggable-object';
-
+
await triggerEvent(componentSelector, 'dragstart', event);
-
+
await triggerEvent(componentSelector, 'dragend', event);
});
});
diff --git a/tests/integration/components/helpers-test.js b/tests/integration/components/helpers-test.js
index be3db0d..7f91659 100644
--- a/tests/integration/components/helpers-test.js
+++ b/tests/integration/components/helpers-test.js
@@ -65,3 +65,4 @@ module('Integration | Helpers', function(hooks) {
});
});
+
diff --git a/tests/integration/components/object-bin-test.js b/tests/integration/components/object-bin-test.js
index eb25f1e..50cea55 100644
--- a/tests/integration/components/object-bin-test.js
+++ b/tests/integration/components/object-bin-test.js
@@ -12,12 +12,12 @@ module('Integration | Component | object bin', function(hooks) {
let obj = EmberObject.create({ title2: "Hello" }),
all = A();
all.addObject(obj);
-
+
this.set('all', all);
-
+
await render(hbs`{{#object-bin title2='notit' model=all as |obj|}}{{obj.title2}}{{/object-bin}}`);
-
+
assert.equal(findAll('.title2').length, 1);
assert.equal(find('.title2').textContent.trim(), "Hello");
});
-});
+});
\ No newline at end of file
diff --git a/tests/integration/components/sortable-objects-test.js b/tests/integration/components/sortable-objects-test.js
index 1ced1c8..be76fa7 100644
--- a/tests/integration/components/sortable-objects-test.js
+++ b/tests/integration/components/sortable-objects-test.js
@@ -21,7 +21,7 @@ module('Integration | Component | sortable objects', function(hooks) {
let visibleNumbers = function(selector = '.sortObject') {
return findAll(selector).map(el => el.textContent.match(/\d/g)[0]);
};
-
+
let appearsDragging = function(assert, selector, yes = true) {
const opacity = yes ? 0.5 : 1,
condition = yes ? '' : 'not',
@@ -32,22 +32,22 @@ module('Integration | Component | sortable objects', function(hooks) {
assert.equal(window.getComputedStyle(element)['opacity'], opacity, `${startMessage} opacity => ${opacity}`);
};
-
+
test('sortable object renders', async function(assert) {
assert.expect(3);
-
+
await render(hbs`{{sortable-objects}}`);
-
+
assert.equal(this.element.textContent.trim(), '');
-
+
await render(hbs`
{{#sortable-objects}}
template block text
{{/sortable-objects}}
`);
-
+
assert.equal(this.element.textContent.trim(), 'template block text');
-
+
await render(hbs`
{{#sortable-objects}}
{{#draggable-object class='draggable-object'}}
@@ -60,18 +60,18 @@ module('Integration | Component | sortable objects', function(hooks) {
`);
assert.equal(findAll('.draggable-object').length, 2);
});
-
+
test('sortable object renders draggable objects', async function(assert) {
assert.expect(8);
-
+
this.set('pojoData', pojoData);
-
+
this.set('sortEndAction', () => {
const pojoObj = this.get('pojoData');
//make sure object items are in the right order
assert.deepEqual(pojoObj.mapBy('id'), [2, 1, 3, 4], 'after sorting Pojo item list changed')
});
-
+
await render(hbs`
{{#sortable-objects sortableObjectList=pojoData sortEndAction=(action sortEndAction) class='sortContainer' sortingScope='sortable-objects'}}
{{#each pojoData as |item|}}
@@ -81,12 +81,12 @@ module('Integration | Component | sortable objects', function(hooks) {
{{/each}}
{{/sortable-objects}}
`);
-
+
assert.equal(findAll('.sortObject').length, 4, 'shows 4 sortable elements');
-
+
let startDragSelector = '.sortObject:nth-child(1)',
dragOverSelector = '.sortObject:nth-child(2)';
-
+
const rect = find(dragOverSelector).getBoundingClientRect();
await drag(startDragSelector, {
@@ -102,24 +102,24 @@ module('Integration | Component | sortable objects', function(hooks) {
assert.deepEqual(visibleNumbers(), w('2 1 3 4'), 'After dragging over and before drop items are already shown in correct order');
}
});
-
+
appearsDragging(assert, startDragSelector, false);
assert.deepEqual(visibleNumbers(), w('2 1 3 4'), 'Items are still visually in the correct order after drag end');
});
-
+
test('sortable object renders draggable objects using shift algorithm', async function(assert) {
-
+
assert.expect(4);
-
+
this.set('pojoData', pojoData);
-
+
this.set('sortEndAction', () => {
const pojoObj = this.get('pojoData');
//make sure object items are in the right order
assert.deepEqual(pojoObj.mapBy('id'), [2, 3, 1, 4], 'after sorting Pojo item list changed')
});
-
+
await render(hbs`
{{#sortable-objects sortableObjectList=pojoData sortEndAction=(action sortEndAction) class='sortContainer' useSwap=false}}
{{#each pojoData as |item|}}
@@ -129,16 +129,16 @@ module('Integration | Component | sortable objects', function(hooks) {
{{/each}}
{{/sortable-objects}}
`);
-
+
assert.equal(findAll('.sortObject').length, 4);
-
+
let startDragSelector = '.sortObject:nth-child(1)',
dragOver2Selector = '.sortObject:nth-child(2)',
dragOver3Selector = '.sortObject:nth-child(3)';
const rect2 = find(dragOver2Selector).getBoundingClientRect();
const rect3 = find(dragOver3Selector).getBoundingClientRect();
-
+
await drag(startDragSelector, {
drop: dragOver3Selector,
dragOverMoves: [
@@ -149,22 +149,22 @@ module('Integration | Component | sortable objects', function(hooks) {
assert.deepEqual(visibleNumbers(), w('2 3 1 4'), 'After dragging over and before drop items are already shown in correct order');
}
});
-
+
assert.deepEqual(visibleNumbers(), w('2 3 1 4'), 'items are still shifted after drop');
});
-
-
+
+
test('sorting does not happen if off', async function(assert) {
assert.expect(8);
-
+
this.set('pojoData', pojoData);
-
+
// sortEndAction should not be called
let sortEndActionCalled = false;
this.set('sortEndAction', function() {
sortEndActionCalled = true;
});
-
+
await render(hbs`
{{#sortable-objects sortableObjectList=pojoData sortEndAction=(action sortEndAction) class='sortContainer' enableSort=false}}
{{#each pojoData as |item|}}
@@ -174,14 +174,14 @@ module('Integration | Component | sortable objects', function(hooks) {
{{/each}}
{{/sortable-objects}}
`);
-
+
assert.equal(findAll('.sortObject').length, 4);
-
+
let startDragSelector = '.sortObject:nth-child(1)',
dragOver2Selector = '.sortObject:nth-child(2)';
-
+
const rect = find(dragOver2Selector).getBoundingClientRect();
-
+
await drag(startDragSelector, {
drop: dragOver2Selector,
dragOverMoves: [
@@ -195,20 +195,20 @@ module('Integration | Component | sortable objects', function(hooks) {
assert.deepEqual(visibleNumbers(), w('1 2 3 4'), 'Drag over does not affect order');
}
});
-
+
//Visual drag items are reset
appearsDragging(assert, startDragSelector, false);
-
+
//Items are still visually in the start order after drag end
assert.deepEqual(visibleNumbers(), w('1 2 3 4'), 'Items did not change order after drop');
-
+
assert.equal(sortEndActionCalled, false);
});
-
+
test('sort in place', async function(assert) {
const mutableData = A(pojoData.slice());
this.set('pojoData', mutableData);
-
+
await render(hbs`
{{#sortable-objects sortableObjectList=pojoData class='sortContainer' useSwap=false inPlace=true}}
{{#each pojoData as |item|}}
@@ -218,16 +218,16 @@ module('Integration | Component | sortable objects', function(hooks) {
{{/each}}
{{/sortable-objects}}
`);
-
+
assert.equal(findAll('.sortObject').length, 4);
-
+
let startDragSelector = '.sortObject:nth-child(1)',
dragOver2Selector = '.sortObject:nth-child(2)',
dragOver3Selector = '.sortObject:nth-child(3)';
-
+
const rect2 = find(dragOver2Selector).getBoundingClientRect();
const rect3 = find(dragOver3Selector).getBoundingClientRect();
-
+
await drag(startDragSelector, {
drop: dragOver3Selector,
dragOverMoves: [
@@ -235,8 +235,9 @@ module('Integration | Component | sortable objects', function(hooks) {
[{ clientX: 1, clientY: rect3.top + (rect3.height / 2) }, dragOver3Selector]
]
});
-
+
assert.equal(mutableData, this.get('pojoData'), 'array reference should not change');
assert.deepEqual(mutableData.mapBy('id'), [2, 3, 1, 4], 'original array should be mutated');
});
});
+