From 7b2f626b92b84f78ec69aa891fb99d800a5d04b4 Mon Sep 17 00:00:00 2001
From: Jimmy Jia <tesrin@gmail.com>
Date: Thu, 2 Apr 2020 03:13:36 -0400
Subject: [PATCH] feat: Support padding in transitionEnd (#96)

* feat: Support padding in transitionEnd

* fix tests
---
 README.md            |  2 +-
 src/transitionEnd.ts | 16 ++++++----------
 test/transition.js   | 31 +++++++++++++++++++++++++++----
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 0310d64..1ae4dd1 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,7 @@ require('dom-helpers/css')(node, { width: '40px' })
   - `style(element, propName)` or `style(element, objectOfPropValues)`
   - `getComputedStyle(element)` -> `getPropertyValue(name)`
   - `animate(node, properties, duration, easing, callback)` programmatically start css transitions
-  - `transitionEnd(node, handler, [duration])` listens for transition end, and ensures that the handler if called even if the transition fails to fire its end event. Will attempt to read duration from the element, otherwise one can be provided
+  - `transitionEnd(node, handler, [duration], [padding])` listens for transition end, and ensures that the handler if called even if the transition fails to fire its end event. Will attempt to read duration from the element, otherwise one can be provided
   - `addEventListener(node, eventName, handler, [options])`:
   - `removeEventListener(node, eventName, handler, [options])`:
   - `listen(node, eventName, handler, [options])`: wraps `addEventlistener` and returns a function that calls `removeEventListener` for you
diff --git a/src/transitionEnd.ts b/src/transitionEnd.ts
index 4547186..2a3f6fa 100644
--- a/src/transitionEnd.ts
+++ b/src/transitionEnd.ts
@@ -1,12 +1,9 @@
-import canUseDOM from './canUseDOM'
 import css from './css'
 import listen from './listen'
 
 export type Listener = (this: HTMLElement, ev: TransitionEvent) => any
 
-export const TRANSITION_SUPPORTED = canUseDOM && 'ontransitionend' in window
-
-export function parseDuration(node: HTMLElement) {
+function parseDuration(node: HTMLElement) {
   const str = css(node, 'transitionDuration') || ''
 
   const mult = str.indexOf('ms') === -1 ? 1000 : 1
@@ -45,20 +42,19 @@ function emulateTransitionEnd(
   }
 }
 
-function transitionEnd(
+export default function transitionEnd(
   element: HTMLElement,
   handler: Listener,
-  duration?: number
+  duration?: number | null,
+  padding?: number
 ) {
   if (duration == null) duration = parseDuration(element) || 0
-  const removeEmulate = emulateTransitionEnd(element, duration)
+  const removeEmulate = emulateTransitionEnd(element, duration, padding)
 
-  const remove = listen(element, 'transitionend', handler);
+  const remove = listen(element, 'transitionend', handler)
 
   return () => {
     removeEmulate()
     remove()
   }
 }
-
-export default transitionEnd
diff --git a/test/transition.js b/test/transition.js
index c7e32fe..7fc15a5 100644
--- a/test/transition.js
+++ b/test/transition.js
@@ -1,15 +1,38 @@
-const { parseDuration } = require('../src/transitionEnd')
+const transitionEnd = require('../src/transitionEnd')
+
+describe('transitionEnd', () => {
+  let clock
+
+  beforeEach(() => {
+    clock = sinon.useFakeTimers()
+  })
+
+  afterEach(() => {
+    clock.restore()
+  })
 
-describe('Transition helpers', () => {
   it('should parse duration from node property', () => {
     const el = document.createElement('div')
 
     el.style.transitionDuration = '1.4s'
+    const handler1 = sinon.spy()
+    transitionEnd(el, handler1)
+
+    clock.tick(1300)
+    expect(handler1.callCount).to.equal(0)
+    expect(handler1).to.not.be.called
 
-    expect(parseDuration(el)).to.equal(1400)
+    clock.tick(200)
+    expect(handler1.callCount).to.equal(1)
 
     el.style.transitionDuration = '500ms'
+    const handler2 = sinon.spy()
+    transitionEnd(el, handler2)
+
+    clock.tick(400)
+    expect(handler2.callCount).to.equal(0)
 
-    expect(parseDuration(el)).to.equal(500)
+    clock.tick(200)
+    expect(handler2.callCount).to.equal(1)
   })
 })