add functions to save data to localStorage

matthewglover · Oct 6, 2016 · 90fac36 · 90fac36
1 parent c69805f
commit 90fac36
Show file tree

Hide file tree

Showing 11 changed files with 112 additions and 41 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 node_modules/*
 public/*
+coverage/*
diff --git a/app/action_creators/index.js b/app/action_creators/index.js
@@ -1,7 +1,14 @@
+// @flow
 /* eslint-disable import/prefer-default-export */
 import { UPDATE_AUTH_STATUS } from '../action_types';
 
-export const updateAuthStatus = (isAuthenticated) =>
+type updateAuthAction = {
+  type: string,
+  isAuthenticated: boolean
+}
+
+
+export const updateAuthStatus = (isAuthenticated: boolean): updateAuthAction =>
   ({
     type: UPDATE_AUTH_STATUS,
     isAuthenticated,

diff --git a/app/components/app.js b/app/components/app.js
@@ -1,3 +1,4 @@
+// @flow
 import React, { PropTypes } from 'react';
 import { Provider } from 'react-redux';
 import { Router, Route, IndexRedirect, hashHistory } from 'react-router';
@@ -14,7 +15,7 @@ const redirectIfAuthenticated = (Component, redirectPath) =>
   requiresAuthentication(Component, redirectPath, false);
 
 
-const App = ({ store }) =>
+const App = ({ store }: { store: Object }): Object =>
   <Provider store={store}>
     <Router history={hashHistory}>
       <Route path="/" component={Main}>

diff --git a/app/local_storage.js b/app/local_storage.js
@@ -0,0 +1,23 @@
+// @flow
+import { tryCatch, always } from 'ramda';
+import { logError } from './loggers';
+
+type SavedState = Object;
+
+const dangerouslyLoadState = (): ?SavedState => {
+  const serializedState = window.localStorage.getItem('state');
+
+  return serializedState
+    ? JSON.parse(serializedState)
+    : undefined;
+};
+
+const dangerouslySaveState = (state) => {
+  localStorage.setItem('state', JSON.stringify(state));
+};
+
+export const loadState =
+  tryCatch(dangerouslyLoadState, always(undefined));
+
+export const saveState =
+  tryCatch(dangerouslySaveState, logError);
diff --git a/app/loggers.js b/app/loggers.js
@@ -0,0 +1,6 @@
+/* eslint-disable import/prefer-default-export, no-console */
+
+export const logError = err => {
+  if (process.env.NODE_ENV !== 'development') return;
+  console.log(err);
+};
diff --git a/app/reducers/todos.js b/app/reducers/todos.js
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "flow": "flow; test $? -eq 0 -o $? -eq 2",
     "lint": "eslint './**/*.js'",
     "precommit": "npm run lint && npm run flow && nyc npm test && npm run coverage",
-    "test": "ava --verbose --require babel-register"
+    "test": "ava --verbose --require babel-register --require ./test/helpers/setup_browser_env.js",
+    "test-coverage-report": "nyc npm run test report --reporter=lcov"
   },
   "repository": {
     "type": "git",
@@ -40,14 +41,18 @@
     "flow-bin": "^0.32.0",
     "html-webpack-plugin": "^2.22.0",
     "husky": "^0.11.6",
+    "jsdom": "^9.6.0",
     "json-loader": "^0.5.4",
+    "node-localstorage": "^1.3.0",
     "nyc": "^8.1.0",
+    "sinon": "^1.17.6",
     "style-loader": "^0.13.1",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.0"
   },
   "dependencies": {
     "@matthewglover/hapi-wrapper": "^0.2.4",
+    "lodash": "^4.16.3",
     "material-ui": "^0.15.4",
     "ramda": "^0.22.1",
     "react": "^15.3.1",
@@ -62,5 +67,12 @@
   },
   "engines": {
     "node": "6.2.2"
+  },
+  "nyc": {
+    "exclude": [
+      "node_modules",
+      "test",
+      "app/loggers.js"
+    ]
   }
 }
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -2,7 +2,8 @@
   "extends": "airbnb",
   "parser": "babel-eslint",
   "env": {
-    "node": true
+    "node": true,
+    "browser": true
   },
   "rules": {
     "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],

diff --git a/test/helpers/setup_browser_env.js b/test/helpers/setup_browser_env.js
@@ -0,0 +1,9 @@
+import { LocalStorage } from 'node-localstorage';
+import { jsdom } from 'jsdom';
+
+
+global.localStorage = new LocalStorage('');
+global.document = jsdom('<body></body>');
+
+global.window = document.defaultView;
+global.window.localStorage = global.localStorage;
diff --git a/test/local_storage.test.js b/test/local_storage.test.js
@@ -0,0 +1,46 @@
+import test, { afterEach } from 'ava';
+import sinon from 'sinon';
+import { loadState, saveState } from '../app/local_storage';
+
+const testData = { test: 'It works!' };
+const testPayload = JSON.stringify(testData);
+const setItemStub = sinon.stub();
+const getItemStub = sinon.stub();
+
+
+localStorage.getItem = getItemStub;
+localStorage.setItem = setItemStub;
+
+
+afterEach(() => {
+  setItemStub.reset();
+  getItemStub.reset();
+});
+
+test('loadState returns the payload', (t) => {
+  getItemStub.returns(testPayload);
+  t.deepEqual(loadState(), testData);
+});
+
+test('loadState returns undefined if no state found', (t) => {
+  getItemStub.returns(null);
+  t.is(loadState(), undefined);
+});
+
+test('loadState returns undefined if error in serializing JSON or accessing localStorage', (t) => {
+  getItemStub.throws(new Error());
+  t.is(loadState(), undefined);
+});
+
+test('saveState saves the payload to localStorage', (t) => {
+  saveState(testData);
+  t.plan(2);
+  t.true(setItemStub.called);
+  t.is(setItemStub.lastCall.args[1], testPayload);
+});
+
+test('saveState returns undefined if error in parsing JSON or accessing localStorage', (t) => {
+  setItemStub.throws(new Error());
+  saveState(testData);
+  t.is(saveState(), undefined);
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const { HotModuleReplacementPlugin } = require('webpack');
+const { HotModuleReplacementPlugin, DefinePlugin } = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
@@ -26,6 +26,7 @@ module.exports = {
   },
 
   plugins: [
+    new DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('development') } }),
     new HtmlWebpackPlugin({ template: `${__dirname}/app/index.tmpl.html` }),
     new HotModuleReplacementPlugin(),
   ],