From dc0f2e4d494d611a88efbdae28922d28faaf0172 Mon Sep 17 00:00:00 2001 From: Milan Andric Date: Tue, 12 Mar 2019 11:38:49 -0500 Subject: [PATCH] wip --- .circleci/config.yml | 2 +- Readme.md | 55 ++++++++++++++++++++++++++++++-------------- src/state.js | 26 ++++++++++----------- 3 files changed, 52 insertions(+), 31 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 21fe133..0c3e275 100644 --- a/.circleci/config.yml +++ b/.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" && \ diff --git a/Readme.md b/Readme.md index 5e1c7ca..790fff0 100644 --- a/Readme.md +++ b/Readme.md @@ -1,31 +1,45 @@ # 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 @@ -33,10 +47,17 @@ 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) diff --git a/src/state.js b/src/state.js index 82392fd..28d2fcb 100644 --- a/src/state.js +++ b/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 {