fix(CohortDateRange): cleanup, correctly export test helpers

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

@@ -9,4 +9,9 @@
     ></ts-cohort-date-range>
 
   </form>
+
+<pre *ngIf="lastRange">
+  Start: {{ lastRange.start }}
+  End: {{ lastRange.end }}
+</pre>
 </ts-card>

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

@@ -1,20 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import {
   FormBuilder,
   FormGroup,
   Validators,
 } from '@angular/forms';
 import {
   endOfDay,
-  parseISO,
   startOfDay,
   startOfMonth,
   subDays,
   subMonths,
 } from 'date-fns';
+import { TsCohortDateRangeChanged } from '@terminus/ui/cohort-date-range';
 
 const currentDate: Date = new Date();
 
+
 @Component({
   selector: 'demo-cohort-date-range',
   templateUrl: './cohort-date-range.component.html',
@@ -53,6 +54,7 @@ export class CohortDateRangeComponent {
       end: '',
     },
   }];
+  public lastRange: TsCohortDateRangeChanged | undefined;
 
 
   constructor(
@@ -61,8 +63,9 @@ export class CohortDateRangeComponent {
 
 
 
-  public printRange(formValue: any): void {
-    console.log('DEMO: formValue: ', formValue);
+  public printRange(value: TsCohortDateRangeChanged): void {
+    console.log('DEMO: formValue: ', value);
+    this.lastRange = value;
   }
 
 }

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

@@ -1,22 +1,21 @@
-<div>
-  <ts-date-range
-    class="ts-cohort-date-range__date-range"
-    [dateFormGroup]="dateRangeFg"
-    [isDisabled]="!allowCustomDates || isDisabled || disableDateRange"
-    (dateRangeChange)="cohortDateRangeChange($event)"
-  ></ts-date-range>
-  <ts-select
-    label="Select a date range"
-    class="ts-cohort-date-range__select"
-    [isDisabled]="isDisabled"
-    (selectionChange)="selectionChange($event)"
+<ts-date-range
+  class="ts-cohort-date-range__date-range"
+  [dateFormGroup]="dateRangeFormGroup"
+  [isDisabled]="!allowCustomDates || isDisabled || disableDateRange"
+  (dateRangeChange)="cohortDateRangeChange($event)"
+></ts-date-range>
+
+<ts-select
+  label="Select a date range"
+  class="ts-cohort-date-range__select"
+  [isDisabled]="isDisabled"
+  (selectionChange)="selectionChange($event)"
+>
+  <ts-option
+    [value]="option.range"
+    [option]="option"
+    *ngFor="let option of cohorts; trackBy: trackByFn"
   >
-    <ts-option
-      [value]="option.range"
-      [option]="option"
-      *ngFor="let option of cohorts; trackBy: trackByFn"
-    >
-      {{ option.display }}
-    </ts-option>
-  </ts-select>
-</div>
+    {{ option.display }}
+  </ts-option>
+</ts-select>

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

@@ -8,6 +8,7 @@
   - [Inputs to the component](#inputs-to-the-component)
     - [allowCustomDates](#allowcustomdates)
     - [Disable the component](#disable-the-component)
+  - [Test Helpers](#test-helpers)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -107,3 +108,16 @@ The entire component can be disabled:
  [isDisabled]="true"
 ></ts-cohort-date-range>
 ```
+
+## Test Helpers
+
+Some helpers are exposed to assist with testing. These are imported from `@terminus/ui/cohort-date-range/testing`;
+
+[[source]][test-helpers-src]
+
+| Function                |
+|------------------------|
+| `getCohortDebugElement` |
+
+
+[test-helpers-src]: https://github.com/GetTerminus/terminus-ui/blob/release/terminus-ui/cohort-date-range/testing/src/test-helpers.ts

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

@@ -1,8 +1,12 @@
 @import './../../scss/helpers/spacing';
 
-$SELECT_MIN_WIDTH: 200px;
+.ts-cohort-date-range {
+  display: block;
+}
 
 .ts-select {
+  $SELECT_MIN_WIDTH: 200px;
+
   &.ts-cohort-date-range__select {
     display: inline-block;
     min-width: $SELECT_MIN_WIDTH;

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

@@ -5,41 +5,55 @@ 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 { getRangeInputInstances } from '@terminus/ui/date-range/testing';
-
-import { By } from '@angular/platform-browser';
-import { KEYS } from '@terminus/ngx-tools';
-import { TsDateRangeModule } from '@terminus/ui/date-range';
-import { TsFormFieldComponent } from '@terminus/ui/form-field';
 import {
-  createKeydownEvent,
+  getCohortDebugElement,
+  getFormFieldElement,
   getSelectTriggerElement,
-} from '@terminus/ui/select/testing';
+  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 {
   TsCohortDateRangeComponent,
   TsCohortDateRangeModule,
 } from './cohort-date-range.module';
 
+
+function createComponent<T>(component: Type<T>, providers: Provider[] = [], imports: any[] = []): ComponentFixture<T> {
+  return createComponentInner<T>(component,
+    providers,
+    [
+      ReactiveFormsModule,
+      TsDateRangeModule,
+      TsCohortDateRangeModule,
+      ...imports,
+    ]);
+}
+
 describe(`TsCohortDateRangeComponent`, () => {
-  let fixture;
+  let fixture: ComponentFixture<TsCohortDateRangeTestComponent>;
   let hostInstance;
-  let startInputInstance;
-  let formFieldElement;
-  let cohortDebugElement;
-  let cohortInstance;
+  let startInputInstance: TsInputComponent;
+  let formFieldElement: HTMLElement;
+  let cohortDebugElement: DebugElement;
+  let cohortInstance: TsCohortDateRangeComponent;
 
   function setupComponent(component) {
     fixture = createComponent(component);
     fixture.detectChanges();
-    hostInstance = getCohortComponentInstance(fixture);
+    hostInstance = fixture.componentInstance;
     fixture.detectChanges();
     startInputInstance = getRangeInputInstances(fixture)[0];
     formFieldElement = getFormFieldElement(fixture);
     cohortDebugElement = getCohortDebugElement(fixture);
-    cohortInstance = getCohortInstance(cohortDebugElement);
+    cohortInstance = cohortDebugElement.componentInstance;
   }
 
   describe(`allowCustomsDate`, () => {
@@ -50,35 +64,36 @@ describe(`TsCohortDateRangeComponent`, () => {
     test(`should have date range readonly if allowCustomsDate is false`, () => {
       hostInstance.allowCustomDates = false;
       fixture.detectChanges();
-      expect(formFieldElement.nativeElement.classList).toContain('ts-form-field--disabled');
+      expect(formFieldElement.classList).toContain('ts-form-field--disabled');
       expect(startInputInstance.isDisabled).toBeTruthy();
     });
 
     test(`should not disabled date range if allowCustomsDate is true`, () => {
       hostInstance.allowCustomDates = true;
       fixture.detectChanges();
-      expect(formFieldElement.nativeElement.classList).not.toContain('ts-form-field--disabled');
+      expect(formFieldElement.classList).not.toContain('ts-form-field--disabled');
       expect(startInputInstance.isDisabled).toBeFalsy();
     });
   });
 
   describe(`select emitters`, function() {
-    let trigger;
-    let event;
-    let element;
+    let trigger: HTMLElement;
+    let event: KeyboardEvent;
 
     beforeEach(() => {
-      trigger = getSelectTriggerElement(fixture);
       event = createKeydownEvent(KEYS.DOWN_ARROW);
     });
 
     test(`should emit change event and set date range disabled when there is start/end date passed in`, () => {
       setupComponent(testComponents.Basic);
-      cohortInstance.cohortDateRangeChange = jest.fn();
+      fixture.detectChanges();
+      hostInstance.cohortDateRangeChanged = jest.fn();
       trigger = getSelectTriggerElement(fixture);
       event = createKeydownEvent(KEYS.DOWN_ARROW);
       trigger.dispatchEvent(event);
-      expect(cohortInstance.cohortDateRangeChange).toHaveBeenCalled();
+      fixture.detectChanges();
+
+      expect(hostInstance.cohortDateRangeChanged).toHaveBeenCalled();
       expect(cohortInstance.disableDateRange).toBeTruthy();
     });
 
@@ -89,6 +104,7 @@ describe(`TsCohortDateRangeComponent`, () => {
       trigger = getSelectTriggerElement(fixture);
       event = createKeydownEvent(KEYS.DOWN_ARROW);
       trigger.dispatchEvent(event);
+
       expect(cohortInstance.cohortDateRangeChange).not.toHaveBeenCalled();
       expect(cohortInstance.disableDateRange).toBeFalsy();
     });
@@ -108,61 +124,3 @@ describe(`TsCohortDateRangeComponent`, () => {
   });
 
 });
-
-
-
-
-/**
- * HELPERS
- */
-
-export function createComponent<T>(component: Type<T>, providers: Provider[] = [], imports: any[] = []): ComponentFixture<T> {
-  return createComponentInner<T>(component,
-    providers,
-    [
-      ReactiveFormsModule,
-      TsDateRangeModule,
-      TsCohortDateRangeModule,
-      ...imports,
-    ]);
-}
-
-/**
- * Get TsCohortDateRangeComponent instance
- * @param fixture
- * @return TsCohortDateRangeComponent
- */
-// tslint:disable-next-line no-any
-export function getCohortComponentInstance(fixture: ComponentFixture<any>): TsCohortDateRangeComponent {
-  return fixture.componentInstance;
-}
-
-/**
- * Get TsFormFieldComponent
- * @param fixture - The component fixture
- * @return TsFormFieldComponent
- */
-export function getFormFieldElement(fixture): TsFormFieldComponent {
-  return fixture.debugElement.query(By.css('.ts-form-field'));
-}
-
-/**
- * Get the DebugElement for a TsCohortDateRangeComponent
- *
- * @param fixture - The component fixture
- * @return The DebugElement
- */
-export function getCohortDebugElement(fixture): DebugElement {
-  return fixture.debugElement.query(By.directive(TsCohortDateRangeComponent));
-}
-
-/**
- * Get the DebugElement Instance
- *
- * @param fixture - The component fixture
- * @return The DebugElement instance
- */
-export function getCohortInstance(cohortDebugElement): TsCohortDateRangeComponent {
-  return cohortDebugElement.componentInstance;
-}
-