AngularJS Testing with Jasmine – Great, let's try it out!

View Github Repository Open presentation in a new window

Acrylico

See all presentation from Acrylico

AngularJS Testing with Jasmine – Great, let's try it out!

0 0

Angular-Testing-Presentation

A collection of the various presentation slide decks I've given.

On Github Acrylico / Angular-Testing-Presentation

AngularJS Testing with Jasmine

Javascript testing made easy

Created by Holden Profit ( https://github.com/Acrylico )

What is Jasmine?

A BDD framework for testing your Javascript

Completely independent, doesn't require a DOM, and has clean & clear syntax for testing all that JS code you've written. Documentation on Jasmine can be found at http://jasmine.github.io !

How to View Tests

Everything in Jasmine starts with the SpecRunner.html file. It's within this file that you:

  • Tell Jasmine where your source code is
  • Tell Jasmine where your tests are
  • Include any additional dependencies for your code

What to test

An example Angular controller, yet to be implemented: 

myApp.controller('myController', function ($scope, $http) {
    $scope.person = null;

    $scope.initPerson = function (name, age, gender) { };
});

How to test

And here is our controller Spec file: 

// Describe what this spec file is testing
describe("myController Tests", function () {
    var scope, controller;

    beforeEach(module("myApp")); // Creates the module "myApp"

    beforeEach(inject(function ($rootScope, $controller) {
        scope = $rootScope.$new(); // Creating a new scope for our controller
        controller = $controller; // The service that instantiates controllers
        controller("myController", {$scope: scope}); // Creates our ctrl object
    }));
});

What is TDD?

A different way of thinking!

With TDD, you write your test FIRST then write your code to pass the test with minimal code and effort put forth to do so.

Great, let's try it out!

Given our controller's initPerson() function, lets write our test first, then complete the function to pass! 

myApp.controller('myController', function ($scope) {
    $scope.person = null;

    $scope.initPerson = function (name, age, gender) { };
});

Recall our test

What should this function actually do? 

describe("myController Tests", function () {
    . . .
    it("should fill the person field when initPerson() is called", function () {
        // arrange
        var name = "Guy Gardener", age = 30, gender = "male";
        // act
        scope.initPerson(name, age, gender);
        // assert
        expect(scope.person).toEqual({
            name: name,
            age: age,
            gender: gender
        });
    });
});

Implement the function

Now that we know what the function needs to do, let's implement it! 

myApp.controller('myController', function ($scope) {
    $scope.person = null;
    $scope.initPerson = function (name, age, gender) {
        $scope.person = {
            name: name,
            age: age,
            gender: gender
        };
    };
});

Thank you!

Questions? Concerns?

Feel free to contact me at: hprofit@icct.com Also look me up on github at https://github.com/Acrylico!