Using decorators for static method and tests

wwayne · wwayne · commit 55edb661dfc3 · 2016-06-15T09:39:24.000+08:00
Progress

w
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": ["es2015", "react", "stage-0"],
+  "plugins": ["transform-decorators-legacy"],
 }
diff --git a/Makefile b/Makefile
@@ -4,12 +4,18 @@ EXAMPLE_SRC  = example/src
 STANDALONE   = standalone
 SRC          = src
 DIST         = dist
+TEST         = test/*.test.js
+MOCHA_OPTS   = --compilers js:babel-core/register --require test/setup.js -b --timeout 20000 --reporter spec
 
 lint:
-	@echo linting...
+	@echo Linting...
 	@$(NODE_BIN)/standard --verbose | $(NODE_BIN)/snazzy src/index.js
 
-convertCss:
+test: lint
+	@echo Start testing...
+	@$(NODE_BIN)/mocha $(MOCHA_OPTS) $(TEST)
+
+convertCSS:
 	@echo Converting css...
 	@node bin/transferSass.js
 
@@ -24,7 +30,7 @@ dev:
 	@echo starting dev server...
 	@rm -rf $(EXAMPLE_DIST)
 	@mkdir -p $(EXAMPLE_DIST)
-	@make convertCss
+	@make convertCSS
 	@$(NODE_BIN)/watchify -t babelify $(EXAMPLE_SRC)/index.js -o $(EXAMPLE_DIST)/index.js -dv
 	@$(NODE_BIN)/node-sass $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
 	@$(NODE_BIN)/node-sass -w $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
@@ -44,10 +50,10 @@ deployCSS:
 deploy: lint
 	@echo Deploy...
 	@rm -rf dist && mkdir dist
-	@make convertCss
+	@make convertCSS
 	@make deployCSS
 	@make deployJS
 	@make genStand
 	@echo success!
 
-.PHONY: lint convertCss genStand dev deployJS deployCSS deploy
+.PHONY: lint convertCSS genStand dev deployJS deployCSS deploy
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "react tooltip component",
   "main": "index.js",
   "scripts": {
-    "test": "make lint",
+    "test": "make test",
     "dev": "make start",
     "deploy": "make deploy"
   },
@@ -46,15 +46,26 @@
   },
   "devDependencies": {
     "babel-cli": "^6.5.1",
+    "babel-core": "^6.9.1",
     "babel-eslint": "^4.1.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-runtime": "^6.5.0",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.5.0",
     "babelify": "^7.2.0",
     "browserify": "^13.0.0",
     "browserify-shim": "^3.8.12",
+    "chai": "^3.5.0",
+    "chai-enzyme": "^0.5.0",
+    "cheerio": "^0.20.0",
+    "enzyme": "^2.3.0",
     "http-server": "^0.8.0",
+    "jsdom": "^9.2.1",
+    "mocha": "^2.5.3",
     "node-sass": "^3.3.2",
+    "react-addons-test-utils": "^15.1.0",
+    "sinon": "^1.17.4",
     "snazzy": "^2.0.1",
     "standard": "^5.2.2",
     "tape": "^4.2.0",
diff --git a/src/constant.js b/src/constant.js
@@ -0,0 +1,7 @@
+export default {
+
+  GLOBAL: {
+    HIDE: '__react_tooltip_hide_event',
+    REBUILD: '__react_tooltip_rebuild_event'
+  }
+}
diff --git a/src/decorators/customEvent.js b/src/decorators/customEvent.js
@@ -0,0 +1,66 @@
+/**
+ * Custom events to control showing and hiding of tooltip
+ *
+ * @attributes
+ * - `event` {String}
+ * - `eventOff` {String}
+ */
+
+const checkStatus = function (e) {
+  const {show} = this.state
+  const dataIsCapture = e.currentTarget.getAttribute('data-iscapture')
+  const isCapture = dataIsCapture && dataIsCapture === 'true' || this.state.isCapture
+  const currentItem = e.currentTarget.getAttribute('currentItem')
+
+  if (!isCapture) e.stopPropagation()
+  if (show && currentItem === 'true') {
+    this.hideTooltip(e)
+  } else {
+    e.currentTarget.setAttribute('currentItem', 'true')
+
+    this.showTooltip(e)
+    setUntargetItems(e.currentTarget)
+  }
+}
+
+const setUntargetItems = function (currentTarget) {
+  let targetArray = this.getTargetArray()
+  for (let i = 0; i < targetArray.length; i++) {
+    if (currentTarget !== targetArray[i]) {
+      targetArray[i].setAttribute('currentItem', 'false')
+    } else {
+      targetArray[i].setAttribute('currentItem', 'true')
+    }
+  }
+}
+
+export default function (target) {
+  target.prototype.isCustomEvent = function (ele) {
+    const {event} = this.state
+    return event || ele.getAttribute('data-event')
+  }
+
+  /* Bind listener for custom event */
+  target.prototype.customBindListener = function () {
+    const {event, eventOff} = this.state
+    const dataEvent = event || target.getAttribute('data-event')
+    const dataEventOff = eventOff || target.getAttribute('data-event-off')
+
+    target.removeEventListener(dataEvent, checkStatus)
+    target.addEventListener(dataEvent, checkStatus, false)
+    if (dataEventOff) {
+      target.removeEventListener(dataEventOff, this.hideTooltip)
+      target.addEventListener(dataEventOff, ::this.hideTooltip, false)
+    }
+  }
+
+  /* Unbind listener for custom event */
+  target.prototype.customUnbindListener = function () {
+    const {event, eventOff} = this.state
+    const dataEvent = event || target.getAttribute('data-event')
+    const dataEventOff = eventOff || target.getAttribute('data-event-off')
+
+    target.removeEventListener(dataEvent, checkStatus)
+    if (dataEventOff) target.removeEventListener(dataEventOff, this.hideTooltip)
+  }
+}
diff --git a/src/decorators/staticMethods.js b/src/decorators/staticMethods.js
@@ -0,0 +1,37 @@
+/**
+ * Static methods for react-tooltip
+ */
+import CONSTANT from '../constant'
+
+const dispatchGlobalEvent = (eventName) => {
+  // Compatibale with IE
+  // @see http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work
+  let event
+
+  if (typeof window.Event === 'function') {
+    event = new window.Event(eventName)
+  } else {
+    event = document.createEvent('Event')
+    event.initEvent(eventName, false, true)
+  }
+
+  window.dispatchEvent(event)
+}
+
+export default function (target) {
+  /**
+   * Hide all tooltip
+   * @trigger ReactTooltip.hide()
+   */
+  target.hide = () => {
+    dispatchGlobalEvent(CONSTANT.GLOBAL.HIDE)
+  }
+
+  /**
+   * Rebuild all tooltip
+   * @trigger ReactTooltip.rebuild()
+   */
+  target.rebuild = () => {
+    dispatchGlobalEvent(CONSTANT.GLOBAL.REBUILD)
+  }
+}
diff --git a/src/decorators/windowListener.js b/src/decorators/windowListener.js
@@ -0,0 +1,26 @@
+/**
+ * Events that should be bound to the window
+ */
+import CONSTANT from '../constant'
+
+export default function (target) {
+  target.prototype.bindWindowEvents = function () {
+    // ReactTooltip.hide
+    window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip)
+    window.addEventListener(CONSTANT.GLOBAL.HIDE, ::this.hideTooltip, false)
+
+    // ReactTooltip.rebuild
+    window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild)
+    window.addEventListener(CONSTANT.GLOBAL.REBUILD, ::this.globalRebuild, false)
+
+    // Resize
+    window.removeEventListener('resize', this.onWindowResize)
+    window.addEventListener('resize', ::this.onWindowResize, false)
+  }
+
+  target.prototype.unbindWindowEvents = function () {
+    window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip)
+    window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild)
+    window.removeEventListener('resize', this.onWindowResize)
+  }
+}
diff --git a/src/index.js b/src/index.js
diff --git a/test/globalMethods.test.js b/test/globalMethods.test.js
diff --git a/test/setup.js b/test/setup.js

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`{`
`2`		`- "presets": ["es2015", "react"]`
	`2`	`+ "presets": ["es2015", "react", "stage-0"],`
	`3`	`+ "plugins": ["transform-decorators-legacy"],`
`3`	`4`	`}`