Skip to content

Commit

Permalink
refactor(igxMask): cleanup/streamline parsing and input handling
Browse files Browse the repository at this point in the history 
- input parsing go through one method
- add drag and drop functionality
- set default value on mask prop
  • Loading branch information
@jackofdiamond5
jackofdiamond5 committed Feb 25, 2020
1 parent d4c72f9 commit b54be61
Show file tree
Hide file tree
Showing 7 changed files with 431 additions and 589 deletions.
9 changes: 8 additions & 1 deletion projects/igniteui-angular/src/lib/core/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,14 @@ export const enum KEYCODES {
RIGHT_ARROW = 39,
DOWN_ARROW = 40,
F2 = 113,
TAB = 9
TAB = 9,
CTRL = 17,
Z = 90,
Y = 89,
X = 88,
BACKSPACE = 8,
DELETE = 46,
INPUT_METHOD = 229
}

/**
Expand Down
117 changes: 59 additions & 58 deletions projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Component, ViewChild, ElementRef } from '@angular/core';
import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms';
import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component';
Expand Down Expand Up @@ -206,7 +206,7 @@ describe('IgxDatePicker', () => {
expect(input).toEqual(document.activeElement);
}));

it('When a modal datepicker is closed via outside click, the focus should remain on the input',
it('When a modal datepicker is closed via outside click, the focus should remain on the input',
fakeAsync(() => {
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper--modal');
Expand All @@ -230,7 +230,7 @@ describe('IgxDatePicker', () => {
expect(input).toEqual(document.activeElement);
}));

it('When datepicker is closed upon selecting a date, the focus should remain on the input',
it('When datepicker is closed upon selecting a date, the focus should remain on the input',
fakeAsync(() => {
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper--modal');
Expand Down Expand Up @@ -332,66 +332,66 @@ describe('IgxDatePicker', () => {
}));

it('When datepicker in "dropdown" mode, should focus input on user interaction with Today btn, Cancel btn, Enter Key, Escape key',
fakeAsync(() => {
const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
fixture.detectChanges();
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle.length).toEqual(0);
fakeAsync(() => {
const fixture = TestBed.createComponent(IgxDatePickerDropdownButtonsComponent);
fixture.detectChanges();
const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle.length).toEqual(0);

UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
flush();
fixture.detectChanges();
const buttons = document.getElementsByClassName('igx-button--flat');
expect(buttons.length).toEqual(2);
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
flush();
fixture.detectChanges();
const buttons = document.getElementsByClassName('igx-button--flat');
expect(buttons.length).toEqual(2);

// Today btn
const todayBtn = buttons[1] as HTMLElement;
expect(todayBtn.innerText).toBe('Today');
todayBtn.click();
tick();
fixture.detectChanges();
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).toEqual(undefined);
expect(input).toEqual(document.activeElement);
// Today btn
const todayBtn = buttons[1] as HTMLElement;
expect(todayBtn.innerText).toBe('Today');
todayBtn.click();
tick();
fixture.detectChanges();
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).toEqual(undefined);
expect(input).toEqual(document.activeElement);

// Cancel btn
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
flush();
fixture.detectChanges();
const cancelBtn = buttons[0] as HTMLElement;
expect(cancelBtn.innerText).toBe('Cancel');
cancelBtn.click();
tick();
fixture.detectChanges();
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).toEqual(undefined);
expect(input).toEqual(document.activeElement);
// Cancel btn
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
flush();
fixture.detectChanges();
const cancelBtn = buttons[0] as HTMLElement;
expect(cancelBtn.innerText).toBe('Cancel');
cancelBtn.click();
tick();
fixture.detectChanges();
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).toEqual(undefined);
expect(input).toEqual(document.activeElement);

// Enter key
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
flush();
fixture.detectChanges();
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
tick();
fixture.detectChanges();
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).toEqual(undefined);
expect(input).toEqual(document.activeElement);
// Enter key
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
flush();
fixture.detectChanges();
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
tick();
fixture.detectChanges();
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).toEqual(undefined);
expect(input).toEqual(document.activeElement);

// Esc key
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
flush();
fixture.detectChanges();
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
tick();
fixture.detectChanges();
// Esc key
UIInteractions.triggerKeyDownEvtUponElem('space', datePickerDom.nativeElement, false);
flush();
fixture.detectChanges();
document.activeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
tick();
fixture.detectChanges();

overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).toEqual(undefined);
expect(input).toEqual(document.activeElement);
}));
overlayToggle = document.getElementsByClassName('igx-overlay__wrapper');
expect(overlayToggle[0]).toEqual(undefined);
expect(input).toEqual(document.activeElement);
}));

it('Datepicker week start day (Monday)', () => {
const fixture = TestBed.createComponent(IgxDatePickerWithWeekStartComponent);
Expand Down Expand Up @@ -1149,7 +1149,8 @@ describe('IgxDatePicker', () => {
expect(input).toBeDefined();
datePicker.isSpinLoop = false;

input.nativeElement.focus();
input.triggerEventHandler('focus', {});
fixture.detectChanges(); // bound transformedDate assign
UIInteractions.sendInput(input, '31-03-19');
expect(input.nativeElement.value).toBe('31-03-19');

Expand Down
Loading

0 comments on commit b54be61

Please sign in to comment.