fix(DateRange): *BREAKING CHANGE* change emitter is now called dateRa…

…ngeChange BREAKING CHANGE: ts-date-range instances will have to update \`change\` to \`dateRangeChange\` ISSUES CLOSED: #1361
GetTerminus · Apr 9, 2019 · b82befc · b82befc
1 parent 7055c85
commit b82befc
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 14 deletions.
diff --git a/demo/app/components/date-range/date-range.component.html b/demo/app/components/date-range/date-range.component.html
@@ -19,7 +19,7 @@ <h3 tsCardTitle tsVerticalSpacing>Demo Controls</h3>
 
     <ts-date-range
       [dateFormGroup]="myForm.get('dateRange')"
-      (change)="printRange(myForm.value)"
+      (dateRangeChange)="printRange(myForm.value)"
     ></ts-date-range>
 
   </form>

diff --git a/terminus-ui/date-range/src/date-range.component.md b/terminus-ui/date-range/src/date-range.component.md
@@ -96,13 +96,13 @@ There are three selection events that you can tie into:
 <ts-date-range
   (startSelected)="myMethod($event)"
   (endSelected)="myMethod($event)"
-  (change)="myMethod($event)"
+  (dateRangeChange)="myMethod($event)"
 ></ts-date-range>
 ```
 
 1. `startSelected` is fired when a start date is selected.
 1. `endSelected` is fired when an end date is selected.
-1. `change` is fired when the date range changes.
+1. `dateRangeChange` is fired when the date range changes.
 
 
 ## Date range boundaries

diff --git a/terminus-ui/date-range/src/date-range.component.spec.ts b/terminus-ui/date-range/src/date-range.component.spec.ts
@@ -167,18 +167,18 @@ describe(`TsDateRangeComponent`, function() {
       typeInElement('3-4-2019', startInputInstance.inputElement.nativeElement);
       fixture.detectChanges();
       expect(fixture.componentInstance.startSelected).toHaveBeenCalledWith(new Date('3-4-2019'));
-      expect(fixture.componentInstance.change).toHaveBeenCalledWith({start: new Date('3-4-2019'), end: null});
+      expect(fixture.componentInstance.dateRangeChange).toHaveBeenCalledWith({start: new Date('3-4-2019'), end: null});
 
       typeInElement('3-8-2019', endInputInstance.inputElement.nativeElement);
       fixture.detectChanges();
       expect(fixture.componentInstance.endSelected).toHaveBeenCalledWith(new Date('3-8-2019'));
-      expect(fixture.componentInstance.change).toHaveBeenCalledWith({start: new Date('3-4-2019'), end: new Date('3-8-2019')});
+      expect(fixture.componentInstance.dateRangeChange).toHaveBeenCalledWith({start: new Date('3-4-2019'), end: new Date('3-8-2019')});
 
       typeInElement('', startInputInstance.inputElement.nativeElement);
       fixture.detectChanges();
       startInputInstance.inputElement.nativeElement.blur();
       fixture.detectChanges();
-      const changeMock = fixture.componentInstance.change.mock;
+      const changeMock = fixture.componentInstance.dateRangeChange.mock;
       // FIXME: Once https://github.com/GetTerminus/terminus-ui/issues/1361 is complete we should adjust this
       // test to verify that the changeMock was called exactly 3 times.
       expect(changeMock.calls[changeMock.calls.length - 1][0]).toEqual({start: null, end: new Date('3-8-2019')});

diff --git a/terminus-ui/date-range/src/date-range.component.ts b/terminus-ui/date-range/src/date-range.component.ts
@@ -62,7 +62,7 @@ export interface TsDateRange {
  *              startMaxDate="{{ new Date(2017, 4, 30) }}"
  *              startMinDate="{{ new Date(2017, 4, 1) }}"
  *              theme="primary"
- *              (change)="myMethod($event)"
+ *              (dateRangeChange)="myMethod($event)"
  *              (endSelected)="myMethod($event)"
  *              (startSelected)="myMethod($event)"
  * ></ts-date-range>
@@ -216,7 +216,7 @@ export class TsDateRangeComponent implements OnInit, OnDestroy {
    * Event emitted anytime the range is changed
    */
   @Output()
-  public change: EventEmitter<TsDateRange> = new EventEmitter();
+  public dateRangeChange: EventEmitter<TsDateRange> = new EventEmitter();
 
   /**
    * Output the end date when selected
@@ -342,7 +342,7 @@ export class TsDateRangeComponent implements OnInit, OnDestroy {
       }
 
       this.startSelected.emit(date);
-      this.change.emit(this.dateRange);
+      this.dateRangeChange.emit(this.dateRange);
     } else {
       // If no startDate was selected, reset to the original endMinDate
       this.endMinDate$.next(this.endMinDate);
@@ -367,7 +367,7 @@ export class TsDateRangeComponent implements OnInit, OnDestroy {
       }
 
       this.endSelected.emit(date);
-      this.change.emit(this.dateRange);
+      this.dateRangeChange.emit(this.dateRange);
     } else {
       // If no endDate was selected, reset to the original startMaxDate
       this.startMaxDate$.next(this.startMaxDate);
@@ -393,7 +393,7 @@ export class TsDateRangeComponent implements OnInit, OnDestroy {
       ctrl.setValue(value);
       ctrl.markAsTouched();
       ctrl.updateValueAndValidity();
-      this.change.emit(this.dateRange);
+      this.dateRangeChange.emit(this.dateRange);
     }
   }
 
@@ -416,7 +416,7 @@ export class TsDateRangeComponent implements OnInit, OnDestroy {
       ctrl.setValue(value);
       ctrl.markAsTouched();
       ctrl.updateValueAndValidity();
-      this.change.emit(this.dateRange);
+      this.dateRangeChange.emit(this.dateRange);
     }
   }
 

diff --git a/terminus-ui/date-range/testing/src/test-components.ts b/terminus-ui/date-range/testing/src/test-components.ts
@@ -56,7 +56,7 @@ export class SeededDates {
   <form [formGroup]="dateGroup" novalidate>
     <ts-date-range
       [dateFormGroup]="dateGroup"
-      (change)="change($event)"
+      (dateRangeChange)="dateRangeChange($event)"
       (endSelected)="endSelected($event)"
       (startSelected)="startSelected($event)"
     ></ts-date-range>
@@ -65,7 +65,7 @@ export class SeededDates {
 })
 export class Emitters {
   dateGroup = createDateRangeGroup();
-  change = jest.fn();
+  dateRangeChange = jest.fn();
   endSelected = jest.fn();
   startSelected = jest.fn();