Add ava and prettier; add unlisten

.babelrc

@@ -0,0 +1,5 @@
+{
+	"presets": [
+		"babel-preset-latest"
+	]
+}

README.md

@@ -101,8 +101,6 @@ Ideas for future development
 ---
 
 * uglify build
-* unlisten call
-* tests, thoughts on how to test this would be appreciated
 * stable API once more feedback from community
 * other special measurements? e.g. "is actual phone", "has touch", …
 * a collection of breakpoints/queries?

package.json

@@ -1,11 +1,14 @@
 {
   "name": "redux-mediaquery",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Manage your responsive layout via Redux",
   "main": "lib/media-query-tracker.js",
   "scripts": {
-    "build": "babel src --presets babel-preset-es2015 --out-dir lib",
-    "prepublish": "npm run build"
+    "build": "babel src --presets babel-preset-latest --out-dir lib",
+    "prepublish": "npm run build",
+    "prettify": "prettier --use-tabs --no-semi --single-quote --trailing-comma es5 --no-bracket-spacing --write src/**/*.js",
+    "test": "ava",
+    "test-watch": "ava --watch"
   },
   "repository": {
     "type": "git",
@@ -23,8 +26,17 @@
     "url": "https://github.com/Yaska/redux-mediaquery/issues"
   },
   "homepage": "https://github.com/Yaska/redux-mediaquery#readme",
+  "ava": {
+    "babel": "inherit",
+    "require": [
+      "babel-register"
+    ]
+  },
   "devDependencies": {
+    "ava": "^0.19.1",
     "babel-cli": "^6.9.0",
-    "babel-preset-es2015": "^6.9.0"
+    "babel-preset-latest": "^6.24.1",
+    "babel-register": "^6.24.1",
+    "prettier": "^1.3.1"
   }
 }

src/media-query-tracker.js

@@ -15,26 +15,36 @@ export function reducer(state = {}, action) {
 export function mediaChanged(data) {
 	return {
 		type: MEDIA_CHANGED,
-		data
+		data,
 	}
 }
 
+// Cleanup
+const unlisteners = []
+export function unlisten() {
+	unlisteners.forEach(fn => {
+		fn()
+	})
+}
+
+// Handlers
 let trackInnerWidth = false
 let trackInnerHeight = false
-let onResize
-const getSizes = (data) => {
+const getSizes = data => {
 	if (trackInnerWidth) {
 		data.innerWidth = global.innerWidth
 	}
 	if (trackInnerHeight) {
 		data.innerHeight = global.innerHeight
 	}
 }
+let onResize
 const makeOnResize = dispatch => () => {
 	const data = {}
 	getSizes(data)
 	dispatch(mediaChanged(data))
 }
+
 function trackMediaQuery(label, query, dispatch, initData) {
 	// special queries
 	if (label === 'innerWidth' || label === 'innerHeight') {
@@ -48,17 +58,24 @@ function trackMediaQuery(label, query, dispatch, initData) {
 			onResize = makeOnResize(dispatch)
 			if (global.addEventListener) {
 				global.addEventListener('resize', onResize, true)
+				unlisteners.push(() =>
+					global.removeEventListener('resize', onResize, true)
+				)
 			}
 		}
 		getSizes(initData)
 	}
 
 	const mq = global.matchMedia(query)
 
-	const listener = () => dispatch(mediaChanged({
-		[label]: mq.matches
-	}))
+	const listener = () =>
+		dispatch(
+			mediaChanged({
+				[label]: mq.matches,
+			})
+		)
 	mq.addListener(listener)
+	unlisteners.push(() => mq.removeListener(listener))
 
 	initData[label] = mq.matches
 	return

src/media-query-tracker.test.js

@@ -0,0 +1,37 @@
+import test from 'ava'
+import {
+	reducer,
+	mediaChanged,
+	mediaQueryTracker,
+	unlisten,
+} from './media-query-tracker'
+
+test('reducer works', t => {
+	t.deepEqual(reducer({}, mediaChanged({innerHeight: 123})), {
+		innerHeight: 123,
+	})
+})
+
+test('reducer keeps other data', t => {
+	t.deepEqual(reducer({foo: 3}, mediaChanged({innerHeight: 123})), {
+		foo: 3,
+		innerHeight: 123,
+	})
+})
+
+test('mediaQueryTracker works outside browser', t => {
+	const dispatch = () => {}
+	let unlisten
+	t.notThrows(() => {
+		unlisten = mediaQueryTracker({
+			isPhone: 'screen and (max-width: 767px)',
+		})
+	}, dispatch)
+	t.notThrows(unlisten)
+})
+
+// TODO create redux store; mock matchmedia and addEventListener
+test.todo('calls matchMedia if needed')
+test.todo('calls addEventListener if needed')
+test.todo('unlisten unlistens')
+test.todo('mediaQueryTracker works as thunking action')