Fix change-indicating css classes in timeline comparison view

app/assets/javascripts/angular/directives/timelines/timeline-column-data-directive.js

@@ -56,24 +56,30 @@ angular.module('openproject.timelines.directives')
       setHistoricalData(scope);
 
       function getColumnData() {
-        var map = {
-          "type": "getTypeName",
-          "status": "getStatusName",
-          "responsible": "getResponsibleName",
-          "assigned_to": "getAssignedName",
-          "project": "getProjectName"
-        };
-
         switch(scope.columnName) {
           case 'start_date':
             return scope.rowObject.start_date;
           case 'due_date':
             return scope.rowObject.due_date;
           default:
-            return scope.rowObject[map[scope.columnName]]();
+            return scope.rowObject.getAttribute(getAttributeAccessor(scope.columnName));
         }
       }
 
+      function getAttributeAccessor(attr) {
+        return {
+          "type": "getTypeName",
+          "status": "getStatusName",
+          "responsible": "getResponsibleName",
+          "assigned_to": "getAssignedName",
+          "project": "getProjectName"
+        }[attr] || attr;
+      }
+
+      function hasChanged(planningElement, attr) {
+        return planningElement.does_historical_differ(getAttributeAccessor(attr));
+      }
+
       function getCustomFieldColumnData(object, customFieldName, customFields, users) {
         if(!customFields) return; // custom_fields provides necessary meta information about the custom field column
 
@@ -85,21 +91,21 @@ angular.module('openproject.timelines.directives')
       }
 
       function setHistoricalData() {
-        scope.historicalDataDiffers = scope.rowObject.does_historical_differ(scope.columnName);
+        scope.historicalDataDiffers = hasChanged(scope.rowObject, scope.columnName);
 
         scope.historicalDateKind = getHistoricalDateKind(scope.rowObject, scope.columnName);
         scope.labelTimelineChanged = I18n.t('js.timelines.change');
 
         if (scope.rowObject.historical_element) {
-          scope.historicalData = scope.rowObject.historical_element[scope.columnName] || I18n.t('js.timelines.empty');
+          scope.historicalData = scope.rowObject.historical_element.getAttribute(getAttributeAccessor(scope.columnName)) || I18n.t('js.timelines.empty');
         }
       }
 
-      function getHistoricalDateKind(object, value) {
+      function getHistoricalDateKind(planningElement, attr) {
-        if (!object.does_historical_differ(value)) return;
+        if (!hasChanged(planningElement, attr)) return;
 
-        var newDate = object[value];
+        var newDate = planningElement[attr];
-        var oldDate = object.historical()[value];
+        var oldDate = planningElement.historical_element[attr];
 
         if (oldDate && newDate) {
           return (newDate < oldDate ? 'postponed' : 'preponed');

karma/tests/directives/timelines/timeline-column-data-directive-test.js

@@ -66,12 +66,12 @@ describe('timelineColumnData Directive', function() {
         compile();
       });
 
-      it('should render object data', function() {
+      it('should render the object data', function() {
         expect(element.find('.tl-column').text()).to.equal(type.name);
       });
     });
 
-    describe('rendering historical data', function() {
+    describe('rendering a changed historical date', function() {
       beforeEach(function() {
         historicalStartDate = '2014-04-20';
 
@@ -83,15 +83,54 @@ describe('timelineColumnData Directive', function() {
         compile();
       })
 
-      it('should render the historical data', function() {
-        var historicalContent = element.find('.tl-historical a').text();
-        expect(historicalContent).to.equal(historicalStartDate);
-      })
-
       it('should assign a historical date kind class to the data container', function() {
         var container = element.find('.tl-column');
         expect(container.hasClass('tl-preponed')).to.be.true;
       });
+
+      describe('the historical data container', function() {
+        beforeEach(function() {
+          historicalDataContainer = element.find('.tl-historical a');
+        });
+
+        it('should contain the historical data', function() {
+          var historicalContent = historicalDataContainer.text();
+          expect(historicalContent).to.equal(historicalStartDate);
+        });
+
+        it('should have a css class indicating the change', function() {
+          expect(historicalDataContainer.hasClass('tl-icon-preponed')).to.be.true;
+        });
+      })
+    });
+
+    describe('rendering changed data which is not a date', function() {
+      beforeEach(function() {
+        historicalType = Factory.build('PlanningElementType');
+
+        scope.rowObject.historical_element =  Factory.build("PlanningElement", {
+          planning_element_type: historicalType
+        });
+
+        scope.columnName = 'type';
+        compile();
+      })
+
+      describe('the historical data container', function() {
+        beforeEach(function() {
+          historicalDataContainer = element.find('.tl-historical a');
+        });
+
+        it('should contain the historical data', function() {
+          var historicalContent = historicalDataContainer.text();
+          expect(historicalContent).to.equal(historicalType.name);
+        });
+
+        it('should have a css class indicating the change', function() {
+          expect(historicalDataContainer.hasClass('tl-icon-changed')).to.be.true;
+        });
+      })
+
     });
   });
 });

public/templates/timelines/timeline_column_data.html

@@ -2,7 +2,7 @@
   <a href="javascript://" title="{{labelTimelineChanged}}"
      ng-class="[
        'icon',
-       'tl-icon-' + isDateColumn && historicalDateKind || 'tl-icon-changed'
+       'tl-icon-' + (isDateColumn && historicalDateKind || 'changed')
      ]" ng-bind="historicalData"></a>
   <br/>
 </span>