feat(CohortDateRange): now a cohort can be selected by default

ISSUES CLOSED: #1893

demo/app/components/cohort-date-range/cohort-date-range.component.ts

@@ -52,6 +52,7 @@ export class CohortDateRangeComponent {
         start: startOfDay(subMonths(startOfMonth(currentDate), 1)),
         end: endOfDay(subDays(startOfMonth(currentDate), 1)),
       },
+      active: true,
     },
   ];
   public lastRange: TsCohortDateRangeChanged | undefined;

terminus-ui/cohort-date-range/src/cohort-date-range.component.html

@@ -5,25 +5,20 @@
   (dateRangeChange)="cohortDateRangeChange($event)"
 ></ts-date-range>
 
-<ts-select
+<ts-selection-list
   label="Select a date range"
   class="ts-cohort-date-range__select"
   [isDisabled]="isDisabled"
+  [allowUserInput]="false"
+  [formControl]="cohortControl"
+  [displayFormatter]="formatter"
   (selectionChange)="selectionChange($event)"
 >
   <ts-option
-    [value]="option.range"
+    [value]="option"
     [option]="option"
     *ngFor="let option of cohorts; trackBy: trackByFn"
   >
     {{ option.display }}
   </ts-option>
-
-  <ts-option
-    *ngIf="allowCustomDates"
-    [value]="customDateCohort.range"
-    [option]="customDateCohort"
-  >
-    {{ customDateCohort.display }}
-  </ts-option>
-</ts-select>
+</ts-selection-list>

terminus-ui/cohort-date-range/src/cohort-date-range.component.md

@@ -4,6 +4,7 @@
 
 - [Cohort Date Range](#cohort-date-range)
   - [Basic usage](#basic-usage)
+    - [Defaulting to a specific cohort](#defaulting-to-a-specific-cohort)
   - [Event driven](#event-driven)
   - [Inputs to the component](#inputs-to-the-component)
     - [allowCustomDates](#allowcustomdates)
@@ -24,13 +25,14 @@ Pass in the cohorts:
 ></ts-cohort-date-range>
 ```
 
+```typescript
 ```typescript
 cohorts: TsDateCohort[] = [
   {
     display: 'Last full year',
     range: {
-      startDate: new Date(2018, 1, 1),
-      endDate: new Date(2018, 12, 31),
+      start: new Date(2018, 1, 1),
+      end: new Date(2018, 12, 31),
     },
   },
   {
@@ -40,28 +42,47 @@ cohorts: TsDateCohort[] = [
       endDate: new Date(2019, 8, 31),
     },
   },
-  {
-    display: 'Custom dates',
-    range: {
-      startDate: '',
-      endDate: '',
-    },
-  },
 ];
 ```
 
 The keys inside the passed in `cohorts` object must match the `TsDateCohort` interface:
 
 ```typescript
 {
+  active?: boolean;
   display: string,
   range: {
-    startDate: Date | string,
-    endDate: Date | string,
+    start: Date | string,
+    end: Date | string,
   }
 }
 ```
 
+### Defaulting to a specific cohort
+
+The first `TsDateCohort` that has the `active` key set to `true` will be selected by default.
+
+```typescript
+```typescript
+cohorts: TsDateCohort[] = [
+  {
+    display: 'Last full year',
+    range: {
+      start: new Date(2018, 1, 1),
+      end: new Date(2018, 12, 31),
+    },
+  },
+  {
+    active: true, // Now this cohort will be selected on load!
+    display: 'Last full month',
+    range: {
+      start: new Date(2019, 8, 1),
+      end: new Date(2019, 8, 31),
+    },
+  },
+];
+```
+
 ## Event driven
 
 Anytime the date range is changed, `cohortDateRangeChanged` is emitted.

terminus-ui/cohort-date-range/src/cohort-date-range.component.scss

@@ -1,15 +1,15 @@
 @import './../../scss/helpers/spacing';
 
+
 .ts-cohort-date-range {
+  --cohort-selection-list-minWidth: 200px;
   display: block;
-}
 
-.ts-select {
-  $SELECT_MIN_WIDTH: 200px;
-
-  &.ts-cohort-date-range__select {
-    display: inline-block;
-    min-width: $SELECT_MIN_WIDTH;
+  .ts-selection-list {
+    &.ts-cohort-date-range__select {
+      display: inline-block;
+      min-width: var(--cohort-selection-list-minWidth);
+    }
   }
 }
 

terminus-ui/cohort-date-range/src/cohort-date-range.component.spec.ts

@@ -5,20 +5,18 @@ import {
 } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { KEYS } from '@terminus/ngx-tools';
 import { createComponent as createComponentInner } from '@terminus/ngx-tools/testing';
 import * as testComponents from '@terminus/ui/cohort-date-range/testing';
 // eslint-disable-next-line no-duplicate-imports
 import {
   getCohortDebugElement,
   getFormFieldElement,
-  getSelectTriggerElement,
   TsCohortDateRangeTestComponent,
 } from '@terminus/ui/cohort-date-range/testing';
 import { TsDateRangeModule } from '@terminus/ui/date-range';
 import { getRangeInputInstances } from '@terminus/ui/date-range/testing';
 import { TsInputComponent } from '@terminus/ui/input';
-import { createKeydownEvent } from '@terminus/ui/select/testing';
+import { TsSelectionListChange } from '@terminus/ui/selection-list';
 
 import {
   TsCohortDateRangeComponent,
@@ -49,7 +47,6 @@ describe(`TsCohortDateRangeComponent`, () => {
     fixture = createComponent(component);
     fixture.detectChanges();
     hostInstance = fixture.componentInstance;
-    fixture.detectChanges();
     startInputInstance = getRangeInputInstances(fixture)[0];
     formFieldElement = getFormFieldElement(fixture);
     cohortDebugElement = getCohortDebugElement(fixture);
@@ -98,65 +95,83 @@ describe(`TsCohortDateRangeComponent`, () => {
   describe(`updateSelectOnRangeChange`, () => {
 
     test(`should do nothing if no cohorts exist`, () => {
-      setupComponent(testComponents.Basic);
+      setupComponent(testComponents.NoCohorts);
+      fixture.detectChanges();
       const debug = getCohortDebugElement(fixture);
       const instance: TsCohortDateRangeComponent = debug.componentInstance;
-      instance.selectComponent.options.toArray = jest.fn();
-      instance.cohorts = undefined as any;
+      instance.cohortControl.setValue = jest.fn();
 
       instance.dateRangeFormGroup.setValue({
         startDate: new Date(),
         endDate: new Date(),
       });
       fixture.detectChanges();
 
-      expect(instance.selectComponent.options.toArray).not.toHaveBeenCalled();
+      expect(instance.cohortControl.setValue).not.toHaveBeenCalled();
     });
 
-    test(`should set the select to the custom cohort when the range is manually changed`, () => {
+    test(`should update the select to the custom cohort when the range is manually changed`, () => {
       setupComponent(testComponents.Basic);
       const debug = getCohortDebugElement(fixture);
       const instance: TsCohortDateRangeComponent = debug.componentInstance;
-      const options = instance.selectComponent.options.toArray();
-      const lastOption = options[options.length - 1];
-      lastOption.select = jest.fn();
       instance.dateRangeFormGroup.patchValue({ startDate: new Date() });
       fixture.detectChanges();
 
-      expect(lastOption.select).toHaveBeenCalled();
+      expect(instance.cohortControl.value[0]).toEqual(expect.objectContaining({ display: 'Custom dates' }));
+    });
+
+    test(`should not update the select when the range is manually changed to a cohort range`, () => {
+      const date1 = new Date(2018, 1, 1);
+      const date2 = new Date(2018, 2, 1);
+      setupComponent(testComponents.Basic);
+      const debug = getCohortDebugElement(fixture);
+      const instance: TsCohortDateRangeComponent = debug.componentInstance;
+      instance.cohortControl.setValue = jest.fn();
+      instance.dateRangeFormGroup.patchValue({
+        startDate: date1,
+        endDate: date2,
+      });
+      fixture.detectChanges();
+
+      expect(instance.cohortControl.setValue).not.toHaveBeenCalled();
     });
 
   });
 
-  describe(`select emitters`, function() {
-    let trigger: HTMLElement;
-    let event: KeyboardEvent;
+  describe(`cohorts`, () => {
 
-    beforeEach(() => {
-      event = createKeydownEvent(KEYS.DOWN_ARROW);
+    test(`should set the active cohort by default`, () => {
+      setupComponent(testComponents.DefaultCohort);
+      fixture.detectChanges();
+      const debug = getCohortDebugElement(fixture);
+      const instance: TsCohortDateRangeComponent = debug.componentInstance;
+      const range = instance.dateRangeFormGroup.value;
+      const year = new Date(range.startDate).getFullYear();
+
+      expect(year).toEqual(2019);
     });
 
-    test(`should emit change event and set date range disabled when there is start/end date passed in`, () => {
-      setupComponent(testComponents.Basic);
+    test(`should not add the custom cohort if custom dates are not allowed`, () => {
+      setupComponent(testComponents.NoCustomDates);
       fixture.detectChanges();
-      hostInstance.cohortDateRangeChanged = jest.fn();
-      trigger = getSelectTriggerElement(fixture);
-      event = createKeydownEvent(KEYS.DOWN_ARROW);
-      trigger.dispatchEvent(event);
+      const debug = getCohortDebugElement(fixture);
+      const instance: TsCohortDateRangeComponent = debug.componentInstance;
+      expect(instance.cohorts.length).toEqual(1);
+    });
+
+    test(`should add the custom cohort to the end if allowUserInput is true`, () => {
+      setupComponent(testComponents.Basic);
       fixture.detectChanges();
+      const debug = getCohortDebugElement(fixture);
+      const instance: TsCohortDateRangeComponent = debug.componentInstance;
 
-      expect(hostInstance.cohortDateRangeChanged).toHaveBeenCalled();
+      expect(instance.cohorts.length).toEqual(2);
+      expect(instance.cohorts[1]).toEqual(expect.objectContaining({ display: 'Custom dates' }));
     });
 
-    test(`should not emit change event and set date range enabled when there is no start/end date passed in`, () => {
-      setupComponent(testComponents.Standard);
-      cohortInstance.cohortDateRangeChange = jest.fn();
-      trigger = getSelectTriggerElement(fixture);
-      event = createKeydownEvent(KEYS.DOWN_ARROW);
-      trigger.dispatchEvent(event);
+  });
 
-      expect(cohortInstance.cohortDateRangeChange).not.toHaveBeenCalled();
-    });
+  describe(`select emitters`, function() {
 
     test(`should emit change event if date range has any changes`, () => {
       setupComponent(testComponents.Basic);
@@ -172,4 +187,28 @@ describe(`TsCohortDateRangeComponent`, () => {
     });
   });
 
+  describe(`selectionChange`, () => {
+
+    test(`should set the date range if the cohort selection changes`, () => {
+      setupComponent(testComponents.DefaultCohort);
+      fixture.detectChanges();
+      const debug = getCohortDebugElement(fixture);
+      const instance: TsCohortDateRangeComponent = debug.componentInstance;
+      instance.setDateRangeValues = jest.fn();
+
+      const cohort = {
+        display: 'foo',
+        range: {
+          start: new Date(),
+          end: new Date(),
+        },
+      };
+      const fakeEvent = new TsSelectionListChange({} as any, [cohort]);
+      instance.selectionChange(fakeEvent as any);
+
+      expect(instance.setDateRangeValues).toHaveBeenCalled();
+    });
+
+  });
+
 });