From 28f56a383e9d1ff378e3568a3039e941c7ffb1d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Fri, 6 Sep 2013 16:06:37 -0400 Subject: [PATCH 1/2] fix(ngScenario): provide event parameters as object BREAKING CHANGE: browserTrigger now uses an eventData object instead of direct parameters for mouse events. To migrate, place the `keys`,`x` and `y` parameters inside of an object and place that as the third parameter for the browserTrigger function. --- src/ngScenario/browserTrigger.js | 54 ++++-- test/ngTouch/directive/ngClickSpec.js | 246 +++++++++++++++++++++----- test/ngTouch/directive/ngSwipeSpec.js | 102 +++++++++-- test/ngTouch/swipeSpec.js | 168 +++++++++++++++--- 4 files changed, 471 insertions(+), 99 deletions(-) diff --git a/src/ngScenario/browserTrigger.js b/src/ngScenario/browserTrigger.js index dc7a9916b17c..d1b69a1ddd35 100644 --- a/src/ngScenario/browserTrigger.js +++ b/src/ngScenario/browserTrigger.js @@ -19,16 +19,19 @@ * not specified. * * @param {Object} element Either a wrapped jQuery/jqLite node or a DOMElement - * @param {string} eventType Optional event type. - * @param {Array.=} keys Optional list of pressed keys - * (valid values: 'alt', 'meta', 'shift', 'ctrl') - * @param {number} x Optional x-coordinate for mouse/touch events. - * @param {number} y Optional y-coordinate for mouse/touch events. + * @param {string} eventType Optional event type + * @param {Object=} eventData An optional object which contains additional event data (such as x,y coordinates, keys, etc...) that + * are passed into the event when triggered */ - window.browserTrigger = function browserTrigger(element, eventType, keys, x, y) { + window.browserTrigger = function browserTrigger(element, eventType, eventData) { if (element && !element.nodeName) element = element[0]; if (!element) return; + eventData = eventData || {}; + var keys = eventData.keys; + var x = eventData.x; + var y = eventData.y; + var inputType = (element.type) ? element.type.toLowerCase() : null, nodeName = element.nodeName.toLowerCase(); @@ -86,8 +89,38 @@ } return ret; } else { - var evnt = document.createEvent('MouseEvents'), - originalPreventDefault = evnt.preventDefault, + var evnt; + if(/transitionend/.test(eventType)) { + if(window.WebKitTransitionEvent) { + evnt = new WebKitTransitionEvent(eventType, eventData); + evnt.initEvent(eventType, false, true); + } + else { + evnt = document.createEvent('TransitionEvent'); + evnt.initTransitionEvent(eventType, null, null, null, eventData.elapsedTime); + } + } + else if(/animationend/.test(eventType)) { + if(window.WebKitAnimationEvent) { + evnt = new WebKitAnimationEvent(eventType, eventData); + evnt.initEvent(eventType, false, true); + } + else { + evnt = document.createEvent('AnimationEvent'); + evnt.initAnimationEvent(eventType, null, null, null, eventData.elapsedTime); + } + } + else { + evnt = document.createEvent('MouseEvents'); + x = x || 0; + y = y || 0; + evnt.initMouseEvent(eventType, true, true, window, 0, x, y, x, y, pressed('ctrl'), pressed('alt'), + pressed('shift'), pressed('meta'), 0, element); + } + + if(!evnt) return; + + var originalPreventDefault = evnt.preventDefault, appWindow = element.ownerDocument.defaultView, fakeProcessDefault = true, finalProcessDefault, @@ -100,11 +133,6 @@ return originalPreventDefault.apply(evnt, arguments); }; - x = x || 0; - y = y || 0; - evnt.initMouseEvent(eventType, true, true, window, 0, x, y, x, y, pressed('ctrl'), pressed('alt'), - pressed('shift'), pressed('meta'), 0, element); - element.dispatchEvent(evnt); finalProcessDefault = !(angular['ff-684208-preventDefault'] || !fakeProcessDefault); diff --git a/test/ngTouch/directive/ngClickSpec.js b/test/ngTouch/directive/ngClickSpec.js index 2a11adeebf33..0eccc8f3d04b 100644 --- a/test/ngTouch/directive/ngClickSpec.js +++ b/test/ngTouch/directive/ngClickSpec.js @@ -58,10 +58,18 @@ describe('ngClick (touch)', function() { expect($rootScope.count).toBe(0); time = 10; - browserTrigger(element, 'touchstart', [], 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); time = 900; - browserTrigger(element, 'touchend', [], 10, 10); + browserTrigger(element, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count).toBe(0); })); @@ -74,8 +82,16 @@ describe('ngClick (touch)', function() { expect($rootScope.tapped).toBeUndefined(); - browserTrigger(element, 'touchstart', [], 10, 10); - browserTrigger(element, 'touchend', [], 400, 400); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); + browserTrigger(element, 'touchend',{ + keys: [], + x: 400, + y: 400 + }); expect($rootScope.tapped).toBeUndefined(); })); @@ -88,9 +104,17 @@ describe('ngClick (touch)', function() { expect($rootScope.tapped).toBeUndefined(); - browserTrigger(element, 'touchstart', [], 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); browserTrigger(element, 'touchmove'); - browserTrigger(element, 'touchend', [], 400, 400); + browserTrigger(element, 'touchend',{ + keys: [], + x: 400, + y: 400 + }); expect($rootScope.tapped).toBeUndefined(); })); @@ -104,9 +128,17 @@ describe('ngClick (touch)', function() { var CSS_CLASS = 'ng-click-active'; expect(element.hasClass(CSS_CLASS)).toBe(false); - browserTrigger(element, 'touchstart', 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); expect(element.hasClass(CSS_CLASS)).toBe(true); - browserTrigger(element, 'touchend', 10, 10); + browserTrigger(element, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect(element.hasClass(CSS_CLASS)).toBe(false); expect($rootScope.tapped).toBe(true); })); @@ -135,15 +167,27 @@ describe('ngClick (touch)', function() { // Fire touchstart at 10ms, touchend at 50ms, the click at 300ms. time = 10; - browserTrigger(element, 'touchstart', [], 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); time = 50; - browserTrigger(element, 'touchend', [], 10, 10); + browserTrigger(element, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count).toBe(1); time = 100; - browserTrigger(element, 'click', [], 10, 10); + browserTrigger(element, 'click',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count).toBe(1); })); @@ -169,15 +213,27 @@ describe('ngClick (touch)', function() { expect($rootScope.count2).toBe(0); time = 10; - browserTrigger(element1, 'touchstart', [], 10, 10); + browserTrigger(element1, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); time = 50; - browserTrigger(element1, 'touchend', [], 10, 10); + browserTrigger(element1, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count1).toBe(1); time = 100; - browserTrigger(element2, 'click', [], 10, 10); + browserTrigger(element2, 'click',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count1).toBe(1); expect($rootScope.count2).toBe(0); @@ -203,40 +259,76 @@ describe('ngClick (touch)', function() { expect($rootScope.count2).toBe(0); time = 10; - browserTrigger(element1, 'touchstart', [], 10, 10); + browserTrigger(element1, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); time = 50; - browserTrigger(element1, 'touchend', [], 10, 10); + browserTrigger(element1, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count1).toBe(1); time = 90; // Verify that it is blured so we don't get soft-keyboard element1[0].blur = jasmine.createSpy('blur'); - browserTrigger(element1, 'click', [], 10, 10); + browserTrigger(element1, 'click',{ + keys: [], + x: 10, + y: 10 + }); expect(element1[0].blur).toHaveBeenCalled(); expect($rootScope.count1).toBe(1); time = 100; - browserTrigger(element1, 'touchstart', [], 10, 10); + browserTrigger(element1, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); time = 130; - browserTrigger(element1, 'touchend', [], 10, 10); + browserTrigger(element1, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count1).toBe(2); // Click on other element that should go through. time = 150; - browserTrigger(element2, 'touchstart', [], 100, 120); - browserTrigger(element2, 'touchend', [], 100, 120); - browserTrigger(element2, 'click', [], 100, 120); + browserTrigger(element2, 'touchstart',{ + keys: [], + x: 100, + y: 120 + }); + browserTrigger(element2, 'touchend',{ + keys: [], + x: 100, + y: 120 + }); + browserTrigger(element2, 'click',{ + keys: [], + x: 100, + y: 120 + }); expect($rootScope.count2).toBe(1); // Click event for the element that should be busted. time = 200; - browserTrigger(element1, 'click', [], 10, 10); + browserTrigger(element1, 'click',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count1).toBe(2); expect($rootScope.count2).toBe(1); @@ -253,14 +345,26 @@ describe('ngClick (touch)', function() { expect($rootScope.count).toBe(0); time = 10; - browserTrigger(element1, 'touchstart', [], 10, 10); + browserTrigger(element1, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); time = 50; - browserTrigger(element1, 'touchend', [], 10, 10); + browserTrigger(element1, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count).toBe(1); time = 2700; - browserTrigger(element1, 'click', [], 10, 10); + browserTrigger(element1, 'click',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count).toBe(2); })); @@ -276,15 +380,27 @@ describe('ngClick (touch)', function() { expect($rootScope.count).toBe(0); time = 10; - browserTrigger(element1, 'touchstart', [], 10, 10); + browserTrigger(element1, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); time = 50; - browserTrigger(element1, 'touchend', [], 10, 10); + browserTrigger(element1, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count).toBe(1); time = 2700; - browserTrigger(element1, 'click', [], 10, 10); + browserTrigger(element1, 'click',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.count).toBe(2); })); @@ -319,8 +435,16 @@ describe('ngClick (touch)', function() { $rootScope.disabled = true; $rootScope.$digest(); - browserTrigger(element, 'touchstart', [], 10, 10); - browserTrigger(element, 'touchend', [], 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); + browserTrigger(element, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.event).toBeUndefined(); })); @@ -329,32 +453,64 @@ describe('ngClick (touch)', function() { $rootScope.disabled = false; $rootScope.$digest(); - browserTrigger(element, 'touchstart', [], 10, 10); - browserTrigger(element, 'touchend', [], 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); + browserTrigger(element, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.event).toBeDefined(); })); it('should not trigger click if regular disabled is true', inject(function($rootScope, $compile) { element = $compile('
')($rootScope); - browserTrigger(element, 'touchstart', [], 10, 10); - browserTrigger(element, 'touchend', [], 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); + browserTrigger(element, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.event).toBeUndefined(); })); it('should not trigger click if regular disabled is present', inject(function($rootScope, $compile) { element = $compile('')($rootScope); - browserTrigger(element, 'touchstart', [], 10, 10); - browserTrigger(element, 'touchend', [], 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); + browserTrigger(element, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.event).toBeUndefined(); })); it('should trigger click if regular disabled is not present', inject(function($rootScope, $compile) { element = $compile('
')($rootScope); - browserTrigger(element, 'touchstart', [], 10, 10); - browserTrigger(element, 'touchend', [], 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); + browserTrigger(element, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect($rootScope.event).toBeDefined(); })); @@ -371,8 +527,16 @@ describe('ngClick (touch)', function() { called = true; }); - browserTrigger(element, 'touchstart', [], 10, 10); - browserTrigger(element, 'touchend', [], 10, 10); + browserTrigger(element, 'touchstart',{ + keys: [], + x: 10, + y: 10 + }); + browserTrigger(element, 'touchend',{ + keys: [], + x: 10, + y: 10 + }); expect(called).toEqual(true); })); diff --git a/test/ngTouch/directive/ngSwipeSpec.js b/test/ngTouch/directive/ngSwipeSpec.js index 588a123df6f3..a7869a36639f 100644 --- a/test/ngTouch/directive/ngSwipeSpec.js +++ b/test/ngTouch/directive/ngSwipeSpec.js @@ -35,8 +35,16 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, $rootScope.$digest(); expect($rootScope.swiped).toBeUndefined(); - browserTrigger(element, startEvent, [], 100, 20); - browserTrigger(element, endEvent, [], 20, 20); + browserTrigger(element, startEvent, { + keys : [], + x : 100, + y : 20 + }); + browserTrigger(element, endEvent,{ + keys: [], + x: 20, + y: 20 + }); expect($rootScope.swiped).toBe(true); })); @@ -45,8 +53,16 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, $rootScope.$digest(); expect($rootScope.swiped).toBeUndefined(); - browserTrigger(element, startEvent, [], 20, 20); - browserTrigger(element, endEvent, [], 90, 20); + browserTrigger(element, startEvent,{ + keys: [], + x: 20, + y: 20 + }); + browserTrigger(element, endEvent,{ + keys: [], + x: 90, + y: 20 + }); expect($rootScope.swiped).toBe(true); })); @@ -57,9 +73,21 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect($rootScope.swiped).toBeUndefined(); - browserTrigger(element, startEvent, [], 90, 20); - browserTrigger(element, moveEvent, [], 70, 200); - browserTrigger(element, endEvent, [], 20, 20); + browserTrigger(element, startEvent,{ + keys: [], + x: 90, + y: 20 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 70, + y: 200 + }); + browserTrigger(element, endEvent,{ + keys: [], + x: 20, + y: 20 + }); expect($rootScope.swiped).toBeUndefined(); })); @@ -71,8 +99,16 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect($rootScope.swiped).toBeUndefined(); - browserTrigger(element, startEvent, [], 90, 20); - browserTrigger(element, endEvent, [], 80, 20); + browserTrigger(element, startEvent,{ + keys: [], + x: 90, + y: 20 + }); + browserTrigger(element, endEvent,{ + keys: [], + x: 80, + y: 20 + }); expect($rootScope.swiped).toBeUndefined(); })); @@ -84,8 +120,16 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect($rootScope.swiped).toBeUndefined(); - browserTrigger(element, startEvent, [], 20, 20); - browserTrigger(element, moveEvent, [], 40, 20); + browserTrigger(element, startEvent,{ + keys: [], + x: 20, + y: 20 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 40, + y: 20 + }); expect($rootScope.swiped).toBeUndefined(); })); @@ -97,8 +141,16 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect($rootScope.swiped).toBeUndefined(); - browserTrigger(element, moveEvent, [], 10, 20); - browserTrigger(element, endEvent, [], 90, 20); + browserTrigger(element, moveEvent,{ + keys: [], + x: 10, + y: 20 + }); + browserTrigger(element, endEvent,{ + keys: [], + x: 90, + y: 20 + }); expect($rootScope.swiped).toBeUndefined(); })); @@ -114,8 +166,16 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, eventFired = true; }); - browserTrigger(element, startEvent, [], 100, 20); - browserTrigger(element, endEvent, [], 20, 20); + browserTrigger(element, startEvent,{ + keys: [], + x: 100, + y: 20 + }); + browserTrigger(element, endEvent,{ + keys: [], + x: 20, + y: 20 + }); expect(eventFired).toEqual(true); })); @@ -130,8 +190,16 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, eventFired = true; }); - browserTrigger(element, startEvent, [], 20, 20); - browserTrigger(element, endEvent, [], 100, 20); + browserTrigger(element, startEvent,{ + keys: [], + x: 20, + y: 20 + }); + browserTrigger(element, endEvent,{ + keys: [], + x: 100, + y: 20 + }); expect(eventFired).toEqual(true); })); }); diff --git a/test/ngTouch/swipeSpec.js b/test/ngTouch/swipeSpec.js index 7431f0c19901..435dda8c0109 100644 --- a/test/ngTouch/swipeSpec.js +++ b/test/ngTouch/swipeSpec.js @@ -46,7 +46,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, startEvent, [], 100, 20); + browserTrigger(element, startEvent,{ + keys: [], + x: 100, + y: 20 + }); expect(events.start).toHaveBeenCalled(); @@ -71,7 +75,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, startEvent, [], 100, 20); + browserTrigger(element, startEvent,{ + keys: [], + x: 100, + y: 20 + }); expect(events.start).toHaveBeenCalled(); @@ -79,7 +87,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, moveEvent, [], 140, 20); + browserTrigger(element, moveEvent,{ + keys: [], + x: 140, + y: 20 + }); expect(events.start).toHaveBeenCalled(); expect(events.move).toHaveBeenCalled(); @@ -104,7 +116,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, moveEvent, [], 100, 40); + browserTrigger(element, moveEvent,{ + keys: [], + x: 100, + y: 40 + }); expect(events.start).not.toHaveBeenCalled(); expect(events.move).not.toHaveBeenCalled(); @@ -128,7 +144,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, endEvent, [], 100, 40); + browserTrigger(element, endEvent,{ + keys: [], + x: 100, + y: 40 + }); expect(events.start).not.toHaveBeenCalled(); expect(events.move).not.toHaveBeenCalled(); @@ -152,7 +172,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, startEvent, [], 100, 40); + browserTrigger(element, startEvent,{ + keys: [], + x: 100, + y: 40 + }); expect(events.start).toHaveBeenCalled(); @@ -160,13 +184,41 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, moveEvent, [], 120, 40); - browserTrigger(element, moveEvent, [], 130, 40); - browserTrigger(element, moveEvent, [], 140, 40); - browserTrigger(element, moveEvent, [], 150, 40); - browserTrigger(element, moveEvent, [], 160, 40); - browserTrigger(element, moveEvent, [], 170, 40); - browserTrigger(element, moveEvent, [], 180, 40); + browserTrigger(element, moveEvent,{ + keys: [], + x: 120, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 130, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 140, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 150, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 160, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 170, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 180, + y: 40 + }); expect(events.start).toHaveBeenCalled(); expect(events.move.calls.length).toBe(7); @@ -174,7 +226,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, endEvent, [], 200, 40); + browserTrigger(element, endEvent,{ + keys: [], + x: 200, + y: 40 + }); expect(events.start).toHaveBeenCalled(); expect(events.move.calls.length).toBe(7); @@ -199,7 +255,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, startEvent, [], 100, 40); + browserTrigger(element, startEvent,{ + keys: [], + x: 100, + y: 40 + }); expect(events.start).toHaveBeenCalled(); @@ -207,11 +267,31 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, moveEvent, [], 101, 40); - browserTrigger(element, moveEvent, [], 105, 40); - browserTrigger(element, moveEvent, [], 110, 40); - browserTrigger(element, moveEvent, [], 115, 40); - browserTrigger(element, moveEvent, [], 120, 40); + browserTrigger(element, moveEvent,{ + keys: [], + x: 101, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 105, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 110, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 115, + y: 40 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 120, + y: 40 + }); expect(events.start).toHaveBeenCalled(); expect(events.move.calls.length).toBe(3); @@ -219,7 +299,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, endEvent, [], 200, 40); + browserTrigger(element, endEvent,{ + keys: [], + x: 200, + y: 40 + }); expect(events.start).toHaveBeenCalled(); expect(events.move.calls.length).toBe(3); @@ -244,7 +328,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, startEvent, [], 100, 40); + browserTrigger(element, startEvent,{ + keys: [], + x: 100, + y: 40 + }); expect(events.start).toHaveBeenCalled(); @@ -252,11 +340,31 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.cancel).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, moveEvent, [], 101, 41); - browserTrigger(element, moveEvent, [], 105, 55); - browserTrigger(element, moveEvent, [], 110, 60); - browserTrigger(element, moveEvent, [], 115, 70); - browserTrigger(element, moveEvent, [], 120, 80); + browserTrigger(element, moveEvent,{ + keys: [], + x: 101, + y: 41 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 105, + y: 55 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 110, + y: 60 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 115, + y: 70 + }); + browserTrigger(element, moveEvent,{ + keys: [], + x: 120, + y: 80 + }); expect(events.start).toHaveBeenCalled(); expect(events.cancel).toHaveBeenCalled(); @@ -264,7 +372,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, expect(events.move).not.toHaveBeenCalled(); expect(events.end).not.toHaveBeenCalled(); - browserTrigger(element, endEvent, [], 200, 40); + browserTrigger(element, endEvent,{ + keys: [], + x: 200, + y: 40 + }); expect(events.start).toHaveBeenCalled(); expect(events.cancel).toHaveBeenCalled(); From a048e064037dc5dde2d3beeda07f1c3d29f7d7d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matias=20Niemel=C3=A4?= Date: Fri, 6 Sep 2013 16:09:18 -0400 Subject: [PATCH 2/2] fix(ngAnimate): use browserTrigger with elapsedTime to handle animation events --- src/ngAnimate/animate.js | 2 +- test/ngAnimate/animateSpec.js | 78 +++++++++++++++++------------------ 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/src/ngAnimate/animate.js b/src/ngAnimate/animate.js index d03ff64302fd..34a105e1230b 100644 --- a/src/ngAnimate/animate.js +++ b/src/ngAnimate/animate.js @@ -659,7 +659,7 @@ angular.module('ngAnimate', ['ng']) } function onAnimationProgress(event) { - event.originalEvent.elapsedTime >= totalTime && done(); + (event.elapsedTime || (event.originalEvent && event.originalEvent.elapsedTime)) >= totalTime && done(); } function parseMaxTime(str) { diff --git a/test/ngAnimate/animateSpec.js b/test/ngAnimate/animateSpec.js index 8b88776fc657..466aa741094b 100644 --- a/test/ngAnimate/animateSpec.js +++ b/test/ngAnimate/animateSpec.js @@ -138,7 +138,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-enter')).toBe(true); expect(child.hasClass('ng-enter-active')).toBe(true); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(element, 'transitionend', { elapsedTime: 1 }); } expect(element.contents().length).toBe(1); @@ -154,7 +154,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-leave')).toBe(true); expect(child.hasClass('ng-leave-active')).toBe(true); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); } expect(element.contents().length).toBe(0); @@ -186,7 +186,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-hide-remove')).toBe(true); expect(child.hasClass('ng-hide-remove-active')).toBe(true); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); } expect(child.hasClass('ng-hide-remove')).toBe(false); expect(child.hasClass('ng-hide-remove-active')).toBe(false); @@ -202,7 +202,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-hide-add')).toBe(true); expect(child.hasClass('ng-hide-add-active')).toBe(true); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); } expect(child).toBeHidden(); })); @@ -221,7 +221,7 @@ describe("ngAnimate", function() { expect(child.attr('class')).toContain('ng-enter'); expect(child.attr('class')).toContain('ng-enter-active'); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); //move element.append(after); @@ -230,26 +230,26 @@ describe("ngAnimate", function() { expect(child.attr('class')).toContain('ng-move'); expect(child.attr('class')).toContain('ng-move-active'); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); //hide $animate.addClass(child, 'ng-hide'); expect(child.attr('class')).toContain('ng-hide-add'); expect(child.attr('class')).toContain('ng-hide-add-active'); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); //show $animate.removeClass(child, 'ng-hide'); expect(child.attr('class')).toContain('ng-hide-remove'); expect(child.attr('class')).toContain('ng-hide-remove-active'); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); //leave $animate.leave(child); $rootScope.$digest(); expect(child.attr('class')).toContain('ng-leave'); expect(child.attr('class')).toContain('ng-leave-active'); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); })); it("should not run if animations are disabled", @@ -292,7 +292,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(element.children().length).toBe(1); //still animating - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); } $timeout.flush(2000); $timeout.flush(2000); @@ -309,7 +309,7 @@ describe("ngAnimate", function() { child.addClass('custom-delay ng-hide'); $animate.removeClass(child, 'ng-hide'); if($sniffer.transitions) { - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); } $timeout.flush(2000); @@ -373,7 +373,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if($sniffer.transitions) { - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(element,'transitionend', { elapsedTime: 1 }); } $timeout.flush(2000); $timeout.flush(20000); @@ -416,7 +416,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.animations) { - element.triggerHandler('animationend', { originalEvent: { elapsedTime: 4 } }); + browserTrigger(element,'animationend', { elapsedTime: 4 }); } expect(element).toBeShown(); })); @@ -439,7 +439,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.animations) { - element.triggerHandler('animationend', { originalEvent: { elapsedTime: 6 } }); + browserTrigger(element,'animationend', { elapsedTime: 6 }); } expect(element).toBeShown(); })); @@ -462,7 +462,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.animations) { - element.triggerHandler('animationend', { originalEvent: { elapsedTime: 2 } }); + browserTrigger(element,'animationend', { elapsedTime: 2 }); } expect(element).toBeShown(); })); @@ -487,7 +487,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { - element.triggerHandler('animationend', { originalEvent: { elapsedTime: 10 } }); + browserTrigger(element,'animationend', { elapsedTime: 10 }); } expect(element).toBeShown(); })); @@ -533,7 +533,7 @@ describe("ngAnimate", function() { if($sniffer.animations) { //cleanup some pending animations expect(element.hasClass('ng-hide-add')).toBe(true); expect(element.hasClass('ng-hide-add-active')).toBe(true); - element.triggerHandler('animationend', { originalEvent: { elapsedTime: 2 } }); + browserTrigger(element,'animationend', { elapsedTime: 2 }); } expect(element.hasClass('ng-hide-remove-active')).toBe(false); @@ -566,7 +566,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(element,'transitionend', { elapsedTime: 1 }); } expect(element).toBeShown(); })); @@ -587,9 +587,9 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { expect(element).toBeHidden(); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 2 } }); + browserTrigger(element,'transitionend', { elapsedTime: 1 }); + browserTrigger(element,'transitionend', { elapsedTime: 1 }); + browserTrigger(element,'transitionend', { elapsedTime: 2 }); } expect(element).toBeShown(); })); @@ -620,9 +620,9 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 0 } }); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(element,'transitionend', { elapsedTime: 0 }); + browserTrigger(element,'transitionend', { elapsedTime: 1 }); + browserTrigger(element,'transitionend', { elapsedTime: 1 }); } expect(element).toBeShown(); })); @@ -644,7 +644,7 @@ describe("ngAnimate", function() { $animate.removeClass(element, 'ng-hide'); if ($sniffer.transitions) { - element.triggerHandler('animationend', { originalEvent: { elapsedTime: 10 } }); + browserTrigger(element,'animationend', { elapsedTime: 10 }); } expect(element).toBeShown(); })); @@ -664,7 +664,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(element.hasClass('ng-hide-remove')).toBe(true); expect(element.hasClass('ng-hide-remove-active')).toBe(true); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(element,'transitionend', { elapsedTime: 1 }); } expect(element.hasClass('ng-hide-remove')).toBe(false); expect(element.hasClass('ng-hide-remove-active')).toBe(false); @@ -700,7 +700,7 @@ describe("ngAnimate", function() { if ($sniffer.transitions) { expect(element.hasClass('abc ng-enter')).toBe(true); expect(element.hasClass('abc ng-enter ng-enter-active')).toBe(true); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 22 } }); + browserTrigger(element,'transitionend', { elapsedTime: 22 }); } expect(element.hasClass('abc')).toBe(true); @@ -711,7 +711,7 @@ describe("ngAnimate", function() { if ($sniffer.transitions) { expect(element.hasClass('xyz')).toBe(true); expect(element.hasClass('xyz ng-enter ng-enter-active')).toBe(true); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 11 } }); + browserTrigger(element,'transitionend', { elapsedTime: 11 }); } expect(element.hasClass('xyz')).toBe(true); })); @@ -738,7 +738,7 @@ describe("ngAnimate", function() { expect(element.hasClass('one two ng-enter ng-enter-active')).toBe(true); expect(element.hasClass('one-active')).toBe(false); expect(element.hasClass('two-active')).toBe(false); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 3 } }); + browserTrigger(element,'transitionend', { elapsedTime: 3 }); } expect(element.hasClass('one two')).toBe(true); @@ -887,7 +887,7 @@ describe("ngAnimate", function() { }); if($sniffer.transitions) { - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(element,'transitionend', { elapsedTime: 1 }); } $timeout.flush(); expect(flag).toBe(true); @@ -1025,7 +1025,7 @@ describe("ngAnimate", function() { expect(element.hasClass('klass')).toBe(false); expect(element.hasClass('klass-add')).toBe(true); expect(element.hasClass('klass-add-active')).toBe(true); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 3 } }); + browserTrigger(element,'transitionend', { elapsedTime: 3 }); } //this cancels out the older animation @@ -1039,7 +1039,7 @@ describe("ngAnimate", function() { expect(element.hasClass('klass-add-active')).toBe(false); expect(element.hasClass('klass-remove')).toBe(true); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 3 } }); + browserTrigger(element,'transitionend', { elapsedTime: 3 }); } $timeout.flush(); @@ -1097,7 +1097,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(element.hasClass('klass-add')).toBe(true); expect(element.hasClass('klass-add-active')).toBe(true); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 11 } }); + browserTrigger(element,'transitionend', { elapsedTime: 11 }); expect(element.hasClass('klass-add')).toBe(false); expect(element.hasClass('klass-add-active')).toBe(false); } @@ -1111,7 +1111,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(element.hasClass('klass-remove')).toBe(true); expect(element.hasClass('klass-remove-active')).toBe(true); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 11 } }); + browserTrigger(element,'transitionend', { elapsedTime: 11 }); expect(element.hasClass('klass-remove')).toBe(false); expect(element.hasClass('klass-remove-active')).toBe(false); } @@ -1146,7 +1146,7 @@ describe("ngAnimate", function() { expect(element.hasClass('one-add-active')).toBe(true); expect(element.hasClass('two-add-active')).toBe(true); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 7 } }); + browserTrigger(element,'transitionend', { elapsedTime: 7 }); expect(element.hasClass('one-add')).toBe(false); expect(element.hasClass('one-add-active')).toBe(false); @@ -1190,7 +1190,7 @@ describe("ngAnimate", function() { expect(element.hasClass('one-remove-active')).toBe(true); expect(element.hasClass('two-remove-active')).toBe(true); - element.triggerHandler('transitionend', { originalEvent: { elapsedTime: 9 } }); + browserTrigger(element,'transitionend', { elapsedTime: 9 }); expect(element.hasClass('one-remove')).toBe(false); expect(element.hasClass('one-remove-active')).toBe(false); @@ -1240,7 +1240,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-enter')).toBe(true); expect(child.hasClass('ng-enter-active')).toBe(true); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); } expect(child.hasClass('ng-enter')).toBe(false); @@ -1262,7 +1262,7 @@ describe("ngAnimate", function() { if($sniffer.transitions) { expect(child.hasClass('ng-enter')).toBe(true); expect(child.hasClass('ng-enter-active')).toBe(true); - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 8 } }); + browserTrigger(child,'transitionend', { elapsedTime: 8 }); } expect(child.hasClass('ng-enter')).toBe(false); expect(child.hasClass('ng-enter-active')).toBe(false); @@ -1314,7 +1314,7 @@ describe("ngAnimate", function() { $timeout.flush(10); if($sniffer.transitions) { - child.triggerHandler('transitionend', { originalEvent: { elapsedTime: 1 } }); + browserTrigger(child,'transitionend', { elapsedTime: 1 }); } expect(child.hasClass('i-was-animated')).toBe(true);