Skip to content

Commit

Permalink
fix(editors): select dropdown value is undefined it shouldn't call save
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Jun 2, 2021
1 parent 51e246a commit 17555f2
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 14 deletions.
37 changes: 25 additions & 12 deletions src/app/modules/angular-slickgrid/editors/__tests__/singleSelectEditor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { TranslateService, TranslateModule } from '@ngx-translate/core';
import { Editors } from '../index';
import { SingleSelectEditor } from '../singleSelectEditor';
import { Column, EditorArguments, GridOption } from '../../models';
import { ColumnEditor } from 'dist/public_api';

const containerId = 'demo-container';

Expand All @@ -20,7 +21,7 @@ const gridOptionMock = {
autoCommitEdit: false,
editable: true,
i18n: null,
} as GridOption;
} as unknown as GridOption;

const getEditorLockMock = {
commitCurrentEdit: jest.fn(),
Expand Down Expand Up @@ -72,7 +73,7 @@ describe('SelectEditor', () => {
grid: gridStub,
column: mockColumn,
item: mockItemData,
event: null,
event: null as any,
cancelChanges: jest.fn(),
commitChanges: jest.fn(),
container: divContainer,
Expand All @@ -87,7 +88,7 @@ describe('SelectEditor', () => {
beforeEach(() => {
mockItemData = { id: 1, gender: 'male', isActive: true };
mockColumn = { id: 'gender', field: 'gender', editable: true, editor: { model: Editors.multipleSelect }, internalColumnEditor: {} } as Column;
mockColumn.internalColumnEditor.collection = [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
(mockColumn.internalColumnEditor as ColumnEditor).collection = [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }];

editorArguments.column = mockColumn;
editorArguments.item = mockItemData;
Expand All @@ -98,7 +99,7 @@ describe('SelectEditor', () => {
});

it('should initialize the editor', () => {
mockColumn.internalColumnEditor.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
(mockColumn.internalColumnEditor as ColumnEditor).collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
gridOptionMock.i18n = translate;
editor = new SingleSelectEditor(editorArguments);
const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;
Expand All @@ -108,7 +109,7 @@ describe('SelectEditor', () => {

it('should hide the DOM element div wrapper when the "hide" method is called', () => {
editor = new SingleSelectEditor(editorArguments);
const editorElm = document.body.querySelector<HTMLDivElement>('[name=editor-gender].ms-drop');
const editorElm = document.body.querySelector('[name=editor-gender].ms-drop') as HTMLDivElement;

editor.show();
expect(editorElm.style.display).toBe('');
Expand All @@ -119,7 +120,7 @@ describe('SelectEditor', () => {

it('should show the DOM element div wrapper when the "show" method is called', () => {
editor = new SingleSelectEditor(editorArguments);
const editorElm = document.body.querySelector<HTMLDivElement>('[name=editor-gender].ms-drop');
const editorElm = document.body.querySelector('[name=editor-gender].ms-drop') as HTMLDivElement;

editor.hide();
expect(editorElm.style.display).toBe('none');
Expand All @@ -136,9 +137,21 @@ describe('SelectEditor', () => {
});

describe('isValueChanged method', () => {
it('should return False if the value is undefined', () => {
editor = new SingleSelectEditor(editorArguments);
const editorBtnElm = divContainer.querySelector('.ms-parent.ms-filter.editor-gender button.ms-choice') as HTMLButtonElement;
const editorListElm = divContainer.querySelectorAll<HTMLInputElement>(`[name=editor-gender].ms-drop ul>li input[type=radio]`);
editorBtnElm.click();

// we can use property "checked" or dispatch an event
editorListElm[0].checked = false;

expect(editor.isValueChanged()).toBe(false);
});

it('should return True after doing a check of an option', () => {
editor = new SingleSelectEditor(editorArguments);
const editorBtnElm = divContainer.querySelector<HTMLButtonElement>('.ms-parent.ms-filter.editor-gender button.ms-choice');
const editorBtnElm = divContainer.querySelector('.ms-parent.ms-filter.editor-gender button.ms-choice') as HTMLButtonElement;
const editorListElm = divContainer.querySelectorAll<HTMLInputElement>(`[name=editor-gender].ms-drop ul>li input[type=radio]`);
editorBtnElm.click();

Expand All @@ -150,13 +163,13 @@ describe('SelectEditor', () => {
});

it('should return False after re-selecting the same option as the one loaded', () => {
mockColumn.internalColumnEditor.collection = ['male', 'female'];
(mockColumn.internalColumnEditor as ColumnEditor).collection = ['male', 'female'];
mockItemData = { id: 1, gender: 'male', isActive: true };

editor = new SingleSelectEditor(editorArguments);
editor.loadValue(mockItemData);

const editorBtnElm = divContainer.querySelector<HTMLButtonElement>('.ms-parent.ms-filter.editor-gender button.ms-choice');
const editorBtnElm = divContainer.querySelector('.ms-parent.ms-filter.editor-gender button.ms-choice') as HTMLButtonElement;
const editorListElm = divContainer.querySelectorAll<HTMLInputElement>(`[name=editor-gender].ms-drop ul>li input[type=radio]`);
editorBtnElm.click();

Expand Down Expand Up @@ -213,7 +226,7 @@ describe('SelectEditor', () => {

it('should return value as a string when using a dot (.) notation for complex object', () => {
mockColumn.field = 'employee.gender';
mockColumn.internalColumnEditor.collection = ['male', 'female'];
(mockColumn.internalColumnEditor as ColumnEditor).collection = ['male', 'female'];
mockItemData = { id: 1, employee: { gender: 'male' }, isActive: true };

editor = new SingleSelectEditor(editorArguments);
Expand All @@ -238,7 +251,7 @@ describe('SelectEditor', () => {

editor = new SingleSelectEditor(editorArguments);
editor.setValue(false);
const editorBtnElm = divContainer.querySelector<HTMLButtonElement>('.ms-parent.ms-filter.editor-gender button.ms-choice');
const editorBtnElm = divContainer.querySelector('.ms-parent.ms-filter.editor-gender button.ms-choice') as HTMLButtonElement;
const editorListElm = divContainer.querySelectorAll<HTMLInputElement>(`[name=editor-gender].ms-drop ul>li span`);
editorBtnElm.click();

Expand All @@ -265,7 +278,7 @@ describe('SelectEditor', () => {

editor = new SingleSelectEditor(editorArguments);
editor.loadValue(mockItemData);
const editorBtnElm = divContainer.querySelector<HTMLButtonElement>('.ms-parent.ms-filter.editor-gender button.ms-choice');
const editorBtnElm = divContainer.querySelector('.ms-parent.ms-filter.editor-gender button.ms-choice') as HTMLButtonElement;
const editorListElm = divContainer.querySelectorAll<HTMLInputElement>(`[name=editor-gender].ms-drop ul>li span`);
editorBtnElm.click();

Expand Down
4 changes: 2 additions & 2 deletions src/app/modules/angular-slickgrid/editors/selectEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,7 @@ export class SelectEditor implements Editor {
}

destroy() {
// when autoCommitEdit is enabled, we might end up leave the editor without it being saved, if so do call a save before destroying
// when autoCommitEdit is enabled, we might end up leaving an editor without it being saved, if so do call a save before destroying
// this mainly happens doing a blur or focusing on another cell in the grid (it won't come here if we click outside the grid, in the body)
if (this.$editorElm && this.hasAutoCommitEdit && this.isValueChanged() && !this._isDisposing) {
this._isDisposing = true; // change destroying flag to avoid infinite loop
Expand Down Expand Up @@ -456,7 +456,7 @@ export class SelectEditor implements Editor {
return !isEqual;
}
const value = Array.isArray(valueSelection) && valueSelection.length > 0 ? valueSelection[0] : undefined;
return value !== this.originalValue;
return value !== undefined && value !== this.originalValue;
}

validate(inputValue?: any): EditorValidatorOutput {
Expand Down

0 comments on commit 17555f2

Please sign in to comment.