angular-slickgrid 8.14.1 → 9.0.0

package/test/cypress/e2e/example03.cy.ts

@@ -0,0 +1,268 @@
+describe('Example 3 - Grid with Editors', () => {
+  const GRID_ROW_HEIGHT = 35;
+  const fullTitles = [
+    '',
+    '',
+    'Title',
+    'Title, Custom Editor',
+    'Duration (days)',
+    '% Complete',
+    'Start',
+    'Finish',
+    'City of Origin',
+    'Country of Origin',
+    'Country of Origin Name',
+    'Effort Driven',
+    'Prerequisites',
+  ];
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/example03`);
+    cy.get('h2').should('contain', 'Example 3: Editors / Delete');
+  });
+
+  it('should have exact Column Titles in the grid', () => {
+    cy.get('#grid3')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
+  });
+
+  it('should be able to change Title with Custom Editor and expect to save when changing the value and then mouse clicking on a different cell', () => {
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(3)`)
+      .should('contain', 'Task 1')
+      .click();
+    cy.get('input[type=text].editor-text').type('Task 8888');
+
+    // mouse click on next cell on the right & expect a save
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(4)`).click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(3)`).should('contain', 'Task 8888');
+  });
+
+  it('should be able to undo the editor and expect it to be opened, then clicking on Escape should reveal the cell to have rolled back text of "Task 1"', () => {
+    cy.get('[data-test="undo-btn"]').click();
+
+    cy.get('input[type=text].editor-text').should('exist').type('{esc}');
+
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(3)`).should('contain', 'Task 1');
+  });
+
+  it('should enable "Auto Commit Edit"', () => {
+    cy.get('[data-test=auto-commit]').click();
+  });
+
+  it('should be able to change all values of 3rd row', () => {
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(2)`)
+      .should('contain', 'Task 2')
+      .click();
+
+    // change Title & Custom Title
+    cy.get('.editor-title > textarea').type('Task 2222');
+    cy.get('.editor-title .btn-save').click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(2)`).should('contain', 'Task 2222');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(3)`).should('contain', 'Task 2222');
+
+    // change duration
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(4)`).click();
+    cy.get('.slider-editor input[type=range]').as('range').invoke('val', 25).trigger('change', { force: true });
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(4)`).should('contain', '25');
+
+    // change % Complete
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(5)`).click();
+    cy.get('[data-name=editor-complete].ms-drop > ul > li > label:nth(5)').contains('95').click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(5)`).find(
+      '.percent-complete-bar[style="background: green; width: 95%;"]'
+    );
+
+    // change Finish date
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(6)`).click();
+    cy.get('.vc-month:visible').click();
+    cy.get('.vc-months__month').contains('Jan').click();
+    cy.get('[data-vc="year"]').click();
+    cy.get('.vc-years__year').contains('2009').click();
+    cy.get('[data-vc-date-btn]').contains('22').click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(6)`).should('contain', '2009-01-22');
+
+    // change City of Origin
+    // cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(8)`).click({ force: true });
+    // cy.get('input.autocomplete.editor-cityOfOrigin.ui-autocomplete-input')
+    //   .type('Venice');
+
+    // change Effort Driven
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(11)`).click();
+    cy.get(
+      `[style="transform: translateY(${GRID_ROW_HEIGHT * 2}px);"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`
+    ).check();
+
+    cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top');
+  });
+
+  it('should dynamically add 2x new "Title" columns', () => {
+    const updatedTitles = [
+      '',
+      '',
+      'Title',
+      'Title, Custom Editor',
+      'Duration (days)',
+      '% Complete',
+      'Start',
+      'Finish',
+      'City of Origin',
+      'Country of Origin',
+      'Country of Origin Name',
+      'Effort Driven',
+      'Prerequisites',
+      'Title',
+      'Title',
+    ];
+
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`).should('contain', 'Task 0');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(13)`).should('not.exist');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(14)`).should('not.exist');
+
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`)
+      .should('contain', 'Task 0')
+      .should('have.length', 1);
+
+    cy.get('#grid3')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => expect($child.text()).to.eq(updatedTitles[index]));
+
+    cy.get('[data-test=add-title-column]').click().click();
+
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`).should('contain', 'Task 0');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(3)`).should('contain', 'Task 0');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(13)`).should('contain', 'Task 0');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(14)`).should('contain', 'Task 0');
+  });
+
+  it('should be able to change value of 1st row "Title" column and expect same value set in all 3 "Title" columns', () => {
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`)
+      .should('contain', 'Task 0')
+      .click();
+
+    // change Title & Custom Title
+    cy.get('.editor-title > textarea').type('Task 0000');
+    cy.get('.editor-title .btn-save').click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`).should('contain', 'Task 0000');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(3)`).should('contain', 'Task 0000');
+
+    // change duration
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(4)`).click();
+    cy.get('.slider-editor input[type=range]').as('range').invoke('val', 50).trigger('change', { force: true });
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(4)`).should('contain', '50');
+
+    // change % Complete
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(5)`).click();
+    cy.get('[data-name=editor-complete].ms-drop > ul > li > label:nth(5)').contains('95').click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(5)`).find(
+      '.percent-complete-bar[style="background: green; width: 95%;"]'
+    );
+
+    // change Finish date
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(6)`).click();
+    cy.get('.vc-month:visible').click();
+    cy.get('.vc-months__month').contains('Jan').click();
+    cy.get('[data-vc="year"]').click();
+    cy.get('.vc-years__year').contains('2009').click();
+    cy.get('[data-vc-date-btn]').contains('22').click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(6)`).should('contain', '2009-01-22');
+
+    // change Effort Driven
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(11)`).click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`)
+      .check()
+      .blur();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(10)`).click(); // the blur seems to not always work, so just click on another cell
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(11)`).find('.mdi-check.checkmark-icon');
+
+    cy.get('.slick-viewport.slick-viewport-top.slick-viewport-left').scrollTo('top');
+  });
+
+  it('should be able to filter and search "Task 2222" in the new column and expect only 1 row showing in the grid', () => {
+    cy.get('input.search-filter.filter-title1').type('Task 2222', { force: true }).should('have.value', 'Task 2222');
+
+    cy.get('.slick-row').should('have.length', 1);
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`).should('contain', 'Task 2222');
+  });
+
+  it('should hover over the last "Title" column and click on "Clear Filter" and expect grid to have all rows shown', () => {
+    cy.get('.slick-header-column:nth-child(14)').first().trigger('mouseover').children('.slick-header-menu-button').invoke('show').click();
+
+    cy.get('.slick-header-menu .slick-menu-command-list')
+      .should('be.visible')
+      .children('.slick-menu-item:nth-of-type(6)')
+      .children('.slick-menu-content')
+      .should('contain', 'Remove Filter')
+      .click();
+
+    cy.get('.slick-row').should('have.length.greaterThan', 1);
+  });
+
+  it('should be able to dynamically remove last 2 added Title columns', () => {
+    cy.get('[data-test=remove-title-column]').click().click();
+
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`).should('contain', 'Task 0');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(13)`).should('not.exist');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(14)`).should('not.exist');
+  });
+
+  it('should be able to change values again of 1st row "Title" column and expect same value set in all 3 "Title" columns', () => {
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`)
+      .should('contain', 'Task 0')
+      .click();
+
+    // change Title & Custom Title
+    cy.get('.editor-title > textarea').type('Task 0000');
+    cy.get('.editor-title .btn-save').click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`).should('contain', 'Task 0000');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(3)`).should('contain', 'Task 0000');
+
+    // change duration
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(4)`).click();
+    cy.get('.slider-editor input[type=range]').as('range').invoke('val', 50).trigger('change', { force: true });
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(4)`).should('contain', '50');
+
+    // change % Complete
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(5)`).click();
+    cy.get('[data-name=editor-complete].ms-drop > ul > li > label:nth(3)').contains('97').click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(5)`).find(
+      '.percent-complete-bar[style="background: green; width: 97%;"]'
+    );
+
+    // change Finish date
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(6)`).click();
+    cy.get('[data-vc-date-btn]').contains('21').click();
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(6)`).should('contain', '2009-01-21');
+
+    // // change Effort Driven
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(11)`).click();
+    cy.get(
+      `[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(11) > input.editor-checkbox.editor-effort-driven`
+    ).uncheck();
+  });
+
+  it('should open the "Prerequisites" Filter then choose "Task 3", "Task 4" and "Task 8" from the list and expect to see 2 rows of data in the grid', () => {
+    cy.get('div.ms-filter.filter-prerequisites').trigger('click');
+
+    cy.get('.ms-drop')
+      .contains(/^Task 3$/) // use regexp to avoid finding first Task 3 which is in fact Task 399
+      .click();
+
+    cy.get('.ms-drop')
+      .contains(/^Task 4$/)
+      .click();
+
+    cy.get('.ms-drop')
+      .contains(/^Task 8$/)
+      .click();
+
+    cy.get('.ms-ok-button').click();
+
+    cy.get('.slick-row').should('have.length', 2);
+
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 0}px);"] > .slick-cell:nth(2)`).should('contain', 'Task 4');
+    cy.get(`[style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(2)`).should('contain', 'Task 8');
+  });
+});

package/test/cypress/e2e/example04.cy.ts

@@ -0,0 +1,254 @@
+import { isAfter, isBefore, isEqual, parse } from '@formkit/tempo';
+import { removeExtraSpaces } from '../plugins/utilities';
+
+describe('Example 4 - Client Side Sort/Filter Grid', () => {
+  beforeEach(() => {
+    // create a console.log spy for later use
+    cy.window().then((win) => {
+      cy.spy(win.console, 'log');
+    });
+  });
+
+  it('should display Example title', () => {
+    cy.visit(`${Cypress.config('baseUrl')}/example04`);
+    cy.get('h2').should('contain', 'Example 4: Client Side Sort/Filter');
+  });
+
+  describe('Load Grid with Presets', () => {
+    const presetDurationValues = [98, 10];
+    const presetUsDateShort = '4/20/25';
+
+    it('should have "Duration" fields within the inclusive range of the preset filters and be displayed in the Filter itself', () => {
+      cy.get('.ms-filter.search-filter.filter-duration.filled').find('.ms-choice').contains('98, 10');
+
+      cy.get('#grid4')
+        .find('.slick-row')
+        .each(($row) => {
+          cy.wrap($row)
+            .children('.slick-cell:nth(2)')
+            .each(($cell) => {
+              const value = parseInt($cell.text().trim(), 10);
+              if (!isNaN(value)) {
+                const foundItems = presetDurationValues.filter((acceptedValue) => acceptedValue === value);
+                expect(foundItems).to.have.length(1);
+              }
+            });
+        });
+    });
+
+    it('should have US Date Short within the range of the preset filters', () => {
+      cy.get('.search-filter.filter-usDateShort')
+        .find('input')
+        .invoke('val')
+        .then((text) => expect(text).to.eq(presetUsDateShort));
+
+      cy.get('#grid4')
+        .find('.slick-row')
+        .each(($row) => {
+          cy.wrap($row)
+            .children('.slick-cell:nth(5)')
+            .each(($cell) => {
+              const isDateValid = isBefore(parse($cell.text(), 'M/D/YY'), parse(presetUsDateShort, 'M/D/YY'));
+              expect(isDateValid).to.eq(true);
+            });
+        });
+    });
+
+    it('should have some metrics shown in the grid footer well below 10500 items', () => {
+      cy.get('#slickGridContainer-grid4')
+        .find('.slick-custom-footer')
+        .find('.right-footer')
+        .should(($span) => {
+          const text = removeExtraSpaces($span.text()); // remove all white spaces
+          expect(text).not.to.eq('10500 of 10500 items');
+        });
+    });
+
+    it('should expect the grid to be sorted by "Duration" descending and "% Complete" ascending', () => {
+      cy.get('#grid4')
+        .get('.slick-header-column:nth(2)')
+        .find('.slick-sort-indicator-desc')
+        .should('have.length', 1)
+        .siblings('.slick-sort-indicator-numbered')
+        .contains('1');
+
+      cy.get('#grid4')
+        .get('.slick-header-column:nth(3)')
+        .find('.slick-sort-indicator-asc')
+        .should('have.length', 1)
+        .siblings('.slick-sort-indicator-numbered')
+        .contains('2');
+
+      cy.get('.slick-row').first().children('.slick-cell:nth(2)').should('contain', '98');
+
+      cy.get('[data-test="scroll-bottom-btn"').click();
+
+      cy.get('.slick-row').last().children('.slick-cell:nth(2)').should('contain', '10');
+    });
+  });
+
+  describe('Set Dymamic Filters', () => {
+    const dynamicDurationValues = [2, 25, 48, 50];
+    const dynamicMaxComplete = 95;
+    const dynamicStartDate = '2001-02-28';
+
+    it('should click on Set Dynamic Filters', () => {
+      cy.get('[data-test=set-dynamic-filter]').click();
+    });
+
+    it('should have "% Complete" fields within the exclusive range of the filters presets', () => {
+      cy.get('#grid4')
+        .find('.slick-row')
+        .each(($row) => {
+          cy.wrap($row)
+            .children('.slick-cell:nth(3)')
+            .each(($cell) => {
+              const value = parseInt($cell.text().trim(), 10);
+              if (!isNaN(value)) {
+                expect(value < dynamicMaxComplete).to.eq(true);
+              }
+            });
+        });
+    });
+
+    it('should have "Duration" fields within the inclusive range of the dynamic filters', () => {
+      cy.get('#grid4')
+        .find('.slick-row')
+        .each(($row) => {
+          cy.wrap($row)
+            .children('.slick-cell:nth(2)')
+            .each(($cell) => {
+              const value = parseInt($cell.text().trim(), 10);
+              if (!isNaN(value)) {
+                const foundItems = dynamicDurationValues.filter((acceptedValue) => acceptedValue === value);
+                expect(foundItems).to.have.length(1);
+              }
+            });
+        });
+    });
+
+    it('should have Start Date within the range of the dynamic filters', () => {
+      cy.get('.search-filter.filter-start')
+        .find('input')
+        .invoke('val')
+        .then((text) => expect(text).to.eq(dynamicStartDate));
+
+      cy.get('#grid4')
+        .find('.slick-row')
+        .each(($row) => {
+          cy.wrap($row)
+            .children('.slick-cell:nth(4)')
+            .each(($cell) => {
+              const isDateValid = isEqual(parse($cell.text()), dynamicStartDate) || isAfter(parse($cell.text()), dynamicStartDate);
+              expect(isDateValid).to.eq(true);
+            });
+        });
+    });
+  });
+
+  describe('Set Dynamic Sorting', () => {
+    it('should click on "Clear Filters" then "Set Dynamic Sorting" buttons', () => {
+      cy.get('[data-test=clear-filters]').click();
+
+      cy.get('[data-test=set-dynamic-sorting]').click();
+    });
+
+    it('should have some metrics shown in the grid footer', () => {
+      cy.get('#slickGridContainer-grid4')
+        .find('.slick-custom-footer')
+        .find('.right-footer')
+        .should(($span) => {
+          const text = removeExtraSpaces($span.text()); // remove all white spaces
+          expect(text).to.eq('10500 of 10500 items');
+        });
+    });
+
+    it('should expect the grid to be sorted by "Duration" ascending and "Start" descending', () => {
+      cy.get('#grid4')
+        .get('.slick-header-column:nth(2)')
+        .find('.slick-sort-indicator-asc')
+        .should('have.length', 1)
+        .siblings('.slick-sort-indicator-numbered')
+        .contains('1');
+
+      cy.get('#grid4')
+        .get('.slick-header-column:nth(4)')
+        .find('.slick-sort-indicator-desc')
+        .should('have.length', 1)
+        .siblings('.slick-sort-indicator-numbered')
+        .contains('2');
+
+      cy.get('.slick-row').first().children('.slick-cell:nth(2)').should('contain', '0');
+
+      cy.get('[data-test="scroll-bottom-btn"').click();
+
+      cy.get('.slick-row').last().children('.slick-cell:nth(2)').should('contain', '100');
+
+      cy.get('.slick-row').last().children('.slick-cell:nth(4)').should('contain', '');
+    });
+  });
+
+  describe('Grid State Changes', () => {
+    const dynamicStartDate = '2001-02-28';
+
+    it('should click on Set Dynamic Filters', () => {
+      cy.get('[data-test=set-dynamic-filter]').click();
+    });
+
+    it('should have Start Date within the range of the dynamic filters', () => {
+      cy.get('.search-filter.filter-start')
+        .find('input')
+        .invoke('val')
+        .then((text) => expect(text).to.eq(dynamicStartDate));
+
+      cy.get('#grid4')
+        .find('.slick-row')
+        .each(($row) => {
+          cy.wrap($row)
+            .children('.slick-cell:nth(4)')
+            .each(($cell) => {
+              const isDateValid = isEqual(parse($cell.text()), dynamicStartDate) || isAfter(parse($cell.text()), dynamicStartDate);
+              expect(isDateValid).to.eq(true);
+            });
+        });
+    });
+
+    it('should focus on Start filter, then type Backspace and expect Start filter to no longer exists in the list of Filters in Grid State change', () => {
+      cy.get('.search-filter.filter-start').click();
+      cy.wait(20);
+      cy.get('.search-filter.filter-start input.date-picker').type('{backspace}', { force: true });
+
+      cy.get('.search-filter.filter-start')
+        .find('input')
+        .invoke('val')
+        .then((text) => expect(text).to.eq(''));
+
+      cy.window().then((win) => {
+        expect(win.console.log).to.have.callCount(1);
+        expect(win.console.log).to.be.calledWith('Client sample, Grid State changed:: ', {
+          newValues: [
+            { columnId: 'duration', searchTerms: ['2', '25', '48', '50'], operator: 'IN' },
+            { columnId: 'complete', searchTerms: ['95'], operator: '<' },
+            { columnId: 'effort-driven', searchTerms: ['true'], operator: 'EQ' },
+          ],
+          type: 'filter',
+        });
+      });
+    });
+
+    it('should click on DOM body and reopen Start filter date picker and still expect it to be empty', () => {
+      cy.get('h2').click(); // just to simulate clicking outside of the date picker
+
+      cy.get('.search-filter.filter-start')
+        .find('input')
+        .invoke('val')
+        .then((text) => expect(text).to.eq(''));
+
+      cy.get('.search-filter.filter-start').click();
+
+      cy.get('.vc:visible').find('[data-vc-date-selected]').should('not.exist');
+
+      cy.get('h2').click();
+    });
+  });
+});