Added more tests

src/app/shared/form/form.component.spec.ts

@@ -1,13 +1,16 @@
-// Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { Observable } from 'rxjs/Observable';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import 'rxjs/add/observable/of';
-import { DynamicFormControlModel, DynamicFormValidationService, DynamicInputModel } from '@ng-dynamic-forms/core';
+import {
+  DynamicFormArrayModel,
+  DynamicFormControlEvent,
+  DynamicFormControlModel,
+  DynamicFormValidationService,
+  DynamicInputModel
+} from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
@@ -16,6 +19,9 @@ import { FormComponent } from './form.component';
 import { FormService } from './form.service';
 import { FormBuilderService } from './builder/form-builder.service';
 import { FormState } from './form.reducers';
+import { FormChangeAction, FormStatusChangeAction } from './form.actions';
+import { MockStore } from '../testing/mock-store';
+import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -76,33 +82,47 @@ export const TEST_FORM_MODEL = [
   ),
 ];
 
-export const TEST_FORM_GROUP = {
-  dc_title: new FormControl(),
-  dc_title_alternative: new FormControl(),
-  dc_publisher: new FormControl(),
-  dc_identifier_citation: new FormControl(),
-  dc_identifier_issn: new FormControl()
-}
+export const TEST_FORM_MODEL_WITH_ARRAY = [
+  new DynamicFormArrayModel({
 
-describe('Form component', () => {
+    id: 'bootstrapFormArray',
+    initialCount: 1,
+    label: 'Form Array',
+    groupFactory: () => {
+      return [
+        new DynamicInputModel({
+
+          id: 'bootstrapArrayGroupInput',
+          placeholder: 'example array group input',
+          readOnly: false
+        })
+      ];
+    }
+  })
+];
+
+describe('FormComponent test suite', () => {
 
   let testComp: TestComponent;
+  let formComp: FormComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let formFixture: ComponentFixture<FormComponent>;
+  const formState: FormState = {
+    testForm: {
+      data: {
+        dc_title: null,
+        dc_title_alternative: null,
+        dc_publisher: null,
+        dc_identifier_citation: null,
+        dc_identifier_issn: null
+      },
+      valid: false,
+      errors: []
+    }
+  };
   let html;
-  const formServiceStub = {
-    getFormData: (formId) => Observable.of([])
-  }
-  const formBuilderServiceStub = {
-    createFormGroup: (formModel) => new FormGroup(TEST_FORM_GROUP)
-  }
-  const submissionFormsConfigServiceStub = {};
 
-  const store: Store<FormState> = jasmine.createSpyObj('store', {
-    /* tslint:disable:no-empty */
-    dispatch: {},
-    /* tslint:enable:no-empty */
-    select: Observable.of({})
-  });
+  const store: MockStore<FormState> = new MockStore<FormState>(formState);
 
   // async beforeEach
   beforeEach(async(() => {
@@ -135,23 +155,265 @@ describe('Form component', () => {
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
-      <ds-form *ngIf="formModel" #formRef="formComponent"
-               [formId]="formId"
-               [formModel]="formModel"
-               [displaySubmit]="displaySubmit"></ds-form>`;
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
+        <ds-form *ngIf="formModel" #formRef="formComponent"
+                 [formId]="formId"
+                 [formModel]="formModel"
+                 [displaySubmit]="displaySubmit"></ds-form>`;
 
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create FormComponent', inject([FormComponent], (app: FormComponent) => {
+
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create Form Component', inject([FormComponent], (app: FormComponent) => {
+  describe('', () => {
+    beforeEach(() => {
 
-    expect(app).toBeDefined();
-  }));
+      formFixture = TestBed.createComponent(FormComponent);
+      formComp = formFixture.componentInstance; // FormComponent test instance
+      formComp.formId = 'testForm';
+      formComp.formModel = TEST_FORM_MODEL;
+      formComp.displaySubmit = false;
+      formFixture.detectChanges();
+      spyOn(store, 'dispatch');
+    });
 
+    afterEach(() => {
+      formFixture.destroy();
+      formComp = null;
+    });
+
+    it('should dispatch a FormStatusChangeAction when Form group status changes', () => {
+      const control = formComp.formGroup.get(['dc_title']);
+      control.setValue('Test Title');
+
+      expect(store.dispatch).toHaveBeenCalledWith(new FormStatusChangeAction('testForm', formComp.formGroup.valid));
+
+    });
+
+    it('should display form errors when errors are added to the state', () => {
+      const errors = [{
+        fieldId: 'dc_title',
+        message: 'error.validation.required'
+      }];
+
+      formState.testForm.errors = errors;
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      expect((formComp as any).formErrors).toEqual(errors);
+
+    });
+
+    it('should remove form errors when errors are empty in the state', () => {
+      (formComp as any).formErrors = [{
+        fieldId: 'dc_title',
+        message: 'error.validation.required'
+      }];
+      const errors = [];
+
+      formState.testForm.errors = errors;
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      expect((formComp as any).formErrors).toEqual(errors);
+
+    });
+
+    it('should dispatch FormChangeAction on form change', inject([FormBuilderService], (service: FormBuilderService) => {
+      const event = {
+        $event: new FormFieldMetadataValueObject('Test Title'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'change'
+      } as DynamicFormControlEvent;
+
+      spyOn(formComp.change, 'emit');
+
+      formComp.onChange(event);
+
+      expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testForm', service.getValueFromModel(formComp.formModel)));
+      expect(formComp.change.emit).toHaveBeenCalled();
+    }));
+
+    it('should emit change on form change', inject([FormBuilderService], (service: FormBuilderService) => {
+      const event = {
+        $event: new FormFieldMetadataValueObject('Test Title'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'change'
+      } as DynamicFormControlEvent;
+
+      spyOn(formComp.change, 'emit');
+
+      formComp.onChange(event);
+
+      expect(formComp.change.emit).toHaveBeenCalled();
+    }));
+
+    it('should not emit change Event on form change when emitChange is false', inject([FormBuilderService], (service: FormBuilderService) => {
+      const event = {
+        $event: new FormFieldMetadataValueObject('Test Title'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'change'
+      } as DynamicFormControlEvent;
+
+      formComp.emitChange = false;
+      spyOn(formComp.change, 'emit');
+
+      formComp.onChange(event);
+
+      expect(formComp.change.emit).not.toHaveBeenCalled();
+    }));
+
+    it('should emit blur Event on blur', () => {
+      const event = {
+        $event: new FocusEvent('blur'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'blur'
+      } as DynamicFormControlEvent;
+
+      spyOn(formComp.blur, 'emit');
+
+      formComp.onBlur(event);
+
+      expect(formComp.blur.emit).toHaveBeenCalled();
+    });
+
+    it('should emit focus Event on focus', () => {
+      const event = {
+        $event: new FocusEvent('focus'),
+        context: null,
+        control: formComp.formGroup.get('dc_title'),
+        group: formComp.formGroup,
+        model: formComp.formModel[0],
+        type: 'focus'
+      } as DynamicFormControlEvent;
+
+      spyOn(formComp.focus, 'emit');
+
+      formComp.onFocus(event);
+
+      expect(formComp.focus.emit).toHaveBeenCalled();
+    });
+
+    it('should return Observable of form status', () => {
+
+      const control = formComp.formGroup.get(['dc_title']);
+      control.setValue('Test Title');
+      formState.testForm.valid = true;
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      formComp.isValid().subscribe((valid) => {
+        expect(valid).toBe(true);
+      });
+    });
+
+    it('should emit submit Event on form submit whether the form is valid', () => {
+
+      const control = formComp.formGroup.get(['dc_title']);
+      control.setValue('Test Title');
+      formState.testForm.valid = true;
+      spyOn(formComp.submit, 'emit');
+
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      formComp.onSubmit();
+      expect(formComp.submit.emit).toHaveBeenCalled();
+    });
+
+    it('should not emit submit Event on form submit whether the form is not valid', () => {
+
+      spyOn((formComp as any).formService, 'validateAllFormFields');
+
+      store.nextState(formState);
+      formFixture.detectChanges();
+
+      formComp.onSubmit();
+      expect((formComp as any).formService.validateAllFormFields).toHaveBeenCalled();
+    });
+
+    it('should reset form group', () => {
+
+      spyOn(formComp.formGroup, 'reset');
+
+      formComp.reset();
+
+      expect(formComp.formGroup.reset).toHaveBeenCalled();
+    });
+  });
+
+  describe('', () => {
+    beforeEach(() => {
+
+      formFixture = TestBed.createComponent(FormComponent);
+      formComp = formFixture.componentInstance; // FormComponent test instance
+      formComp.formId = 'testFormArray';
+      formComp.formModel = TEST_FORM_MODEL_WITH_ARRAY;
+      formComp.displaySubmit = false;
+      formFixture.detectChanges();
+      spyOn(store, 'dispatch');
+    });
+
+    afterEach(() => {
+      formFixture.destroy();
+      formComp = null;
+    });
+
+    it('should return ReadOnly property from array item', inject([FormBuilderService], (service: FormBuilderService) => {
+      const readOnly = formComp.isItemReadOnly(formComp.formModel[0] as DynamicFormArrayModel, 0);
+
+      expect(readOnly).toBe(false);
+    }));
+
+    it('should dispatch FormChangeAction when an item has been added to an array', inject([FormBuilderService], (service: FormBuilderService) => {
+      formComp.insertItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+
+      expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel)));
+    }));
+
+    it('should emit addArrayItem Event when an item has been added to an array', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp.addArrayItem, 'emit');
+
+      formComp.insertItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+
+      expect(formComp.addArrayItem.emit).toHaveBeenCalled();
+    }));
+
+    it('should dispatch FormChangeAction when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
+      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+
+      expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel)));
+    }));
+
+    it('should emit removeArrayItem Event when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => {
+      spyOn(formComp.removeArrayItem, 'emit');
+
+      formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
+
+      expect(formComp.removeArrayItem.emit).toHaveBeenCalled();
+    }));
+  })
 });
 
 // declare a test component