Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overlay wrapper and element animation should start together - v.12.2.x #10238

Merged
merged 15 commits into from
Oct 11, 2021
Merged

Overlay wrapper and element animation should start together - v.12.2.x #10238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
74a609b
fix(overlay): move addModalClasses to show method #9882
PlamenaMiteva Oct 4, 2021
cb39c11
chore(overlay): update sample to allow change of animations duration
wnvko Oct 4, 2021
e3e8e45
fix(overlay): implement removeModalClasses method #9882
PlamenaMiteva Oct 4, 2021
f32a68a
test(overlay): fix failing test #9882
PlamenaMiteva Oct 4, 2021
537ce39
chore(overlay): addressing comments #9882
PlamenaMiteva Oct 4, 2021
03871b9
test(overlay): fix failing test #9882
PlamenaMiteva Oct 5, 2021
8b1607b
test(overlay): fix failing test #9882
PlamenaMiteva Oct 5, 2021
50d4ccb
test(overlay): addressing comments #9882
PlamenaMiteva Oct 5, 2021
d019881
fix(overlay): wrap class addition in RAF #9882
PlamenaMiteva Oct 7, 2021
6027b17
chore(overlay): addressing comments #9882
PlamenaMiteva Oct 8, 2021
54f4cb1
test(overlay): fix failing tests#9882
PlamenaMiteva Oct 8, 2021
47a9fee
Merge branch '12.2.x' into PMiteva/fix-overlay-animation-12.2.x
Lipata Oct 8, 2021
e493621
chore(overlay): fix lint errors#9882
PlamenaMiteva Oct 8, 2021
698822c
test(overlay): fix failing dialog test#9882
PlamenaMiteva Oct 8, 2021
03cf748
Merge branch 'PMiteva/fix-overlay-animation-12.2.x' of https://github…
PlamenaMiteva Oct 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,7 @@ describe('Dialog', () => {
fix.detectChanges();

dialog.open();
tick();
tick(16);
fix.detectChanges();

overlaydiv = document.getElementsByClassName(OVERLAY_MAIN_CLASS)[0];
Expand Down
193 changes: 99 additions & 94 deletions projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const CLASS_OVERLAY_WRAPPER_MODAL = 'igx-overlay__wrapper--modal';
const CLASS_OVERLAY_WRAPPER_FLEX = 'igx-overlay__wrapper--flex';
const CLASS_OVERLAY_MAIN = 'igx-overlay';
const CLASS_SCROLLABLE_DIV = 'scrollableDiv';
const DEBOUNCE_TIME = 16;

// Utility function to get all applied to element css from all sources.
const css = (element) => {
Expand Down Expand Up @@ -258,19 +259,19 @@ describe('igxOverlay', () => {
mockFactoryResolver = {
resolveComponentFactory: () => ({
create: () => ({
hostView: '',
location: mockElementRef,
changeDetectorRef: { detectChanges: () => { } },
destroy: () => { }
})
hostView: '',
location: mockElementRef,
changeDetectorRef: { detectChanges: () => { } },
destroy: () => { }
})
})
};
mockApplicationRef = { attachView: () => { }, detachView: () => { } };
mockInjector = {};
mockAnimationBuilder = {};
mockDocument = {
body: mockElement,
listeners: { },
listeners: {},
defaultView: mockElement,
// this is used be able to properly invoke rxjs `fromEvent` operator, which, turns out
// just adds an event listener to the element and emits accordingly
Expand Down Expand Up @@ -437,7 +438,7 @@ describe('igxOverlay', () => {
fixture.detectChanges();

fixture.componentInstance.buttonElement.nativeElement.click();
tick();
tick(DEBOUNCE_TIME);

const overlayElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_MAIN)[0] as HTMLElement;
Expand Down Expand Up @@ -634,8 +635,8 @@ describe('igxOverlay', () => {
const bottom = 200;
const mockElement = document.createElement('div');
spyOn(mockElement, 'getBoundingClientRect').and.callFake(() => ({
left, top, width, height, right, bottom
} as DOMRect));
left, top, width, height, right, bottom
} as DOMRect));

const mockItem = document.createElement('div');
mockElement.append(mockItem);
Expand Down Expand Up @@ -833,7 +834,7 @@ describe('igxOverlay', () => {
SimpleDynamicComponent,
{ positionStrategy: new ConnectedPositioningStrategy({ target: buttonElement }) });
overlayInstance.show(id);
tick();
tick(DEBOUNCE_TIME);

let contentElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement;
Expand All @@ -849,7 +850,7 @@ describe('igxOverlay', () => {
getPointSpy.and.callThrough().and.returnValue(rect);
window.resizeBy(200, 200);
window.dispatchEvent(new Event('resize'));
tick();
tick(DEBOUNCE_TIME);

contentElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement;
Expand All @@ -869,7 +870,7 @@ describe('igxOverlay', () => {
// remove SimpleRefComponent HTML element from the DOM tree
fixture.elementRef.nativeElement.parentElement.removeChild(fixture.elementRef.nativeElement);
overlay.show(overlay.attach(fixture.elementRef));
tick();
tick(DEBOUNCE_TIME);

const componentElement = fixture.nativeElement as HTMLElement;
expect(componentElement).toBeDefined();
Expand Down Expand Up @@ -1390,7 +1391,7 @@ describe('igxOverlay', () => {
fixture.detectChanges();

fixture.componentInstance.buttonElement.nativeElement.click();
tick();
tick(DEBOUNCE_TIME);

fixture.detectChanges();
const wrapperElement = (fixture.nativeElement as HTMLElement)
Expand Down Expand Up @@ -1488,7 +1489,7 @@ describe('igxOverlay', () => {

overlay.show(overlay.attach(SimpleDynamicComponent));
overlay.show(overlay.attach(SimpleDynamicComponent));
tick();
tick(DEBOUNCE_TIME);
const wrapperElements = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
const wrapperElement1 = wrapperElements[0];
Expand Down Expand Up @@ -1532,7 +1533,7 @@ describe('igxOverlay', () => {
const overlay = fixture.componentInstance.overlay;

overlay.show(overlay.attach(SimpleDynamicComponent));
tick();
tick(DEBOUNCE_TIME);
fixture.detectChanges();

// overlay container IS NOT a child of the debugElement (attached to body, not app-root)
Expand Down Expand Up @@ -1660,67 +1661,71 @@ describe('igxOverlay', () => {
});

// adding more than one component to show in igx-overlay:
it('Should render the component exactly on top of the previous one when adding a new instance with default settings.', () => {
const fixture = TestBed.createComponent(TopLeftOffsetComponent);
const overlay = fixture.componentInstance.overlay;
const overlaySettings: OverlaySettings = {
positionStrategy: new ConnectedPositioningStrategy()
};
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
fixture.detectChanges();
it('Should render the component exactly on top of the previous one when adding a new instance with default settings.',
fakeAsync(() => {
const fixture = TestBed.createComponent(TopLeftOffsetComponent);
const overlay = fixture.componentInstance.overlay;
const overlaySettings: OverlaySettings = {
positionStrategy: new ConnectedPositioningStrategy()
};
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
tick(DEBOUNCE_TIME);
fixture.detectChanges();

const wrapperElements = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
const wrapperElement1 = wrapperElements[0];
const wrapperElement2 = wrapperElements[1];
const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement;
const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement;
const componentRect1 = componentElement1.getBoundingClientRect();
const componentRect2 = componentElement2.getBoundingClientRect();
expect(componentRect1.left).toEqual(0);
expect(componentRect1.left).toEqual(componentRect2.left);
expect(componentRect1.top).toEqual(0);
expect(componentRect1.top).toEqual(componentRect2.top);
expect(componentRect1.width).toEqual(componentRect2.width);
expect(componentRect1.height).toEqual(componentRect2.height);
});
const wrapperElements = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
const wrapperElement1 = wrapperElements[0];
const wrapperElement2 = wrapperElements[1];
const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement;
const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement;
const componentRect1 = componentElement1.getBoundingClientRect();
const componentRect2 = componentElement2.getBoundingClientRect();
expect(componentRect1.left).toEqual(0);
expect(componentRect1.left).toEqual(componentRect2.left);
expect(componentRect1.top).toEqual(0);
expect(componentRect1.top).toEqual(componentRect2.top);
expect(componentRect1.width).toEqual(componentRect2.width);
expect(componentRect1.height).toEqual(componentRect2.height);
}));

it('Should render the component exactly on top of the previous one when adding a new instance with the same options.', () => {
const fixture = TestBed.createComponent(TopLeftOffsetComponent);
const x = 200;
const y = 300;
it('Should render the component exactly on top of the previous one when adding a new instance with the same options.',
fakeAsync(() => {
const fixture = TestBed.createComponent(TopLeftOffsetComponent);
const x = 200;
const y = 300;

const overlay = fixture.componentInstance.overlay;
const positionSettings: PositionSettings = {
horizontalDirection: HorizontalAlignment.Left,
verticalDirection: VerticalAlignment.Top,
horizontalStartPoint: HorizontalAlignment.Left,
verticalStartPoint: VerticalAlignment.Bottom,
};
const overlaySettings: OverlaySettings = {
target: new Point(x, y),
positionStrategy: new ConnectedPositioningStrategy(positionSettings)
};
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
fixture.detectChanges();
const overlay = fixture.componentInstance.overlay;
const positionSettings: PositionSettings = {
horizontalDirection: HorizontalAlignment.Left,
verticalDirection: VerticalAlignment.Top,
horizontalStartPoint: HorizontalAlignment.Left,
verticalStartPoint: VerticalAlignment.Bottom,
};
const overlaySettings: OverlaySettings = {
target: new Point(x, y),
positionStrategy: new ConnectedPositioningStrategy(positionSettings)
};
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
tick(DEBOUNCE_TIME);
fixture.detectChanges();

const wrapperElements = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
const wrapperElement1 = wrapperElements[0];
const wrapperElement2 = wrapperElements[1];
const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement;
const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement;
const componentRect1 = componentElement1.getBoundingClientRect();
const componentRect2 = componentElement2.getBoundingClientRect();
expect(componentRect1.left).toEqual(x - componentRect1.width);
expect(componentRect1.left).toEqual(componentRect2.left);
expect(componentRect1.top).toEqual(y - componentRect1.height);
expect(componentRect1.top).toEqual(componentRect2.top);
expect(componentRect1.width).toEqual(componentRect2.width);
expect(componentRect1.height).toEqual(componentRect2.height);
});
const wrapperElements = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf<HTMLElement>;
const wrapperElement1 = wrapperElements[0];
const wrapperElement2 = wrapperElements[1];
const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement;
const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement;
const componentRect1 = componentElement1.getBoundingClientRect();
const componentRect2 = componentElement2.getBoundingClientRect();
expect(componentRect1.left).toEqual(x - componentRect1.width);
expect(componentRect1.left).toEqual(componentRect2.left);
expect(componentRect1.top).toEqual(y - componentRect1.height);
expect(componentRect1.top).toEqual(componentRect2.top);
expect(componentRect1.width).toEqual(componentRect2.width);
expect(componentRect1.height).toEqual(componentRect2.height);
}));

it(`Should change the state of the component to closed when reaching threshold and closing scroll strategy is used.`,
fakeAsync(() => {
Expand Down Expand Up @@ -3010,7 +3015,7 @@ describe('igxOverlay', () => {
};

overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
tick();
tick(DEBOUNCE_TIME);

let wrapperElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
Expand All @@ -3020,7 +3025,7 @@ describe('igxOverlay', () => {
tick();

wrapperElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement;
expect(wrapperElement.style.visibility).toEqual('hidden');
}));

Expand All @@ -3032,14 +3037,14 @@ describe('igxOverlay', () => {
};

overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
tick();
tick(DEBOUNCE_TIME);

let wrapperElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
expect(wrapperElement.style.visibility).toEqual('');

UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
tick();
tick(DEBOUNCE_TIME);

wrapperElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
Expand Down Expand Up @@ -3110,34 +3115,34 @@ describe('igxOverlay', () => {
};

overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings));
tick();
tick(DEBOUNCE_TIME);

let wrapperElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
expect(wrapperElement.style.visibility).toEqual('');

UIInteractions.triggerKeyDownEvtUponElem('Enter', document);
tick();
tick(DEBOUNCE_TIME);
wrapperElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
expect(wrapperElement.style.visibility).toEqual('');

UIInteractions.triggerKeyDownEvtUponElem('a', document);
tick();
tick(DEBOUNCE_TIME);
wrapperElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
expect(wrapperElement.style.visibility).toEqual('');

UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', document);
tick();
tick(DEBOUNCE_TIME);
wrapperElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
expect(wrapperElement.style.visibility).toEqual('');

UIInteractions.triggerKeyDownEvtUponElem('Escape', document);
tick();
wrapperElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement;
.parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement;
expect(wrapperElement.style.visibility).toEqual('hidden');
}));

Expand Down Expand Up @@ -3206,7 +3211,7 @@ describe('igxOverlay', () => {
expect(fixture.componentInstance.customComponent.nativeElement.getBoundingClientRect().height).toEqual(280);
fixture.componentInstance.buttonElement.nativeElement.click();
tick();
const componentElement =(fixture.nativeElement as HTMLElement)
const componentElement = (fixture.nativeElement as HTMLElement)
.parentElement.getElementsByClassName('customList')[0] as HTMLElement;
expect(componentElement).toBeDefined();
expect(componentElement.style.width).toEqual('100%');
Expand Down Expand Up @@ -4019,12 +4024,12 @@ describe('igxOverlay', () => {
expect(overlay.closing.emit).toHaveBeenCalledTimes(1);
expect(overlay.closed.emit).toHaveBeenCalledTimes(1);
expect(overlay.closing.emit)
.toHaveBeenCalledWith({
id: callId,
componentRef: jasmine.any(ComponentRef) as any,
cancel: false,
event: undefined
});
.toHaveBeenCalledWith({
id: callId,
componentRef: jasmine.any(ComponentRef) as any,
cancel: false,
event: undefined
});
overlay.detachAll();

overlaySettings.excludeFromOutsideClick = [];
Expand All @@ -4040,12 +4045,12 @@ describe('igxOverlay', () => {
expect(overlay.closing.emit).toHaveBeenCalledTimes(2);
expect(overlay.closed.emit).toHaveBeenCalledTimes(2);
expect(overlay.closing.emit)
.toHaveBeenCalledWith({
id: callId,
componentRef: jasmine.any(ComponentRef) as any,
cancel: false,
event: jasmine.any(Event) as any
});
.toHaveBeenCalledWith({
id: callId,
componentRef: jasmine.any(ComponentRef) as any,
cancel: false,
event: jasmine.any(Event) as any
});
}));
});

Expand Down
Loading