From a4e1e06c7f9a90adc8d1be0469c09ee34cbe32d6 Mon Sep 17 00:00:00 2001 From: Valerii Kuznetsov Date: Tue, 21 Feb 2017 15:48:01 +1300 Subject: [PATCH 1/3] Added Handle for sorting --- index.ts | 8 ++--- src/abstract.component.ts | 62 ++++++++++++++++++++++++++++++++------- src/sortable.component.ts | 13 ++++++-- 3 files changed, 66 insertions(+), 17 deletions(-) diff --git a/index.ts b/index.ts index 4ab3d23..5c1d6a9 100644 --- a/index.ts +++ b/index.ts @@ -8,7 +8,7 @@ import {DragDropConfig} from './src/dnd.config'; import {DragDropService, DragDropSortableService, dragDropServiceFactory, dragDropSortableServiceFactory} from './src/dnd.service'; import {DraggableComponent} from './src/draggable.component'; import {DroppableComponent} from './src/droppable.component'; -import {SortableContainer, SortableComponent} from './src/sortable.component'; +import {SortableContainer, SortableComponent, SortableHandleComponent} from './src/sortable.component'; export * from './src/abstract.component'; export * from './src/dnd.config'; @@ -24,8 +24,8 @@ export let providers = [ ]; @NgModule({ - declarations: [DraggableComponent, DroppableComponent, SortableContainer, SortableComponent], - exports : [DraggableComponent, DroppableComponent, SortableContainer, SortableComponent], + declarations: [DraggableComponent, DroppableComponent, SortableContainer, SortableComponent, SortableHandleComponent], + exports : [DraggableComponent, DroppableComponent, SortableContainer, SortableComponent, SortableHandleComponent], }) export class DndModule { @@ -35,4 +35,4 @@ export class DndModule { providers: providers }; } -} \ No newline at end of file +} diff --git a/src/abstract.component.ts b/src/abstract.component.ts index ecca823..8c30587 100644 --- a/src/abstract.component.ts +++ b/src/abstract.component.ts @@ -2,19 +2,25 @@ // This project is licensed under the terms of the MIT license. // https://github.com/akserg/ng2-dnd -import {Injectable, ChangeDetectorRef} from '@angular/core'; -import {ElementRef} from '@angular/core'; +import { Injectable, ChangeDetectorRef } from '@angular/core'; +import { ElementRef } from '@angular/core'; -import {DragDropConfig, DragImage} from './dnd.config'; -import {DragDropService} from './dnd.service'; -import {isString, isFunction, isPresent, createImage, callFun} from './dnd.utils'; +import { DragDropConfig, DragImage } from './dnd.config'; +import { DragDropService } from './dnd.service'; +import { isString, isFunction, isPresent, createImage, callFun } from './dnd.utils'; @Injectable() export abstract class AbstractComponent { _elem: HTMLElement; + _dragHandle: HTMLElement; _dragHelper: HTMLElement; _defaultCursor: string; + /** + * Last element that was mousedown'ed + */ + _target: EventTarget; + /** * Whether the object is draggable. Default is true. */ @@ -113,8 +119,24 @@ export abstract class AbstractComponent { // // Drag events // + this._elem.onmousedown = (event: MouseEvent) => { + this._target = event.target; + }; this._elem.ondragstart = (event: DragEvent) => { - // console.log('ondragstart', event.target); + console.log('Standard ondragstart', event.target); + console.log("Drag handle:", this._dragHandle); + if (this._dragHandle) { + console.log("Drag handle found") + if (!this._dragHandle.contains(this._target)) { + console.log("Drag handle is not contained, ignoring"); + event.preventDefault(); + return; + } + } else { + console.log("No drag handle"); + } + + this._onDragStart(event); // if (event.dataTransfer != null) { @@ -143,14 +165,18 @@ export abstract class AbstractComponent { this._elem.parentElement.appendChild(this._dragHelper); (event.dataTransfer).setDragImage(this._dragHelper, event.offsetX, event.offsetY); } + // Change drag cursor + let cursorelem = (this._dragHandle) ? this._dragHandle : this._elem; + if (this._dragEnabled) { - this._elem.style.cursor = this.effectCursor ? this.effectCursor : this._config.dragCursor; + cursorelem.style.cursor = this.effectCursor ? this.effectCursor : this._config.dragCursor; } else { - this._elem.style.cursor = this._defaultCursor; + cursorelem.style.cursor = this._defaultCursor; } } }; + this._elem.ondragend = (event: Event) => { if (this._elem.parentElement && this._dragHelper) { this._elem.parentElement.removeChild(this._dragHelper); @@ -158,10 +184,14 @@ export abstract class AbstractComponent { // console.log('ondragend', event.target); this._onDragEnd(event); // Restore style of dragged element - this._elem.style.cursor = this._defaultCursor; + let cursorelem = (this._dragHandle) ? this._dragHandle : this._elem; + cursorelem.style.cursor = this._defaultCursor; }; } + public setDragHandle(elem: HTMLElement) { + this._dragHandle = elem; + } /******* Change detection ******/ detectChanges() { @@ -245,7 +275,7 @@ export abstract class AbstractComponent { //*********** Draggable **********// private _onDragStart(event: Event): void { - // console.log('ondragstart.dragEnabled', this._dragEnabled); + //console.log('ondragstart.dragEnabled', this._dragEnabled); if (this._dragEnabled) { this._dragDropService.allowedDropZones = this.dropZones; // console.log('ondragstart.allowedDropZones', this._dragDropService.allowedDropZones); @@ -269,3 +299,15 @@ export abstract class AbstractComponent { _onDragStartCallback(event: Event) { } _onDragEndCallback(event: Event) { } } + +export class AbstractHandleComponent { + _elem: HTMLElement; + constructor(elemRef: ElementRef, public _dragDropService: DragDropService, public _config: DragDropConfig, + private _Component: AbstractComponent, private _cdr: ChangeDetectorRef) { + this._elem = elemRef.nativeElement; + + console.log("Going to rebind dragstart and dragend events from main elem to this elem"); + console.log(this._Component); + this._Component.setDragHandle(this._elem); + } +} diff --git a/src/sortable.component.ts b/src/sortable.component.ts index 6c20faa..b7e4010 100644 --- a/src/sortable.component.ts +++ b/src/sortable.component.ts @@ -5,7 +5,7 @@ import {ChangeDetectorRef} from '@angular/core'; import {Directive, Input, Output, EventEmitter, ElementRef} from '@angular/core'; -import {AbstractComponent} from './abstract.component'; +import {AbstractComponent, AbstractHandleComponent} from './abstract.component'; import {DragDropConfig} from './dnd.config'; import {DragDropService, DragDropSortableService} from './dnd.service'; @@ -109,9 +109,7 @@ export class SortableComponent extends AbstractComponent { private _sortableContainer: SortableContainer, private _sortableDataService: DragDropSortableService, cdr:ChangeDetectorRef) { - super(elemRef, dragDropService, config, cdr); - this.dropZones = this._sortableContainer.dropZones; this.dragEnabled = true; this.dropEnabled = true; @@ -192,3 +190,12 @@ export class SortableComponent extends AbstractComponent { } } } + +@Directive({ selector: '[dnd-sortable-handle]' }) +export class SortableHandleComponent extends AbstractHandleComponent { + constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, _Component: SortableComponent, + cdr:ChangeDetectorRef) { + + super(elemRef, dragDropService, config, _Component, cdr); + } +} From 7658253e574c0119b0099eac0ed066063ec408a7 Mon Sep 17 00:00:00 2001 From: Valerii Kuznetsov Date: Thu, 23 Feb 2017 11:50:19 +1300 Subject: [PATCH 2/3] Added draggable handle and updated docs --- README.md | 100 ++++++++++++++++++++++++++++++++++--- index.ts | 6 +-- src/abstract.component.ts | 2 +- src/draggable.component.ts | 14 +++++- 4 files changed, 108 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 0b2e355..cfe7f63 100644 --- a/README.md +++ b/README.md @@ -112,7 +112,48 @@ export class SimpleDndComponent { } ``` -#### 4. Restriction Drag-and-Drop operations with drop zones +#### 4. Add handle to restrict draggable zone of component + +```js +import {Component} from '@angular/core'; + +@Component({ + selector: 'simple-dnd-handle', + template: ` +

Simple Drag-and-Drop with handle

+
+
+
+
Available to drag
+
+
+
+
+ =  + Drag Handle +
+
+
+
+
+
+
+
+
Place to drop
+
+
Item was dropped here
+
+
+
+
` +}) +export class SimpleDndHandleComponent { + simpleDrop: any = null; +}simpleDrop: any = null; +} +``` + +#### 5. Restriction Drag-and-Drop operations with drop zones You can use property *dropZones* (actually an array) to specify in which place you would like to drop the draggable element: ```js @@ -172,7 +213,7 @@ export class ZoneDndComponent { } ``` -#### 5. Transfer custom data via Drag-and-Drop +#### 6. Transfer custom data via Drag-and-Drop You can transfer data from draggable to droppable component via *dragData* property of Draggable component: ```js @@ -216,7 +257,7 @@ export class CustomDataDndComponent { } ``` -#### 6. Use a custom function to determine where dropping is allowed +#### 7. Use a custom function to determine where dropping is allowed For use-cases when a static set of `dropZone`s is not possible, a custom function can be used to dynamically determine whether an item can be dropped or not. To achieve that, set the `allowDrop` property to this boolean function. In the following example, we have two containers that only accept numbers that are multiples of a user-input base integer. `dropZone`s are not helpful here because they are static, whereas the user input is dynamic. @@ -300,7 +341,7 @@ export class CustomFunctionDndComponent { } ``` -#### 7. Shopping basket with Drag-and-Drop +#### 8. Shopping basket with Drag-and-Drop Here is an example of shopping backet with products adding via drag and drop operation: ```js @@ -386,7 +427,7 @@ class Product { } ``` -#### 8. Simple sortable with Drag-and-Drop +#### 9. Simple sortable with Drag-and-Drop Here is an example of simple sortable of favorite drinks moving in container via drag and drop operation: ```js @@ -424,7 +465,49 @@ export class SimpleSortableComponent { } ``` -#### 9. Simple sortable With Drop into recycle bin + +#### 10. Simple sortable with Drag-and-Drop handle +Add handle to restict grip zone of sortable component. + +```js +import {Component} from '@angular/core'; + +@Component({ + selector: 'simple-sortable-handle', + template: ` +

Simple sortable handle

+
+
+
+
+ Favorite drinks +
+
+
    +
  • + =  + {{item}} +
    • +
+
+
+
+
+
+
+ My prefences:
+ {{i + 1}}) {{item}}
 +
+
+
+
` +}) +export class SimpleSortableHandleComponent { + listOne: Array = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water']; +} +``` + +#### 11. Simple sortable With Drop into recycle bin Here is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation: ```js @@ -466,7 +549,7 @@ export class RecycleMultiSortableComponent { } ``` -#### 10. Simple sortable With Drop into something, without delete it +#### 12. Simple sortable With Drop into something, without delete it Here is an example of simple sortable list of items copying in target container: ```js @@ -523,7 +606,7 @@ class Widget { } ``` -#### 11. Multi list sortable between containers +#### 13. Multi list sortable between containers Here is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation: ```js @@ -598,6 +681,7 @@ class Widget { # Credits - [Francesco Cina](https://github.com/ufoscout) +- [Valerii Kuznetsov](https://github.com/solival) # License [MIT](/LICENSE) diff --git a/index.ts b/index.ts index 5c1d6a9..607f715 100644 --- a/index.ts +++ b/index.ts @@ -6,7 +6,7 @@ import { NgModule, ModuleWithProviders } from "@angular/core"; import {DragDropConfig} from './src/dnd.config'; import {DragDropService, DragDropSortableService, dragDropServiceFactory, dragDropSortableServiceFactory} from './src/dnd.service'; -import {DraggableComponent} from './src/draggable.component'; +import {DraggableComponent, DraggableHandleComponent} from './src/draggable.component'; import {DroppableComponent} from './src/droppable.component'; import {SortableContainer, SortableComponent, SortableHandleComponent} from './src/sortable.component'; @@ -24,8 +24,8 @@ export let providers = [ ]; @NgModule({ - declarations: [DraggableComponent, DroppableComponent, SortableContainer, SortableComponent, SortableHandleComponent], - exports : [DraggableComponent, DroppableComponent, SortableContainer, SortableComponent, SortableHandleComponent], + declarations: [DraggableComponent, DraggableHandleComponent, DroppableComponent, SortableContainer, SortableComponent, SortableHandleComponent], + exports : [DraggableComponent, DraggableHandleComponent, DroppableComponent, SortableContainer, SortableComponent, SortableHandleComponent], }) export class DndModule { diff --git a/src/abstract.component.ts b/src/abstract.component.ts index 8c30587..70ffd0d 100644 --- a/src/abstract.component.ts +++ b/src/abstract.component.ts @@ -126,7 +126,7 @@ export abstract class AbstractComponent { console.log('Standard ondragstart', event.target); console.log("Drag handle:", this._dragHandle); if (this._dragHandle) { - console.log("Drag handle found") + console.log("Drag handle found"); if (!this._dragHandle.contains(this._target)) { console.log("Drag handle is not contained, ignoring"); event.preventDefault(); diff --git a/src/draggable.component.ts b/src/draggable.component.ts index 9ae9d32..83f69a1 100644 --- a/src/draggable.component.ts +++ b/src/draggable.component.ts @@ -5,7 +5,7 @@ import {ChangeDetectorRef} from '@angular/core'; import {Directive, Input, Output, EventEmitter, ElementRef} from '@angular/core'; -import {AbstractComponent} from './abstract.component'; +import {AbstractComponent, AbstractHandleComponent} from './abstract.component'; import {DragDropConfig, DragImage} from './dnd.config'; import {DragDropService, DragDropData} from './dnd.service'; @@ -104,4 +104,14 @@ export class DraggableComponent extends AbstractComponent { // this.onDragEnd.emit({dragData: this.dragData, mouseEvent: event}); } -} \ No newline at end of file +} + + +@Directive({ selector: '[dnd-draggable-handle]' }) +export class DraggableHandleComponent extends AbstractHandleComponent { + constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, _Component: DraggableComponent, + cdr:ChangeDetectorRef) { + + super(elemRef, dragDropService, config, _Component, cdr); + } +} From 6ab58ccd0d265d79679c183a4ead295f2cc7d6d3 Mon Sep 17 00:00:00 2001 From: Valerii Kuznetsov Date: Thu, 23 Feb 2017 15:19:55 +1300 Subject: [PATCH 3/3] Test coverage --- src/abstract.component.ts | 20 ++----- tests/dnd.component.factory.ts | 45 ++++++++++++++ tests/dnd.draggable.handle.spec.ts | 77 ++++++++++++++++++++++++ tests/dnd.sortable.handle.spec.ts | 85 +++++++++++++++++++++++++++ tests/dnd.with.draggable.data.spec.ts | 2 +- 5 files changed, 213 insertions(+), 16 deletions(-) create mode 100644 tests/dnd.draggable.handle.spec.ts create mode 100644 tests/dnd.sortable.handle.spec.ts diff --git a/src/abstract.component.ts b/src/abstract.component.ts index 70ffd0d..10eb1fa 100644 --- a/src/abstract.component.ts +++ b/src/abstract.component.ts @@ -2,12 +2,12 @@ // This project is licensed under the terms of the MIT license. // https://github.com/akserg/ng2-dnd -import { Injectable, ChangeDetectorRef } from '@angular/core'; -import { ElementRef } from '@angular/core'; +import {Injectable, ChangeDetectorRef} from '@angular/core'; +import {ElementRef} from '@angular/core'; -import { DragDropConfig, DragImage } from './dnd.config'; -import { DragDropService } from './dnd.service'; -import { isString, isFunction, isPresent, createImage, callFun } from './dnd.utils'; +import {DragDropConfig, DragImage} from './dnd.config'; +import {DragDropService} from './dnd.service'; +import {isString, isFunction, isPresent, createImage, callFun} from './dnd.utils'; @Injectable() export abstract class AbstractComponent { @@ -123,20 +123,13 @@ export abstract class AbstractComponent { this._target = event.target; }; this._elem.ondragstart = (event: DragEvent) => { - console.log('Standard ondragstart', event.target); - console.log("Drag handle:", this._dragHandle); if (this._dragHandle) { - console.log("Drag handle found"); if (!this._dragHandle.contains(this._target)) { - console.log("Drag handle is not contained, ignoring"); event.preventDefault(); return; } - } else { - console.log("No drag handle"); } - this._onDragStart(event); // if (event.dataTransfer != null) { @@ -305,9 +298,6 @@ export class AbstractHandleComponent { constructor(elemRef: ElementRef, public _dragDropService: DragDropService, public _config: DragDropConfig, private _Component: AbstractComponent, private _cdr: ChangeDetectorRef) { this._elem = elemRef.nativeElement; - - console.log("Going to rebind dragstart and dragend events from main elem to this elem"); - console.log(this._Component); this._Component.setDragHandle(this._elem); } } diff --git a/tests/dnd.component.factory.ts b/tests/dnd.component.factory.ts index e14aa68..89dec73 100644 --- a/tests/dnd.component.factory.ts +++ b/tests/dnd.component.factory.ts @@ -124,3 +124,48 @@ export class Container4 { @Input() multiOneList:Array = []; @Input() multiTwoList:Array = []; } + +@Component({ + selector: 'test-container-five', + template: ` +
+ = + Not handle +
+
+` +}) +export class Container5 { + @Input() dragEnabled:boolean = true; + @Input() dragData:any = "Hello World at " + new Date().toString(); + + @Output() drag:EventEmitter = new EventEmitter(); + @Output() drop:EventEmitter = new EventEmitter(); + + // tslint:disable-next-line + private dragSuccessCallback($event:any) { + this.drag.emit($event); + } + + // tslint:disable-next-line + private dropSuccessCallback($event:any) { + this.drop.emit($event); + } +} + +@Component({ + selector: 'test-container-six', + template: ` +
+
    +
  • + = + {{item}} +
    • +
+
+` +}) +export class Container6 { + @Input() sortableList:Array = []; +} \ No newline at end of file diff --git a/tests/dnd.draggable.handle.spec.ts b/tests/dnd.draggable.handle.spec.ts new file mode 100644 index 0000000..6c817df --- /dev/null +++ b/tests/dnd.draggable.handle.spec.ts @@ -0,0 +1,77 @@ +import { inject, TestBed, ComponentFixture } + from '@angular/core/testing'; + +import {DragDropConfig} from '../src/dnd.config'; +import {DraggableComponent, DraggableHandleComponent} from '../src/draggable.component'; +import {DroppableComponent} from '../src/droppable.component'; +import {DragDropService} from '../src/dnd.service'; + +import {Container5, triggerEvent} from './dnd.component.factory'; + +describe('Drag and Drop with handle', () => { + + let componentFixture: ComponentFixture; + let dragdropService: DragDropService; + let config: DragDropConfig; + let container:Container5; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [DraggableComponent, DroppableComponent, DraggableHandleComponent, Container5], + providers: [DragDropConfig, DragDropService] + }); + TestBed.compileComponents(); + }); + + beforeEach(inject([DragDropConfig, DragDropService], + (c: DragDropConfig, dd: DragDropService) => { + dragdropService = dd; + config = c; + + componentFixture = TestBed.createComponent(Container5); + componentFixture.detectChanges(); + container = componentFixture.componentInstance; + })); + + it('should be defined', () => { + expect(componentFixture).toBeDefined(); + }); + + it('Drag start event should be activated if dragged by handle', (done:any) => { + let dragElem:HTMLElement = componentFixture.elementRef.nativeElement.querySelector('#dragId'); + let handleElem:HTMLElement = componentFixture.elementRef.nativeElement.querySelector('#handle'); + + expect(dragdropService.dragData).not.toBeDefined(); + + triggerEvent(handleElem, 'mousedown', 'MouseEvent'); + triggerEvent(dragElem, 'dragstart', 'MouseEvent'); + componentFixture.detectChanges(); + expect(dragdropService.dragData).toBeDefined(); + + triggerEvent(dragElem, 'dragend', 'MouseEvent'); + triggerEvent(handleElem, 'mouseup', 'MouseEvent'); + componentFixture.detectChanges(); + expect(dragdropService.dragData).toBeNull(); + + done(); + }); + + it('Drag start event should not be activated if dragged not by handle', (done:any) => { + container.dragEnabled = false; + componentFixture.detectChanges(); + + let dragElem:HTMLElement = componentFixture.elementRef.nativeElement.querySelector('#dragId'); + let nonHandleElem:HTMLElement = componentFixture.elementRef.nativeElement.querySelector('#non-handle'); + + expect(dragdropService.dragData).not.toBeDefined(); + expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false); + + triggerEvent(nonHandleElem, 'mousedown', 'MouseEvent'); + triggerEvent(dragElem, 'dragstart', 'MouseEvent'); + componentFixture.detectChanges(); + expect(dragdropService.dragData).not.toBeDefined(); + expect(dragElem.classList.contains(config.onDragStartClass)).toEqual(false); + + done(); + }); +}); diff --git a/tests/dnd.sortable.handle.spec.ts b/tests/dnd.sortable.handle.spec.ts new file mode 100644 index 0000000..983889f --- /dev/null +++ b/tests/dnd.sortable.handle.spec.ts @@ -0,0 +1,85 @@ +import { inject, TestBed, ComponentFixture } + from '@angular/core/testing'; + +import {DragDropConfig} from '../src/dnd.config'; +import {SortableContainer, SortableComponent, SortableHandleComponent} from '../src/sortable.component'; +import {DragDropService, DragDropSortableService} from '../src/dnd.service'; + +import {Container6, triggerEvent} from './dnd.component.factory'; + +describe('Sortable Drag and Drop with handle', () => { + + let componentFixture: ComponentFixture; + let dragdropService: DragDropService; + let config: DragDropConfig; + let container: Container6; + let sortableService: DragDropSortableService; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [SortableContainer, SortableComponent, SortableHandleComponent, Container6], + providers: [DragDropConfig, + DragDropService, + DragDropSortableService] + }); + TestBed.compileComponents(); + }); + + beforeEach(inject([DragDropConfig, DragDropService, DragDropSortableService], + (c: DragDropConfig, dd: DragDropService, ds: DragDropSortableService) => { + dragdropService = dd; + config = c; + sortableService = ds; + + componentFixture = TestBed.createComponent(Container6); + componentFixture.detectChanges(); + container = componentFixture.componentInstance; + })); + + it('should be defined', () => { + expect(componentFixture).toBeDefined(); + }); + + it('The elements of the list should be draggable by handle', () => { + let values:Array = ['one','two','three','four']; + + container.sortableList = values; + componentFixture.detectChanges(); + + let ulElem:HTMLElement = componentFixture.elementRef.nativeElement.querySelector('ul'); + + expect(ulElem).toBeDefined(); + expect(ulElem.children.length).toBe(values.length); + + expect(sortableService.sortableContainer).not.toBeDefined(); + expect(sortableService.index).not.toBeDefined(); + + triggerEvent(ulElem.children[0].querySelector('.handle'), 'mousedown', 'MouseEvent'); + triggerEvent(ulElem.children[0], 'dragstart', 'MouseEvent'); + componentFixture.detectChanges(); + expect(sortableService.sortableContainer.sortableData).toBe(values); + expect(sortableService.index).toBe(0); + }); + + it('The elements of the list should not be draggable by non-handle', () => { + let values:Array = ['one','two','three','four']; + + container.sortableList = values; + componentFixture.detectChanges(); + + let ulElem:HTMLElement = componentFixture.elementRef.nativeElement.querySelector('ul'); + + expect(ulElem).toBeDefined(); + expect(ulElem.children.length).toBe(values.length); + + expect(sortableService.sortableContainer).not.toBeDefined(); + expect(sortableService.index).not.toBeDefined(); + + triggerEvent(ulElem.children[0].querySelector('.non-handle'), 'mousedown', 'MouseEvent'); + triggerEvent(ulElem.children[0], 'dragstart', 'MouseEvent'); + componentFixture.detectChanges(); + expect(sortableService.sortableContainer).not.toBeDefined(); + expect(sortableService.index).not.toBeDefined(); + }); +}); + diff --git a/tests/dnd.with.draggable.data.spec.ts b/tests/dnd.with.draggable.data.spec.ts index a8bf74e..4f46c6e 100644 --- a/tests/dnd.with.draggable.data.spec.ts +++ b/tests/dnd.with.draggable.data.spec.ts @@ -8,7 +8,7 @@ import {DragDropService} from '../src/dnd.service'; import {Container2, triggerEvent} from './dnd.component.factory'; -describe('Drag and Drop without draggable data', () => { +describe('Drag and Drop with draggable data', () => { let componentFixture: ComponentFixture; let dragdropService: DragDropService;