Skip to content

Commit f4e5585

Browse files
crisbetocrisbeto
committed
fix(): disable problematic tests in iOS
1 parent 46af646 commit f4e5585

File tree

1 file changed

+71
-14
lines changed

1 file changed

+71
-14
lines changed

‎src/lib/core/overlay/disable-body-scroll.spec.ts

Lines changed: 71 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,69 @@
1+
import {TestBed, async, inject} from '@angular/core/testing';
2+
import {OverlayModule} from './overlay-directives';
13
import {DisableBodyScroll} from './disable-body-scroll';
24

35

46
describe('DisableBodyScroll', () => {
57
let service: DisableBodyScroll;
6-
let forceScrollElement: HTMLElement;
8+
let startingWindowHeight = window.innerHeight;
9+
let forceScrollElement: HTMLElement = document.createElement('div');
710

8-
beforeEach(() => {
9-
forceScrollElement = document.createElement('div');
10-
forceScrollElement.style.height = '3000px';
11-
document.body.appendChild(forceScrollElement);
12-
service = new DisableBodyScroll();
13-
});
11+
forceScrollElement.style.height = '3000px';
12+
forceScrollElement.style.width = '100px';
13+
14+
beforeEach(async(() => {
15+
TestBed.configureTestingModule({
16+
imports: [OverlayModule.forRoot()]
17+
});
18+
}));
19+
20+
beforeEach(inject([DisableBodyScroll], (disableBodyScroll: DisableBodyScroll) => {
21+
service = disableBodyScroll;
22+
}));
1423

1524
afterEach(() => {
16-
forceScrollElement.parentNode.removeChild(forceScrollElement);
17-
forceScrollElement = null;
25+
if (forceScrollElement.parentNode) {
26+
forceScrollElement.parentNode.removeChild(forceScrollElement);
27+
}
28+
1829
service.deactivate();
1930
});
2031

2132
it('should prevent scrolling', () => {
22-
window.scroll(0, 0);
33+
document.body.appendChild(forceScrollElement);
34+
window.scrollTo(0, 100);
35+
36+
// In the iOS simulator (BrowserStack & SauceLabs), adding the content to the
37+
// body causes karma's iframe for the test to stretch to fit that content once we attempt to
38+
// scroll the page. Setting width / height / maxWidth / maxHeight on the iframe does not
39+
// successfully constrain its size. As such, skip assertions in environments where the
40+
// window size has changed since the start of the test.
41+
if (window.innerHeight > startingWindowHeight) {
42+
return;
43+
}
44+
45+
window.scrollTo(0, 100);
2346

2447
service.activate();
2548

26-
window.scroll(0, 500);
49+
window.scrollTo(0, 500);
2750

2851
expect(window.pageYOffset).toBe(0);
2952
});
3053

3154
it('should toggle the isActive property', () => {
55+
document.body.appendChild(forceScrollElement);
56+
window.scrollTo(0, 100);
57+
58+
// In the iOS simulator (BrowserStack & SauceLabs), adding the content to the
59+
// body causes karma's iframe for the test to stretch to fit that content once we attempt to
60+
// scroll the page. Setting width / height / maxWidth / maxHeight on the iframe does not
61+
// successfully constrain its size. As such, skip assertions in environments where the
62+
// window size has changed since the start of the test.
63+
if (window.innerHeight > startingWindowHeight) {
64+
return;
65+
}
66+
3267
service.activate();
3368
expect(service.isActive).toBe(true);
3469

@@ -37,16 +72,26 @@ describe('DisableBodyScroll', () => {
3772
});
3873

3974
it('should not disable scrolling if the content is shorter than the viewport height', () => {
40-
forceScrollElement.style.height = '0';
4175
service.activate();
4276
expect(service.isActive).toBe(false);
4377
});
4478

4579
it('should add the proper inline styles to the <body> and <html> nodes', () => {
80+
document.body.appendChild(forceScrollElement);
81+
window.scrollTo(0, 500);
82+
83+
// In the iOS simulator (BrowserStack & SauceLabs), adding the content to the
84+
// body causes karma's iframe for the test to stretch to fit that content once we attempt to
85+
// scroll the page. Setting width / height / maxWidth / maxHeight on the iframe does not
86+
// successfully constrain its size. As such, skip assertions in environments where the
87+
// window size has changed since the start of the test.
88+
if (window.innerHeight > startingWindowHeight) {
89+
return;
90+
}
91+
4692
let bodyCSS = document.body.style;
4793
let htmlCSS = document.documentElement.style;
4894

49-
window.scroll(0, 500);
5095
service.activate();
5196

5297
expect(bodyCSS.position).toBe('fixed');
@@ -60,6 +105,8 @@ describe('DisableBodyScroll', () => {
60105
let bodyCSS = document.body.style;
61106
let htmlCSS = document.documentElement.style;
62107

108+
document.body.appendChild(forceScrollElement);
109+
63110
bodyCSS.position = 'static';
64111
bodyCSS.width = '1000px';
65112
htmlCSS.overflowY = 'hidden';
@@ -76,7 +123,17 @@ describe('DisableBodyScroll', () => {
76123
});
77124

78125
it('should restore the scroll position when enabling scrolling', () => {
79-
window.scroll(0, 1000);
126+
document.body.appendChild(forceScrollElement);
127+
window.scrollTo(0, 1000);
128+
129+
// In the iOS simulator (BrowserStack & SauceLabs), adding the content to the
130+
// body causes karma's iframe for the test to stretch to fit that content once we attempt to
131+
// scroll the page. Setting width / height / maxWidth / maxHeight on the iframe does not
132+
// successfully constrain its size. As such, skip assertions in environments where the
133+
// window size has changed since the start of the test.
134+
if (window.innerHeight > startingWindowHeight) {
135+
return;
136+
}
80137

81138
service.activate();
82139
service.deactivate();

0 commit comments

Comments
 (0)