test: add date-time-picker editor to grid-pro integration test (#7864) (#7865)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

test/integration/grid-pro-custom-editor.test.js

@@ -3,6 +3,7 @@ import { fixtureSync, middleOfNode, nextRender } from '@vaadin/testing-helpers';
 import { resetMouse, sendKeys, sendMouse } from '@web/test-runner-commands';
 import '@vaadin/combo-box';
 import '@vaadin/date-picker';
+import '@vaadin/date-time-picker';
 import '@vaadin/grid-pro';
 import '@vaadin/grid-pro/vaadin-grid-pro-edit-column.js';
 import '@vaadin/time-picker';
@@ -15,25 +16,26 @@ describe('grid-pro custom editor', () => {
   beforeEach(async () => {
     grid = fixtureSync(`
       <vaadin-grid-pro>
-        <vaadin-grid-pro-edit-column path="firstName"></vaadin-grid-pro-edit-column>
-        <vaadin-grid-pro-edit-column path="lastName"></vaadin-grid-pro-edit-column>
-        <vaadin-grid-pro-edit-column path="birthday" editor-type="custom"></vaadin-grid-pro-edit-column>
-        <vaadin-grid-pro-edit-column path="status" editor-type="custom"></vaadin-grid-pro-edit-column>
-        <vaadin-grid-pro-edit-column path="time" editor-type="custom"></vaadin-grid-pro-edit-column>
+        <vaadin-grid-pro-edit-column path="date" editor-type="custom" width="50px"></vaadin-grid-pro-edit-column>
+        <vaadin-grid-pro-edit-column path="status" editor-type="custom" width="50px"></vaadin-grid-pro-edit-column>
+        <vaadin-grid-pro-edit-column path="time" editor-type="custom" width="50px"></vaadin-grid-pro-edit-column>
+        <vaadin-grid-pro-edit-column path="datetime" editor-type="custom"></vaadin-grid-pro-edit-column>
       </vaadin-gri-pro>
     `);
 
     grid.items = [
-      { firstName: 'Aria', lastName: 'Bailey', birthday: '1984-01-13', status: 'suspended', time: '09:00' },
-      { firstName: 'Aaliyah', lastName: 'Butler', birthday: '1977-07-12', status: 'active', time: '09:30' },
-      { firstName: 'Eleanor', lastName: 'Price', birthday: '1976-12-14', status: 'suspended', time: '10:00' },
-      { firstName: 'Allison', lastName: 'Torres', birthday: '1972-12-04', status: 'active', time: '10:00' },
-      { firstName: 'Madeline', lastName: 'Lewis', birthday: '1978-02-03', status: 'active', time: '10:00' },
-    ];
-
-    grid.querySelector('[path="birthday"]').editModeRenderer = (root, _, model) => {
+      { date: '1984-01-13', status: 'suspended', time: '09:00' },
+      { date: '1977-07-12', status: 'active', time: '09:30' },
+      { date: '1976-12-14', status: 'suspended', time: '10:00' },
+      { date: '1972-12-04', status: 'active', time: '10:00' },
+      { date: '1978-02-03', status: 'active', time: '10:00' },
+    ].map((item) => {
+      return { ...item, datetime: `${item.date}T${item.time}` };
+    });
+
+    grid.querySelector('[path="date"]').editModeRenderer = (root, _, model) => {
       root.innerHTML = `
-        <vaadin-date-picker value="${model.item.birthday}" auto-open-disabled>
+        <vaadin-date-picker value="${model.item.date}" auto-open-disabled>
         </vaadin-date-picker>
       `;
     };
@@ -54,6 +56,13 @@ describe('grid-pro custom editor', () => {
       `;
     };
 
+    grid.querySelector('[path="datetime"]').editModeRenderer = (root, _, model) => {
+      root.innerHTML = `
+        <vaadin-date-time-picker value="${model.item.datetime}" auto-open-disabled>
+        </vaadin-date-time-picker>
+      `;
+    };
+
     flushGrid(grid);
     await nextRender();
   });
@@ -66,7 +75,7 @@ describe('grid-pro custom editor', () => {
     let cell;
 
     beforeEach(async () => {
-      cell = getContainerCell(grid.$.items, 0, 2);
+      cell = getContainerCell(grid.$.items, 0, 0);
       cell.focus();
 
       await sendKeys({ press: 'Enter' });
@@ -124,36 +133,30 @@ describe('grid-pro custom editor', () => {
   });
 
   describe('combo-box', () => {
-    it('should apply the updated value to the cell when exiting on Tab', async () => {
-      const cell = getContainerCell(grid.$.items, 0, 3);
+    let cell;
+
+    beforeEach(async () => {
+      cell = getContainerCell(grid.$.items, 0, 1);
       cell.focus();
 
       await sendKeys({ press: 'Enter' });
+    });
 
+    it('should apply the updated value to the cell when exiting on Tab', async () => {
       await sendKeys({ type: 'active' });
       await sendKeys({ press: 'Tab' });
 
       expect(cell._content.textContent).to.equal('active');
     });
 
     it('should apply the updated value to the cell when exiting on Enter', async () => {
-      const cell = getContainerCell(grid.$.items, 0, 3);
-      cell.focus();
-
-      await sendKeys({ press: 'Enter' });
-
       await sendKeys({ type: 'active' });
       await sendKeys({ press: 'Enter' });
 
       expect(cell._content.textContent).to.equal('active');
     });
 
     it('should not stop editing and update value when closing on outside click', async () => {
-      const cell = getContainerCell(grid.$.items, 0, 3);
-      cell.focus();
-
-      await sendKeys({ press: 'Enter' });
-
       await sendKeys({ press: 'ArrowDown' });
       await sendKeys({ type: 'active' });
 
@@ -166,44 +169,91 @@ describe('grid-pro custom editor', () => {
   });
 
   describe('time-picker', () => {
-    it('should apply the updated time to the cell when exiting on Tab', async () => {
-      const cell = getContainerCell(grid.$.items, 0, 4);
+    let cell;
+
+    beforeEach(async () => {
+      cell = getContainerCell(grid.$.items, 0, 2);
       cell.focus();
 
       await sendKeys({ press: 'Enter' });
+    });
 
+    it('should apply the updated time to the cell when exiting on Tab', async () => {
       await sendKeys({ type: '10:00' });
       await sendKeys({ press: 'Tab' });
 
       expect(cell._content.textContent).to.equal('10:00');
     });
 
     it('should apply the updated value to the cell when exiting on Enter', async () => {
-      const cell = getContainerCell(grid.$.items, 0, 4);
-      cell.focus();
-
-      await sendKeys({ press: 'Enter' });
-
       await sendKeys({ type: '10:00' });
       await sendKeys({ press: 'Enter' });
 
       expect(cell._content.textContent).to.equal('10:00');
     });
 
     it('should not stop editing and update value when closing on outside click', async () => {
-      const cell = getContainerCell(grid.$.items, 0, 4);
+      await sendKeys({ press: 'ArrowDown' });
+      await sendKeys({ type: '10:00' });
+
+      await sendMouse({ type: 'click', position: [10, 10] });
+
+      const editor = cell._content.querySelector('vaadin-time-picker');
+      expect(editor).to.be.ok;
+      expect(editor.value).to.equal('10:00');
+    });
+  });
+
+  describe('date-time-picker', () => {
+    let cell;
+
+    beforeEach(async () => {
+      cell = getContainerCell(grid.$.items, 0, 3);
       cell.focus();
 
       await sendKeys({ press: 'Enter' });
+    });
 
+    it('should stop editing and update value when closing on date-picker outside click', async () => {
       await sendKeys({ press: 'ArrowDown' });
-      await sendKeys({ type: '10:00' });
+      await waitForOverlayRender();
+
+      // Move focus back to the input
+      await sendKeys({ down: 'Shift' });
+      await sendKeys({ press: 'Tab' });
+      await sendKeys({ up: 'Shift' });
+
+      // Change single digit to avoid calendar scroll
+      const input = cell._content.querySelector('input');
+      input.setSelectionRange(3, 4);
+
+      await sendKeys({ type: '2' });
 
       await sendMouse({ type: 'click', position: [10, 10] });
+      await nextRender();
 
-      const editor = cell._content.querySelector('vaadin-time-picker');
+      // TODO: closing occurs in `vaadin-overlay-outside-click` listener added on global `focusin`
+      // in grid-pro. Consider replacing it with `_shouldRemoveFocus()` check on editor `focusout`
+      // so that we don't stop editing on outside click, to align with the combo-box behavior.
+      expect(cell._content.querySelector('vaadin-date-time-picker')).to.be.not.ok;
+      expect(cell._content.textContent).to.equal('1984-01-12T09:00');
+    });
+
+    it('should not stop editing and update value when closing on time-picker outside click', async () => {
+      // TODO: replace with Tab and add a separate test to not stop editing on Tab
+      cell._content.querySelector('vaadin-time-picker').focus();
+
+      // Open the overlay
+      await sendKeys({ press: 'ArrowDown' });
+
+      // Select first item
+      await sendKeys({ press: 'ArrowDown' });
+
+      await sendMouse({ type: 'click', position: [10, 10] });
+
+      const editor = cell._content.querySelector('vaadin-date-time-picker');
       expect(editor).to.be.ok;
-      expect(editor.value).to.equal('10:00');
+      expect(editor.value).to.equal('1984-01-13T00:00');
     });
   });
 });