@worktile/gantt 11.0.2 → 12.0.1

package/packages/gantt/src/utils/test/date.spec.ts

@@ -0,0 +1,105 @@
+import { GanttDate, GanttDateUtil } from '../date';
+
+describe('tiny-date', () => {
+    const date = new GanttDate('2020-2-2 20:20:20');
+
+    it('support getTime', () => expect(date.getTime()).toBe(date.value.getTime()));
+
+    it('support getDate', () => expect(date.getDate()).toBe(date.value.getDate()));
+
+    it('support getMilliseconds', () => expect(date.getMilliseconds()).toBe(date.value.getMilliseconds()));
+
+    it('support getDaysInMonth', () => {
+        expect(date.getDaysInMonth()).toBe(29);
+    });
+
+    it('support getDaysInQuarter', () => {
+        expect(date.getDaysInQuarter()).toBe(91);
+    });
+
+    it('support setDate', () => {
+        expect(date.setDate(10).getUnixTime()).toBe(new GanttDate('2020-02-10 20:20:20').getUnixTime());
+    });
+
+    it('support startOf', () => {
+        expect(date.startOfDay().getUnixTime()).toBe(new GanttDate('2020-02-02 00:00:00').getUnixTime());
+        expect(date.startOfMonth().getUnixTime()).toBe(new GanttDate('2020-02-01 00:00:00').getUnixTime());
+    });
+
+    it('support endOf', () => {
+        expect(date.endOfDay().getUnixTime()).toBe(new GanttDate('2020-02-02 23:59:59').getUnixTime());
+        expect(date.endOfMonth().getUnixTime()).toBe(new GanttDate('2020-02-29 23:59:59').getUnixTime());
+    });
+
+    it('support is', () => {
+        expect(date.isToday()).toBe(false);
+        expect(date.isWeekend()).toBe(true);
+    });
+
+    it('support add', () => {
+        let newGanttDate: GanttDate;
+
+        newGanttDate = date.addYears(1);
+        expect(newGanttDate.getYear()).toBe(date.getYear() + 1);
+
+        newGanttDate = date.addQuarters(1);
+        expect(newGanttDate.getUnixTime()).toBe(new GanttDate('2020-05-02 20:20:20').getUnixTime());
+
+        newGanttDate = date.addMonths(1);
+        expect(newGanttDate.getMonth()).toBe(date.getMonth() + 1);
+
+        newGanttDate = date.addWeeks(1);
+        expect(newGanttDate.getWeek()).toBe(date.getWeek() + 1);
+
+        newGanttDate = date.addDays(1);
+        expect(newGanttDate.getDay()).toBe(date.getDay() + 1);
+
+        newGanttDate = date.addHours(1);
+        expect(newGanttDate.getHours()).toBe(date.getHours() + 1);
+
+        newGanttDate = date.addMinutes(1);
+        expect(newGanttDate.getMinutes()).toBe(date.getMinutes() + 1);
+
+        newGanttDate = date.addSeconds(1);
+        expect(newGanttDate.getSeconds()).toBe(date.getSeconds() + 1);
+    });
+
+    it('support add by type', () => {
+        let newGanttDate: GanttDate;
+
+        newGanttDate = date.add(1, 'year');
+        expect(newGanttDate.getYear()).toBe(date.getYear() + 1);
+
+        newGanttDate = date.add(1, 'quarter');
+        expect(newGanttDate.getUnixTime()).toBe(new GanttDate('2020-05-02 20:20:20').getUnixTime());
+
+        newGanttDate = date.add(1, 'month');
+        expect(newGanttDate.getMonth()).toBe(date.getMonth() + 1);
+
+        newGanttDate = date.add(1, 'week');
+        expect(newGanttDate.getWeek()).toBe(date.getWeek() + 1);
+
+        newGanttDate = date.add(1, 'day');
+        expect(newGanttDate.getDay()).toBe(date.getDay() + 1);
+
+        newGanttDate = date.add(1, 'hour');
+        expect(newGanttDate.getHours()).toBe(date.getHours() + 1);
+
+        newGanttDate = date.add(1, 'minute');
+        expect(newGanttDate.getMinutes()).toBe(date.getMinutes() + 1);
+
+        newGanttDate = date.add(1, 'second');
+        expect(newGanttDate.getSeconds()).toBe(date.getSeconds() + 1);
+
+        newGanttDate = date.add(1);
+        expect(newGanttDate.getSeconds()).toBe(date.getSeconds() + 1);
+    });
+
+    it('support clone', () => {
+        expect(date.getTime()).toBe(date.clone().getTime());
+    });
+
+    it('support format', () => {
+        expect(date.format('yyyy年QQQ')).toBe('2020年Q1');
+    });
+});

package/packages/gantt/src/utils/test/helpers.spec.ts

@@ -0,0 +1,73 @@
+import { GanttItemInternal } from '../../class';
+import { isNumber, isString, isUndefined, hexToRgb, uniqBy, flatten, recursiveItems } from '../helpers';
+
+describe('helpers', () => {
+    it('isNumber', () => {
+        const result = isNumber('111');
+        const result1 = isNumber(111);
+
+        expect(result).toBe(false);
+        expect(result1).toBe(true);
+    });
+
+    it('isString', () => {
+        const result = isString('111');
+        const result1 = isString(111);
+
+        expect(result).toBe(true);
+        expect(result1).toBe(false);
+    });
+
+    it('isUndefined', () => {
+        const result = isUndefined('111');
+        const result1 = isUndefined(undefined);
+
+        expect(result).toBe(false);
+        expect(result1).toBe(true);
+    });
+
+    it('hexToRgb', () => {
+        const result = hexToRgb('#cccccc');
+        const result1 = hexToRgb('rgba(255,255,255)');
+
+        expect(result).toBe('rgba(204,204,204,1)');
+        expect(result1).toBe('rgba(255,255,255)');
+    });
+
+    it('uniqBy', () => {
+        const result = uniqBy([{ id: '3333' }, { id: '2222' }, { id: '3333' }], 'id');
+
+        expect(result.length).toBe(2);
+    });
+
+    it('flatten', () => {
+        const result = flatten([[{ id: '3333' }], [{ id: '2222' }], { id: '3333' }]);
+        result.forEach((value) => {
+            expect(value.length).toBe(undefined);
+        });
+    });
+
+    it('recursiveItems', () => {
+        const result = recursiveItems([
+            {
+                id: '3333',
+                expanded: true,
+                children: [
+                    {
+                        id: '3333-1'
+                    }
+                ]
+            } as GanttItemInternal,
+            {
+                id: '2222',
+                expanded: false,
+                children: [
+                    {
+                        id: '2222-1'
+                    }
+                ]
+            } as GanttItemInternal
+        ]);
+        expect(result.length).toBe(3);
+    });
+});

package/packages/gantt/src/utils/testing.ts

@@ -0,0 +1,64 @@
+import { ModifierKeys } from '@angular/cdk/testing';
+
+function createMouseEvent(type: string, clientX = 0, clientY = 0, button = 0, modifiers: ModifierKeys = {}, relatedTarget?: Element) {
+    const event = document.createEvent('MouseEvent');
+    const originalPreventDefault = event.preventDefault.bind(event);
+
+    // Note: We cannot determine the position of the mouse event based on the screen
+    // because the dimensions and position of the browser window are not available
+    // To provide reasonable `screenX` and `screenY` coordinates, we simply use the
+    // client coordinates as if the browser is opened in fullscreen.
+    const screenX = clientX;
+    const screenY = clientY;
+
+    event.initMouseEvent(
+        type,
+        /* canBubble */ true,
+        /* cancelable */ true,
+        /* view */ window,
+        /* detail */ 0,
+        /* screenX */ screenX,
+        /* screenY */ screenY,
+        /* clientX */ clientX,
+        /* clientY */ clientY,
+        /* ctrlKey */ !!modifiers.control,
+        /* altKey */ !!modifiers.alt,
+        /* shiftKey */ !!modifiers.shift,
+        /* metaKey */ !!modifiers.meta,
+        /* button */ button,
+        /* relatedTarget */ relatedTarget
+    );
+
+    // `initMouseEvent` doesn't allow us to pass the `buttons` and
+    // defaults it to 0 which looks like a fake event.
+    defineReadonlyEventProperty(event, 'buttons', 1);
+
+    // IE won't set `defaultPrevented` on synthetic events so we need to do it manually.
+    event.preventDefault = function () {
+        defineReadonlyEventProperty(event, 'defaultPrevented', true);
+        return originalPreventDefault();
+    };
+
+    return event;
+}
+
+function defineReadonlyEventProperty(event: Event, propertyName: string, value: any) {
+    Object.defineProperty(event, propertyName, { get: () => value, configurable: true });
+}
+
+export function dispatchEvent<T extends Event>(node: Node | Window, event: T): T {
+    node.dispatchEvent(event);
+    return event;
+}
+
+export function dispatchMouseEvent(
+    node: Node,
+    type: string,
+    clientX = 0,
+    clientY = 0,
+    button?: number,
+    modifiers?: ModifierKeys,
+    relatedTarget?: Element
+): MouseEvent {
+    return dispatchEvent(node, createMouseEvent(type, clientX, clientY, button, modifiers, relatedTarget));
+}

package/packages/gantt/src/views/day.ts

@@ -0,0 +1,74 @@
+import { GanttView, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop, GanttViewDate } from './view';
+import { GanttDate, eachWeekOfInterval, eachDayOfInterval } from '../utils/date';
+import { GanttDatePoint } from '../class/date-point';
+
+const viewOptions: GanttViewOptions = {
+    cellWidth: 35,
+    start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
+    end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
+    addAmount: 1,
+    addUnit: 'month'
+};
+
+export class GanttViewDay extends GanttView {
+    showWeekBackdrop = true;
+
+    showTimeline = false;
+
+    constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
+        super(start, end, Object.assign({}, viewOptions, options));
+    }
+
+    startOf(date: GanttDate) {
+        return date.startOfWeek({ weekStartsOn: 1 });
+    }
+
+    endOf(date: GanttDate) {
+        return date.endOfWeek({ weekStartsOn: 1 });
+    }
+
+    getPrimaryWidth() {
+        return this.getCellWidth() * 7;
+    }
+
+    getDayOccupancyWidth(): number {
+        return this.cellWidth;
+    }
+
+    getPrimaryDatePoints(): GanttDatePoint[] {
+        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.addSeconds(1).value }, { weekStartsOn: 1 });
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < weeks.length; i++) {
+            const weekStart = new GanttDate(weeks[i]);
+            const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
+            const point = new GanttDatePoint(
+                weekStart,
+                weekStart.addWeeks(increaseWeek).format('yyyy年MM月'),
+                (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7),
+                primaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+
+    getSecondaryDatePoints(): GanttDatePoint[] {
+        const days = eachDayOfInterval({ start: this.start.value, end: this.end.value });
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < days.length; i++) {
+            const start = new GanttDate(days[i]);
+            const point = new GanttDatePoint(
+                start,
+                start.getDate().toString(),
+                i * this.getCellWidth() + this.getCellWidth() / 2,
+                secondaryDatePointTop,
+                {
+                    isWeekend: start.isWeekend(),
+                    isToday: start.isToday()
+                }
+            );
+            points.push(point);
+        }
+        return points;
+    }
+}

package/packages/gantt/src/views/factory.ts

@@ -0,0 +1,25 @@
+import { GanttViewOptions, GanttViewDate } from './view';
+import { GanttViewMonth } from './month';
+import { GanttDate } from '../utils/date';
+import { GanttViewType } from '../class/view-type';
+import { GanttViewQuarter } from './quarter';
+import { GanttViewDay } from './day';
+import { GanttViewWeek } from './week';
+import { GanttViewYear } from './year';
+
+export function createViewFactory(type: GanttViewType, start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
+    switch (type) {
+        case GanttViewType.month:
+            return new GanttViewMonth(start, end, options);
+        case GanttViewType.week:
+            return new GanttViewWeek(start, end, options);
+        case GanttViewType.quarter:
+            return new GanttViewQuarter(start, end, options);
+        case GanttViewType.day:
+            return new GanttViewDay(start, end, options);
+        case GanttViewType.year:
+            return new GanttViewYear(start, end, options);
+        default:
+            throw new Error('gantt view type invalid');
+    }
+}

package/packages/gantt/src/views/month.ts

@@ -0,0 +1,66 @@
+import { GanttView, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop, GanttViewDate } from './view';
+import { GanttDate, differenceInCalendarQuarters, eachMonthOfInterval } from '../utils/date';
+import { GanttDatePoint } from '../class/date-point';
+
+const viewOptions: GanttViewOptions = {
+    start: new GanttDate().startOfQuarter().addQuarters(-1),
+    end: new GanttDate().endOfQuarter().addQuarters(2),
+    cellWidth: 280,
+    addAmount: 1,
+    addUnit: 'quarter'
+};
+
+export class GanttViewMonth extends GanttView {
+    constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
+        super(start, end, Object.assign({}, viewOptions, options));
+    }
+
+    startOf(date: GanttDate) {
+        return date.startOfQuarter();
+    }
+
+    endOf(date: GanttDate) {
+        return date.endOfQuarter();
+    }
+
+    getPrimaryWidth() {
+        return this.getCellWidth() * 3;
+    }
+
+    getDayOccupancyWidth(date: GanttDate): number {
+        return this.cellWidth / date.getDaysInMonth();
+    }
+
+    getPrimaryDatePoints(): GanttDatePoint[] {
+        const quarters = differenceInCalendarQuarters(this.end.addSeconds(1).value, this.start.value);
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < quarters; i++) {
+            const start = this.start.addQuarters(i);
+            const point = new GanttDatePoint(
+                start,
+                start.format('yyyy年QQQ'),
+                (this.getCellWidth() * 3) / 2 + i * (this.getCellWidth() * 3),
+                primaryDatePointTop
+            );
+            points.push(point);
+        }
+
+        return points;
+    }
+
+    getSecondaryDatePoints(): GanttDatePoint[] {
+        const months = eachMonthOfInterval({ start: this.start.value, end: this.end.value });
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < months.length; i++) {
+            const start = new GanttDate(months[i]);
+            const point = new GanttDatePoint(
+                start,
+                `${start.getMonth() + 1}月`,
+                i * this.getCellWidth() + this.getCellWidth() / 2,
+                secondaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+}

package/packages/gantt/src/views/quarter.ts

@@ -0,0 +1,68 @@
+import { GanttView, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop, GanttViewDate } from './view';
+import { GanttDate } from '../utils/date';
+import { GanttDatePoint } from '../class/date-point';
+import { eachYearOfInterval, differenceInCalendarQuarters } from 'date-fns';
+
+const viewOptions: GanttViewOptions = {
+    start: new GanttDate().addYears(-1).startOfYear(),
+    end: new GanttDate().addYears(1).endOfYear(),
+    min: new GanttDate().addYears(-2).startOfYear(),
+    max: new GanttDate().addYears(2).endOfYear(),
+    cellWidth: 500,
+    addAmount: 1,
+    addUnit: 'year'
+};
+
+export class GanttViewQuarter extends GanttView {
+    constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
+        super(start, end, Object.assign({}, viewOptions, options));
+    }
+
+    startOf(date: GanttDate) {
+        return date.startOfYear();
+    }
+
+    endOf(date: GanttDate) {
+        return date.endOfYear();
+    }
+
+    getPrimaryWidth() {
+        return this.getCellWidth() * 4;
+    }
+
+    getDayOccupancyWidth(date: GanttDate): number {
+        return this.cellWidth / date.getDaysInQuarter();
+    }
+
+    getPrimaryDatePoints(): GanttDatePoint[] {
+        const years = eachYearOfInterval({ start: this.start.value, end: this.end.value });
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < years.length; i++) {
+            const start = new GanttDate(years[i]);
+            const point = new GanttDatePoint(
+                start,
+                `${start.format('yyyy')}年`,
+                (this.getCellWidth() * 4) / 2 + i * (this.getCellWidth() * 4),
+                primaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+
+    getSecondaryDatePoints(): GanttDatePoint[] {
+        const quarters = differenceInCalendarQuarters(this.end.value, this.start.value);
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i <= quarters; i++) {
+            const start = this.start.addQuarters(i);
+            const point = new GanttDatePoint(
+                start,
+                start.format('QQQ'),
+                i * this.getCellWidth() + this.getCellWidth() / 2,
+                secondaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+}

package/packages/gantt/src/views/test/day.spec.ts

@@ -0,0 +1,45 @@
+import { GanttViewDay } from '../day';
+import { GanttDate } from '../../utils/date';
+import { date, today } from './mock';
+
+describe('GanttViewDay', () => {
+    let ganttViewDay: GanttViewDay;
+
+    beforeEach(() => {
+        ganttViewDay = new GanttViewDay(date.start, date.end, {
+            cellWidth: 20,
+            start: today.startOfYear().startOfWeek({ weekStartsOn: 1 }),
+            end: today.endOfYear().endOfWeek({ weekStartsOn: 1 })
+        });
+    });
+
+    it(`should has correct view start`, () => {
+        const startOfDay = ganttViewDay.startOf(date.start.date).getUnixTime();
+        expect(startOfDay).toEqual(new GanttDate('2019-12-30 00:00:00').getUnixTime());
+    });
+
+    it(`should has correct view end`, () => {
+        const endOfDay = ganttViewDay.endOf(date.end.date).getUnixTime();
+        expect(endOfDay).toEqual(new GanttDate('2021-01-03 23:59:59').getUnixTime());
+    });
+
+    it(`should has correct cell width`, () => {
+        const dayCellWidth = ganttViewDay.getDayOccupancyWidth();
+        expect(dayCellWidth).toEqual(20);
+    });
+
+    it(`should has correct primary width`, () => {
+        const dayPrimaryWidth = ganttViewDay.getPrimaryWidth();
+        expect(dayPrimaryWidth).toEqual(140);
+    });
+
+    it(`should has correct primary date points`, () => {
+        const dayPoints = ganttViewDay.getPrimaryDatePoints();
+        expect(dayPoints.length).toBe(54);
+    });
+
+    it(`should has correct secondary date points`, () => {
+        const dayPoints = ganttViewDay.getSecondaryDatePoints();
+        expect(dayPoints.length).toBe(371);
+    });
+});

package/packages/gantt/src/views/test/factory.spec.ts

@@ -0,0 +1,41 @@
+import { GanttViewMonth } from '../month';
+import { GanttViewDay } from '../day';
+import { GanttViewQuarter } from '../quarter';
+import { createViewFactory } from '../factory';
+import { GanttViewType } from '../../class';
+import { date } from './mock';
+import { GanttViewYear } from '../year';
+import { GanttViewWeek } from '../week';
+
+describe('CreateViewFactory', () => {
+    it(`should be day view`, () => {
+        const dayView = createViewFactory(GanttViewType.day, date.start, date.end);
+        expect(dayView).toEqual(jasmine.any(GanttViewDay));
+    });
+
+    it(`should be week view`, () => {
+        const weekView = createViewFactory(GanttViewType.week, date.start, date.end);
+        expect(weekView).toEqual(jasmine.any(GanttViewWeek));
+    });
+
+    it(`should be month view`, () => {
+        const monthView = createViewFactory(GanttViewType.month, date.start, date.end);
+        expect(monthView).toEqual(jasmine.any(GanttViewMonth));
+    });
+
+    it(`should be quarter view`, () => {
+        const quarterView = createViewFactory(GanttViewType.quarter, date.start, date.end);
+        expect(quarterView).toEqual(jasmine.any(GanttViewQuarter));
+    });
+
+    it('should be year view', () => {
+        const yearView = createViewFactory(GanttViewType.year, date.start, date.end);
+        expect(yearView).toEqual(jasmine.any(GanttViewYear));
+    });
+
+    // it(`should throw error`, () => {
+    //     expect(() => {
+    //         createViewFactory(GanttViewType.year, date.start, date.end);
+    //     }).toThrow(new Error('gantt view type invalid'));
+    // });
+});

package/packages/gantt/src/views/test/mock.ts

@@ -0,0 +1,14 @@
+import { GanttDate } from '../../utils/date';
+
+export const today = new GanttDate('2020-02-01 00:00:00');
+
+export const date = {
+    start: {
+        date: new GanttDate('2020-01-01 00:00:00'),
+        isCustom: true
+    },
+    end: {
+        date: new GanttDate('2020-12-31 00:00:00'),
+        isCustom: true
+    }
+};

package/packages/gantt/src/views/test/month.spec.ts

@@ -0,0 +1,45 @@
+import { GanttViewMonth } from '../month';
+import { GanttDate } from '../../utils/date';
+import { date, today } from './mock';
+
+describe('GanttViewMonth', () => {
+    let ganttViewMonth: GanttViewMonth;
+
+    beforeEach(() => {
+        ganttViewMonth = new GanttViewMonth(date.start, date.end, {
+            cellWidth: 310,
+            start: today.startOfQuarter().addQuarters(-1),
+            end: today.endOfQuarter().addQuarters(2)
+        });
+    });
+
+    it(`should has correct view start`, () => {
+        const startOfMonth = ganttViewMonth.startOf(date.start.date).getUnixTime();
+        expect(startOfMonth).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+    });
+
+    it(`should has correct view end`, () => {
+        const endOfMonth = ganttViewMonth.endOf(date.end.date).getUnixTime();
+        expect(endOfMonth).toEqual(new GanttDate('2020-12-31 23:59:59').getUnixTime());
+    });
+
+    it(`should has correct cell width`, () => {
+        const monthCellWidth = ganttViewMonth.getDayOccupancyWidth(date.start.date);
+        expect(monthCellWidth).toEqual(10);
+    });
+
+    it(`should has correct primary width`, () => {
+        const monthPrimaryWidth = ganttViewMonth.getPrimaryWidth();
+        expect(monthPrimaryWidth).toEqual(930);
+    });
+
+    it(`should has correct primary date points`, () => {
+        const monthPoints = ganttViewMonth.getPrimaryDatePoints();
+        expect(monthPoints.length).toBe(4);
+    });
+
+    it(`should has correct secondary date points`, () => {
+        const monthPoints = ganttViewMonth.getSecondaryDatePoints();
+        expect(monthPoints.length).toBe(12);
+    });
+});

package/packages/gantt/src/views/test/quarter.spec.ts

@@ -0,0 +1,45 @@
+import { GanttDate } from '../../utils/date';
+import { GanttViewQuarter } from '../quarter';
+import { date, today } from './mock';
+
+describe('GanttViewQuarter', () => {
+    let ganttViewQuarter: GanttViewQuarter;
+
+    beforeEach(() => {
+        ganttViewQuarter = new GanttViewQuarter(date.start, date.end, {
+            cellWidth: 910,
+            start: today.addYears(-1).startOfYear(),
+            end: today.addYears(1).endOfYear()
+        });
+    });
+
+    it(`should has correct view start`, () => {
+        const startOfQuarter = ganttViewQuarter.startOf(date.start.date).getUnixTime();
+        expect(startOfQuarter).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+    });
+
+    it(`should has correct view end`, () => {
+        const endOfQuarter = ganttViewQuarter.endOf(date.end.date).getUnixTime();
+        expect(endOfQuarter).toEqual(new GanttDate('2020-12-31 23:59:59').getUnixTime());
+    });
+
+    it(`should has correct cell width`, () => {
+        const quarterCellWidth = ganttViewQuarter.getDayOccupancyWidth(date.start.date);
+        expect(quarterCellWidth).toEqual(10);
+    });
+
+    it(`should has correct primary width`, () => {
+        const quarterPrimaryWidth = ganttViewQuarter.getPrimaryWidth();
+        expect(quarterPrimaryWidth).toEqual(3640);
+    });
+
+    it(`should has correct primary date points`, () => {
+        const quarterPoints = ganttViewQuarter.getPrimaryDatePoints();
+        expect(quarterPoints.length).toBe(1);
+    });
+
+    it(`should has correct secondary date points`, () => {
+        const quarterPoints = ganttViewQuarter.getSecondaryDatePoints();
+        expect(quarterPoints.length).toBe(4);
+    });
+});