showcase: testing directive with bindToController

diff --git a/angularjs/showcase/src/showcase/app/welcome/welcome-account.controller.js b/angularjs/showcase/src/showcase/app/welcome/welcome-account.controller.js
new file mode 100644 (file)
index 0000000..1f40bbf
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/welcome/welcome-account.controller.js
@@ -0,0 +1,29 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.welcome')
+    .controller('WelcomeAccountController', WelcomeAccountController);
+
+  /**
+   * @ngdoc controller
+   * @name app.welcome.controller:WelcomeAccountController
+   *
+   * @description
+   * WelcomeAccountController controller.
+   */
+  /* @ngInject */
+  function WelcomeAccountController() {
+    var vm = this;
+    var birthDate = {
+      city: 'classified',
+      birthDate: 'private'
+    };
+
+    // http://www.w3.org/International/questions/qa-personal-names
+    vm.yourChoice = vm.fullName + ' / ' + 'This field would be the user\'s choice';
+
+    vm.birthDate = birthDate;
+  }
+
+})();

diff --git a/angularjs/showcase/src/showcase/app/welcome/welcome-account.controller.spec.js b/angularjs/showcase/src/showcase/app/welcome/welcome-account.controller.spec.js
new file mode 100644 (file)
index 0000000..d015224
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/welcome/welcome-account.controller.spec.js
@@ -0,0 +1,74 @@
+describe('app.welcome', function() {
+  'use strict';
+
+  beforeEach(function() {
+    module('app.welcome');
+  });
+
+  describe('WelcomeAccountController', function () {
+
+    it('should fill yourChoice field', function () {
+      var fullName = 'Gustavo Martin';
+      var expected = fullName + ' / ' + 'This field would be the user\'s choice';
+      var birthDate = {
+        city: 'classified',
+        birthDate: 'private'
+      };
+      var WelcomeAccountController;
+
+      inject(function(_$rootScope_, $controller) {
+        var $scope = _$rootScope_.$new();
+        WelcomeAccountController = $controller(
+          'WelcomeAccountController',
+          {$scope: $scope},
+          {fullName: fullName}
+        );
+      });
+
+      // Jasmine toEqual code:
+      //getJasmineRequireObj().toEqual = function() {
+      //
+      //  function toEqual(util, customEqualityTesters) {
+      //    customEqualityTesters = customEqualityTesters || [];
+      //
+      //    return {
+      //      compare: function(actual, expected) {
+      //        var result = {
+      //          pass: false
+      //        };
+      //
+      //        result.pass = util.equals(actual, expected, customEqualityTesters);
+      //
+      //        return result;
+      //      }
+      //    };
+      //  }
+      expect(expected).toEqual(WelcomeAccountController.yourChoice);
+
+      // toBe works because I am testing strings and it seems as if the virtual machine
+      // is using the same pointer for strings which are the same. Even if they are created from
+      // other strings? I looks like that. Because in this spec I have constant strings but in WelcomeAccountController
+      // I don't have a constant string and toBe keeps working...
+      // toBe is the same as testing: object === someOtherObject
+
+      // Jasmine toBe code:
+      //getJasmineRequireObj().toBe = function() {
+      //  function toBe() {
+      //    return {
+      //      compare: function(actual, expected) {
+      //        return {
+      //          pass: actual === expected
+      //        };
+      //      }
+      //    };
+      //  }
+      expect(expected).toBe(WelcomeAccountController.yourChoice);
+
+      expect(birthDate).toEqual(WelcomeAccountController.birthDate);
+      // toBe in this case doesn't work because I am testing objects and they have different pointers.
+      expect(birthDate).not.toBe(WelcomeAccountController.birthDate);
+    });
+
+  });
+
+});

diff --git a/angularjs/showcase/src/showcase/app/welcome/welcome-account.directive.html b/angularjs/showcase/src/showcase/app/welcome/welcome-account.directive.html
new file mode 100644 (file)
index 0000000..f325b5b
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/welcome/welcome-account.directive.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<div>welcome account</div>
+<div class="account">fullName={{vm.fullName}}</div>
+<div class="account">yourChoice={{vm.yourChoice}}</div>

diff --git a/angularjs/showcase/src/showcase/app/welcome/welcome-account.directive.js b/angularjs/showcase/src/showcase/app/welcome/welcome-account.directive.js
new file mode 100644 (file)
index 0000000..567d4d0
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/welcome/welcome-account.directive.js
@@ -0,0 +1,38 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.welcome')
+    .directive('welcomeAccountDirective', welcomeAccountDirective);
+
+  /**
+   * @ngdoc directive
+   * @name app.welcome.directive:welcomeAccountDirective
+   * @restrict EA
+   *
+   * @description
+   * Welcome account directive
+   *
+   * @element welcome-account-directive
+   *
+   * @example
+    <example name="welcome-account-directive" module="app.welcome">
+      <file name="index.html">
+        <welcome-account-directive>
+      </file>
+    </example>
+   */
+  function welcomeAccountDirective() {
+    return {
+      restrict: 'EA',
+      templateUrl: 'app/welcome/welcome-account.directive.html',
+      controller: 'WelcomeAccountController',
+      controllerAs: 'vm',
+      scope: {},
+      bindToController: {
+        fullName: '='
+      }
+    };
+  }
+
+})();

diff --git a/angularjs/showcase/src/showcase/app/welcome/welcome-account.directive.spec.js b/angularjs/showcase/src/showcase/app/welcome/welcome-account.directive.spec.js
new file mode 100644 (file)
index 0000000..fbfb4fa
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/welcome/welcome-account.directive.spec.js
@@ -0,0 +1,35 @@
+(function() {
+  'use strict';
+
+  describe('welcomeAccountDirective', function() {
+    var $compile;
+    var $rootScope;
+    var template;
+
+    beforeEach(module('app.welcome'));
+
+    beforeEach(inject(function(_$compile_, _$rootScope_) {
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+      template = '<welcome-account-directive full-name="example.fullName"></welcome-account-directive>';
+    }));
+
+    it('should assign min value 3', function() {
+      var $scope = $rootScope.$new();
+      var element;
+      var account;
+      $scope.example = {
+        fullName: 'Snake Eyes'
+      };
+
+      element = $compile(template)($scope);
+      $scope.$digest();
+      account = element.find('div.account');
+
+      expect(account.length).toBe(2);
+      expect(account.eq(0).text()).toBe('fullName=Snake Eyes');
+      expect(account.eq(1).text()).toBe('yourChoice=Snake Eyes / This field would be the user\'s choice');
+    });
+  });
+
+}());

diff --git a/angularjs/showcase/src/showcase/app/welcome/welcome.html b/angularjs/showcase/src/showcase/app/welcome/welcome.html
index fc49266..dec7d78 100644 (file)
--- a/angularjs/showcase/src/showcase/app/welcome/welcome.html
+++ b/angularjs/showcase/src/showcase/app/welcome/welcome.html
@@ -1,4 +1,9 @@
 <!DOCTYPE html>
+<div class="container">
+  <welcome-account-directive full-name="'Gustavo Martin Morcuende'">
+  </welcome-account-directive>
+</div>
+
 <div class="container" ng-controller="WelcomeController as vm">
   <div class="row">
     {{ vm.hello }}

diff --git a/angularjs/showcase/src/showcase/index.html b/angularjs/showcase/src/showcase/index.html
index 0b2970c..ffd71b8 100644 (file)
--- a/angularjs/showcase/src/showcase/index.html
+++ b/angularjs/showcase/src/showcase/index.html
@@ -59,6 +59,8 @@
     <script src="/src/showcase/app/welcome/welcome.module.js"></script>
     <script src="/src/showcase/app/welcome/welcome.route.js"></script>
     <script src="/src/showcase/app/welcome/welcome.controller.js"></script>
+    <script src="/src/showcase/app/welcome/welcome-account.directive.js"></script>
+    <script src="/src/showcase/app/welcome/welcome-account.controller.js"></script>
     <script src="/src/showcase/app/users/users.module.js"></script>
     <script src="/src/showcase/app/users/users.route.js"></script>
     <script src="/src/showcase/app/users/users.controller.js"></script>