adds global stats directive

giamir · Mar 29, 2016 · e763fe4 · e763fe4
1 parent d2e1f9f
commit e763fe4
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 25 deletions.
diff --git a/public/js/directives/globalStatsDirective.js b/public/js/directives/globalStatsDirective.js
@@ -0,0 +1,33 @@
+(function() {
+
+  function globalStats() {
+    return {
+      restrict: 'EA',
+      template: [
+        '<section class="col-md-8 col-lg-8 col-xl-8">',
+          '<table class="table table-striped">',
+            '<thead>',
+              '<tr>',
+                '<th>Statistic</th>',
+                '<th>Season <small>(AVG)</small></th>',
+                '<th>Last Match</th>',
+              '</tr>',
+            '</thead>',
+            '<tbody>',
+              '<tr ng-repeat="stat in vm.globalStats">',
+                '<td>{{stat.featureName}}</td>',
+                '<td>{{stat.season}}</td>',
+                '<td>{{stat.lastMatch}}</td>',
+              '</tr>',
+            '</tbody>',
+          '</table>',
+        '</section>'
+      ].join(''),
+      controllerAs: 'vm',
+      controller: 'GlobalStats'
+    };
+  }
+
+  angular.module('PlayerStats')
+    .directive('globalStats', globalStats);
+})();
diff --git a/public/views/index.html b/public/views/index.html
@@ -27,6 +27,8 @@
 
     <script src="js/controllers/globalStatsController.js"></script>
     <script src="js/controllers/singleMatchStatsController.js"></script>
+
+    <script src="js/directives/globalStatsDirective.js"></script>
   </head>
 
   <body>

diff --git a/public/views/partials/global-stats.html b/public/views/partials/global-stats.html
@@ -4,21 +4,4 @@ <h3>Name Surname</h3>
   <h4>Football Team</h4>
 </header>
 
-<section class="col-md-8 col-lg-8 col-xl-8" ng-controller="GlobalStats as ctrl">
-  <table class="table table-striped">
-    <thead>
-      <tr>
-        <th>Statistic</th>
-        <th>Season <small>(AVG)</small></th>
-        <th>Last Match</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr ng-repeat="stat in ctrl.globalStats">
-        <td>{{stat.featureName}}</td>
-        <td>{{stat.season}}</td>
-        <td>{{stat.lastMatch}}</td>
-      </tr>
-    </tbody>
-  </table>
-</section>
+<global-stats></global-stats>
diff --git a/test/e2e/features/statisticsFeature.js b/test/e2e/features/statisticsFeature.js
@@ -13,13 +13,13 @@ describe('Displaying Player Statistics', function() {
     it('change the match stats displayed clicking the button of the match wanted', function() {
       homepage.clickLastSingleMatchLink();
       expect(homepage.getSingleMatchDisplayedAlias())
-      .toEqual(homepage.getLastSingleMatchAlias());
+        .toEqual(homepage.getLastSingleMatchAlias());
     });
 
     it('change the statistic displayed in the graph clicking the button of the statistic wanted', function() {
       homepage.clickLastStatisticLink();
       expect(homepage.getStatisticDisplayedAlias())
-      .toContain(homepage.getLastStatisticAlias());
+        .toContain(homepage.getLastStatisticAlias());
     });
   });
 });
diff --git a/test/e2e/pages/home.page.js b/test/e2e/pages/home.page.js
@@ -6,7 +6,7 @@ var homepage = {
   },
 
   getNameFirstGlobalStat: function() {
-    return element.all(by.repeater('stat in ctrl.globalStats'))
+    return element.all(by.repeater('stat in vm.globalStats'))
     .then(function(elems) {
       return elems[0].element(by.binding('stat.featureName')).getText();
      });
@@ -15,14 +15,14 @@ var homepage = {
   clickLastSingleMatchLink: function() {
     return element.all(by.repeater('mw in ctrl.matchWeekKeys'))
     .then(function(elems) {
-     return elems[elems.length-1].element(by.binding('mw')).click();
+      return elems[elems.length-1].element(by.binding('mw')).click();
     });
   },
 
   getLastSingleMatchAlias: function() {
     return element.all(by.repeater('mw in ctrl.matchWeekKeys'))
     .then(function(elems) {
-     return elems[elems.length-1].element(by.binding('mw')).getText();
+      return elems[elems.length-1].element(by.binding('mw')).getText();
     });
   },
 
@@ -33,14 +33,14 @@ var homepage = {
   clickLastStatisticLink: function() {
     return element.all(by.repeater('navStat in ctrl.singleMatchStats'))
     .then(function(elems) {
-     return elems[elems.length-1].element(by.binding('navStat.featureName')).click();
+      return elems[elems.length-1].element(by.binding('navStat.featureName')).click();
     });
   },
 
   getLastStatisticAlias: function() {
     return element.all(by.repeater('navStat in ctrl.singleMatchStats'))
     .then(function(elems) {
-     return elems[elems.length-1].element(by.binding('navStat.featureName')).getText();
+      return elems[elems.length-1].element(by.binding('navStat.featureName')).getText();
     });
   },
 

diff --git a/test/unit/directives/globalStatsDirective.spec.js b/test/unit/directives/globalStatsDirective.spec.js
@@ -0,0 +1,35 @@
+describe('directive: globalStats', function() {
+  var compile;
+  var scope;
+  var directiveElem;
+
+  beforeEach(function() {
+    module('PlayerStats', function($controllerProvider) {
+      $controllerProvider.register('GlobalStats', function() {
+            jasmine.createSpyObj('GlobalStats', ['globalStats']);
+        });
+    });
+  });
+
+  beforeEach(function(){
+    inject(function($compile, $rootScope){
+      compile = $compile;
+      scope = $rootScope.$new();
+    });
+    directiveElem = getCompiledElement();
+  });
+
+  function getCompiledElement(){
+    var element = angular.element('<global-stats></global-stats>');
+    var compiledElement = compile(element)(scope);
+    scope.$digest();
+    return compiledElement;
+  }
+
+  it('should have a table element', function () {
+    var tableElement = directiveElem.find('table');
+    expect(tableElement.attr('class'))
+      .toEqual('table table-striped');
+  });
+
+});