readme and circleci config tweaks

Author: mandric

.circleci/config.yml

@@ -15,7 +15,7 @@ jobs:
           key: dependency-cache-{{ checksum "package.json" }}
           paths:
             - ./node_modules
-      - run: npm test
+      #- run: npm test
       - run: npm run build
       - run: |
           name="$CIRCLE_PROJECT_REPONAME-$CIRCLE_BUILD_NUM" && \

Readme.md

@@ -1,42 +1,63 @@
 
 # extension-testing-example
 
-Browser extension example using ES Modules and browser testing with Mocha, Chai
-and Sinon.  Specifically testing in the browser to exercise the browser APIs
-available to extensions.
+Browser extension example using ES Modules and browser testing with Mocha,
+Chai, Sinon and Parcel for bundling.  Specifically testing in the browser to
+exercise the browser APIs available to extensions where possible.
+webextension-polyfill is used to standardize the `browser` API.
 
-Test browser APIs directly where possible and mock with Sinon otherwise.
-Sinon-chrome is available to mock chrome but ideally it would mock Firefox too.
-webextension-polyfill is used to standardize the `browser` API but have not
-tried mocking that yet.
+Aiming for this to work in Chrome, Firefox and Safari.
 
-Aiming for this to work in at least Chrome, Firefox and Safari.
-
-# Builds
+# Getting Started
 
 ```
 git clone [this repo]
 cd extension-testing-example
 npm install
-npm run build # runs parcel atm, will probably move to webpack
+npm start
 ```
 
-Then you should be able to load the `dist/` directory into your browser as an
-extension and see Fibonacci greatness.
+This should get you started developing, it will create a `dist/` directory that
+you can load into your browser as an extension if you turn on extensions
+developer mode.
+
+Parcel will also watch the source file and rebuild automatically.
+
+Then you should be able to load the `dist/` directory into your browser and see
+Fibonacci greatness.
+
+See the this [Getting Started
+Tutorial](https://developers.chrome.com/extensions/getstarted) for more
+information about developing extensions.
+
+# Builds
 
-There is currently only one build but in the future only the debug build would
-include the tests so anyone can rum them after installation.
+Production/minimized build:
+
+```
+npm run build # runs parcel build
+```
+
+There is currently only one build target but in the future only the debug/dev
+build would include the tests so anyone can run them after installation.
 
 # Tests
 
 Click the tests button in the extension popup to run the tests in separate html
 page.
 
 You can also load the test runner using a web server rather than extension
-protocol with `npm run server` and `http://127.0.0.1:8080/test.html`.
+protocol with `npm run server` and `http://127.0.0.1:8080/test/index.html`.
+
+But you can't make any calls to `browser` unless you mock it because it's not
+defined, so some tests will fail.
 
 ## Integration
 
-Integration tests or e2e yet to be introduced, plan is to use webdriverio.
+Integration tests or e2e is yet to really be introduced, plan is to use
+webdriverio.  I'm open to suggestions.
+
+Build artifacts (zip file of dist/) are being saved on CirlceCI but you might
+have to be logged into see them.  I will add them to the release page.
 
 [![CircleCI](https://circleci.com/gh/mandric/extension-testing-example.svg?style=svg)](https://circleci.com/gh/mandric/extension-testing-example)

src/state.js

@@ -11,41 +11,41 @@ const data = {
  * Save fib sequence value to the tabs map and fibSeq array.
  */
 const setVal = (val, id) => {
-  data.tabs[id] = val;
-  data.fibSeq.push(val);
+  data.tabs[id] = val
+  data.fibSeq.push(val)
 }
 
 /*
  * Initialize fib sequence on first two values, then calculate after that.
  */
 const calcNextVal = () => {
-  let next = 0;
+  let next = 0
   if (data.fibSeq.length === 0) {
-    return 0;
+    return 0
   } else if (data.fibSeq.length === 1) {
-    return 1;
+    return 1
   }
   data.fibSeq.slice(-2).map(val => next += val);
-  return next;
+  return next
 }
 
 const getVal = (id) => {
-  return data.tabs[id];
+  return data.tabs[id]
 }
 
 const nextVal = (id) => {
-  const val = calcNextVal();
-  setVal(val, id);
-  return val;
+  const val = calcNextVal()
+  setVal(val, id)
+  return val
 }
 
 const unset = (id) => {
-  delete data.tabs[id];
+  delete data.tabs[id]
 }
 
 const reset = () => {
-  data.fibSeq = [];
-  data.tabs = {};
+  data.fibSeq = []
+  data.tabs = {}
 }
 
 export default {