Oh the Glamour of Open Source

Here's how my life panned out in the early hours of Wednesday 30th September 2017:

2 am

awoken by Lisette having a nightmare

3 am

gave up hope of getting back to sleep upstairs and headed for the sofa

4 am

still not asleep and discovered a serious gap in an open source project I help out with

4:30 am

come up with idea for a fix

4:45 am

accidentally delete a repo that I and many others care about from GitHub

4:50 am

recover said repo from backups (sweet mercy how could I be so stupid?)

4:55 am

actually succeed in cloning the repo I want to hack on

5:30 am

implement fix and send PR

5:35 am

go for a walk round the river

6:30 am

realise I didn't submit a test for the changed functionality

6:35 am

write test only to discover I can't run the test pack on Windows

6:40 am

add test to PR anyway so I can see test results when Travis runs on each commit.

7 am

despair at the duration of my feedback loop, totally fail to get my tests to pass

7:10 am

stub my toe really badly on a train set Benjamin has been busily assembling beneath my feet

7:11 am

give in and literally beg the project owner in Paris to fix the tests for me. He takes pity on me and agrees. Possibly because I gave him emoji tulips 🌷

7:12 am

feel like a slight failure and profoundly tired.

Oh the glamour of open source.

Karma: From PhantomJS to Headless Chrome

Like pretty much everyone else I've been using PhantomJS to run my JavaScript (or compiled-to-JS) unit tests. It's been great. So when I heard the news that PhantomJS was dead I was genuinely sad. However, the King is dead.... Long live the King! For there is a new hope; it's called Chrome Headless . It's not a separate version of Chrome; rather the ability to run Chrome without a UI is now baked into Google's favourite browser as of v59. (For those history buffs I might as well be clear: the main reason PhantomJS died is because Chrome Headless was in the works.)

Making the Switch

As long as you're running Chrome v59 or greater then you can switch. I've just made ts-loader's execution test pack run with Chrome Headless instead of PhantomJS and I've rarely been happier. Honest. Some context: the execution test pack runs Jasmine unit tests via the Karma test runner. The move was surprisingly easy and you can see just how minimal it was in the PR here. If you want to migrate a test that runs tests via Karma then this will take you through what you need to do.

package.json

You no longer need phantomjs-prebuilt as a dev dependency of your project. That's the PhantomJS browser disappearing in the rear view mirror. Next we need to replace karma-phantomjs-launcher with karma-chrome-launcher. These packages are responsible for firing up the browser that the tests are run in and we no longer want to invoke PhantomJS; we're Chrome all the way baby.

karma.conf.js

You need to tell Karma to use Chrome Headless instead of PhantomJS. You do that by replacing

   browsers: [ 'PhantomJS' ],

with

   browsers: [ 'ChromeHeadless' ],

That's it; job done!

Continuous Integration

There's always one more thing isn't there? Yup, ts-loader has CI builds that run on Windows with AppVeyor and Linux with Travis. The AppVeyor build went green on the first run; that's because Chrome is installed by default in the AppVeyor build environment. (yay!)

Travis went red. (boooo!) Travis doesn't have Chrome installed by default. But it's no biggie; you just need to tweak your .travis.yml like so:

dist: trusty
addons:
  chrome: stable

This includes Chrome in the Travis build environment. Green. Boom!