added tests

vycoder · vycoder · commit 93f527e3ee9a · 2018-10-07T22:35:35.000+08:00
- setup jest
  - implemented general tests
  - tested non-direction specific cases
diff --git a/.npmignore b/.npmignore
@@ -5,5 +5,6 @@ src
 rollup.config.js
 
 # tests
-test
-coverage
+tests
+coverage
+jest.config.js
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  "roots": [
+    "<rootDir>/tests"
+  ]
+}
diff --git a/lib/vue-animate-onscroll.cjs.js b/lib/vue-animate-onscroll.cjs.js
diff --git a/lib/vue-animate-onscroll.es.js b/lib/vue-animate-onscroll.es.js
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
   "scripts": {
     "clean": "rimraf lib",
     "build": "npm run clean && rollup --config rollup.config.js",
-    "deploy": "npm build && npm version patch && npm publish"
+    "test": "npm run build && jest",
+    "deploy": "npm run test && npm version patch && npm publish"
   },
   "author": "yev",
   "repository": {
@@ -24,6 +25,7 @@
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
+    "jest": "^23.6.0",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.4",
     "rollup-plugin-terser": "^3.0.0"
diff --git a/src/scroll-animate.js b/src/scroll-animate.js
@@ -12,9 +12,10 @@ export default () => {
   const applyAnimationClass = (el, current, newClass) => el.className = `${current} ${(newClass || '')}`
 
   return {
+    isInView: isInScrollView,
     run(el, {value: params, modifiers}, {isUpwards, currentClassName}) {
 
-      if(!isInScrollView(el.getBoundingClientRect())) {
+      if(!this.isInView(el.getBoundingClientRect())) {
         if (modifiers.repeat && isDirectionAgnostic(params)) {
           return applyAnimationClass(el, currentClassName)
         }
diff --git a/tests/scroll-animate.test.js b/tests/scroll-animate.test.js
@@ -0,0 +1,71 @@
+const { ScrollAnimate } = require('../lib/vue-animate-onscroll.cjs')
+const createFixture = require('./utils')
+
+describe('ScrollAnimate', function() {
+  let scrollAnimate = null
+  
+  beforeEach(() => scrollAnimate = ScrollAnimate() )
+
+  describe('General tests', () => {
+    test('should not remove existing classes', () => {
+      const currentClassName = 'default'
+      const animationClass = 'flip'
+      const fixture = createFixture(scrollAnimate, {
+        currentClassName,
+        animationClass,
+        isUpwards: true
+      })
+      fixture.run(true)
+      expect(fixture.getClassName()).not.toBeNull()
+      expect(fixture.getClassNames()).toContain(currentClassName)
+    })
+  })
+
+  describe('Non-direction specific', () => {
+
+    const animationClass = 'flip'
+
+    test('should add animation classes', () => {
+      const fixture = createFixture(scrollAnimate, {
+        animationClass,
+        isUpwards: false
+      })
+      fixture.run(true)
+      expect(fixture.getClassName()).toEqual(animationClass)
+    })
+
+    test('should toggle animation when repeat is on', () => {
+      const fixture = createFixture(scrollAnimate, {
+        animationClass,
+        isUpwards: false,
+        repeat: true
+      })
+      fixture.run(true)
+      expect(fixture.getClassName()).toEqual(animationClass)
+      fixture.run(false)
+      expect(fixture.getClassName()).toBeFalsy()
+      fixture.run(true)
+      expect(fixture.getClassName()).toEqual(animationClass)
+    })
+    
+    test('should not toggle animation when repeat is off', () => {
+      const fixture = createFixture(scrollAnimate, {
+        animationClass,
+        isUpwards: false,
+        repeat: false
+      })
+      fixture.run(true)
+      expect(fixture.getClassName()).toEqual(animationClass)
+      fixture.run(false)
+      expect(fixture.getClassName()).toEqual(animationClass)
+      fixture.run(true)
+      expect(fixture.getClassName()).toEqual(animationClass)
+      fixture.run(false)
+      fixture.run(true)
+      fixture.run(false)
+      expect(fixture.getClassName()).toEqual(animationClass)
+    })
+
+  })
+  
+})
diff --git a/tests/utils.js b/tests/utils.js
@@ -0,0 +1,24 @@
+const createFixture = (instance, {  currentClassName = '',
+                                    animationClass,
+                                    isUpwards,
+                                    repeat = false }) => {
+  return {
+    el: {
+      className: currentClassName,
+      getBoundingClientRect(){}
+    },
+    binding: {
+      value: animationClass,
+      modifiers: {repeat}
+    },
+    state: { isUpwards, currentClassName },
+    getClassName: function() { return this.el.className.trim() },
+    getClassNames: function() { return this.getClassName().split(' ') },
+    run: function(isInView) {
+      instance.isInView = () => isInView
+      instance.run(this.el, this.binding, this.state)
+    }
+  }
+}
+
+module.exports = createFixture
diff --git a/yarn.lock b/yarn.lock
