gantt-source_management 3.37.5

package/cypress/e2e/items.test.ts

@@ -0,0 +1,501 @@
+import DeepState from 'deep-state-observer';
+import { Api } from '../../dist/api/api';
+import { DataChartTime, DataChartTimeLevelDate, Item, ItemData } from '../../dist/gstc';
+import { fixed, examples } from '../helpers';
+
+describe('Items', () => {
+  function resizing(url) {
+    return it('Resizing ' + url, () => {
+      const rightResizerSelector =
+        '.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-3"] .gstc__chart-timeline-items-row-item-resizing-handle--right';
+      let api: Api;
+      let state: DeepState;
+      let spacing = 4;
+
+      cy.load(url)
+        .window()
+        .then((win) => {
+          // @ts-ignore
+          api = win.gstc.api;
+          // @ts-ignore
+          state = win.state;
+          const item = api.getItem('gstcid-3');
+          api.scrollToTime(item.time.start, false);
+          spacing = state.get('config.chart.spacing');
+        })
+        .wait(Cypress.env('wait'))
+        .then(() => {
+          const item = api.getItem('gstcid-3');
+          expect(state.get('$data.chart.time.leftGlobal')).to.eq(item.time.start);
+          const itemData = api.getItemData('gstcid-3');
+          expect(itemData.position.left).to.eq(0);
+          expect(itemData.width).to.be.greaterThan(0);
+        })
+        .get('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-3"]')
+        .then(($el) => {
+          const itemData: ItemData = api.getItemData('gstcid-3');
+          const itemDataWidth = Math.round(itemData.actualWidth - spacing);
+          const elementWidth = Math.round(parseFloat($el.css('width')));
+          expect(itemDataWidth).to.eq(elementWidth);
+          expect(itemDataWidth).to.be.greaterThan(0);
+          expect(itemData.position.right);
+          expect(fixed($el.css('left'))).to.eq(0);
+          api.plugins.Selection.selectItems(['gstcid-3']);
+          return $el;
+        })
+        .wait(Cypress.env('wait'))
+        .then(($el) => {
+          expect($el).to.have.class('gstc__selected');
+        })
+        .get(rightResizerSelector)
+        .should('be.visible')
+        .get('.gstc__chart-timeline-items-row-item[data-gstcid="gstcid-3"]')
+        .then(($el) => {
+          return cy.move(rightResizerSelector, -$el.width(), 0);
+        })
+        .then(() => {
+          const itemData: ItemData = state.get('$data.chart.items.gstcid-3');
+          api.scrollToTime(itemData.time.startDate.valueOf(), false);
+        })
+        .wait(Cypress.env('wait'))
+        .then(() => {
+          const itemData: ItemData = state.get('$data.chart.items.gstcid-3');
+          const time: DataChartTime = state.get('$data.chart.time');
+          const firstDate = time.levels[time.level][0];
+          if (url === '/examples/complex-1/index.html') {
+            expect(fixed(itemData.actualWidth)).to.eq(fixed(firstDate.currentView.width));
+          }
+          if (url === '/examples/item-types-plugin/index.html') {
+            const minWidth: number = state.get('config.chart.item.minWidth');
+            expect(fixed(itemData.actualWidth)).to.eq(fixed(minWidth));
+          }
+        })
+        .get('.gstc__chart-timeline-items-row-item-resizing-handle--right-outside[data-gstcid="gstcid-3"]')
+        .should('be.visible');
+    });
+  }
+
+  examples.forEach((example) => resizing(example));
+
+  it('should change item position programmatically in normal mode by changing item', () => {
+    let state, gstc;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+      })
+      .then(() => {
+        state.update('config.chart.items.gstcid-15', (item) => {
+          item.time.start = gstc.api.time.date('2020-01-20').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-24').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const item15 = state.get('$data.chart.items.gstcid-15');
+        expect(item15.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 00:00:00');
+        expect(item15.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-24 23:59:59');
+      });
+  });
+
+  it('should change item position programmatically in calculatedZoom mode by changing item', () => {
+    let state, gstc;
+    cy.load('/examples/one-month')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+      })
+      .then(() => {
+        state.update('config.chart.items.gstcid-15', (item) => {
+          item.time.start = gstc.api.time.date('2020-01-20').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-24').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const item15 = state.get('$data.chart.items.gstcid-15');
+        expect(item15.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 00:00:00');
+        expect(item15.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-24 23:59:59');
+      });
+  });
+
+  it('should move dependant items to the right position when all dates are available', () => {
+    let gstc, state;
+    const itemId = 'gstcid-5',
+      dep1Id = 'gstcid-7',
+      dep2Id = 'gstcid-9';
+    const itemClass = `.gstc__chart-timeline-items-row-item[data-gstcid="${itemId}"]`;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+        state.update(`config.chart.items.${itemId}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-02-18').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-20').endOf('day').valueOf();
+          return item;
+        });
+        state.update(`config.chart.items.${dep1Id}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-02-25').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-26').endOf('day').valueOf();
+          return item;
+        });
+        state.update(`config.chart.items.${dep2Id}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-02-26').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-28').endOf('day').valueOf();
+          return item;
+        });
+        gstc.api.scrollToTime(gstc.api.time.date('2020-02-14').valueOf(), false);
+      })
+      .wait(Cypress.env('wait'))
+      .move(itemClass, -90, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-17 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-19 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-24 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-25 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-25 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-27 23:59:59');
+      })
+      .move(itemClass, 90, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-18 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-20 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-25 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-26 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-26 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-28 23:59:59');
+      })
+      .move(itemClass, -180, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-16 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-18 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-23 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-24 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-24 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-26 23:59:59');
+      });
+  });
+
+  it('should move dependant items to the right position when some dates are removed (hide weekends)', () => {
+    let gstc, state;
+    const itemId = 'gstcid-5',
+      dep1Id = 'gstcid-7',
+      dep2Id = 'gstcid-9';
+    const itemClass = `.gstc__chart-timeline-items-row-item[data-gstcid="${itemId}"]`;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+        state.update(`config.chart.items.${itemId}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-02-18').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-20').endOf('day').valueOf();
+          return item;
+        });
+        state.update(`config.chart.items.${dep1Id}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-02-25').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-26').endOf('day').valueOf();
+          return item;
+        });
+        state.update(`config.chart.items.${dep2Id}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-02-26').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-28').endOf('day').valueOf();
+          return item;
+        });
+        gstc.api.scrollToTime(gstc.api.time.date('2020-02-14').valueOf(), false);
+      })
+      .get('#hide-weekends')
+      .click()
+      .wait(Cypress.env('wait'))
+      .move(itemClass, -90, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-17 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-19 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-24 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-25 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-25 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-27 23:59:59');
+      })
+      .move(itemClass, 90, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-18 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-20 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-25 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-26 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-26 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-28 23:59:59');
+      })
+      .move(itemClass, -180, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-14 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-18 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-21 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-24 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-24 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-26 23:59:59');
+      });
+  });
+
+  it('should move dependant items to the right position when all dates are available in calculatedZoomMode', () => {
+    let gstc, state;
+    const itemId = 'gstcid-5',
+      dep1Id = 'gstcid-7',
+      dep2Id = 'gstcid-9';
+    const itemClass = `.gstc__chart-timeline-items-row-item[data-gstcid="${itemId}"]`;
+    const cellWidth = 36;
+    cy.load('/examples/one-month')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+        state.update(`config.chart.items.${itemId}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-01-14').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-16').endOf('day').valueOf();
+          return item;
+        });
+        state.update(`config.chart.items.${dep1Id}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-01-21').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-22').endOf('day').valueOf();
+          return item;
+        });
+        state.update(`config.chart.items.${dep2Id}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-01-22').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-24').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .wait(Cypress.env('wait'))
+      .move(itemClass, -cellWidth, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-13 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-15 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-21 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-21 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-23 23:59:59');
+      })
+      .move(itemClass, cellWidth, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-14 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-16 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-21 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-22 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-22 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-24 23:59:59');
+      })
+      .move(itemClass, -(2 * cellWidth), 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-12 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-14 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-19 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-22 23:59:59');
+      });
+  });
+
+  it('should move dependant items to the right position when some dates are removed (hide weekends) in calculatedZoomMode', () => {
+    let gstc, state;
+    const itemId = 'gstcid-5',
+      dep1Id = 'gstcid-7',
+      dep2Id = 'gstcid-9';
+    const itemClass = `.gstc__chart-timeline-items-row-item[data-gstcid="${itemId}"]`;
+    const cellWidth = 50;
+    cy.load('/examples/one-month')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        // @ts-ignore
+        gstc = win.gstc;
+        state.update(`config.chart.items.${itemId}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-01-14').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-16').endOf('day').valueOf();
+          return item;
+        });
+        state.update(`config.chart.items.${dep1Id}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-01-21').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-22').endOf('day').valueOf();
+          return item;
+        });
+        state.update(`config.chart.items.${dep2Id}`, (item) => {
+          item.time.start = gstc.api.time.date('2020-01-22').valueOf();
+          item.time.end = gstc.api.time.date('2020-01-24').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .get('#hide-weekends')
+      .click()
+      .wait(Cypress.env('wait'))
+      .move(itemClass, -cellWidth, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-13 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-15 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-21 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-21 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-23 23:59:59');
+      })
+      .move(itemClass, cellWidth, 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-14 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-16 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-21 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-22 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-22 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-24 23:59:59');
+      })
+      .move(itemClass, -(2 * cellWidth), 0)
+      .then(() => {
+        const itemData: ItemData = gstc.api.getItemData(itemId);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-10 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-14 23:59:59');
+        const dep1Data: ItemData = gstc.api.getItemData(dep1Id);
+        expect(dep1Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-17 00:00:00');
+        expect(dep1Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 23:59:59');
+        const dep2Data: ItemData = gstc.api.getItemData(dep2Id);
+        expect(dep2Data.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 00:00:00');
+        expect(dep2Data.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-22 23:59:59');
+      });
+  });
+
+  it('should not change item width when item ends in missing date', () => {
+    let gstc, state;
+    const itemId = 'gstcid-15';
+    const itemClass = `.gstc__chart-timeline-items-row-item[data-gstcid="${itemId}"]`;
+    let cellWidth;
+    cy.load('/examples/complex-1')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        gstc = win.gstc;
+        // @ts-ignore
+        state = win.state;
+        state.update(`config.chart.items.${itemId}`, (item: Item) => {
+          item.time.start = gstc.api.time.date('2020-02-07').valueOf();
+          item.time.end = gstc.api.time.date('2020-02-08').endOf('day').valueOf();
+          return item;
+        });
+      })
+      .get('#hide-weekends')
+      .click()
+      .wait(Cypress.env('wait'))
+      .then(() => {
+        const cell: DataChartTimeLevelDate = state.get('$data.chart.time.allDates.1.0');
+        cellWidth = cell.width;
+        const itemData: ItemData = state.get(`$data.chart.items.${itemId}`);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-07 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-08 23:59:59');
+        expect(itemData.width).to.eq(itemData.actualWidth);
+        expect(itemData.width).to.eq(cellWidth);
+        expect(itemData.position.right).to.eq(cellWidth * 5);
+      })
+      .move(itemClass, 25, 0)
+      .then(() => {
+        const itemData: ItemData = state.get(`$data.chart.items.${itemId}`);
+        expect(itemData.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-07 00:00:00');
+        expect(itemData.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-02-07 23:59:59');
+        expect(itemData.width).to.eq(itemData.actualWidth);
+        expect(itemData.width).to.eq(cellWidth);
+        expect(itemData.position.right).to.eq(cellWidth * 5);
+      });
+  });
+
+  // it('should change item position programmatically in normal mode by changing item.time', () => {
+  //   let state, gstc;
+  //   cy.load('/examples/complex-1')
+  //     .window()
+  //     .then((win) => {
+  //       // @ts-ignore
+  //       state = win.state;
+  //       // @ts-ignore
+  //       gstc = win.gstc;
+  //     })
+  //     .then(() => {
+  //       state.update('config.chart.items.gstcid-15.time', (itemTime) => {
+  //         itemTime.start = gstc.api.time.date('2020-01-20').valueOf();
+  //         itemTime.end = gstc.api.time.date('2020-01-24').endOf('day').valueOf();
+  //         return itemTime;
+  //       });
+  //     })
+  //     .wait(Cypress.env('wait'))
+  //     .then(() => {
+  //       const item15 = state.get('$data.chart.items.gstcid-15');
+  //       expect(item15.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 00:00:00');
+  //       expect(item15.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-24 23:59:59');
+  //     });
+  // });
+
+  // it('should change item position programmatically in calculatedZoom mode by changing item.time', () => {
+  //   let state, gstc;
+  //   cy.load('/examples/one-month')
+  //     .window()
+  //     .then((win) => {
+  //       // @ts-ignore
+  //       state = win.state;
+  //       // @ts-ignore
+  //       gstc = win.gstc;
+  //     })
+  //     .then(() => {
+  //       state.update('config.chart.items.gstcid-15.time', (itemTime) => {
+  //         itemTime.start = gstc.api.time.date('2020-01-20').valueOf();
+  //         itemTime.end = gstc.api.time.date('2020-01-24').endOf('day').valueOf();
+  //         return itemTime;
+  //       });
+  //     })
+  //     .wait(Cypress.env('wait'))
+  //     .then(() => {
+  //       const item15 = state.get('$data.chart.items.gstcid-15');
+  //       expect(item15.time.startDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-20 00:00:00');
+  //       expect(item15.time.endDate.format('YYYY-MM-DD HH:mm:ss')).to.eq('2020-01-24 23:59:59');
+  //     });
+  // });
+});

package/cypress/e2e/list-columns-toggle.test.ts

@@ -0,0 +1,124 @@
+import DeepState from 'deep-state-observer';
+import { fixed } from '../helpers';
+
+function getColumns(state) {
+  const id = state.get('config.list.columns.data.gstcid-id');
+  const name = state.get('config.list.columns.data.gstcid-name');
+  const surname = state.get('config.list.columns.data.gstcid-surname');
+  const progress = state.get('config.list.columns.data.gstcid-progress');
+  return { id, name, surname, progress };
+}
+
+describe('List columns toggle', () => {
+  it('should toggle columns', () => {
+    let state: DeepState;
+    cy.load('/examples/list-columns-toggle')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+        const { id, name, surname, progress } = getColumns(state);
+        expect(id.width).to.eq(80);
+        expect(name.width).to.eq(230);
+        expect(surname.width).to.eq(230);
+        expect(progress.width).to.eq(50);
+      })
+      .get('.gstc__list-column-header[data-gstcid="gstcid-id"]')
+      .should('be.visible')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-name"]')
+      .should('be.visible')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-surname"]')
+      .should('be.visible')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-progress"]')
+      .should('be.visible')
+      .get('.gstc__list')
+      .then(($el) => {
+        const { id, name, surname, progress } = getColumns(state);
+        expect(id.hidden).to.eq(false);
+        expect(name.hidden).to.eq(false);
+        expect(surname.hidden).to.eq(false);
+        expect(progress.hidden).to.eq(false);
+        expect(fixed($el.width())).to.eq(fixed(id.width + name.width + surname.width + progress.width));
+      })
+      //
+      .get('#id')
+      .click()
+      .get('.gstc__list-column-header[data-gstcid="gstcid-id"]')
+      .should('not.exist')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-name"]')
+      .should('be.visible')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-surname"]')
+      .should('be.visible')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-progress"]')
+      .should('be.visible')
+      .get('.gstc__list')
+      .then(($el) => {
+        const { id, name, surname, progress } = getColumns(state);
+        expect(id.hidden).to.eq(true);
+        expect(name.hidden).to.eq(false);
+        expect(surname.hidden).to.eq(false);
+        expect(progress.hidden).to.eq(false);
+        expect(fixed($el.width())).to.eq(fixed(name.width + surname.width + progress.width));
+      })
+      //
+      .get('#name')
+      .click()
+      .get('.gstc__list-column-header[data-gstcid="gstcid-id"]')
+      .should('not.exist')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-name"]')
+      .should('not.exist')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-surname"]')
+      .should('be.visible')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-progress"]')
+      .should('be.visible')
+      .get('.gstc__list')
+      .then(($el) => {
+        const { id, name, surname, progress } = getColumns(state);
+        expect(id.hidden).to.eq(true);
+        expect(name.hidden).to.eq(true);
+        expect(surname.hidden).to.eq(false);
+        expect(progress.hidden).to.eq(false);
+        expect(fixed($el.width())).to.eq(fixed(surname.width + progress.width));
+      })
+      //
+      .get('#surname')
+      .click()
+      .get('.gstc__list-column-header[data-gstcid="gstcid-id"]')
+      .should('not.exist')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-name"]')
+      .should('not.exist')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-surname"]')
+      .should('not.exist')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-progress"]')
+      .should('be.visible')
+      .get('.gstc__list')
+      .then(($el) => {
+        const { id, name, surname, progress } = getColumns(state);
+        expect(id.hidden).to.eq(true);
+        expect(name.hidden).to.eq(true);
+        expect(surname.hidden).to.eq(true);
+        expect(progress.hidden).to.eq(false);
+        expect(fixed($el.width())).to.eq(fixed(progress.width));
+      })
+      //
+      .get('#progress')
+      .click()
+      .get('.gstc__list-column-header[data-gstcid="gstcid-id"]')
+      .should('not.exist')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-name"]')
+      .should('not.exist')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-surname"]')
+      .should('not.exist')
+      .get('.gstc__list-column-header[data-gstcid="gstcid-progress"]')
+      .should('not.exist')
+      .get('.gstc__list')
+      .then(($el) => {
+        const { id, name, surname, progress } = getColumns(state);
+        expect(id.hidden).to.eq(true);
+        expect(name.hidden).to.eq(true);
+        expect(surname.hidden).to.eq(true);
+        expect(progress.hidden).to.eq(true);
+        expect(fixed($el.width())).to.eq(0);
+      });
+  });
+});

package/cypress/e2e/list-header-resize.test.ts

@@ -0,0 +1,30 @@
+describe('List header', () => {
+  it('should stay at similar time when changing list column width', () => {
+    let state,
+      initialDataIndex = 0,
+      timeFrom;
+    cy.load('/examples/add-rows-items')
+      .window()
+      .then((win) => {
+        // @ts-ignore
+        state = win.state;
+      })
+      .wait(200) // wait for scroll event on gstc-loaded
+      .get('.gstc__chart-timeline-grid-row-cell.current')
+      .should('be.visible')
+      .then(() => {
+        initialDataIndex = state.get('$data.scroll.horizontal.dataIndex');
+        timeFrom = state.get('$data.chart.time.fromDate');
+        state.update('config.list.columns.data.gstcid-label.width', 100);
+      })
+      .wait(100)
+      .then(() => {
+        const currentDataIndex = state.get('$data.scroll.horizontal.dataIndex');
+        const currentTimeFrom = state.get('$data.chart.time.fromDate');
+        expect(initialDataIndex).to.eq(currentDataIndex);
+        expect(timeFrom.format('YYYY-MM-DD')).to.eq(currentTimeFrom.format('YYYY-MM-DD'));
+      })
+      .get('.gstc__chart-timeline-grid-row-cell.current')
+      .should('be.visible');
+  });
+});