rudijs.github.com

Web Development, Web Operations, Devops Blog

Initialize Zurb Foundation 5 in an AngularJS Directive with Tests

Overview

Create an AngularJS custom directive that uses a Foundation Modal display with 100% test coverage.

Code

1) directive-foundation-modal.js

(function () {
  'use strict';

  angular.module('app')

    .controller('foundationModalController', function () {

      // As the template has Zurb Foundation JS (modal box) content,
      // call #foundation() on the document so DOM picks it up.
      $(document).foundation();
    })
    .directive('foundationModal', function () {
    return {
      restrict: 'E',
      templateUrl: 'templates/foundation-modal.html',
      controller: 'foundationModalController as foundationModal'
    };
  });

})();

2) templates/foundation-modal.html

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

3) directive-foundation-modal_spec.js

(function () {
  'use strict';

  describe('Directive', function () {

    var $scope,
      element,
      $compile,
      $httpBackend,
      $controller;

    // Load the controllers module
    beforeEach(module('app'));

    beforeEach(inject(function (_$compile_, $rootScope, _$httpBackend_, _$controller_) {

      $compile = _$compile_;

      $httpBackend = _$httpBackend_;

      $scope = $rootScope.$new();

      $controller = _$controller_;

    }));

    describe('foundationModal Directive', function () {

      it('loads foundation modal html partial', function () {

        var elm = angular.element('<foundation-modal></foundation-modal>');

        element = $compile(elm)($scope);

        $httpBackend.expectGET('templates/foundation-modal.html').respond(200, '<div>Modal Box</div>');

        $scope.$apply();

      });

    });

    describe('foundationModalController', function () {

      it('calls #foundation() on load', function () {

        spyOn($.fn, 'foundation');

        $controller('foundationModalController', {
          $scope: $scope
        });

        $scope.$apply();

        expect($.fn.foundation).toHaveBeenCalled();
      });

    });

  });

})();