Skip to content

Commit

Permalink
fix(editors): fix clear date & blank disabled field w/Composite Editor (
Browse files Browse the repository at this point in the history 
#235)

* fix(editors): fix clear date & blank disabled field w/Composite Editor
- clear date was not working on the 2nd time, calling mass update once then saving and calling mass update again was not clearing the 2nd time around
- the issue was because formValues was containing data of disabled fields even when these fields were not even touched, basically when disabling we shouldn't trigger the onCompositeEditorChange (and that was the issue)
- also fixed the modal window to be disposed after we're done with saving massUpdate/massSelectionChange
  • Loading branch information
@ghiscoding
ghiscoding authored Jan 13, 2021
1 parent 16daa36 commit 9aac97d
Show file tree
Hide file tree
Showing 23 changed files with 291 additions and 147 deletions.
39 changes: 29 additions & 10 deletions packages/common/src/editors/__tests__/autoCompleteEditor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -794,12 +794,12 @@ describe('AutoCompleteEditor', () => {
it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
const activeCellMock = { row: 0, cell: 0 };
jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
editor = new AutoCompleteEditor(editorArguments);
editor.setValue({ value: 'male', label: 'Male' }, true);

expect(editor.getValue()).toBe('Male');
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: { gender: 'male' }, editors: {},
}, expect.anything());
Expand All @@ -823,7 +823,7 @@ describe('AutoCompleteEditor', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(false);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);

editor = new AutoCompleteEditor(editorArguments);
editor.loadValue(mockItemData);
Expand All @@ -832,7 +832,7 @@ describe('AutoCompleteEditor', () => {

expect(getCellSpy).toHaveBeenCalled();
expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: { gender: '' }, editors: {},
}, expect.anything());
Expand All @@ -841,11 +841,11 @@ describe('AutoCompleteEditor', () => {
expect(editor.editorDomElement.val()).toEqual('');
});

it('should call "show" and expect the DOM element to become disabled and empty when "onBeforeEditCell" returns false', () => {
it('should call "show" and expect the DOM element to become disabled and empty when "onBeforeEditCell" returns false and also expect "onBeforeComposite" to not be called because the value is blank', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(false);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
gridOptionMock.compositeEditorOptions = {
excludeDisabledFieldFormValues: true
};
Expand All @@ -857,11 +857,30 @@ describe('AutoCompleteEditor', () => {

expect(getCellSpy).toHaveBeenCalled();
expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).not.toHaveBeenCalled();
expect(disableSpy).toHaveBeenCalledWith(true);
expect(editor.editorDomElement.attr('disabled')).toEqual('disabled');
expect(editor.editorDomElement.val()).toEqual('');
});

it('should call "disable" method and expect the DOM element to become disabled and have an empty formValues be passed in the onCompositeEditorChange event', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
gridOptionMock.compositeEditorOptions = {
excludeDisabledFieldFormValues: true
};

editor = new AutoCompleteEditor(editorArguments);
editor.loadValue({ ...mockItemData, gender: 'male' });
editor.show();
editor.disable();

expect(getCellSpy).toHaveBeenCalled();
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: {}, editors: {},
}, expect.anything());
expect(disableSpy).toHaveBeenCalledWith(true);
expect(editor.editorDomElement.attr('disabled')).toEqual('disabled');
expect(editor.editorDomElement.val()).toEqual('');
});
Expand All @@ -870,7 +889,7 @@ describe('AutoCompleteEditor', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(undefined);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
gridOptionMock.autoCommitEdit = true;
(mockColumn.internalColumnEditor as ColumnEditor).collection = ['male', 'female'];
mockItemData = { id: 123, gender: 'female', isActive: true };
Expand All @@ -883,7 +902,7 @@ describe('AutoCompleteEditor', () => {
expect(spySetValue).toHaveBeenCalledWith('female');
expect(getCellSpy).toHaveBeenCalled();
expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: { gender: 'female' }, editors: {},
}, expect.anything());
Expand Down
40 changes: 30 additions & 10 deletions packages/common/src/editors/__tests__/checkboxEditor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -398,12 +398,12 @@ describe('CheckboxEditor', () => {
it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
const activeCellMock = { row: 0, cell: 0 };
jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
editor = new CheckboxEditor(editorArguments);
editor.setValue(true, true);

expect(editor.getValue()).toBe(true);
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: { isActive: true }, editors: {},
}, expect.anything());
Expand All @@ -427,7 +427,7 @@ describe('CheckboxEditor', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(false);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);

editor = new CheckboxEditor(editorArguments);
editor.loadValue(mockItemData);
Expand All @@ -436,7 +436,7 @@ describe('CheckboxEditor', () => {

expect(getCellSpy).toHaveBeenCalled();
expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: { isActive: false }, editors: {},
}, expect.anything());
Expand All @@ -445,11 +445,11 @@ describe('CheckboxEditor', () => {
expect(editor.editorDomElement.checked).toEqual(false);
});

it('should call "show" and expect the DOM element to become disabled and empty when "onBeforeEditCell" returns false', () => {
it('should call "show" and expect the DOM element to become disabled and empty when "onBeforeEditCell" returns false and also expect "onBeforeComposite" to not be called because the value is blank', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(false);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
gridOptionMock.compositeEditorOptions = {
excludeDisabledFieldFormValues: true
};
Expand All @@ -461,20 +461,40 @@ describe('CheckboxEditor', () => {

expect(getCellSpy).toHaveBeenCalled();
expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).not.toHaveBeenCalled;
expect(disableSpy).toHaveBeenCalledWith(true);
expect(editor.editorDomElement.disabled).toEqual(true);
expect(editor.editorDomElement.checked).toEqual(false);
});

it('should call "disable" method and expect the DOM element to become disabled and have an empty formValues be passed in the onCompositeEditorChange event', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
gridOptionMock.compositeEditorOptions = {
excludeDisabledFieldFormValues: true
};

editor = new CheckboxEditor(editorArguments);
editor.loadValue({ ...mockItemData, isActive: true });
editor.show();
editor.disable();

expect(getCellSpy).toHaveBeenCalled();
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: {}, editors: {},
}, expect.anything());
expect(disableSpy).toHaveBeenCalledWith(true);
expect(editor.editorDomElement.disabled).toEqual(true);
expect(editor.editorDomElement.checked).toEqual(false);
});


it('should expect "onCompositeEditorChange" to have been triggered with the new value showing up in its "formValues" object', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(undefined);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
gridOptionMock.autoCommitEdit = true;
mockItemData = { id: 1, title: 'task 1', isActive: true };

Expand All @@ -486,7 +506,7 @@ describe('CheckboxEditor', () => {

expect(getCellSpy).toHaveBeenCalled();
expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: { isActive: true }, editors: {},
}, expect.anything());
Expand Down
40 changes: 29 additions & 11 deletions packages/common/src/editors/__tests__/dateEditor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,6 @@ describe('DateEditor', () => {
const clearBtnElm = divContainer.querySelector('.btn.icon-close') as HTMLInputElement;
const editorInputElm = divContainer.querySelector('.flatpickr input') as HTMLInputElement;
clearBtnElm.click();
editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));

expect(editorInputElm.value).toBe('');
expect(editor.isValueChanged()).toBe(true);
Expand Down Expand Up @@ -517,13 +516,13 @@ describe('DateEditor', () => {
it('should call "setValue" with value & apply value flag and expect the DOM element to have same value and also expect the value to be applied to the item object', () => {
const activeCellMock = { row: 0, cell: 0 };
jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
mockColumn.type = FieldType.dateIso;
editor = new DateEditor(editorArguments);
editor.setValue('2001-01-02', true);

expect(editor.getValue()).toContain('2001-01-02');
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: { startDate: '2001-01-02' }, editors: {},
}, expect.anything());
Expand All @@ -547,7 +546,7 @@ describe('DateEditor', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(false);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);

editor = new DateEditor(editorArguments);
editor.loadValue(mockItemData);
Expand All @@ -556,7 +555,7 @@ describe('DateEditor', () => {

expect(getCellSpy).toHaveBeenCalled();
expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: { startDate: '' }, editors: {},
}, expect.anything());
Expand All @@ -565,11 +564,11 @@ describe('DateEditor', () => {
expect(editor.flatInstance._input.value).toEqual('');
});

it('should call "show" and expect the DOM element to become disabled and empty when "onBeforeEditCell" returns false', () => {
it('should call "show" and expect the DOM element to become disabled and empty when "onBeforeEditCell" returns false and also expect "onBeforeComposite" to not be called because the value is blank', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(false);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
gridOptionMock.compositeEditorOptions = {
excludeDisabledFieldFormValues: true
};
Expand All @@ -581,11 +580,30 @@ describe('DateEditor', () => {

expect(getCellSpy).toHaveBeenCalled();
expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).not.toHaveBeenCalled();
expect(disableSpy).toHaveBeenCalledWith(true);
expect(editor.flatInstance._input.disabled).toEqual(true);
expect(editor.flatInstance._input.value).toEqual('');
});

it('should call "disable" method and expect the DOM element to become disabled and have an empty formValues be passed in the onCompositeEditorChange event', () => {
const activeCellMock = { row: 0, cell: 0 };
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
gridOptionMock.compositeEditorOptions = {
excludeDisabledFieldFormValues: true
};

editor = new DateEditor(editorArguments);
editor.loadValue({ ...mockItemData, startDate: '2020-01-01' });
editor.show();
editor.disable();

expect(getCellSpy).toHaveBeenCalled();
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: {}, editors: {},
}, expect.anything());
expect(disableSpy).toHaveBeenCalledWith(true);
expect(editor.flatInstance._input.disabled).toEqual(true);
expect(editor.flatInstance._input.value).toEqual('');
});
Expand All @@ -596,7 +614,7 @@ describe('DateEditor', () => {
mockColumn.type = FieldType.dateIso;
const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
const onBeforeEditSpy = jest.spyOn(gridStub.onBeforeEditCell, 'notify').mockReturnValue(undefined);
const onBeforeCompositeSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
gridOptionMock.autoCommitEdit = true;
mockItemData = { id: 1, startDate: '2001-01-02', isActive: true };

Expand All @@ -609,7 +627,7 @@ describe('DateEditor', () => {

expect(getCellSpy).toHaveBeenCalled();
expect(onBeforeEditSpy).toHaveBeenCalledWith({ ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub });
expect(onBeforeCompositeSpy).toHaveBeenCalledWith({
expect(onCompositeEditorSpy).toHaveBeenCalledWith({
...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
formValues: { startDate: '2001-01-02' }, editors: {},
}, expect.anything());
Expand Down
Loading

0 comments on commit 9aac97d

Please sign in to comment.