chore(Spacing): has integration tests

ISSUES CLOSED: #1294

terminus-ui/spacing/src/vertical-spacing.directive.spec.ts

@@ -1,51 +1,87 @@
-import { ElementRefMock } from '@terminus/ngx-tools/testing';
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { createComponent } from '@terminus/ngx-tools/testing';
 
 import { TS_SPACING } from './spacing.constant';
-import { TsVerticalSpacingDirective } from './vertical-spacing.directive';
+import { TsSpacingModule } from './spacing.module';
+import { TsVerticalSpacingDirective, TsVerticalSpacingTypes } from './vertical-spacing.directive';
+
+
+@Component({
+  template: `
+    <div [tsVerticalSpacing]="verticalSpacing">Vertical Spacing Content</div>
+  `,
+})
+class TestHostComponent {
+  verticalSpacing: TsVerticalSpacingTypes;
+
+  @ViewChild(TsVerticalSpacingDirective)
+  verticalSpacingDirective: TsVerticalSpacingDirective;
+}
+
+@Component({
+  template: `
+    <div tsVerticalSpacing>
+      Vertical Spacing Basic
+    </div>
+  `,
+})
+class TestHostBasicComponent {
+  @ViewChild(TsVerticalSpacingDirective)
+  verticalSpacingDirective: TsVerticalSpacingDirective;
+}
 
 
 describe(`TsVerticalSpacingDirective`, function() {
-  let directive: TsVerticalSpacingDirective;
-
-  beforeEach(() => {
-    directive = new TsVerticalSpacingDirective(
-      new ElementRefMock(),
-    );
-  });
 
+  describe(`set tsVerticalSpacing()`, () => {
+    let component: TestHostComponent;
+    let fixture: ComponentFixture<TestHostComponent>;
+    let spacingDiv: HTMLElement;
+    let directive: TsVerticalSpacingDirective;
+
+    beforeEach(() => {
+      fixture = createComponent(TestHostComponent, [], [TsSpacingModule]);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+      directive = component.verticalSpacingDirective;
+      spacingDiv = fixture.debugElement.query(By.directive(TsVerticalSpacingDirective)).nativeElement as HTMLElement;
+    });
 
-  it(`should exist`, () => {
-    expect(directive).toBeTruthy();
-  });
 
+    test(`should exist`, () => {
+      expect(fixture).toBeTruthy();
+      expect(spacingDiv).toBeTruthy();
+    });
 
-  describe(`set tsVerticalSpacing()`, () => {
 
-    it(`should set the default margin if no value is passed in`, () => {
+    test(`should set the default margin if no value is passed in`, () => {
       directive.tsVerticalSpacing = '' as any;
 
       expect(directive['elementRef'].nativeElement.style.marginBottom)
         .toEqual(TS_SPACING.default[0]);
     });
 
 
-    it(`should add the expected spacing class`, () => {
+    test(`should add the expected spacing class`, () => {
       directive.tsVerticalSpacing = 'large--2';
 
       expect(directive['elementRef'].nativeElement.style.marginBottom)
         .toEqual(TS_SPACING.large[2]);
     });
 
 
-    it(`should add the expected spacing class for 'none'`, () => {
+    test(`should add the expected spacing class for 'none'`, () => {
       directive.tsVerticalSpacing = 'none';
 
       expect(directive['elementRef'].nativeElement.style.marginBottom)
-        .toEqual(TS_SPACING.none[0]);
+        .toEqual('0px');
     });
 
 
-    it(`should throw an error if an unexpected value is passed in`, () => {
+    test(`should throw an error if an unexpected value is passed in`, () => {
       expect(() => {
         try {
           directive.tsVerticalSpacing = 'small--5' as any;
@@ -57,4 +93,15 @@ describe(`TsVerticalSpacingDirective`, function() {
 
   });
 
+  describe(`default TsVerticalSpacing`, () => {
+    test(`should set default values`, () => {
+      const fixtureBasic = createComponent(TestHostBasicComponent, [], [TsSpacingModule]);
+      fixtureBasic.detectChanges();
+
+      expect(fixtureBasic).toBeTruthy();
+      const spacingDiv = fixtureBasic.debugElement.query(By.directive(TsVerticalSpacingDirective));
+      expect(spacingDiv).toBeTruthy();
+    });
+  });
+
 });