Date format fix (#845)

Format date questions in an easy-to-read format when displaying and add tests to make sure localModel is in the correct format for the API
CruGlobal · Sep 19, 2023 · 02e0057 · 02e0057
1 parent 71a7b48
commit 02e0057
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 35 deletions.
diff --git a/app/scripts/directives/datepicker.js b/app/scripts/directives/datepicker.js
@@ -27,35 +27,36 @@ angular
             );
           });
         };
+        $scope.getDateOptions = function () {
+          let initialDate = $scope.localModel
+            ? moment($scope.localModel).format('YYYY-MM-DD HH:mm:ss')
+            : null;
+          const dateOptions = $scope.monthYearOnly
+            ? {
+                viewMode: 'years',
+                format: 'MMMM YYYY',
+                defaultDate: initialDate,
+                useCurrent: false,
+                keepOpen: false,
+                allowInputToggle: true,
+                extraFormats: [
+                  'MM/YY',
+                  'MM/YYYY',
+                  'MM-YY',
+                  'MM-YYYY',
+                  'MMM-YYYY',
+                  'MMMM-YYYY',
+                ],
+              }
+            : {
+                defaultDate: initialDate,
+              };
+          return dateOptions;
+        };
       },
       link: function (scope, element) {
         var datePickerElement = angular.element(element).find('.datepicker');
-        var initialDate =
-          scope.localModel && scope.monthYearOnly
-            ? scope.localModel
-            : scope.localModel
-            ? moment(new Date(scope.localModel)).format('MM/DD/YYYY hh:mm A')
-            : null;
-        scope.dateOptions = scope.monthYearOnly
-          ? {
-              viewMode: 'years',
-              format: 'MMMM YYYY',
-              defaultDate: initialDate,
-              useCurrent: false,
-              keepOpen: false,
-              allowInputToggle: true,
-              extraFormats: [
-                'MM/YY',
-                'MM/YYYY',
-                'MM-YY',
-                'MM-YYYY',
-                'MMM-YYYY',
-                'MMMM-YYYY',
-              ],
-            }
-          : {
-              defaultDate: initialDate,
-            };
+        scope.dateOptions = scope.getDateOptions(scope.localModel);
         datePickerElement
           .datetimepicker(scope.dateOptions)
           .on('dp.change', function (ev) {

diff --git a/app/views/components/answerDisplay.html b/app/views/components/answerDisplay.html
@@ -28,8 +28,13 @@
     - {{answer.amount |
     localizedCurrency:conference.currency.currencyCode}}</span
   >
-  <!--Remove slice when API can handle receiving YYYY-MM format-->
   <span ng-switch-when="graduationDateQuestion">
-    {{answer.value.slice(0,-3)}}</span
+    {{answer.value | date:'MMMM yyyy'}}</span
+  >
+  <span ng-switch-when="dateQuestion">
+    {{answer.value | date:'MMMM dd, yyyy'}}</span
+  >
+  <span ng-switch-when="birthDateQuestion">
+    {{answer.value | date:'MMMM dd, yyyy'}}</span
   >
 </ng-switch>
diff --git a/test/spec/directives/datepicker.spec.js b/test/spec/directives/datepicker.spec.js
@@ -10,27 +10,56 @@ describe('Directive: datepicker', function () {
 
     scope = $rootScope.$new();
     $templateCache.put('views/components/graduationDateQuestion.html', '');
-    scope.monthYearOnly = true;
     element = $compile(
-      '<crs-datetimepicker model="answer.value" month-year-only="true"></crs-datetimepicker>',
+      '<crs-datetimepicker model="answer.value"></crs-datetimepicker>',
     )(scope);
     scope.$digest();
     scope = element.isolateScope() || element.scope();
   }));
 
-  it('Sets the date to the correct format based on the type of date question', function () {
+  it('Sets the date to the correct format for the graduation date question (monthYearOnly) datepicker', function () {
+    element = $compile(
+      '<crs-datetimepicker model="answer.value" month-year-only="true"></crs-datetimepicker>',
+    )(scope);
+    scope.$digest();
+    scope = element.isolateScope() || element.scope();
+
     scope.updateTimeStamp(new Date('02/05/1994'));
+    //sets the day to 10
+    expect(scope.localModel).toBe('1994-02-10');
 
+    scope.updateTimeStamp(new Date('02/05/1994 10:11:12'));
+    //removes time and sets the day to 10
     expect(scope.localModel).toBe('1994-02-10');
 
-    scope.monthYearOnly = false;
+    //expects dateOptions to be set with custom parameters for the datepicker
+    expect(Object.keys(scope.dateOptions).length).toBe(7);
 
-    scope.updateTimeStamp(new Date('02/05/1994'));
+    expect(scope.dateOptions.viewMode).toBe('years');
+  });
 
+  it('Sets the date to the correct format for all other types of datepickers', function () {
+    scope.updateTimeStamp(new Date('02/05/1994'));
+    //adds the time and reformats
     expect(scope.localModel).toBe('1994-02-05 00:00:00');
+
+    scope.getDateOptions();
+    //only sets the default date and all other date options are left to be the default
+    expect(Object.keys(scope.dateOptions).length).toBe(1);
+
+    expect(scope.dateOptions.viewMode).toBeUndefined();
   });
 
-  it('Sets date options correctly based on type of date', function () {
-    expect(scope.dateOptions.viewMode).toBe('years');
+  it('Sets the initial/default date to the correct value and format based on the localModel', function () {
+    scope.localModel = new Date('01-30-2023 11:01:05');
+    let dateOptions = scope.getDateOptions();
+
+    expect(dateOptions.defaultDate).toBe('2023-01-30 11:01:05');
+
+    //if the API provides a date without the time
+    scope.localModel = new Date('01-30-2023');
+    dateOptions = scope.getDateOptions();
+
+    expect(dateOptions.defaultDate).toBe('2023-01-30 00:00:00');
   });
 });