• Skip to main content
  • Skip to primary sidebar

Ryan McCormick

Dedicated Dad, Software Engineer and Lover of Coffee

Testing Angular 2 Applications with PhantomJS | ES2015, TypeScript

March 19, 2017 by Ryan McCormick Leave a Comment

By default, Chrome is set as the test runner of choice for applications generated with Angular-cli. The problem is that Chrome is really slow for running more than a few tests.

For anyone who develops following the Test Driven Development(TDD) approach like myself, this can be extremely annoying. If you have anything more than a few test cases, you could pretty much drink whole cup of coffee while waiting for tests to complete after each save.

Long story short, if you are working on a mature codebase with tens, hundreds or even thousands of test cases, Chrome is not a sustainable choice for TDD.

In the past, this problem could be solved by replacing Chrome with PhantomJS as the browser of choice for running unit tests via Karma. Fast forward to 2017 with most front end frameworks running Typescript or ES2015 and this becomes a problem.

PhantomJS 2.1.x Does Not Support ES2015

Whether you are building your app in ES2015 or transpiling to ES2015 from Typescript, you will have problems running your tests on anything less than PhantomJS 2.5 because ES2015+ syntax is not recognized.

Step 1: Install PhantomJS 2.5 Beta

Installation Instructions:

  • Install PhantomJS 2.5 on Ubuntu 14.04 or 16.04 LTS
  • Install PhantomJS 2.5 on MacOS

Step 2: Add Karma PhantomJS Launcher to Your Package Development Dependencies

For this article, I built a quick project with the latest version of Angular-cli. This step should be pretty easy to adjust for other frameworks where you are running Karma.

Since we are invoking the test runner via npm run test, all we have to do is add the karma-phantomjs-launcher and update a couple of lines in the karma.conf.js file.

SIDEBAR: Anything you run from the scripts block of your package.json file runs within the context of your project’s node_modules/ directory. If you wanted to execute anything in your project’s node_modules directory from outside of your package.json scripts file, you would have to reference with the fully qualified path.

Install the karma-phantomjs-launcher by running from the root of your project’s directory: npm install --save-dev karma-phantomjs-launcher.

After installing the karma-phantomjs-launcher, update your karma.conf.js file:

  1. Change the line require('karma-chrome-launcher') to require('karma-phantomjs-launcher')
  2. Change the line in browsers ['Chrome'] to ['PhantomJS']

For convenience, I added my sample project to Github. You can find a diff of the changes here:
https://github.com/ryanmccormick/angular2-karma-phantomjs-testing/compare/chrome…phantomjs

Related

Filed Under: Angular 2, Karma Tagged With: angular 2, es2015, phantomjs, typescript, unit testing

Reader Interactions

Leave a Reply Cancel reply

Primary Sidebar

Recent Posts

  • Force Quit Kill all Chrome Windows MacOS
  • SOLVED: Angular 6 CLI Karma Stuck in Single Run | Karma Stops Running
  • How to Manually Install Java 8 on Ubuntu 18.04 LTS
  • Remove VirtualBox from Ubuntu 16.04 Xenial
  • Clear all Node Modules Folders Recursively Mac/Linux

Recent Comments

  • KKV on Webstorm adding spaces between imports and braces | JavaScript and TypeScript
  • jusopi on Clear all Node Modules Folders Recursively Mac/Linux
  • Qaisar Irfan on Clear all Node Modules Folders Recursively Mac/Linux
  • mustafa on Remove VirtualBox from Ubuntu 16.04 Xenial
  • Pourya on How to Manually Install Java 8 on Ubuntu 18.04 LTS

Archives

  • May 2019
  • May 2018
  • April 2018
  • March 2018
  • January 2018
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • March 2017
  • December 2015
  • November 2015
  • July 2015
  • April 2015
  • February 2015
  • September 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • October 2013
  • August 2013
  • June 2013
  • April 2013
  • March 2013
  • February 2013
  • December 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • May 2012
  • March 2012
  • February 2012
  • December 2011
  • November 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • August 2009
  • July 2009
  • May 2009

Categories

  • Angular
  • Angular 2
  • AngularJS (1x branch)
  • Computer Q&A
  • ES2015
  • Internet Marketing
  • Javascript
  • Job Interviews
  • Job Search
  • Karma
  • Laravel
  • Linux
  • Linux/Unix Tips
  • MacOS
  • Microsoft Access
  • Microsoft Excel
  • Microsoft Outlook
  • Microsoft Word
  • News
  • Node
  • Open Source
  • PHP
  • Protractor
  • Resume Writing
  • Spring Boot
  • SQL
  • Ubuntu
  • VBA
  • VBScript
  • VirtualBox
  • Web Development
  • Windows Tips
  • Wordpress

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in