Skip to content

Commit

Permalink
feat(editors): convert jQuery to native element for few Editors
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed May 26, 2021
1 parent 8bdf1b9 commit f1a8c60
Show file tree
Hide file tree
Showing 13 changed files with 557 additions and 445 deletions.
25 changes: 13 additions & 12 deletions src/app/modules/angular-slickgrid/editors/__tests__/checkboxEditor.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Editors } from '../index';
import { CheckboxEditor } from '../checkboxEditor';
import { AutocompleteOption, Column, EditorArgs, EditorArguments, GridOption, KeyCode } from '../../models';
import { ColumnEditor } from '../../../../../../dist/public_api';

const KEY_CHAR_SPACE = 32;
const containerId = 'demo-container';
Expand Down Expand Up @@ -89,7 +90,7 @@ describe('CheckboxEditor', () => {
});

it('should initialize the editor even when user define his own editor options', () => {
mockColumn.internalColumnEditor!.editorOptions = { minLength: 3 } as AutocompleteOption;
(mockColumn.internalColumnEditor as ColumnEditor).editorOptions = { minLength: 3 } as AutocompleteOption;
editor = new CheckboxEditor(editorArguments);
const editorCount = divContainer.querySelectorAll('input.editor-checkbox.editor-isActive').length;

Expand All @@ -98,14 +99,14 @@ describe('CheckboxEditor', () => {

it('should have a title (tooltip) when defined in its column definition', () => {
const testValue = 'test title';
mockColumn.internalColumnEditor!.title = testValue;
(mockColumn.internalColumnEditor as ColumnEditor).title = testValue;

editor = new CheckboxEditor(editorArguments);
const editorElmJquery = editor.editorDomElement;
const editorDomElm = editor.editorDomElement;
const editorElm = divContainer.querySelector('input.editor-checkbox.editor-isActive') as HTMLInputElement;

expect(editorElm.title).toBe(testValue);
expect(editorElmJquery[0].title).toBe(testValue);
expect(editorDomElm.title).toBe(testValue);
});

it('should call "columnEditor" GETTER and expect to equal the editor settings we provided', () => {
Expand Down Expand Up @@ -185,7 +186,7 @@ describe('CheckboxEditor', () => {

describe('applyValue method', () => {
it('should apply the value to the isActive property when it passes validation', () => {
mockColumn.internalColumnEditor!.validator = null as any;
(mockColumn.internalColumnEditor as ColumnEditor).validator = null as any;
mockItemData = { id: 1, title: 'task 1', isActive: true };

editor = new CheckboxEditor(editorArguments);
Expand All @@ -195,7 +196,7 @@ describe('CheckboxEditor', () => {
});

it('should apply the value to the title property with a field having dot notation (complex object) that passes validation', () => {
mockColumn.internalColumnEditor!.validator = null as any;
(mockColumn.internalColumnEditor as ColumnEditor).validator = null as any;
mockColumn.field = 'part.isActive';
mockItemData = { id: 1, part: { isActive: true } };

Expand Down Expand Up @@ -302,7 +303,7 @@ describe('CheckboxEditor', () => {

it('should not call anything when the input value is false but is required', () => {
mockItemData = { id: 1, title: 'task 1', isActive: false };
mockColumn.internalColumnEditor!.required = true;
(mockColumn.internalColumnEditor as ColumnEditor).required = true;
gridOptionMock.autoCommitEdit = true;
const spy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');

Expand All @@ -316,7 +317,7 @@ describe('CheckboxEditor', () => {

it('should not call anything when the input value is null but is required', () => {
mockItemData = { id: 1, title: 'task 1', isActive: null };
mockColumn.internalColumnEditor!.required = true;
(mockColumn.internalColumnEditor as ColumnEditor).required = true;
gridOptionMock.autoCommitEdit = true;
const spy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');

Expand All @@ -329,7 +330,7 @@ describe('CheckboxEditor', () => {
});

it('should not save when custom validation fails', () => {
mockColumn.internalColumnEditor!.validator = (value: any) => {
(mockColumn.internalColumnEditor as ColumnEditor).validator = (value: any) => {
if (!value) {
return { valid: false, msg: 'This must be accepted' };
}
Expand All @@ -350,7 +351,7 @@ describe('CheckboxEditor', () => {
describe('validate method', () => {
it('should return False when field is required and field is empty, null or false', () => {
const expectation = { valid: false, msg: 'Field is required' };
mockColumn.internalColumnEditor!.required = true;
(mockColumn.internalColumnEditor as ColumnEditor).required = true;
editor = new CheckboxEditor(editorArguments);
const validation1 = editor.validate('');
const validation2 = editor.validate(null);
Expand All @@ -362,15 +363,15 @@ describe('CheckboxEditor', () => {
});

it('should return True when field is required and input is provided with True', () => {
mockColumn.internalColumnEditor!.required = true;
(mockColumn.internalColumnEditor as ColumnEditor).required = true;
editor = new CheckboxEditor(editorArguments);
const validation = editor.validate(true);

expect(validation).toEqual({ valid: true, msg: null });
});

it('should return True when field is required and input is provided with any text', () => {
mockColumn.internalColumnEditor!.required = true;
(mockColumn.internalColumnEditor as ColumnEditor).required = true;
editor = new CheckboxEditor(editorArguments);
const validation = editor.validate('text');

Expand Down
26 changes: 13 additions & 13 deletions src/app/modules/angular-slickgrid/editors/__tests__/dateEditor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ describe('DateEditor', () => {

it('should have a placeholder when defined in its column definition', () => {
const testValue = 'test placeholder';
mockColumn.internalColumnEditor!.placeholder = testValue;
(mockColumn.internalColumnEditor as ColumnEditor).placeholder = testValue;

editor = new DateEditor(editorArguments);
const editorElm = divContainer.querySelector('input.editor-text.editor-startDate') as HTMLInputElement;
Expand All @@ -139,7 +139,7 @@ describe('DateEditor', () => {

it('should have a title (tooltip) when defined in its column definition', () => {
const testValue = 'test title';
mockColumn.internalColumnEditor!.title = testValue;
(mockColumn.internalColumnEditor as ColumnEditor).title = testValue;

editor = new DateEditor(editorArguments);
const editorElm = divContainer.querySelector('input.editor-text.editor-startDate') as HTMLInputElement;
Expand Down Expand Up @@ -199,7 +199,7 @@ describe('DateEditor', () => {
describe('isValueChanged method', () => {
it('should return True when date is changed in the picker', () => {
// change to allow input value only for testing purposes & use the regular flatpickr input to test that one too
mockColumn.internalColumnEditor!.editorOptions = { allowInput: true, altInput: false };
(mockColumn.internalColumnEditor as ColumnEditor).editorOptions = { allowInput: true, altInput: false };
mockItemData = { id: 1, startDate: '2001-01-02T11:02:02.000Z', isActive: true };

editor = new DateEditor(editorArguments);
Expand Down Expand Up @@ -231,7 +231,7 @@ describe('DateEditor', () => {

it('should return False when date in the picker is the same as the current date', () => {
mockItemData = { id: 1, startDate: '2001-01-02T11:02:02.000Z', isActive: true };
mockColumn.internalColumnEditor!.editorOptions = { allowInput: true }; // change to allow input value only for testing purposes
(mockColumn.internalColumnEditor as ColumnEditor).editorOptions = { allowInput: true }; // change to allow input value only for testing purposes

editor = new DateEditor(editorArguments);
editor.loadValue(mockItemData);
Expand All @@ -245,7 +245,7 @@ describe('DateEditor', () => {
it('should return False when input date is invalid', () => {
mockItemData = { id: 1, startDate: '1900-02-32', isActive: true };
mockColumn.type = FieldType.dateUs;
mockColumn.internalColumnEditor!.editorOptions = { allowInput: true }; // change to allow input value only for testing purposes
(mockColumn.internalColumnEditor as ColumnEditor).editorOptions = { allowInput: true }; // change to allow input value only for testing purposes

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

describe('applyValue method', () => {
it('should apply the value to the startDate property with ISO format when no "outputType" is defined and when it passes validation', () => {
mockColumn.internalColumnEditor!.validator = null as any;
(mockColumn.internalColumnEditor as ColumnEditor).validator = null as any;
mockColumn.type = FieldType.date;
mockItemData = { id: 1, startDate: '2001-04-05T11:33:42.000Z', isActive: true };

Expand All @@ -271,7 +271,7 @@ describe('DateEditor', () => {
});

it('should apply the value to the startDate property with "outputType" format with a field having dot notation (complex object) that passes validation', () => {
mockColumn.internalColumnEditor!.validator = null as any;
(mockColumn.internalColumnEditor as ColumnEditor).validator = null as any;
mockColumn.type = FieldType.date;
mockColumn.outputType = FieldType.dateTimeIsoAmPm;
mockColumn.field = 'employee.startDate';
Expand All @@ -285,7 +285,7 @@ describe('DateEditor', () => {
});

it('should apply the value to the startDate property with output format defined by "saveOutputType" when it passes validation', () => {
mockColumn.internalColumnEditor!.validator = null as any;
(mockColumn.internalColumnEditor as ColumnEditor).validator = null as any;
mockColumn.type = FieldType.date;
mockColumn.saveOutputType = FieldType.dateTimeIsoAmPm;
mockItemData = { id: 1, startDate: '2001-04-05T11:33:42.000Z', isActive: true };
Expand All @@ -298,7 +298,7 @@ describe('DateEditor', () => {
});

it('should return item data with an empty string in its value when it fails the custom validation', () => {
mockColumn.internalColumnEditor!.validator = (value: any) => {
(mockColumn.internalColumnEditor as ColumnEditor).validator = (value: any) => {
if (value.length > 10) {
return { valid: false, msg: 'Must be at least 10 chars long.' };
}
Expand Down Expand Up @@ -391,7 +391,7 @@ describe('DateEditor', () => {

it('should not call anything when the input value is empty but is required', () => {
mockItemData = { id: 1, startDate: '', isActive: true };
mockColumn.internalColumnEditor!.required = true;
(mockColumn.internalColumnEditor as ColumnEditor).required = true;
gridOptionMock.autoCommitEdit = true;
const spy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');

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

it('should not throw any error when date is invalid when lower than required "minDate" defined in the "editorOptions" and "autoCommitEdit" is enabled', () => {
// change to allow input value only for testing purposes & use the regular flatpickr input to test that one too
mockColumn.internalColumnEditor!.editorOptions = { minDate: 'today', altInput: true };
(mockColumn.internalColumnEditor as ColumnEditor).editorOptions = { minDate: 'today', altInput: true };
mockItemData = { id: 1, startDate: '500-01-02T11:02:02.000Z', isActive: true };
gridOptionMock.autoCommitEdit = true;
gridOptionMock.autoEdit = true;
Expand All @@ -423,15 +423,15 @@ describe('DateEditor', () => {

describe('validate method', () => {
it('should return False when field is required and field is empty', () => {
mockColumn.internalColumnEditor!.required = true;
(mockColumn.internalColumnEditor as ColumnEditor).required = true;
editor = new DateEditor(editorArguments);
const validation = editor.validate('');

expect(validation).toEqual({ valid: false, msg: 'Field is required' });
});

it('should return True when field is required and input is a valid input value', () => {
mockColumn.internalColumnEditor!.required = true;
(mockColumn.internalColumnEditor as ColumnEditor).required = true;
editor = new DateEditor(editorArguments);
const validation = editor.validate('text');

Expand Down
Loading

0 comments on commit f1a8c60

Please sign in to comment.