fix test on mobile safari

angular · Nov 18, 2016 · 955dd77 · 955dd77
1 parent 3df4e71
commit 955dd77
Showing 1 changed file with 58 additions and 42 deletions.
diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts
@@ -181,52 +181,68 @@ describe('MdRipple', () => {
       expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * expectedRadius, 1);
     });
 
-    it('create ripple with correct position when page is scrolled', () => {
-      let elementTop = 600;
-      let elementLeft = 750;
-      let pageScrollTop = 500;
-      let pageScrollLeft = 500;
-      let left = 50;
-      let top = 75;
-
-      // Add a very large element to make the page scroll
-      let veryLargeElement = document.createElement('div');
-      veryLargeElement.style.width = '4000px';
-      veryLargeElement.style.height = '4000px';
-      document.body.appendChild(veryLargeElement);
-      document.body.scrollTop = pageScrollTop;
-      document.body.scrollLeft = pageScrollLeft;
-      // Firefox
-      document.documentElement.scrollLeft = pageScrollLeft;
-      document.documentElement.scrollTop = pageScrollTop;
-      // Mobile safari
-      window.scrollTo(pageScrollLeft, pageScrollTop);
-
-      rippleElement.style.position = 'absolute';
-      rippleElement.style.left = `${elementLeft}px`;
-      rippleElement.style.top = `${elementTop}px`;
-
-      // Simulate a keyboard-triggered click by setting event coordinates to 0.
-      const clickEvent = createMouseEvent('click', {
-        clientX: left + elementLeft - pageScrollLeft,
-        clientY: top + elementTop - pageScrollTop,
-        screenX: left + elementLeft,
-        screenY: top + elementTop
+    describe('when page is scrolled', () => {
+      var veryLargeElement: HTMLDivElement;
+      var pageScrollTop = 500;
+      var pageScrollLeft = 500;
+
+      beforeEach(() => {
+        // Add a very large element to make the page scroll
+        this.veryLargeElement = document.createElement('div');
+        this.veryLargeElement.style.width = '4000px';
+        this.veryLargeElement.style.height = '4000px';
+        document.body.appendChild(this.veryLargeElement);
+        document.body.scrollTop = pageScrollTop;
+        document.body.scrollLeft = pageScrollLeft;
+        // Firefox
+        document.documentElement.scrollLeft = pageScrollLeft;
+        document.documentElement.scrollTop = pageScrollTop;
+        // Mobile safari
+        window.scrollTo(pageScrollLeft, pageScrollTop);
       });
-      rippleElement.dispatchEvent(clickEvent);
 
-      const expectedRadius = Math.sqrt(250 * 250 + 125 * 125);
-      const expectedLeft = left - expectedRadius;
-      const expectedTop = top - expectedRadius;
-
-      const ripple = <HTMLElement>rippleElement.querySelector('.md-ripple-foreground');
-      expect(pxStringToFloat(ripple.style.left)).toBeCloseTo(expectedLeft, 1);
-      expect(pxStringToFloat(ripple.style.top)).toBeCloseTo(expectedTop, 1);
-      expect(pxStringToFloat(ripple.style.width)).toBeCloseTo(2 * expectedRadius, 1);
-      expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * expectedRadius, 1);
+      afterEach(() => {
+        document.body.removeChild(this.veryLargeElement);
+        document.body.scrollTop = 0;
+        document.body.scrollLeft = 0;
+        // Firefox
+        document.documentElement.scrollLeft = 0;
+        document.documentElement.scrollTop = 0;
+        // Mobile safari
+        window.scrollTo(0, 0);
+      });
 
-      document.body.removeChild(veryLargeElement);
+      it('create ripple with correct position', () => {
+        let elementTop = 600;
+        let elementLeft = 750;
+        let left = 50;
+        let top = 75;
+
+        rippleElement.style.position = 'absolute';
+        rippleElement.style.left = `${elementLeft}px`;
+        rippleElement.style.top = `${elementTop}px`;
+
+        // Simulate a keyboard-triggered click by setting event coordinates to 0.
+        const clickEvent = createMouseEvent('click', {
+          clientX: left + elementLeft - pageScrollLeft,
+          clientY: top + elementTop - pageScrollTop,
+          screenX: left + elementLeft,
+          screenY: top + elementTop
+        });
+        rippleElement.dispatchEvent(clickEvent);
+
+        const expectedRadius = Math.sqrt(250 * 250 + 125 * 125);
+        const expectedLeft = left - expectedRadius;
+        const expectedTop = top - expectedRadius;
+
+        const ripple = <HTMLElement>rippleElement.querySelector('.md-ripple-foreground');
+        expect(pxStringToFloat(ripple.style.left)).toBeCloseTo(expectedLeft, 1);
+        expect(pxStringToFloat(ripple.style.top)).toBeCloseTo(expectedTop, 1);
+        expect(pxStringToFloat(ripple.style.width)).toBeCloseTo(2 * expectedRadius, 1);
+        expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * expectedRadius, 1);
+      });
     });
+
   });
 
   describe('configuring behavior', () => {