fix(animator): fix using aliases in 'enter' and 'leave', added tests

aurelia · Feb 6, 2017 · 1db99bc · 1db99bc
1 parent 12d820f
commit 1db99bc
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 27 deletions.
diff --git a/src/animator.js b/src/animator.js
@@ -322,7 +322,7 @@ export class VelocityAnimator {
       break;
 
     default:
-      if (!this.effects[name]) throw new Error(`${name} animation is not supported.`);
+      if (!this.effects[this.resolveEffectAlias(name)]) throw new Error(`${name} animation is not supported.`);
     }
 
     let opts = Object.assign({}, this.options, attrOpts, options, overrides);

diff --git a/test/enter.spec.js b/test/enter.spec.js
@@ -42,7 +42,21 @@ describe('animator-velocity', () => {
     });
 
     it('can use aliases', (done) => {
-      animator.enter(elem).then(()=> {
+      animator.registerEffect(':fadeInAlias', 'fadeIn');
+      animator.enter(elem, ':fadeInAlias').then(() => {
+        expect(elem.style.opacity).toBe('1');
+        done();
+      });
+    });
+
+    it('can use custom effects', (done) => {
+      const customEffect = {
+        defaultDuration: 50,
+        calls: [ [{ opacity: [1, 0] }, 1] ]
+      };
+
+      animator.registerEffect('customFadeIn', customEffect);
+      animator.enter(elem, 'customFadeIn').then(() => {
         expect(elem.style.opacity).toBe('1');
         done();
       });
@@ -64,19 +78,20 @@ describe('animator-velocity', () => {
       document.removeEventListener(animationEvent.enterBegin, l1, false);
     });
 
-    /*it('publishes an enterBegin and enterDone event when using custom effects', (done) => {
-     let enterBeginCalled = false, enterDoneCalled = false;
-     let l1 = document.addEventListener(animationEvent.enterBegin, (payload) => enterBeginCalled = true),
-     l2 = document.addEventListener(animationEvent.enterDone, () => enterDoneCalled = true);
+    it('publishes an enterBegin and enterDone event when using custom effects', (done) => {
+      let enterBeginCalled = false;
+      let enterDoneCalled = false;
+      let l1 = document.addEventListener(animationEvent.enterBegin, (payload) => enterBeginCalled = true);
+      let l2 = document.addEventListener(animationEvent.enterDone, () => enterDoneCalled = true);
 
-     animator.enter(elem,'fadeIn').then( () => {
-     expect(enterDoneCalled).toBe(true);
-     document.removeEventListener(animationEvent.enterDone, l2, false);
-     done();
-     });
+      animator.enter(elem, 'fadeIn').then(() => {
+        expect(enterDoneCalled).toBe(true);
+        document.removeEventListener(animationEvent.enterDone, l2, false);
+        done();
+      });
 
-     expect(enterBeginCalled).toBe(true);
-     document.removeEventListener(animationEvent.enterBegin, l1, false);
-     });*/
+      expect(enterBeginCalled).toBe(true);
+      document.removeEventListener(animationEvent.enterBegin, l1, false);
+    });
   });
 });
diff --git a/test/leave.spec.js b/test/leave.spec.js
@@ -42,7 +42,21 @@ describe('animator-velocity', () => {
     });
 
     it('can use aliases', (done) => {
-      animator.leave(elem).then(()=> {
+      animator.registerEffect(':fadeOutAlias', 'fadeOut');
+      animator.leave(elem, ':fadeOutAlias').then(()=> {
+        expect(elem.style.opacity).toBe('0');
+        done();
+      });
+    });
+
+    it('can use custom effects', (done) => {
+      const customEffect = {
+        defaultDuration: 50,
+        calls: [ [{ opacity: [0, 1] }, 1] ]
+      };
+
+      animator.registerEffect('customFadeOut', customEffect);
+      animator.leave(elem, 'customFadeOut').then(()=> {
         expect(elem.style.opacity).toBe('0');
         done();
       });
@@ -64,19 +78,20 @@ describe('animator-velocity', () => {
       document.removeEventListener(animationEvent.leaveBegin, l1, false);
     });
 
-    /*it('publishes an leaveBegin and leaveDone event when using custom effects', (done) => {
-     let leaveBeginCalled = false, leaveDoneCalled = false;
-     let l1 = document.addEventListener(animationEvent.leaveBegin, (payload) => leaveBeginCalled = true),
-     l2 = document.addEventListener(animationEvent.leaveDone, () => leaveDoneCalled = true);
+    it('publishes an leaveBegin and leaveDone event when using custom effects', (done) => {
+      let leaveBeginCalled = false;
+      let leaveDoneCalled = false;
+      let l1 = document.addEventListener(animationEvent.leaveBegin, (payload) => leaveBeginCalled = true);
+      let l2 = document.addEventListener(animationEvent.leaveDone, () => leaveDoneCalled = true);
 
-     animator.leave(elem,'fadeOut').then( () => {
-     expect(leaveDoneCalled).toBe(true);
-     document.removeEventListener(animationEvent.leaveDone, l2, false);
-     done();
-     });
+      animator.leave(elem, 'fadeIn').then(() => {
+        expect(leaveDoneCalled).toBe(true);
+        document.removeEventListener(animationEvent.leaveDone, l2, false);
+        done();
+      });
 
-     expect(leaveBeginCalled).toBe(true);
-     document.removeEventListener(animationEvent.leaveBegin, l1, false);
-     });*/
+      expect(leaveBeginCalled).toBe(true);
+      document.removeEventListener(animationEvent.leaveBegin, l1, false);
+    });
   });
 });