-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
using ES modules and testing in browser WIP
- Loading branch information
Showing
20 changed files
with
30,471 additions
and
8,083 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,42 @@ | ||
[![CircleCI](https://circleci.com/gh/mandric/extension-testing-example.svg?style=svg)](https://circleci.com/gh/mandric/extension-testing-example) | ||
|
||
# extension-testing-example | ||
|
||
Browser extension example using Parcel, Mocha, Sinon-Chrome and Chrome API. | ||
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. | ||
|
||
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. | ||
|
||
Hoping to make it work with Firefox then Safari next. | ||
Aiming for this to work in at least Chrome, Firefox and Safari. | ||
|
||
# Build | ||
# Builds | ||
|
||
``` | ||
git clone [this repo] | ||
cd extension-testing-example | ||
npm install | ||
npm run build # runs parcel build src/manifest.json | ||
npm run build # runs parcel atm, will probably move to webpack | ||
``` | ||
|
||
Then you should be able to load the `dist/` directory into your Chrome browser | ||
as an extension and see Fibonacci greatness. | ||
Then you should be able to load the `dist/` directory into your browser as an | ||
extension and see Fibonacci greatness. | ||
|
||
If you need unminified builds you can pass a flag to Parcel. | ||
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. | ||
|
||
``` | ||
npx parcel build --no-minify --no-source-maps src/manifest.json | ||
``` | ||
# Tests | ||
|
||
# Unit Tests | ||
Click the tests button in the extension popup to run the tests in separate html | ||
page. | ||
|
||
``` | ||
npm test # runs mocha | ||
``` | ||
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`. | ||
|
||
# Integration Tests | ||
## Integration | ||
|
||
Planning to use Puppeteer here (Chrome only) to start out with. | ||
Integration tests or e2e yet to be introduced, plan is to use webdriverio. | ||
|
||
[![CircleCI](https://circleci.com/gh/mandric/extension-testing-example.svg?style=svg)](https://circleci.com/gh/mandric/extension-testing-example) |
Oops, something went wrong.