Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Sep 25, 2024
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c3acb2
test: add date-time-picker editor to grid-pro integration test
web-padawan Sep 25, 2024
0c2cf6a
test: fix test description
web-padawan Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 88 additions & 38 deletions test/integration/grid-pro-custom-editor.test.js
View file
Open in desktop
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');
});
});
});