Skip to content

Commit

Permalink
test: add date-time-picker editor to grid-pro integration test (#7864)
Browse files Browse the repository at this point in the history
  • Loading branch information
@web-padawan
web-padawan committed Sep 25, 2024
1 parent 64d8a01 commit 48089e8
Showing 1 changed file with 88 additions and 38 deletions.
126 changes: 88 additions & 38 deletions test/integration/grid-pro-custom-editor.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
`;
};
Expand All @@ -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();
});
Expand All @@ -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' });
Expand Down Expand Up @@ -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' });

Expand All @@ -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');
});
});
});

0 comments on commit 48089e8

Please sign in to comment.