feat: add bar drag test

packages/gantt/src/components/bar/bar.component.ts

@@ -32,7 +32,6 @@ function linearGradient(sideOrCorner: string, color: string, stop: string) {
     providers: [GanttBarDrag]
 })
 export class NgxGanttBarComponent extends GanttItemUpper implements OnInit, AfterViewInit, OnChanges, OnDestroy {
-
     @Output() barClick = new EventEmitter<GanttBarClickEvent>();
 
     @ViewChild('content') contentElementRef: ElementRef<HTMLDivElement>;

packages/gantt/src/components/bar/test/bar.component.spec.ts

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NgxGanttComponent } from '../../../gantt.component';
+import { NgxGanttModule } from '../../../gantt.module';
+import { GanttDate } from '../../../utils/date';
+
+const mockBarItems = [
+    {
+        id: 'item-0101',
+        title: 'VERSION 0101',
+        start: new GanttDate('2020-05-31 22:34:35').getUnixTime(),
+        end: new GanttDate('2020-06-05 08:53:20').getUnixTime(),
+        progress: 0.5
+    }
+];
+
+@Component({
+    selector: 'test-gantt-bar',
+    template: ` <ngx-gantt #gantt [items]="items" [viewType]="viewType">
+        <ngx-gantt-table>
+            <ngx-gantt-column name="标题" width="200px">
+                <ng-template #cell let-item="item">
+                    {{ item.title }}
+                </ng-template>
+            </ngx-gantt-column>
+        </ngx-gantt-table>
+    </ngx-gantt>`
+})
+export class TestGanttBarComponent {
+    constructor() {}
+
+    viewType = 'month';
+
+    items = mockBarItems;
+}
+
+describe('ngx-gantt-bar', () => {
+    let fixture: ComponentFixture<TestGanttBarComponent>;
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [CommonModule, NgxGanttModule],
+            declarations: [TestGanttBarComponent]
+        }).compileComponents();
+        fixture = TestBed.createComponent(TestGanttBarComponent);
+        fixture.detectChanges();
+    });
+
+    it('should has bar progress', () => {
+        const barProgress = fixture.debugElement.queryAll(By.css('.gantt-bar-content-progress'));
+        expect(barProgress.length).toEqual(1);
+    });
+});

packages/gantt/src/components/bar/test/bar.drag.spec.ts

@@ -0,0 +1,196 @@
+import { dispatchMouseEvent } from '@angular/cdk/testing';
+import { CommonModule } from '@angular/common';
+import { Component, DebugElement, Directive } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick, flush } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { GanttDragEvent, GanttLinkDragEvent } from '../../../class';
+import { NgxGanttComponent } from '../../../gantt.component';
+import { NgxGanttModule } from '../../../gantt.module';
+import { NgxGanttRootComponent } from '../../../root.component';
+import { GanttDate } from '../../../utils/date';
+import { NgxGanttBarComponent } from '../bar.component';
+
+const activeClass = 'gantt-bar-active';
+
+const mockBarItems = [
+    {
+        id: 'item-0101',
+        title: 'VERSION 0101',
+        start: new GanttDate('2020-03-31 22:34:35').getUnixTime(),
+        end: new GanttDate('2020-06-05 08:53:20').getUnixTime(),
+        color: '#FF0000'
+    },
+    {
+        id: 'item-0203',
+        title: 'VERSION 0203',
+        start: new GanttDate('2020-04-23 20:07:55').getUnixTime(),
+        end: new GanttDate('2020-06-23 00:00:00').getUnixTime(),
+        links: ['item-0204']
+    },
+    {
+        id: 'item-0204',
+        title: 'VERSION 0204',
+        start: new GanttDate('2020-06-02 02:21:15').getUnixTime(),
+        end: new GanttDate('2020-06-18 02:26:40').getUnixTime(),
+        links: ['item-0101']
+    }
+];
+
+@Component({
+    selector: 'test-gantt-bar',
+    template: ` <ngx-gantt
+        #gantt
+        [items]="items"
+        [viewType]="viewType"
+        [draggable]="draggable"
+        [linkable]="linkable"
+        (dragEnded)="dragEnded($event)"
+        (dragStarted)="dragStarted($event)"
+        (linkDragEnded)="linkDragEnded($event)"
+        (linkDragStarted)="linkDragStarted($event)"
+    >
+        <ngx-gantt-table>
+            <ngx-gantt-column name="标题" width="200px">
+                <ng-template #cell let-item="item">
+                    {{ item.title }}
+                </ng-template>
+            </ngx-gantt-column>
+        </ngx-gantt-table>
+    </ngx-gantt>`
+})
+export class TestGanttBarComponent {
+    constructor() {}
+
+    viewType = 'month';
+
+    items = mockBarItems;
+
+    draggable = true;
+
+    linkable = true;
+
+    dragEnded(event: GanttDragEvent) {
+        console.log(event);
+    }
+
+    dragStarted(event: GanttDragEvent) {
+        console.log(event);
+    }
+
+    linkDragEnded(event: GanttLinkDragEvent) {
+        console.log(event);
+    }
+
+    linkDragStarted(event: GanttLinkDragEvent) {
+        console.log(event);
+    }
+}
+
+function dragEvent(fixture: ComponentFixture<TestGanttBarComponent>, dragElement: HTMLElement, barElement?: HTMLElement) {
+    const dragMaskElement = fixture.debugElement.query(By.css('.gantt-drag-mask')).nativeElement;
+    const dragBackdropElement = fixture.debugElement.query(By.css('.gantt-drag-backdrop')).nativeElement;
+    const dragStartSpy = spyOn(fixture.componentInstance, 'dragStarted');
+    const dragEndSpy = spyOn(fixture.componentInstance, 'dragEnded');
+    barElement = barElement || dragElement;
+
+    dispatchMouseEvent(dragElement, 'mousedown');
+    fixture.detectChanges();
+
+    dispatchMouseEvent(document, 'mousemove', 50);
+    fixture.detectChanges();
+    expect(dragStartSpy).toHaveBeenCalledTimes(1);
+    expect(barElement.style.getPropertyValue('pointer-events')).toEqual('none');
+    expect(barElement.classList).toContain('gantt-bar-draggable-drag');
+
+    dispatchMouseEvent(document, 'mousemove', 200);
+    fixture.detectChanges();
+    expect(dragMaskElement.style.getPropertyValue('display')).toEqual('block');
+    expect(dragBackdropElement.style.getPropertyValue('display')).toEqual('block');
+
+    dispatchMouseEvent(document, 'mouseup', 200);
+    fixture.detectChanges();
+    expect(barElement.style.getPropertyValue('pointer-events')).toEqual('');
+    expect(barElement.classList).not.toContain('gantt-bar-draggable-drag');
+    expect(dragMaskElement.style.getPropertyValue('display')).toEqual('none');
+    expect(dragBackdropElement.style.getPropertyValue('display')).toEqual('none');
+    expect(dragEndSpy).toHaveBeenCalledTimes(1);
+}
+
+function linkDragEvent(fixture: ComponentFixture<TestGanttBarComponent>, dragElement: HTMLElement) {
+    const root = fixture.debugElement.query(By.directive(NgxGanttRootComponent));
+
+    dispatchMouseEvent(dragElement, 'mousedown');
+    fixture.detectChanges();
+
+    dispatchMouseEvent(document, 'mousemove', 10, 10);
+    fixture.detectChanges();
+
+    const ganttLinkDragContainer = root.nativeElement.querySelector('.gantt-link-drag-container');
+    const linkDraggingLine = root.nativeElement.querySelector('.link-dragging-line');
+    expect(ganttLinkDragContainer).toBeTruthy();
+    expect(linkDraggingLine).toBeTruthy();
+
+    dispatchMouseEvent(document, 'mousemove', 200, -30);
+    fixture.detectChanges();
+
+    dispatchMouseEvent(document, 'mouseup', 200, -30);
+    fixture.detectChanges();
+}
+
+describe('bar-drag', () => {
+    let fixture: ComponentFixture<TestGanttBarComponent>;
+    let ganttComponentInstance: TestGanttBarComponent;
+    let ganttDebugElement: DebugElement;
+
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [CommonModule, NgxGanttModule],
+            declarations: [TestGanttBarComponent]
+        }).compileComponents();
+        fixture = TestBed.createComponent(TestGanttBarComponent);
+        ganttDebugElement = fixture.debugElement.query(By.directive(NgxGanttComponent));
+        ganttComponentInstance = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should active when mouse enter bar', () => {
+        const barElement = fixture.debugElement.query(By.directive(NgxGanttBarComponent)).nativeElement;
+        dispatchMouseEvent(barElement, 'mouseenter');
+        expect(barElement.classList).toContain(activeClass);
+        dispatchMouseEvent(barElement, 'mouseleave');
+        expect(barElement.classList).not.toContain(activeClass);
+    });
+
+    it('should bar drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[0];
+        dragEvent(fixture, bar.nativeElement);
+        expect(bar.componentInstance.item.start.getUnixTime()).toEqual(new GanttDate('2020-04-21 00:00:00').getUnixTime());
+        expect(bar.componentInstance.item.end.getUnixTime()).toEqual(new GanttDate('2020-06-26 23:59:59').getUnixTime());
+    });
+
+    it('should first bar handle drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1];
+        const firstHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[0].nativeElement;
+        dragEvent(fixture, firstHandleElement, bar.nativeElement);
+        expect(bar.componentInstance.item.start.getUnixTime()).toEqual(new GanttDate('2020-05-14 00:00:00').getUnixTime());
+    });
+
+    it('should last bar handles drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1];
+        const lastHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[1].nativeElement;
+        dragEvent(fixture, lastHandleElement, bar.nativeElement);
+        expect(bar.componentInstance.item.end.getUnixTime()).toEqual(new GanttDate('2020-07-15 23:59:59').getUnixTime());
+    });
+
+    it('should first bar link handle drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[2];
+        const firstHandleElement = bar.queryAll(By.css('.link-handles .handle'))[0].nativeElement;
+        linkDragEvent(fixture, firstHandleElement);
+    });
+
+    it('should last bar link handles drag', () => {
+        const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[2];
+        const lastHandleElement = bar.queryAll(By.css('.link-handles .handle'))[1].nativeElement;
+        linkDragEvent(fixture, lastHandleElement);
+    });
+});

packages/gantt/src/components/range/range.component.ts

@@ -3,7 +3,7 @@ import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
 import { GanttItemUpper } from '../../gantt-item-upper';
 
 @Component({
-    selector: 'gantt-range',
+    selector: 'ngx-gantt-range,gantt-range',
     templateUrl: './range.component.html'
 })
 export class NgxGanttRangeComponent extends GanttItemUpper implements OnInit, OnChanges, OnDestroy {

packages/gantt/src/components/range/test/range.component.spec.ts

@@ -4,41 +4,42 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NgxGanttComponent } from '../../../gantt.component';
 import { NgxGanttModule } from '../../../gantt.module';
+import { GanttDate } from '../../../utils/date';
 import { NgxGanttRangeComponent } from '../range.component';
 
 const mockRangeItems = [
     {
         id: 'item-0101',
         title: 'VERSION 0101',
-        start: 1590035675,
-        color: '#FF0000',
+        start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
         type: 'range',
         progress: 0.5,
+        color: '#FF0000',
         children: [
             {
                 id: 'item-child-0101',
                 title: 'VERSION Children 0101',
-                start: 1590035675,
+                start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
                 color: '#FF0000',
                 linkable: false,
-                barStyle: { border: `1px solid #FF0000` }
+                type: 'range'
             }
         ]
     },
     {
         id: 'item-0102',
         title: 'VERSION 0102',
-        start: 1590935675,
-        end: 1591318400,
+        start: new GanttDate('2020-05-31 22:34:35').getUnixTime(),
+        end: new GanttDate('2020-06-05 08:53:20').getUnixTime(),
         color: '#9ACD32',
-        type: 'range',
-        expandable: true
+        expandable: true,
+        type: 'range'
     }
 ];
 
 @Component({
     selector: 'test-gantt-range',
-    template: ` <ngx-gantt #gantt [items]="items" [viewType]="viewType" (barClick)="barClick($event)">
+    template: ` <ngx-gantt #gantt [items]="items" [viewType]="viewType">
         <ngx-gantt-table>
             <ngx-gantt-column name="标题" width="200px">
                 <ng-template #cell let-item="item">
@@ -56,20 +57,15 @@ export class TestGanttRangeComponent {
     items = mockRangeItems;
 }
 
-describe('#basic', () => {
+describe('ngx-gantt-range', () => {
     let fixture: ComponentFixture<TestGanttRangeComponent>;
-    let ganttComponentInstance: TestGanttRangeComponent;
-    let ganttDebugElement: DebugElement;
     beforeEach(async () => {
         TestBed.configureTestingModule({
             imports: [CommonModule, NgxGanttModule],
             declarations: [TestGanttRangeComponent]
         }).compileComponents();
         fixture = TestBed.createComponent(TestGanttRangeComponent);
         fixture.detectChanges();
-        ganttDebugElement = fixture.debugElement.query(By.directive(NgxGanttComponent));
-        ganttComponentInstance = fixture.componentInstance;
-        fixture.detectChanges();
     });
 
     it('should render range item', () => {

packages/gantt/src/test/mocks/data.ts

@@ -12,7 +12,6 @@ export function getMockItems() {
                     id: 'item-child-0101',
                     title: 'VERSION Children 0101',
                     start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
-
                     color: '#FF0000',
                     linkable: false
                 }