Added more tests

src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts

@@ -8,8 +8,8 @@ import 'rxjs/add/observable/of';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { DsDynamicGroupComponent } from './dynamic-group.components';
-import { DynamicGroupModel } from './dynamic-group.model';
-import { FormRowModel } from '../../../../../../core/shared/config/config-submission-forms.model';
+import { DynamicGroupModel, DynamicGroupModelConfig } from './dynamic-group.model';
+import { FormRowModel, SubmissionFormsModel } from '../../../../../../core/shared/config/config-submission-forms.model';
 import { FormFieldModel } from '../../../models/form-field.model';
 import { FormBuilderService } from '../../../form-builder.service';
 import { FormService } from '../../../../form.service';
@@ -20,6 +20,11 @@ import { DynamicFormValidationService } from '@ng-dynamic-forms/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '../../../../../../app.reducer';
 import { Observable } from 'rxjs/Observable';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Chips } from '../../../../../chips/models/chips.model';
+import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
+import { DsDynamicInputModel } from '../ds-dynamic-input.model';
+import { By } from '@angular/platform-browser';
 
 function createTestComponent<T>(html: string, type: { new(...args: any[]): T }): ComponentFixture<T> {
   TestBed.overrideComponent(type, {
@@ -31,13 +36,70 @@ function createTestComponent<T>(html: string, type: { new(...args: any[]): T }):
   return fixture as ComponentFixture<T>;
 }
 
-describe('Dynamic Group component', () => {
+export const FORM_GROUP_TEST_MODEL_CONFIG = {
+  disabled: false,
+  errorMessages: {required: 'You must specify at least one author.'},
+  formConfiguration: [{
+    fields: [{
+      hints: 'Enter the name of the author.',
+      input: {type: 'onebox'},
+      label: 'Author',
+      languageCodes: [],
+      mandatory: 'true',
+      mandatoryMessage: 'Required field!',
+      repeatable: false,
+      selectableMetadata: [{
+        authority: 'RPAuthority',
+        closed: false,
+        metadata: 'dc.contributor.author'
+      }],
+    } as FormFieldModel]
+  } as FormRowModel, {
+    fields: [{
+      hints: 'Enter the affiliation of the author.',
+      input: {type: 'onebox'},
+      label: 'Affiliation',
+      languageCodes: [],
+      mandatory: 'false',
+      repeatable: false,
+      selectableMetadata: [{
+        authority: 'OUAuthority',
+        closed: false,
+        metadata: 'local.contributor.affiliation'
+      }]
+    } as FormFieldModel]
+  } as FormRowModel],
+  id: 'dc_contributor_author',
+  label: 'Authors',
+  mandatoryField: 'dc.contributor.author',
+  name: 'dc.contributor.author',
+  placeholder: 'Authors',
+  readOnly: false,
+  relationFields: ['local.contributor.affiliation'],
+  required: true,
+  scopeUUID: '43fe1f8c-09a6-4fcf-9c78-5d4fed8f2c8f',
+  submissionScope: undefined,
+  validators: {required: null}
+} as DynamicGroupModelConfig;
+
+export const FORM_GROUP_TEST_GROUP = new FormGroup({
+  dc_contributor_author: new FormControl(),
+});
+
+describe('DsDynamicGroupComponent test suite', () => {
 
   let testComp: TestComponent;
+  let groupComp: DsDynamicGroupComponent;
   let testFixture: ComponentFixture<TestComponent>;
+  let groupFixture: ComponentFixture<DsDynamicGroupComponent>;
+  let modelValue: any;
   let html;
+  let control1: FormControl;
+  let model1: DsDynamicInputModel;
+  let control2: FormControl;
+  let model2: DsDynamicInputModel;
 
-  const mockStore: Store<AppState> = jasmine.createSpyObj('store', {
+  const store: Store<AppState> = jasmine.createSpyObj('store', {
     dispatch: {},
     select: Observable.of(true)
   });
@@ -47,6 +109,7 @@ describe('Dynamic Group component', () => {
 
     TestBed.configureTestingModule({
       imports: [
+        BrowserAnimationsModule,
         FormsModule,
         ReactiveFormsModule,
         NgbModule.forRoot(),
@@ -65,34 +128,181 @@ describe('Dynamic Group component', () => {
         FormComponent,
         FormService,
         {provide: GLOBAL_CONFIG, useValue: {} as GlobalConfig},
-        {provide: Store, useValue: mockStore},
+        {provide: Store, useValue: store},
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });
 
   }));
 
-  // synchronous beforeEach
-  beforeEach(() => {
-    html = `
-           <ds-date-picker
-            [bindId]='bindId'
-            [group]='group'
-            [model]='model'
-            [showErrorMessages]='showErrorMessages'
-            (blur)='onBlur($event)'
-            (change)='onValueChange($event)'
-            (focus)='onFocus($event)'></ds-date-picker>`;
-
-    testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
-    testComp = testFixture.componentInstance;
+  describe('', () => {
+    // synchronous beforeEach
+    beforeEach(() => {
+      html = `
+          <ds-dynamic-group [model]="model"
+                            [formId]="formId"
+                            [group]="group"
+                            [showErrorMessages]="showErrorMessages"
+                            (blur)="onBlur($event)"
+                            (change)="onValueChange($event)"
+                            (focus)="onFocus($event)"></ds-dynamic-group>`;
+
+      testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+      testComp = testFixture.componentInstance;
+    });
+
+    it('should create DsDynamicGroupComponent', inject([DsDynamicGroupComponent], (app: DsDynamicGroupComponent) => {
+
+      expect(app).toBeDefined();
+    }));
   });
 
-  it('should create DsDynamicGroupComponent', inject([DsDynamicGroupComponent], (app: DsDynamicGroupComponent) => {
+  describe('when init model value is empty', () => {
+    beforeEach(inject([FormBuilderService], (service: FormBuilderService) => {
 
-    expect(app).toBeDefined();
-  }));
+      groupFixture = TestBed.createComponent(DsDynamicGroupComponent);
+      groupComp = groupFixture.componentInstance; // FormComponent test instance
+      groupComp.formId = 'testForm';
+      groupComp.group = FORM_GROUP_TEST_GROUP;
+      groupComp.model = new DynamicGroupModel(FORM_GROUP_TEST_MODEL_CONFIG);
+      groupComp.showErrorMessages = false;
+      groupFixture.detectChanges();
+
+      control1 = service.getFormControlById('dc_contributor_author', (groupComp as any).formRef.formGroup, groupComp.formModel) as FormControl;
+      model1 = service.findById('dc_contributor_author', groupComp.formModel) as DsDynamicInputModel;
+      control2 = service.getFormControlById('local_contributor_affiliation', (groupComp as any).formRef.formGroup, groupComp.formModel) as FormControl;
+      model2 = service.findById('local_contributor_affiliation', groupComp.formModel) as DsDynamicInputModel;
+
+      // spyOn(store, 'dispatch');
+    }));
+
+    afterEach(() => {
+      groupFixture.destroy();
+      groupComp = null;
+    });
+
+    it('should init component properly', inject([FormBuilderService], (service: FormBuilderService) => {
+      const config = {rows: groupComp.model.formConfiguration} as SubmissionFormsModel;
+      const formModel = service.modelFromConfiguration(config, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly);
+      const chips = new Chips([], 'value', 'dc.contributor.author');
+
+      expect(groupComp.formCollapsed).toEqual(Observable.of(false));
+      expect(groupComp.formModel.length).toEqual(formModel.length);
+      expect(groupComp.chips.getChipsItems()).toEqual(chips.getChipsItems());
+    }));
+
+    it('should save a new chips item', () => {
+      control1.setValue('test author');
+      (model1 as any).value = new FormFieldMetadataValueObject('test author');
+      control2.setValue('test affiliation');
+      (model2 as any).value = new FormFieldMetadataValueObject('test affiliation');
+      modelValue = [{
+        'dc.contributor.author': new FormFieldMetadataValueObject('test author'),
+        'local.contributor.affiliation': new FormFieldMetadataValueObject('test affiliation')
+      }];
+      groupFixture.detectChanges();
+
+      const de = groupFixture.debugElement.queryAll(By.css('button'));
+      const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
+      const btnEl = buttons[0];
+      btnEl.click();
+
+      expect(groupComp.chips.getChipsItems()).toEqual(modelValue);
+      expect(groupComp.formCollapsed).toEqual(Observable.of(true));
+    });
+
+    it('should clear form inputs', () => {
+      control1.setValue('test author');
+      (model1 as any).value = new FormFieldMetadataValueObject('test author');
+      control2.setValue('test affiliation');
+      (model2 as any).value = new FormFieldMetadataValueObject('test affiliation');
+
+      groupFixture.detectChanges();
+
+      const de = groupFixture.debugElement.queryAll(By.css('button'));
+      const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
+      const btnEl = buttons[2];
+      btnEl.click();
 
+      expect(control1.value).toBeNull();
+      expect(control2.value).toBeNull();
+      expect(groupComp.formCollapsed).toEqual(Observable.of(false));
+    });
+  });
+
+  describe('when init model value is not empty', () => {
+    beforeEach(inject([FormBuilderService], (service: FormBuilderService) => {
+
+      groupFixture = TestBed.createComponent(DsDynamicGroupComponent);
+      groupComp = groupFixture.componentInstance; // FormComponent test instance
+      groupComp.formId = 'testForm';
+      groupComp.group = FORM_GROUP_TEST_GROUP;
+      groupComp.model = new DynamicGroupModel(FORM_GROUP_TEST_MODEL_CONFIG);
+      modelValue = [{
+        'dc.contributor.author': new FormFieldMetadataValueObject('test author'),
+        'local.contributor.affiliation': new FormFieldMetadataValueObject('test affiliation')
+      }];
+      groupComp.model.value = modelValue;
+      groupComp.showErrorMessages = false;
+      groupFixture.detectChanges();
+
+    }));
+
+    afterEach(() => {
+      groupFixture.destroy();
+      groupComp = null;
+    });
+
+    it('should init component properly', inject([FormBuilderService], (service: FormBuilderService) => {
+      const config = {rows: groupComp.model.formConfiguration} as SubmissionFormsModel;
+      const formModel = service.modelFromConfiguration(config, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly);
+      const chips = new Chips(modelValue, 'value', 'dc.contributor.author');
+
+      expect(groupComp.formCollapsed).toEqual(Observable.of(true));
+      expect(groupComp.formModel.length).toEqual(formModel.length);
+      expect(groupComp.chips.getChipsItems()).toEqual(chips.getChipsItems());
+    }));
+
+    it('should modify existing chips item', inject([FormBuilderService], (service: FormBuilderService) => {
+      groupComp.onChipSelected(0);
+      groupFixture.detectChanges();
+
+      control1 = service.getFormControlById('dc_contributor_author', (groupComp as any).formRef.formGroup, groupComp.formModel) as FormControl;
+      model1 = service.findById('dc_contributor_author', groupComp.formModel) as DsDynamicInputModel;
+
+      control1.setValue('test author modify');
+      (model1 as any).value = new FormFieldMetadataValueObject('test author modify');
+
+      modelValue = [{
+        'dc.contributor.author': new FormFieldMetadataValueObject('test author modify'),
+        'local.contributor.affiliation': new FormFieldMetadataValueObject('test affiliation')
+      }];
+      groupFixture.detectChanges();
+
+      const de = groupFixture.debugElement.queryAll(By.css('button'));
+      const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
+      const btnEl = buttons[0];
+      btnEl.click();
+
+      groupFixture.detectChanges();
+
+      expect(groupComp.chips.getChipsItems()).toEqual(modelValue);
+      expect(groupComp.formCollapsed).toEqual(Observable.of(true));
+    }));
+
+    it('should delete existing chips item', inject([FormBuilderService], (service: FormBuilderService) => {
+      groupComp.onChipSelected(0);
+      groupFixture.detectChanges();
+
+      const de = groupFixture.debugElement.queryAll(By.css('button'));
+      const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button');
+      const btnEl = buttons[1];
+      btnEl.click();
+
+      expect(groupComp.chips.getChipsItems()).toEqual([]);
+      expect(groupComp.formCollapsed).toEqual(Observable.of(false));
+    }));
+  });
 });
 
 // declare a test component
@@ -102,55 +312,9 @@ describe('Dynamic Group component', () => {
 })
 class TestComponent {
 
-  group = new FormGroup({
-    date: new FormControl(),
-  });
+  group = FORM_GROUP_TEST_GROUP;
 
-  groupModelConfig = {
-    disabled: false,
-    errorMessages: {required: 'You must specify at least one author.'},
-    formConfiguration: [{
-      fields: [{
-        hints: 'Enter the name of the author.',
-        input: {type: 'onebox'},
-        label: 'Authors',
-        languageCodes: [],
-        mandatory: 'true',
-        mandatoryMessage: 'Required field!',
-        repeatable: false,
-        selectableMetadata: [{
-          authority: 'RPAuthority',
-          closed: false,
-          metadata: 'dc.contributor.author'
-        }],
-      } as FormFieldModel]
-    } as FormRowModel, {
-      fields: [{
-        hints: 'Enter the affiliation of the author.',
-        input: {type: 'onebox'},
-        label: 'Affiliation',
-        languageCodes: [],
-        mandatory: 'false',
-        repeatable: false,
-        selectableMetadata: [{
-          authority: 'OUAuthority',
-          closed: false,
-          metadata: 'local.contributor.affiliation'
-        }]
-      } as FormFieldModel]
-    } as FormRowModel],
-    id: 'date',
-    label: 'Date',
-    mandatoryField: 'dc.contributor.author',
-    name: 'date',
-    placeholder: 'Date',
-    readOnly: false,
-    relationFields: ['local.contributor.affiliation'],
-    required: true,
-    scopeUUID: '43fe1f8c-09a6-4fcf-9c78-5d4fed8f2c8f',
-    submissionScope: undefined,
-    validators: {required: null}
-  };
+  groupModelConfig = FORM_GROUP_TEST_MODEL_CONFIG;
 
   model = new DynamicGroupModel(this.groupModelConfig);
 

src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.components.ts

@@ -122,11 +122,12 @@ export class DsDynamicGroupComponent implements OnDestroy, OnInit {
           || this.selectedChipItem.item[model.name].value === PLACEHOLDER_PARENT_METADATA)
           ? null
           : this.selectedChipItem.item[model.name];
-        if (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel) {
-          model.valueUpdates.next(value.display);
-        } else {
-          model.valueUpdates.next(value);
-        }
+        // if (value instanceof FormFieldMetadataValueObject || value instanceof AuthorityValueModel) {
+        //   model.valueUpdates.next(value.display);
+        // } else {
+        //   model.valueUpdates.next(value);
+        // }
+        model.valueUpdates.next(value);
       });
     });
 

src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.model.ts

@@ -13,11 +13,9 @@ export const PLACEHOLDER_PARENT_METADATA = '#PLACEHOLDER_PARENT_METADATA_VALUE#'
 export interface DynamicGroupModelConfig extends DsDynamicInputModelConfig {
   formConfiguration: FormRowModel[],
   mandatoryField: string,
-  name: string,
   relationFields: string[],
   scopeUUID: string,
   submissionScope: string;
-  value?: any;
 }
 
 /**