angular_functional_testing.js

describe('Coupons', function(){
  // Set up vars that we'll want to use in multiple tests
  var $httpBackend, $scope, $view, $location;
  var merchantData, visit, couponNameField, couponAmountField, createButton;

  // Load your app
  beforeEach(module('my-app'));

  beforeEach(inject(function(_$httpBackend_, _$rootScope_, _$timeout_, _$controller_, _$compile_, _$location_){

    // Setup Angular Vars
    var $compile    = _$compile_;
    var $rootScope  = _$rootScope_;
    $scope          = $rootScope.$new();
    $httpBackend    = _$httpBackend_;
    $location       = _$location_;
    
    // This 'angularizes' our skeleton view. 'ui-view' could be replaced with 'ng-view' if you aren't using ui-router.
    // This gives us an empty 'bucket' that will load whatever controller/template that the url asks for.
    $view = angular.element('<ng-app="my-app"><ui-view></ui-view></ng-app>');

    // Helper method
    visit = function(url, opts){
      $location.url(url);
      $scope.$apply();

      opts = opts || {};
      if (opts.flush !== false) { $httpBackend.flush(); }
    };

    // Setup Data Mocks
    var couponList = Factory.build('couponList');
    var customerData = Factory.build('customer');
    merchantData = Factory.build('merchant');
    $rootScope.merchant = merchant;
    
    // Set up backend mocks
    var couponRoute = new RegExp('coupons');
    var customerRoute = new RegExp('customer')
    var merchantRoute = new RegExp('merchant');

    $httpBackend.whenGET(couponRoute).respond(couponList);
    $httpBackend.whenGET(customerRoute).respond(cusotmerData);
    $httpBackend.whenGET(merchantRoute).respond(merchantData);

    // Init: this sets up the two-way data binding between a given view, and a given scope.
    $compile($view)($scope);

  }));

  beforeEach(function(){
    // Visit whatever url on your site you'd like
    visit('/admin/coupons');
    
    // Caching some buttons that we'll re-use
    couponNameField = page.find("input:contains('Name')");
    couponAmountField = page.find("input:contains('Amount')");
    createButton = page.find("button:contains('Create')");
  });

  it("should let user know you're seeing all coupons", function(){
    // Use jasmine-jquery to do more or less whatever you like with your views, just like you're a user
    expect($view.find('h4')).toContainText('All Coupons');
  });

  it("should validate coupon names on the fly", function() {
    couponNameField.val('Invalid #$&* name').trigger('input'); // triggering input also automatically triggers an $apply()
    expect(couponNameField).toHaveClass('ng-invalid');
    couponNameField.val('validName').trigger('input');
    expect(couponNameField).toHaveClass('ng-valid');
  });

  /** MORE TESTS JUST FOR INSPIRATION **/
  it("should not allow submission with only a name", function() {
    couponNameField.val('validName').trigger('input');
    expect(createButton).toBeDisabled(); // Awesome matchers like toBeDisabled come from jasmine-jquery.
  });

  it("should allow submission with a valid name and amount", function() {
    couponNameField.val('validName').trigger('input');
    couponAmountField.val(10).trigger('input');
    expect(createButton).not.toBeDisabled();
  });
  
  // An example of testing that certain routes are hit.
  it("should call the create route after creating a coupon", inject(function($httpBackend) {
    var couponName = 'validName';
    var couponAmount = 10;
    var couponRoute = '/api/coupons/';

    var couponParams = {
      coupon: {
        merchant_id: merchantData.id,
        name: 'validName',
        amount: 10
      }
    };

    // This will fail if any other route is hit. This also expects to see the coupon params. Very useful.
    // NOTE: Will not fail if no routes are hit at all. Kind of lame.
    $httpBackend.expectPOST(couponRoute, couponParams).respond({success: true});

    couponNameField.val(couponName).trigger('input');
    couponAmountField.val(couponAmount).trigger('input');

    createButton.trigger('click');
  });
});