Monday, October 12, 2015

AngularJS + Karma - Loading JSON Files for Mocking HTTP Responses

In order to kick-off AngularJS projects, I have been looking at generator-gulp-angular lately, which you can find at:

https://github.com/Swiip/generator-gulp-angular

When doing your unit tests, it is quite convenient to mock HTTP responses using JSON files. However, having your unit tests load additional (JSON) files may not be super obvious using the Karma test runner.

bower.json

For the task at hand, I am using jasmine-jquery which provides “jQuery matchers and fixture loader for Jasmine framework”. Add that dependency to your bower.json file:


"devDependencies": {
  
  "jasmine-jquery": "2.1.1"
}


karma.conf.js

Now we need to do some additional configuration for Karma. By default, generator-gulp-angular wires the needed files up with:


return wiredep(wiredepOptions).js
  .concat([
    path.join(conf.paths.tmp, '/serve/app/index.module.js'),
    path.join(conf.paths.src, '/**/*.spec.js'),
    path.join(conf.paths.src, '/**/*.mock.js'),
    path.join(conf.paths.src, '/**/*.html'),
    {pattern: path.join(conf.paths.src, '../mocks/**/*.json'), watched: false, included: false, served: true}
  ]);



In order to make your JSON file available, add


{
  pattern: path.join(conf.paths.src, '../mocks/**/*.json'),
  watched: false,
  included: false,
  served: true
}



So that it becomes:


return wiredep(wiredepOptions).js
  .concat([
    path.join(conf.paths.tmp, '/serve/app/index.module.js'),
    path.join(conf.paths.src, '/**/*.spec.js'),
    path.join(conf.paths.src, '/**/*.mock.js'),
    path.join(conf.paths.src, '/**/*.html'),
    {pattern: path.join(conf.paths.src, '../mocks/**/*.json'), watched: false, included: false, served: true}]);


Mocks is a directory in my project’s root folder. Customize as needed. For further details see:

http://karma-runner.github.io/0.13/config/files.html

Now, you're ready for testing. In your spec aka unit test file, in the beforeEach:


beforeEach(inject(function (_$httpBackend_, _$rootScope_, $controller) {
…
}));


you can now mock up the $httpBackend:


jasmine.getJSONFixtures().fixturesPath='/base/mocks';

$httpBackend.whenGET('http://localhost:9876/api/plants').respond(
   getJSONFixture('plants.json')
);
$httpBackend.whenGET('app/components/plants/plants.html').respond('');
$httpBackend.flush();

Saturday, October 3, 2015

AngularJS Best Practices - Style Guide

Looks like the place du-jour for THE AngularJS style guide is here:

https://github.com/johnpapa/angular-styleguide

The author, John Papa, also provides the HotTowel Yeoman generator, that implements this style-guide:

https://github.com/johnpapa/generator-hottowel

If you're a TypeScript aficionado, you may want to keep an eye on the following GitHub issue:

https://github.com/johnpapa/generator-hottowel/issues/90

In the meantime - checkout:


And all this came up, as I was looking, for some good explanation for the advice to use AngularJS’
“Controller as” syntax and to avoid $scope as much as possible.

https://github.com/johnpapa/angular-styleguide#style-y030

A really good explanation is also here:

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

Friday, October 2, 2015

TypeScript versus ES6


A good question is: Why would you want to use TypeScript versus ES6?

A few reasons for me:

  • I have to use a transpiler anyway in order to support older browsers such as Babel
  • TypeScript gives me types
  • You can still use JavaScript as valid TypeScript (TS being a superset of JS)
  • It seems to be a more natural fit for Java developers
  • Tooling support seems pretty good
  • AngularJS 2.0 will use it natively - as such you have Google and Microsoft supporting it

Resources

Will ES6 make Typescript irrelevant?
https://www.reddit.com/r/javascript/comments/31qocr/will_es6_make_typescript_irrelevant/

TypeScript vs ECMAScript 2015/2016
http://ilikekillnerds.com/2015/07/typescript-vs-ecmascript-20152016/

TypeScript and ES6 Dan Wahlin & Andrew Connell


Angular Air Episode 25: TypeScript or ES6 with Babel?


Thursday, October 1, 2015

AngularJS 1.x and TypeScript

I did a bit of research today on TypeScript. As it is favored (but not required) for the upcoming AngularJS 2.0 release, I wanted to dig a bit deeper. Keep in mind that as of Oct 2015, AngularJS 2.0 is still a pure alpha version and even new projects shall continue using AngularJS 1.4.

Nonetheless, it looks like TypeScript is a viable option even for the latest 1.4 version. In fact, Yeoman now provides an Angular starter (generator-gulp-angular) that gives you the option to use TypeScript as your language of choice.

Here are some resources that I thought were helpful:

http://www.developerhandbook.com/typescript/writing-angularjs-1-x-with-typescript/

I believe, that particularly for Java Developers, TypeScript could be quite interesting - as you have much better type-safety compared to using plain JavaScript. See the following blog entry by Veit Weber:

Why Java Developers might love TypeScript

There is a good presentation by Sander Mak from JavaOne: "TypeScript for Java Developers: Coding JavaScript Without the Pain" on that subject as well:


A longer version:



As you can have a much better OO experience with TypeScript, I think it will be also quite interesting to use rich domain objects with AngularJS rather than using JSON structures directly when retrieving data from your REST endpoints.

There is a great presentation by Gert Hengeveld from NG-NL 2015.



Slides: 

https://docs.google.com/presentation/d/1cbNH2WHO8WzF1XKPxMJ3gJXmfKnWAl3cN77eJJJdAEw/present?slide=id.p

Blog Post:

https://medium.com/opinionated-angularjs/angular-model-objects-with-javascript-classes-2e6a067c73bc

Convert JSON Structure to TypeScript Classes

If you create TypeScript classes that need to handle JSON, the follow online tool to generate TypeScript interfaces from JSON might be of interest:

http://json2ts.com/

TypeScript type definitions

I still need to wrap my head around TypeScript type definitions. They basically bolt on type definition for libraries that are not inherently based on TypeScript. There is a repository for them:

https://github.com/borisyankov/DefinitelyTyped