From 48089e8c166408347d57973b94de14604594bebe Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Wed, 25 Sep 2024 11:55:53 +0300 Subject: [PATCH] test: add date-time-picker editor to grid-pro integration test (#7864) --- .../grid-pro-custom-editor.test.js | 126 ++++++++++++------ 1 file changed, 88 insertions(+), 38 deletions(-) diff --git a/test/integration/grid-pro-custom-editor.test.js b/test/integration/grid-pro-custom-editor.test.js index a8c09ac9d1..71888587ff 100644 --- a/test/integration/grid-pro-custom-editor.test.js +++ b/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(` - - - - - + + + + `); 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 = ` - + `; }; @@ -54,6 +56,13 @@ describe('grid-pro custom editor', () => { `; }; + grid.querySelector('[path="datetime"]').editModeRenderer = (root, _, model) => { + root.innerHTML = ` + + + `; + }; + 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,12 +133,16 @@ 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' }); @@ -137,11 +150,6 @@ describe('grid-pro custom editor', () => { }); 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' }); @@ -149,11 +157,6 @@ describe('grid-pro custom editor', () => { }); 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,12 +169,16 @@ 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' }); @@ -179,11 +186,6 @@ describe('grid-pro custom editor', () => { }); 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' }); @@ -191,19 +193,67 @@ describe('grid-pro custom editor', () => { }); 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'); }); }); });