chore(ValidationMessages): tests are converted to integration (#1558)

ISSUES CLOSED: #1297

terminus-ui/validation-messages/src/validation-messages.component.spec.ts

@@ -1,96 +1,127 @@
-import { ChangeDetectorRefMock } from '@terminus/ngx-tools/testing';
+import { ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { createComponent } from '@terminus/ngx-tools/testing';
 
-import { TsValidationMessagesServiceMock } from '@terminus/ui/validation-messages/testing';
+import * as testComponents from '../testing/src/test-components';
 import { TsValidationMessagesComponent } from './validation-messages.component';
+import { TsValidationMessagesModule } from './validation-messages.module';
 
 
-describe('InputMessagesComponent', function() {
-  let component: TsValidationMessagesComponent;
-
-  beforeEach(() => {
-    component = new TsValidationMessagesComponent(
-      new TsValidationMessagesServiceMock(),
-      new ChangeDetectorRefMock(),
-    );
-    component['validationMessageService'].getValidatorErrorMessage = jest.fn();
-  });
-
-
-  test(`should exist`, () => {
-    expect(component).toBeTruthy();
-  });
+describe(`TsValidationMessagesComponent`, function() {
 
+  describe(`basics and defaults`, function() {
+    let component: testComponents.Basic;
+    let fixture: ComponentFixture<testComponents.Basic>;
+    let validationMessage: TsValidationMessagesComponent;
+    let validationMessageEl: HTMLElement;
 
-  describe(`get validationMessage()`, () => {
+    beforeEach(() => {
+      fixture = createComponent(testComponents.Basic, [], [TsValidationMessagesModule]);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+      validationMessage = component.validationMessagesComponent;
+      validationMessageEl = fixture.debugElement.query(By.css('.c-validation-message')).nativeElement as HTMLElement;
 
-    test(`should return messages for validation errors if the control has been touched`, () => {
-      const ERROR = {valid: false};
-      component.validateOnChange = false;
-      component.control = {
-        touched: true,
-        errors: {invalidEmail: ERROR},
-      } as any;
-      // tslint:disable: no-unused-variable
-      const message = component.validationMessage;
-      // tslint:enable: no-unused-variable
-
-      expect(component['validationMessageService'].getValidatorErrorMessage)
-        .toHaveBeenCalledWith('invalidEmail', ERROR);
+      validationMessage['validationMessageService'].getValidatorErrorMessage = jest.fn();
     });
 
-
-    test(`should return messages for validation errors if validateOnChange is true`, () => {
-      component.validateOnChange = true;
-      component.control = {
-        touched: false,
-        errors: {},
-      } as any;
-      const message = component.validationMessage;
-
-      expect(component['validationMessageService'].getValidatorErrorMessage).not.toHaveBeenCalled();
-      expect(message).toEqual(null);
+    test(`should exist`, () => {
+      expect(validationMessage).toBeTruthy();
+      expect(validationMessageEl).toBeTruthy();
     });
 
-
-    test(`should return null if the control hasn't been touched`, () => {
-      const ERROR = {valid: false};
-      component.control = {
-        touched: false,
-        errors: {invalidEmail: ERROR},
-      } as any;
-      const message = component.validationMessage;
-
-      expect(component['validationMessageService'].getValidatorErrorMessage).not.toHaveBeenCalled();
-      expect(message).toEqual(null);
+    test(`should set default uid`, () => {
+      expect(validationMessage.id).toContain('ts-validation-messages-');
     });
 
-
-    test(`should return null if no control was passed in`, () => {
-      expect(component.validationMessage).toEqual(null);
-      expect(component['validationMessageService'].getValidatorErrorMessage).not.toHaveBeenCalled();
+    describe(`get validation messages`, () => {
+
+      test(`should return null if no control was passed in`, () => {
+        expect(validationMessage.validationMessage).toBeNull();
+      });
+
+      test(`should return error if control is touched`, () => {
+        const ERROR = {valid: false};
+        const control = {
+          touched: true,
+          errors: {invalidEmail: ERROR},
+        // tslint:disable-next-line:no-any
+        } as any;
+        component.controlForm = control;
+        fixture.detectChanges();
+
+        expect(validationMessage.control).toBeTruthy();
+        expect(validationMessage['validationMessageService'].getValidatorErrorMessage)
+          .toHaveBeenCalledWith('invalidEmail', ERROR);
+      });
+
+      test(`should not return error if validateOnChange is true and there is no error`, () => {
+        component.validateOnChange = true;
+        const control = {
+          touched: false,
+          errors: {},
+        // tslint:disable-next-line:no-any
+        } as any;
+        component.controlForm = control;
+        fixture.detectChanges();
+
+        expect(validationMessage.control).toBeTruthy();
+        expect(validationMessage['validationMessageService'].getValidatorErrorMessage)
+          .not.toHaveBeenCalled();
+        expect(validationMessage.validationMessage).toBeNull();
+      });
+
+      test(`should return error if validateOnChange is true, error is present, and control is not touched`, () => {
+        component.validateOnChange = true;
+        const ERROR = {valid: false};
+        const control = {
+          touched: false,
+          errors: {invalidEmail: ERROR},
+        // tslint:disable-next-line:no-any
+        } as any;
+        component.controlForm = control;
+        fixture.detectChanges();
+
+        expect(validationMessage.control).toBeTruthy();
+        expect(validationMessage['validationMessageService'].getValidatorErrorMessage)
+          .toHaveBeenCalledWith('invalidEmail', ERROR);
+      });
     });
-
   });
 
+  describe(`customizations`, () => {
+    let component: testComponents.TestHostComponent;
+    let fixture: ComponentFixture<testComponents.TestHostComponent>;
+    let validationMessage: TsValidationMessagesComponent;
+    let validationMessageEl: HTMLElement;
+
+    beforeEach(() => {
+      fixture = createComponent(testComponents.TestHostComponent, [], [TsValidationMessagesModule]);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+      validationMessage = component.validationMessagesComponent;
+      validationMessageEl = fixture.debugElement.query(By.css('.c-validation-message')).nativeElement as HTMLElement;
+    });
 
-  describe(`validateImmediately`, () => {
 
-    test(`should set/get the immediate flag`, () => {
-      expect(component.validateImmediately).toEqual(false);
+    test(`should set validateImmediately`, () => {
       component.validateImmediately = true;
-      expect(component.validateImmediately).toEqual(true);
-    });
+      fixture.detectChanges();
 
-  });
+      expect(validationMessage.validateImmediately).toEqual(true);
 
+      component.validateImmediately = false;
+      fixture.detectChanges();
 
-  describe(`id`, () => {
-
-    test(`should use UID if no value is passed in`, () => {
-      component.id = undefined as any;
-      expect(component.id).toEqual(expect.stringContaining('ts-validation-messages-'));
+      expect(validationMessage.validateImmediately).toEqual(false);
     });
 
-  });
+    test(`should set id`, () => {
+      component.id = 'foo';
+      fixture.detectChanges();
 
+      expect(validationMessage.id).toEqual('foo');
+      expect(validationMessageEl.id).toEqual('foo');
+    });
+  });
 });

terminus-ui/validation-messages/testing/src/public-api.ts

@@ -1,2 +1,3 @@
+export * from './test-components';
 export * from './test-helpers';
 export * from './validation-messages.service.mock';

terminus-ui/validation-messages/testing/src/test-components.ts

@@ -0,0 +1,62 @@
+import {
+  Component,
+  NgModule,
+  ViewChild,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import {
+  TsValidationMessagesComponent,
+  TsValidationMessagesModule,
+} from '@terminus/ui/validation-messages';
+
+@Component({
+  template: `
+  <ts-validation-messages
+    [control]="controlForm"
+    [validateOnChange]="validateOnChange"
+  ></ts-validation-messages>
+  `,
+})
+export class Basic {
+  public controlForm: FormControl | undefined;
+  public validateOnChange: boolean;
+
+  @ViewChild(TsValidationMessagesComponent)
+  public validationMessagesComponent: TsValidationMessagesComponent;
+}
+
+
+@Component({
+  template: `
+  <ts-validation-messages
+    [control]="controlForm"
+    [id]="id"
+    [validateImmediately]="validateImmediately"
+    [validateOnChange]="validateOnChange"
+  ></ts-validation-messages>
+  `,
+})
+export class TestHostComponent {
+  public controlForm: FormControl | undefined;
+  public id: string;
+  public validateImmediately: boolean;
+  public validateOnChange: boolean;
+
+  @ViewChild(TsValidationMessagesComponent)
+  public validationMessagesComponent: TsValidationMessagesComponent;
+}
+
+/**
+ * NOTE: Currently all exported Components must belong to a module.
+ * So this is our useless module to avoid the build error.
+ */
+@NgModule({
+  imports: [
+    TsValidationMessagesModule,
+  ],
+  declarations: [
+    Basic,
+    TestHostComponent,
+  ],
+})
+export class TsValidationMessagesTestComponentsModule {}