Skip to content

Overlay wrapper and element animation should start together #10232

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

Merged
merged 23 commits into from
Oct 11, 2021
Merged

Overlay wrapper and element animation should start together #10232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
081af5f
fix(overlay): move addModalClasses to show method #9882
PlamenaMiteva Oct 4, 2021
550c0ed
chore(overlay): update sample to allow change of animations duration
wnvko Oct 4, 2021
709b5fe
fix(overlay): implement removeModalClasses method #9882
PlamenaMiteva Oct 4, 2021
bfd8a4d
Merge branch 'master' into PMiteva/fix-overlay-animation
wnvko Oct 4, 2021
f7e3a30
test(overlay): fix failing test #9882
PlamenaMiteva Oct 4, 2021
58f92c0
Merge branch 'PMiteva/fix-overlay-animation' of https://github.com/Ig…
PlamenaMiteva Oct 4, 2021
b6dad79
chore(overlay): addressing comments #9882
PlamenaMiteva Oct 4, 2021
7884a7e
test(overlay): fix failing test #9882
PlamenaMiteva Oct 5, 2021
bcf261c
test(overlay): fix failing test #9882
PlamenaMiteva Oct 5, 2021
7ab77c1
Merge branch 'master' into PMiteva/fix-overlay-animation
Lipata Oct 5, 2021
8a25b14
test(overlay): addressing comments #9882
PlamenaMiteva Oct 5, 2021
74d0248
Merge branch 'PMiteva/fix-overlay-animation' of https://github.com/Ig…
PlamenaMiteva Oct 5, 2021
68ad335
fix(overlay): wrap class addition in RAF #9882
PlamenaMiteva Oct 7, 2021
caa4c0e
Merge branch 'master' into PMiteva/fix-overlay-animation
wnvko Oct 7, 2021
4b57255
chore(overlay): addressing comments #9882
PlamenaMiteva Oct 8, 2021
4fe6347
Merge branch 'PMiteva/fix-overlay-animation' of https://github.com/Ig…
PlamenaMiteva Oct 8, 2021
72803a5
Merge branch 'master' into PMiteva/fix-overlay-animation
kdinev Oct 8, 2021
1230e1e
test(overlay): fix failing tests#9882
PlamenaMiteva Oct 8, 2021
d5ca76d
Merge branch 'PMiteva/fix-overlay-animation' of https://github.com/Ig…
PlamenaMiteva Oct 8, 2021
3a0844f
chore(overlay): fix lint errors#9882
PlamenaMiteva Oct 8, 2021
5e61d05
test(overlay): fix failing dialog test#9882
PlamenaMiteva Oct 8, 2021
34c8d89
Merge branch 'master' into PMiteva/fix-overlay-animation
Lipata Oct 8, 2021
5e9d93e
Merge branch 'master' into PMiteva/fix-overlay-animation
Lipata 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