Here’s a template to get up and running for automated testing and publishing of JS client or server code
There are a lot of dependencies out there. Clearly, the world needs more automated tests. But, we need to get up and running quickly.
Goals:Must be free, as in moneyMust have tiny learning curve, few magic words to learn!Must be UI free. Test client code using headless ChromeUse Travis CI for automated testing, with pass/fail badge in githubRun tests on every commitEasy publish to NPM and memorable URL for including scripts in web pages
So, on every commit to the github repo:
- Travis CI will start up its testing instance
- Install the latest Node version, and Chrome browser
-
Start Chrome for headless testing (only needed for projects that are client JS)
-
Run two example test scripts. One for testing server apps, and one for browser JS(One of these can be eliminated depending on whether yours is a node app, or client script)
- Show result of testing
- Publish to NPM if successful
- Show pass/fail badges for the project in NPM and github.
You can add/remove to this as needed, depending on the needs of your project.
Here’s all the files:
For Travis CI, which will host the testing, just a .travis.yml file is needed.
If the project is a Node app and not client JS, you don’t need the Chrome parts.
It will also publish to npm. For client scripts, we can use a short, easy to remember link using unpkg.com
No fancy testing frameworks to learn here. We simply write our test scripts, which throw errors on failure.
The testing framework is as follows, any native error constitutes a failed test.
For Node applications, test-server.js
main.js is the main file in the app. What is being tested. If we had called test_fail, the test would fail and Travis would tell us so.
test-browser.js for client scripts. Since we really want to automate things, we can’t have a UI. No-one will be around to click things. So, headless chrome is used to run tests.
testchrome, is just a simple wrapper on the chrome remote interface used for headless testing.
testchrome happens to use a simplified API, just .evaluate (JS in the browser) .get (JSON from a URL)
Alternately, you can use the other headless Chrome testing modules that are available, like puppeteer.
Getting this setup locally on a machine can be unpleasant. Travis CI really shines here!
Going to travisci.org (for public repos), and follow the instructions to set up your repo. Connect your Travis CI acct to github, and specify your repo for testing.
There is one configuration needed on Travis, your NPM token which will let Travis publish the app, in Settings:
Then just commit to the repo, or use the console, to start a test.
Monitor your test in the Travis console:
and view results
One last thing, the badge. In the README.md of the repo:
which always shows our passing/failing badge in NPM and Github.
Finally, we need an easily remembered URL (for client scripts). Using unpkg.com with no additional config required, cause it will pull the latest from NPM.
<script src=//unpkg.com/reponame ></script>
Of course, for server apps, simply
npm install reponame
That’s it, for our framework that provides automated testing and publish. Please comment with any thoughts or suggestions. The example repo is at https://github.com/digplan/learn-ci
Happy testing!