Add CSSTransition tests; update Transition tests

vrimar · Dec 7, 2017 · cbf89b4 · cbf89b4
1 parent 14d1234
commit cbf89b4
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 38 deletions.
diff --git a/test/CSSTransition.spec.ts b/test/CSSTransition.spec.ts
@@ -0,0 +1,86 @@
+import * as m from 'mithril';
+import * as assert from 'assert';
+import { CSSTransition } from '../src';
+
+const transitionDuration = 100;
+
+describe('CSSTransition', () => {
+  beforeEach(() => m.mount(document.body, null));
+
+  it('handles entering state/callbacks', (done) => {
+    let count = 0;
+    let transition = null;
+
+    let container = {
+      view() {
+        transition = m(CSSTransition, {
+          content: m(''),
+          isVisible: true,
+          onEnter: (node: HTMLElement) => {
+            count++;
+            assert(node.classList.contains('fade-enter'));
+          },
+          onEntering: (node: HTMLElement) => {
+            count++;
+            assert(node.classList.contains('fade-enter'));
+            assert(node.classList.contains('fade-enter-active'));
+          },
+          onEntered: (node: HTMLElement) => {
+            count++;
+            assert.equal(node.classList.length, 0);
+            assert.equal(count, 3);
+            done();
+          },
+          transitionClass: 'fade',
+          timeout: transitionDuration
+        });
+        return transition;
+      }
+    }
+
+    const node = document.createElement('div');
+    document.body.appendChild(node);
+    m.mount(node, container);
+  });
+
+  it('handles exiting state/callbacks', (done) => {
+    let count = 0;
+    let transition = null;
+
+    let container = {
+      isVisible: true,
+      view(vnode) {
+        transition = m(CSSTransition, {
+          isVisible: container.isVisible,
+          content: m(''),
+          onEntered: () => {
+            container.isVisible = false;
+            m.redraw();
+          },
+          onExit: (node: HTMLElement) => {
+            count++;
+            assert(node.classList.contains('fade-exit'));
+          },
+          onExiting: (node: HTMLElement) => {
+            count++;
+            assert(node.classList.contains('fade-exit'));
+            assert(node.classList.contains('fade-exit-active'));
+          },
+          onExited: (node: HTMLElement) => {
+            count++;
+            assert.equal(node.classList.length, 0);
+            assert.equal(count, 3);
+            done();
+          },
+          timeout: transitionDuration,
+          transitionClass: 'fade'
+        });
+        return transition;
+      }
+    };
+
+    const node = document.createElement('div');
+    document.body.appendChild(node);
+    m.mount(node, container);
+  });
+});
diff --git a/test/Transition.spec.ts b/test/Transition.spec.ts
@@ -1,62 +1,57 @@
 import * as m from 'mithril';
 import * as assert from 'assert';
 import { Transition, TransitionState } from '../src';
-import * as o from 'ospec';
-import { setTimeout } from 'timers';
 
 const transitionDuration = 100;
 
 describe('Transition', () => {
-  let transition;
-  const root = {
-    transition: null,
-    view() {
-      this.transition = transition;
-      return transition;
-    }
-  };
-
-  beforeEach(() => {
-    m.mount(document.body, null);
-    transition = undefined;
-  })
+  beforeEach(() => m.mount(document.body, null));
 
   it('handles entering state/callbacks', (done) => {
     let count = 0;
+    let transition = null;
 
-    transition = m(Transition, {
-      isVisible: true,
-      onEnter: () => {
-        count++;
-        assert.equal(transition.state.status, TransitionState.EXITED);
-      },
-      onEntering: () => {
-        count++;
-        assert.equal(transition.state.status, TransitionState.ENTERING);
-      },
-      onEntered: () => {
-        count++;
-        assert.equal(transition.state.status, TransitionState.ENTERED);
-        assert.equal(count, 3);
-        done();
-      },
-      timeout: transitionDuration
-    });
+    let container = {
+      view() {
+        transition = m(Transition, {
+          isVisible: true,
+          onEnter: () => {
+            count++;
+            assert.equal(transition.state.status, TransitionState.EXITED);
+          },
+          onEntering: () => {
+            count++;
+            assert.equal(transition.state.status, TransitionState.ENTERING);
+          },
+          onEntered: () => {
+            count++;
+            assert.equal(transition.state.status, TransitionState.ENTERED);
+            assert.equal(count, 3);
+            done();
+          },
+          timeout: transitionDuration
+        });
+        return m('', transition);
+      }
+    }
 
-    m.mount(document.body, root);
+    m.mount(document.body, container);
   });
 
   it('handles exiting state/callbacks', (done) => {
     let count = 0;
+    let transition = null;
 
-    const container = {
+    let container = {
       isVisible: true,
       view(vnode) {
         transition = m(Transition, {
           isVisible: container.isVisible,
           onEntered: () => {
-            container.isVisible = false;
-            m.redraw();
+            if (container.isVisible) {
+              container.isVisible = false;
+              m.redraw();
+            }
           },
           onExit: () => {
             count++;
@@ -74,7 +69,7 @@ describe('Transition', () => {
           },
           timeout: transitionDuration
         });
-        return transition;
+        return m('', [transition]);
       }
     };