Testing React Components With Jasmine

Making a React component feels straight forward. Testing a React component should feel just as straight forward. Now that I have built tests for my React code, I can say it is.

Making Your First React Component Raise Events and Update (update to v0.14.x)

My last article described creating a simple React component. This post will walk through adding a click event to that component. The click event will modify the data the component is displaying. React will automatically update the screen without us making any explicit requests based on the change in data.

Making Your First React Component (updated to v0.14.x)

Update: Fixed example with 0.14.x ReactDom format and to use states, not props.

In a world of Angulars and Embers, what is the point of a library that only provides a third of the MVC equation? React offers simplicity and a welcome decoupling of display and business logic.

Tweak the Angular Test By Controlling the Template

We recently finished bringing our test coverage up to 90%+ on our Angular project. The team worked hard and I am proud of our accomplishments. Going forward we are using TDD and this has proven to be an interesting experience that has provided new challenges. We have found building Angular directives through test driven development to be a little challenging since the templates haven't been built yet. We aren't going to know what to build right away, and we are loathe to break our rhythm and constantly be updating a template file. A bigger problem is the template creating an external dependency which is never a good thing for unit tests. When it comes time to do e2e testing and using Selenium or Protractor then the whole template needs to be run. If I'm starting with unit tests to define my code, how can I use a template without these problems? We found one method that we like - the $templateCache.

Look! No Hands! - Using Selenium and Node.js for interactive UI testing

Selenium is the most talked about UI testing framework that I could find that was both open source and well supported. We decided to adopt it for our automated UI testing. I have found it to be very useful, albeit with a stiff learning curve. One downside for me is the back and forth between building tests and then waiting for Selenium and the browsers to open and run the tests. It occurred to me I could help alleviate this by having the browsers at the ready and eagerly waiting for the command to start testing. So I reached into my toolbox to grab one of my favorite tools, Node.js. Using Node.js I was able to build an interactive interface with which I can iteratively build my front end tests. Everything I needed was already there, I just had to put pieces together.

Using ngTestHarness to simplify $httpBackend testing

$httpBackend is one of the greatest things that AngularJs provides. $httpBackend intercepts AJAX requests made by Angular's $http service to allow for full unit testing. The ngTestHarness helps simplify interactions with the mock backend by abstracting away WHEN and EXPECT differences.

You Got Karma in My Require, You Got Require in My Karma, No Worries We Have Define

Karma is a pretty powerful test runner for JavaScript. Most of our code is in Angular, so we load our Karma test context with every file in our project. This should be easy...except...we do have a few libraries that only load on demand. This is no problem for the Karma context since the file is loaded along with everything else. The problem is that we use require to load it.

ngTestHarness: Strap in with this new testing helper for Angular.js

This is the first time I can point to open source code that I took a large part in authoring. I am proud of the project that the very talented Team Titan at Gaikai, a Sony Entertainment Company, has created. While updating/adding unit tests for development and build purposes we became very disenchanted with the complexity required for creating unit tests in Angular.