Skip to content

Commit

Permalink
feat: add gantt table test #INFR-1716
Browse files Browse the repository at this point in the history
  • Loading branch information
@Guoxiin
Guoxiin committed May 23, 2021
1 parent e14ebb9 commit a57d546
Show file tree
Hide file tree
Showing 4 changed files with 309 additions and 0 deletions.
56 changes: 56 additions & 0 deletions packages/gantt/src/components/table/test/mocks.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
export const mockItems = [
{
id: 'item-0101',
title: 'VERSION 0101',
start: 1590035675,
group_id: '00001',
color: '#FF0000',
type: 'range',
progress: 0.5,
children: [
{
id: 'item-child-0101',
title: 'VERSION Children 0101',
start: 1590035675,
group_id: '00001',
color: '#FF0000',
linkable: false,
progress: 0.5,
barStyle: { border: `1px solid #FF0000` }
}
]
},
{
id: 'item-0102',
title: 'VERSION 0102',
start: 1590935675,
end: 1591318400,
color: '#9ACD32',
group_id: '00001',
expandable: true
}
];

export const mockGroups = [
{
id: '00001',
title: 'Project 1',
class: 'test'
},
{
id: '00002',
title: 'Project 2'
},
{
id: '00003',
title: 'Project 3'
},
{
id: '00004',
title: 'Project 4'
},
{
id: '00005',
title: 'Project 5'
}
];
135 changes: 135 additions & 0 deletions packages/gantt/src/components/table/test/table.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import { fakeAsync, TestBed, ComponentFixture, async, inject, flush } from '@angular/core/testing';
import { Component, ViewChild, DebugElement } from '@angular/core';
import { NgxGanttModule } from 'ngx-gantt';
import { mockItems, mockGroups } from './mocks';
import { By } from '@angular/platform-browser';
import { dispatchMouseEvent } from '@angular/cdk/testing/';
import { GanttTableComponent } from '../gantt-table.component';
@Component({
selector: 'test-gantt-table',
template: `
<ngx-gantt #gantt [items]="items" [groups]="groups">
<ngx-gantt-table>
<ngx-gantt-column [width]="200" name="标题">
<ng-template #cell let-item="item">
{{ item.title }}
</ng-template>
</ngx-gantt-column>
<ngx-gantt-column>
<ng-template #header> <span style="font-weight: bold;">开始时间</span> </ng-template>
<ng-template #cell let-item="item">
{{ item.start * 1000 | date: 'yyyy-MM-dd' }}
</ng-template>
</ngx-gantt-column>
</ngx-gantt-table>
</ngx-gantt>
`,
providers: []
})
export class TestGanttTableComponent {
@ViewChild(GanttTableComponent, { static: true }) ganttTableComponent: GanttTableComponent;

items = mockItems;

groups = mockGroups;

constructor() {}
}

describe('GanttTable', () => {
let component: TestGanttTableComponent;
let fixture: ComponentFixture<TestGanttTableComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NgxGanttModule],
declarations: [TestGanttTableComponent]
}).compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(TestGanttTableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create gantt-table', () => {
expect(component).toBeDefined();
const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
expect(ganttTable).toBeTruthy();
expect(ganttTable.nativeElement).toBeTruthy();
});

it('should expand groups', () => {
const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
expect(ganttTable.query(By.css('.gantt-table-group-title')).nativeNode.classList.contains('expanded')).toBeTruthy();
ganttTable.query(By.css('.gantt-table-group-title')).nativeNode.click();
fixture.detectChanges();
expect(ganttTable.query(By.css('.gantt-table-group-title')).nativeNode.classList.contains('expanded')).toBeFalsy();
});

it('should expand children', () => {
const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
const tableChildrenLength = ganttTable.query(By.css('.gantt-table-body')).children.length;
ganttTable.nativeElement.querySelector('.gantt-table-item-with-group .gantt-expand-icon .expand-icon').click();
fixture.detectChanges();
expect(ganttTable.query(By.css('.gantt-table-body')).children.length).toEqual(tableChildrenLength + 1);
});

it('should column drag', fakeAsync(() => {
const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
const dragTrigger = ganttTable.nativeElement.querySelector('.gantt-table-header .gantt-table-column .gantt-table-drag-trigger');
fixture.detectChanges();
flush();

const dragTriggerRight = dragTrigger.getBoundingClientRect().right;

dispatchMouseEvent(dragTrigger, 'mousedown');
fixture.detectChanges();
flush();

dispatchMouseEvent(document, 'mousemove', 200);
fixture.detectChanges();
flush();
fixture.detectChanges();

dispatchMouseEvent(document, 'mousemove', 250);
fixture.detectChanges();
flush();
fixture.detectChanges();

dispatchMouseEvent(document, 'mouseup');
fixture.detectChanges();
flush();

expect(dragTrigger.getBoundingClientRect().right).not.toBe(dragTriggerRight);
}));

it('should table drag', fakeAsync(() => {
const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
const dragTrigger = ganttTable.nativeElement.children[2];
fixture.detectChanges();

const dragTriggerRight = dragTrigger.getBoundingClientRect().right;

dispatchMouseEvent(dragTrigger, 'mousedown');
fixture.detectChanges();
flush();

dispatchMouseEvent(document, 'mousemove', 250, 150);
fixture.detectChanges();
flush();
fixture.detectChanges();

dispatchMouseEvent(document, 'mousemove', 50, 50);
fixture.detectChanges();
flush();
fixture.detectChanges();

dispatchMouseEvent(document, 'mouseup');
fixture.detectChanges();
flush();

expect(dragTrigger.getBoundingClientRect().left).not.toBe(dragTriggerRight);
}));
});
56 changes: 56 additions & 0 deletions packages/gantt/src/table/test/mocks.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
export const mockItems = [
{
id: 'item-0101',
title: 'VERSION 0101',
start: 1590035675,
group_id: '00001',
color: '#FF0000',
type: 'range',
progress: 0.5,
children: [
{
id: 'item-child-0101',
title: 'VERSION Children 0101',
start: 1590035675,
group_id: '00001',
color: '#FF0000',
linkable: false,
progress: 0.5,
barStyle: { border: `1px solid #FF0000` }
}
]
},
{
id: 'item-0102',
title: 'VERSION 0102',
start: 1590935675,
end: 1591318400,
color: '#9ACD32',
group_id: '00001',
expandable: true
}
];

export const mockGroups = [
{
id: '00001',
title: 'Project 1',
class: 'test'
},
{
id: '00002',
title: 'Project 2'
},
{
id: '00003',
title: 'Project 3'
},
{
id: '00004',
title: 'Project 4'
},
{
id: '00005',
title: 'Project 5'
}
];
62 changes: 62 additions & 0 deletions packages/gantt/src/table/test/table.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { Component, ViewChild, DebugElement } from '@angular/core';
import { NgxGanttModule } from 'ngx-gantt';
import { GanttTableComponent } from '../../components/table/gantt-table.component';
import { mockItems, mockGroups } from './mocks';
import { By } from '@angular/platform-browser';

@Component({
selector: 'test-gantt-table',
template: `
<ngx-gantt #gantt [items]="items" [groups]="groups">
<ngx-gantt-table>
<ngx-gantt-column [width]="200" name="标题">
<ng-template #cell let-item="item">
{{ item.title }}
</ng-template>
</ngx-gantt-column>
<ngx-gantt-column>
<ng-template #header> <span style="font-weight: bold;">开始时间</span> </ng-template>
<ng-template #cell let-item="item">
{{ item.start * 1000 | date: 'yyyy-MM-dd' }}
</ng-template>
</ngx-gantt-column>
</ngx-gantt-table>
</ngx-gantt>
`,
providers: []
})
export class TestGanttTableComponent {
@ViewChild(GanttTableComponent, { static: true }) ganttTableComponent: GanttTableComponent;

items = mockItems;

groups = mockGroups;

constructor() {}
}

describe('NgxGanttTableComponent', () => {
let component: TestGanttTableComponent;
let fixture: ComponentFixture<TestGanttTableComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [NgxGanttModule],
declarations: [TestGanttTableComponent]
}).compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(TestGanttTableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create ngx-gantt-table', () => {
expect(component).toBeDefined();
const ganttTable: DebugElement = fixture.debugElement.query(By.directive(GanttTableComponent));
expect(ganttTable).toBeTruthy();
expect(ganttTable.nativeElement).toBeTruthy();
});
});

0 comments on commit a57d546

Please sign in to comment.