Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Commit

Permalink
Removed the use of HostListener for resize related events (#16)
Browse files Browse the repository at this point in the history 
* Removed the use of HostListener for resize related events

* Added mouse up checks to updated tests
  • Loading branch information
@Blackbaud-TrevorBurch
Blackbaud-TrevorBurch authored Jan 10, 2019
1 parent 043bc23 commit a63f777
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 73 deletions.
1 change: 1 addition & 0 deletions src/app/public/modules/flyout/fixtures/flyout.component.fixture.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
template: 'noop'
})
export class SkyFlyoutTestComponent {

constructor(
private flyoutService: SkyFlyoutService
) { }
Expand Down
170 changes: 100 additions & 70 deletions src/app/public/modules/flyout/flyout.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import {
import {
SkyFlyoutTestSampleContext
} from './fixtures/flyout-sample-context.fixture';
import { SkyFlyoutComponent } from './flyout.component';

describe('Flyout component', () => {
let applicationRef: ApplicationRef;
Expand Down Expand Up @@ -81,13 +82,13 @@ describe('Flyout component', () => {

function makeEvent(eventType: string, evtObj: any) {
let evt = document.createEvent('MouseEvents');
evt.initMouseEvent(eventType, false, false, window, 0, 0, 0, evtObj.clientX,
0, false, false, false, false, 0, undefined);
evt.initMouseEvent(eventType, false, false, window, 0, 0, 0, evtObj.clientX,
0, false, false, false, false, 0, undefined);
document.dispatchEvent(evt);
}

function getFlyoutElement(): HTMLElement {
return document.querySelector('.sky-flyout') as HTMLElement;
return document.querySelector('.sky-flyout') as HTMLElement;
}

function getFlyoutHandleElement(): HTMLElement {
Expand Down Expand Up @@ -316,61 +317,90 @@ describe('Flyout component', () => {
);

it('should resize when handle is dragged', fakeAsync(() => {
openFlyout({});
const flyoutElement = getFlyoutElement();
const handleElement = getFlyoutHandleElement();
openFlyout({});
fixture.detectChanges();
tick();
const moveSpy = spyOn(SkyFlyoutComponent.prototype, 'onMouseMove').and.callThrough();
const mouseUpSpy = spyOn(SkyFlyoutComponent.prototype, 'onHandleRelease').and.callThrough();
const flyoutElement = getFlyoutElement();
const handleElement = getFlyoutHandleElement();

expect(flyoutElement.style.width).toBe('500px');
expect(flyoutElement.style.width).toBe('500px');

let evt = document.createEvent('MouseEvents');
evt.initMouseEvent('mousedown', false, false, window, 0, 0, 0, 1000,
0, false, false, false, false, 0, undefined);
let evt = document.createEvent('MouseEvents');
evt.initMouseEvent('mousedown', false, false, window, 0, 0, 0, 1000,
0, false, false, false, false, 0, undefined);

handleElement.dispatchEvent(evt);
makeEvent('mousemove', { clientX: 1100 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('400px');
makeEvent('mousemove', { clientX: 1000 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('500px');
makeEvent('mouseup', {});
handleElement.dispatchEvent(evt);
makeEvent('mousemove', { clientX: 1100 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('400px');
makeEvent('mousemove', { clientX: 1000 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('500px');
makeEvent('mouseup', {});
expect(moveSpy).toHaveBeenCalled();
expect(mouseUpSpy).toHaveBeenCalled();
}));

it('should not resize on mousemove unless the resize handle was clicked', fakeAsync(() => {
openFlyout({});
fixture.detectChanges();
tick();
const moveSpy = spyOn(SkyFlyoutComponent.prototype, 'onMouseMove').and.callThrough();
const mouseUpSpy = spyOn(SkyFlyoutComponent.prototype, 'onHandleRelease').and.callThrough();
const flyoutElement = getFlyoutElement();

expect(flyoutElement.style.width).toBe('500px');

makeEvent('mousemove', { clientX: 1100 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('500px');
makeEvent('mousemove', { clientX: 1000 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('500px');
makeEvent('mouseup', {});
expect(moveSpy).not.toHaveBeenCalled();
expect(mouseUpSpy).not.toHaveBeenCalled();
}));

it('should resize flyout when range input is changed', fakeAsync(() => {
openFlyout({});
const flyoutElement = getFlyoutElement();
expect(flyoutElement.style.width).toBe('500px');
let resizeInput: any = flyoutElement.querySelector('.sky-flyout-resize-handle');
openFlyout({});
const flyoutElement = getFlyoutElement();
expect(flyoutElement.style.width).toBe('500px');
let resizeInput: any = flyoutElement.querySelector('.sky-flyout-resize-handle');

resizeInput.value = '400';
SkyAppTestUtility.fireDomEvent(resizeInput, 'input');
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('400px');
resizeInput.value = '400';
SkyAppTestUtility.fireDomEvent(resizeInput, 'input');
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('400px');

resizeInput.value = '500';
SkyAppTestUtility.fireDomEvent(resizeInput, 'input');
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('500px');
resizeInput.value = '500';
SkyAppTestUtility.fireDomEvent(resizeInput, 'input');
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('500px');
}));

it('should have correct aria-labels on resizing range input', fakeAsync(() => {
openFlyout({maxWidth: 1000, minWidth: 200});
const flyoutElement = getFlyoutElement();
let resizeInput: any = flyoutElement.querySelector('.sky-flyout-resize-handle');
openFlyout({ maxWidth: 1000, minWidth: 200 });
const flyoutElement = getFlyoutElement();
let resizeInput: any = flyoutElement.querySelector('.sky-flyout-resize-handle');

expect(flyoutElement.style.width).toBe('500px');
expect(resizeInput.getAttribute('aria-controls')).toBe(flyoutElement.id);
expect(flyoutElement.style.width).toBe('500px');
expect(resizeInput.getAttribute('aria-controls')).toBe(flyoutElement.id);

expect(resizeInput.getAttribute('aria-valuenow')).toBe('500');
expect(resizeInput.getAttribute('aria-valuemax')).toBe('1000');
expect(resizeInput.getAttribute('aria-valuemin')).toBe('200');
expect(resizeInput.getAttribute('aria-valuenow')).toBe('500');
expect(resizeInput.getAttribute('aria-valuemax')).toBe('1000');
expect(resizeInput.getAttribute('aria-valuemin')).toBe('200');

expect(resizeInput.getAttribute('max')).toBe('1000');
expect(resizeInput.getAttribute('min')).toBe('200');
expect(resizeInput.getAttribute('max')).toBe('1000');
expect(resizeInput.getAttribute('min')).toBe('200');
}));

it('should set iframe styles correctly during dragging', fakeAsync(() => {
Expand All @@ -394,33 +424,33 @@ describe('Flyout component', () => {
}));

it('should respect minimum and maximum when resizing', fakeAsync(() => {
openFlyout({ maxWidth: 1000, minWidth: 200});
const flyoutElement = getFlyoutElement();
const handleElement = getFlyoutHandleElement();
openFlyout({ maxWidth: 1000, minWidth: 200 });
const flyoutElement = getFlyoutElement();
const handleElement = getFlyoutHandleElement();

expect(flyoutElement.style.width).toBe('500px');
let evt = document.createEvent('MouseEvents');
evt.initMouseEvent('mousedown', false, false, window, 0, 0, 0, 1000,
0, false, false, false, false, 0, undefined);
handleElement.dispatchEvent(evt);
makeEvent('mousemove', { clientX: 500 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('1000px');
makeEvent('mousemove', { clientX: 200 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('1000px');
makeEvent('mousemove', { clientX: 1300 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('200px');
makeEvent('mousemove', { clientX: 1400 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('200px');
makeEvent('mouseup', {});
})
expect(flyoutElement.style.width).toBe('500px');
let evt = document.createEvent('MouseEvents');
evt.initMouseEvent('mousedown', false, false, window, 0, 0, 0, 1000,
0, false, false, false, false, 0, undefined);
handleElement.dispatchEvent(evt);
makeEvent('mousemove', { clientX: 500 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('1000px');
makeEvent('mousemove', { clientX: 200 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('1000px');
makeEvent('mousemove', { clientX: 1300 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('200px');
makeEvent('mousemove', { clientX: 1400 });
fixture.detectChanges();
tick();
expect(flyoutElement.style.width).toBe('200px');
makeEvent('mouseup', {});
})
);

it('should not resize when handle is not clicked',
Expand Down
27 changes: 24 additions & 3 deletions src/app/public/modules/flyout/flyout.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
ChangeDetectorRef,
ComponentFactoryResolver,
ElementRef,
HostListener,
Injector,
OnDestroy,
OnInit,
Expand All @@ -23,6 +22,10 @@ import {
trigger
} from '@angular/animations';

import {
Observable
} from 'rxjs/Observable';

import {
Subject
} from 'rxjs/Subject';
Expand Down Expand Up @@ -228,9 +231,26 @@ export class SkyFlyoutComponent implements OnDestroy, OnInit {

event.preventDefault();
event.stopPropagation();

Observable
.fromEvent(document, 'mousemove')
.takeWhile(() => {
return this.isDragging;
})
.subscribe((moveEvent: any) => {
this.onMouseMove(moveEvent);
});

Observable
.fromEvent(document, 'mouseup')
.takeWhile(() => {
return this.isDragging;
})
.subscribe((mouseUpEvent: any) => {
this.onHandleRelease(mouseUpEvent);
});
}

@HostListener('document:mousemove', ['$event'])
public onMouseMove(event: MouseEvent) {
if (!this.isDragging) {
return;
Expand All @@ -247,12 +267,13 @@ export class SkyFlyoutComponent implements OnDestroy, OnInit {

this.flyoutWidth = width;
this.xCoord = event.clientX;
this.changeDetector.detectChanges();
}

@HostListener('document:mouseup', ['$event'])
public onHandleRelease(event: MouseEvent) {
this.isDragging = false;
this.adapter.toggleIframePointerEvents(true);
this.changeDetector.detectChanges();
}

public onIteratorPreviousButtonClick() {
Expand Down

0 comments on commit a63f777

Please sign in to comment.