diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts index f7d5fc1501..76cd0947bb 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts @@ -1,13 +1,17 @@ // 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 'rxjs/add/observable/of'; +import { FormControl, FormGroup } from '@angular/forms'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { SortablejsModule } from 'angular-sortablejs'; +import { DynamicFormValidationService } from '@ng-dynamic-forms/core'; + import { DsDatePickerComponent } from './date-picker.component'; -import { FormControl, FormGroup } from '@angular/forms'; import { DynamicDsDatePickerModel } from './date-picker.model'; +import { FormBuilderService } from '../../../form-builder.service'; + +import { FormComponent } from '../../../../form.component'; +import { FormService } from '../../../../form.service'; function createTestComponent(html: string, type: { new(...args: any[]): T }): ComponentFixture { TestBed.overrideComponent(type, { @@ -19,10 +23,28 @@ function createTestComponent(html: string, type: { new(...args: any[]): T }): return fixture as ComponentFixture; } -describe('Date Picker component', () => { +export const DATE_TEST_GROUP = new FormGroup({ + date: new FormControl() +}); + +export const DATE_TEST_MODEL_CONFIG = { + disabled: false, + errorMessages: {required: 'You must enter at least the year.'}, + id: 'date', + label: 'Date', + name: 'date', + placeholder: 'Date', + readOnly: false, + required: true, + toggleIcon: 'fa fa-calendar' +}; + +describe('DsDatePickerComponent test suite', () => { let testComp: TestComponent; + let dateComp: DsDatePickerComponent; let testFixture: ComponentFixture; + let dateFixture: ComponentFixture; let html; // async beforeEach @@ -39,15 +61,20 @@ describe('Date Picker component', () => { providers: [ ChangeDetectorRef, DsDatePickerComponent, + DynamicFormValidationService, + FormBuilderService, + FormComponent, + FormService ], schemas: [CUSTOM_ELEMENTS_SCHEMA] }); })); - // synchronous beforeEach - beforeEach(() => { - html = ` + describe('', () => { + // synchronous beforeEach + beforeEach(() => { + html = ` { (change)='onValueChange($event)' (focus)='onFocus($event)'>`; - testFixture = createTestComponent(html, TestComponent) as ComponentFixture; - testComp = testFixture.componentInstance; + testFixture = createTestComponent(html, TestComponent) as ComponentFixture; + testComp = testFixture.componentInstance; + }); + + it('should create DsDatePickerComponent', inject([DsDatePickerComponent], (app: DsDatePickerComponent) => { + + expect(app).toBeDefined(); + })); + }); - it('should create DsDatePickerComponent', inject([DsDatePickerComponent], (app: DsDatePickerComponent) => { + describe('', () => { + describe('when init model value is empty', () => { + beforeEach(() => { - expect(app).toBeDefined(); - })); + dateFixture = TestBed.createComponent(DsDatePickerComponent); + dateComp = dateFixture.componentInstance; // FormComponent test instance + dateComp.group = DATE_TEST_GROUP; + dateComp.model = new DynamicDsDatePickerModel(DATE_TEST_MODEL_CONFIG); + dateFixture.detectChanges(); + }); + + it('should init component properly', () => { + expect(dateComp.initialYear).toBeDefined(); + expect(dateComp.initialMonth).toBeDefined(); + expect(dateComp.initialDay).toBeDefined(); + expect(dateComp.maxYear).toBeDefined(); + expect(dateComp.disabledMonth).toBeTruthy(); + expect(dateComp.disabledDay).toBeTruthy(); + }); + + it('should set year and enable month field when year field is entered', () => { + const event = { + field: 'year', + value: '1983' + }; + dateComp.onChange(event); + + expect(dateComp.year).toEqual('1983'); + expect(dateComp.disabledMonth).toBeFalsy(); + expect(dateComp.disabledDay).toBeTruthy(); + }); + + it('should set month and enable day field when month field is entered', () => { + const event = { + field: 'month', + value: '11' + }; + + dateComp.year = '1983'; + dateComp.disabledMonth = false; + dateFixture.detectChanges(); + + dateComp.onChange(event); + + expect(dateComp.year).toEqual('1983'); + expect(dateComp.month).toEqual('11'); + expect(dateComp.disabledMonth).toBeFalsy(); + expect(dateComp.disabledDay).toBeFalsy(); + }); + + it('should set day when day field is entered', () => { + const event = { + field: 'day', + value: '18' + }; + + dateComp.year = '1983'; + dateComp.month = '11'; + dateComp.disabledMonth = false; + dateComp.disabledDay = false; + dateFixture.detectChanges(); + + dateComp.onChange(event); + + expect(dateComp.year).toEqual('1983'); + expect(dateComp.month).toEqual('11'); + expect(dateComp.day).toEqual('18'); + expect(dateComp.disabledMonth).toBeFalsy(); + expect(dateComp.disabledDay).toBeFalsy(); + }); + + it('should emit blur Event onBlur', () => { + spyOn(dateComp.blur, 'emit'); + dateComp.onBlur(new Event('blur')); + expect(dateComp.blur.emit).toHaveBeenCalled(); + }); + + it('should emit focus Event onFocus', () => { + spyOn(dateComp.focus, 'emit'); + dateComp.onFocus(new Event('focus')); + expect(dateComp.focus.emit).toHaveBeenCalled(); + }); + }); + + describe('when init model value is not empty', () => { + beforeEach(() => { + + dateFixture = TestBed.createComponent(DsDatePickerComponent); + dateComp = dateFixture.componentInstance; // FormComponent test instance + dateComp.group = DATE_TEST_GROUP; + dateComp.model = new DynamicDsDatePickerModel(DATE_TEST_MODEL_CONFIG); + dateComp.model.value = '1983-11-18'; + dateFixture.detectChanges(); + }); + + it('should init component properly', () => { + expect(dateComp.initialYear).toBeDefined(); + expect(dateComp.initialMonth).toBeDefined(); + expect(dateComp.initialDay).toBeDefined(); + expect(dateComp.maxYear).toBeDefined(); + expect(dateComp.year).toBe(1983); + expect(dateComp.month).toBe(11); + expect(dateComp.day).toBe(18); + expect(dateComp.disabledMonth).toBeFalsy(); + expect(dateComp.disabledDay).toBeFalsy(); + }); + + it('should disable month and day fields when year field is canceled', () => { + const event = { + field: 'year', + value: null + }; + dateComp.onChange(event); + + expect(dateComp.year).not.toBeDefined(); + expect(dateComp.month).not.toBeDefined(); + expect(dateComp.day).not.toBeDefined(); + expect(dateComp.disabledMonth).toBeTruthy(); + expect(dateComp.disabledDay).toBeTruthy(); + }); + + it('should disable day field when month field is canceled', () => { + const event = { + field: 'month', + value: null + }; + dateComp.onChange(event); + + expect(dateComp.year).toBe(1983); + expect(dateComp.month).not.toBeDefined(); + expect(dateComp.day).not.toBeDefined(); + expect(dateComp.disabledMonth).toBeFalsy(); + expect(dateComp.disabledDay).toBeTruthy(); + }); + + it('should not disable day field when day field is canceled', () => { + const event = { + field: 'day', + value: null + }; + dateComp.onChange(event); + + expect(dateComp.year).toBe(1983); + expect(dateComp.month).toBe(11); + expect(dateComp.day).not.toBeDefined(); + expect(dateComp.disabledMonth).toBeFalsy(); + expect(dateComp.disabledDay).toBeFalsy(); + }); + }); + }); }); @@ -75,23 +255,9 @@ describe('Date Picker component', () => { }) class TestComponent { - group = new FormGroup({ - date: new FormControl(), - }); + group = DATE_TEST_GROUP; - inputDateModelConfig = { - disabled: false, - errorMessages: { required: 'You must enter at least the year.' }, - id: 'date', - label: 'Date', - name: 'date', - placeholder: 'Date', - readOnly: false, - required: true, - toggleIcon: 'fa fa-calendar' - }; - - model = new DynamicDsDatePickerModel(this.inputDateModelConfig); + model = new DynamicDsDatePickerModel(DATE_TEST_MODEL_CONFIG); showErrorMessages = false; diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts index 17a4e9e750..741d86fab9 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts @@ -31,9 +31,9 @@ export class DsDatePickerComponent implements OnInit { initialMonth: number; initialDay: number; - year: number; - month: number; - day: number; + year: any; + month: any; + day: any; minYear: 0; maxYear: number; diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts index 0ba55ef982..55f98df8ac 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/dynamic-group/dynamic-group.component.spec.ts @@ -3,7 +3,10 @@ import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/c import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { DynamicFormValidationService } from '@ng-dynamic-forms/core'; +import { Store } from '@ngrx/store'; import { TranslateModule } from '@ngx-translate/core'; +import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @@ -16,15 +19,11 @@ import { FormService } from '../../../../form.service'; import { GlobalConfig } from '../../../../../../../config/global-config.interface'; import { GLOBAL_CONFIG } from '../../../../../../../config'; import { FormComponent } from '../../../../form.component'; -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(html: string, type: { new(...args: any[]): T }): ComponentFixture { TestBed.overrideComponent(type, { @@ -202,7 +201,6 @@ describe('DsDynamicGroupComponent test suite', () => { }]; groupFixture.detectChanges(); - const de = groupFixture.debugElement.queryAll(By.css('button')); const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button'); const btnEl = buttons[0]; btnEl.click(); @@ -219,7 +217,6 @@ describe('DsDynamicGroupComponent test suite', () => { groupFixture.detectChanges(); - const de = groupFixture.debugElement.queryAll(By.css('button')); const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button'); const btnEl = buttons[2]; btnEl.click(); @@ -231,7 +228,7 @@ describe('DsDynamicGroupComponent test suite', () => { }); describe('when init model value is not empty', () => { - beforeEach(inject([FormBuilderService], (service: FormBuilderService) => { + beforeEach(() => { groupFixture = TestBed.createComponent(DsDynamicGroupComponent); groupComp = groupFixture.componentInstance; // FormComponent test instance @@ -246,7 +243,7 @@ describe('DsDynamicGroupComponent test suite', () => { groupComp.showErrorMessages = false; groupFixture.detectChanges(); - })); + }); afterEach(() => { groupFixture.destroy(); @@ -279,7 +276,6 @@ describe('DsDynamicGroupComponent test suite', () => { }]; groupFixture.detectChanges(); - const de = groupFixture.debugElement.queryAll(By.css('button')); const buttons = groupFixture.debugElement.nativeElement.querySelectorAll('button'); const btnEl = buttons[0]; btnEl.click(); @@ -290,18 +286,17 @@ describe('DsDynamicGroupComponent test suite', () => { expect(groupComp.formCollapsed).toEqual(Observable.of(true)); })); - it('should delete existing chips item', inject([FormBuilderService], (service: FormBuilderService) => { + it('should delete existing chips item', () => { 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)); - })); + }); }); }); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html index 710639ff88..bd18ef3a1f 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html @@ -69,7 +69,7 @@ [attr.autoComplete]="model.autoComplete" [class.is-invalid]="showErrorMessages" [dynamicId]="bindId && model.id" - [name]="name2" + [name]="model.name + '_2'" [type]="model.inputType" [(ngModel)]="secondInputValue" [disabled]="firstInputValue.length === 0 || isInputDisabled()" diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts index b5e76f7b15..b2cce76be6 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts @@ -1,12 +1,12 @@ // Load the implementations that should be tested import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing'; +import { async, ComponentFixture, fakeAsync, inject, TestBed, tick, } from '@angular/core/testing'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AuthorityOptions } from '../../../../../../core/integration/models/authority-options.model'; -import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core'; +import { DynamicFormsCoreModule, DynamicFormValidationService } from '@ng-dynamic-forms/core'; import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstrap'; import { AuthorityService } from '../../../../../../core/integration/authority.service'; import { AuthorityServiceStub } from '../../../../../testing/authority-service-stub'; @@ -14,6 +14,13 @@ import { DsDynamicLookupComponent } from './dynamic-lookup.component'; import { DynamicLookupModel } from './dynamic-lookup.model'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { TranslateModule } from '@ngx-translate/core'; +import { FormBuilderService } from '../../../form-builder.service'; +import { FormService } from '../../../../form.service'; +import { FormComponent } from '../../../../form.component'; +import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model'; +import { By } from '@angular/platform-browser'; +import { AuthorityValueModel } from '../../../../../../core/integration/models/authority-value.model'; +import { DynamicLookupNameModel } from './dynamic-lookup-name.model'; function createTestComponent(html: string, type: { new(...args: any[]): T }): ComponentFixture { TestBed.overrideComponent(type, { @@ -25,15 +32,67 @@ function createTestComponent(html: string, type: { new(...args: any[]): T }): return fixture as ComponentFixture; } +export const LOOKUP_TEST_MODEL_CONFIG = { + authorityOptions: { + closed: false, + metadata: 'lookup', + name: 'RPAuthority', + scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23' + } as AuthorityOptions, + disabled: false, + errorMessages: {required: 'Required field.'}, + id: 'lookup', + label: 'Author', + maxOptions: 10, + name: 'lookup', + placeholder: 'Author', + readOnly: false, + required: true, + repeatable: true, + separator: ',', + validators: {required: null}, + value: undefined +}; + +export const LOOKUP_NAME_TEST_MODEL_CONFIG = { + authorityOptions: { + closed: false, + metadata: 'lookup-name', + name: 'RPAuthority', + scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23' + } as AuthorityOptions, + disabled: false, + errorMessages: {required: 'Required field.'}, + id: 'lookupName', + label: 'Author', + maxOptions: 10, + name: 'lookupName', + placeholder: 'Author', + readOnly: false, + required: true, + repeatable: true, + separator: ',', + validators: {required: null}, + value: undefined +}; + +export const LOOKUP_TEST_GROUP = new FormGroup({ + lookup: new FormControl(), + lookupName: new FormControl() +}); + describe('Dynamic Lookup component', () => { let testComp: TestComponent; + let lookupComp: DsDynamicLookupComponent; let testFixture: ComponentFixture; + let lookupFixture: ComponentFixture; let html; + const authorityServiceStub = new AuthorityServiceStub(); + // async beforeEach beforeEach(async(() => { - const authorityServiceStub = new AuthorityServiceStub(); TestBed.configureTestingModule({ imports: [ @@ -52,6 +111,10 @@ describe('Dynamic Lookup component', () => { providers: [ ChangeDetectorRef, DsDynamicLookupComponent, + DynamicFormValidationService, + FormBuilderService, + FormComponent, + FormService, {provide: AuthorityService, useValue: authorityServiceStub}, ], schemas: [CUSTOM_ELEMENTS_SCHEMA] @@ -59,9 +122,10 @@ describe('Dynamic Lookup component', () => { })); - // synchronous beforeEach - beforeEach(() => { - html = ` + describe('', () => { + // synchronous beforeEach + beforeEach(() => { + html = ` { (change)="onValueChange($event)" (focus)="onFocus($event)">`; - testFixture = createTestComponent(html, TestComponent) as ComponentFixture; - testComp = testFixture.componentInstance; + testFixture = createTestComponent(html, TestComponent) as ComponentFixture; + testComp = testFixture.componentInstance; + }); + + it('should create DsDynamicLookupComponent', inject([DsDynamicLookupComponent], (app: DsDynamicLookupComponent) => { + expect(app).toBeDefined(); + })); }); - it('should create DsDynamicLookupComponent', inject([DsDynamicLookupComponent], (app: DsDynamicLookupComponent) => { + describe('when model is DynamicLookupModel', () => { - expect(app).toBeDefined(); - })); + describe('', () => { + beforeEach(() => { + lookupFixture = TestBed.createComponent(DsDynamicLookupComponent); + lookupComp = lookupFixture.componentInstance; // FormComponent test instance + lookupComp.group = LOOKUP_TEST_GROUP; + lookupComp.model = new DynamicLookupModel(LOOKUP_TEST_MODEL_CONFIG); + lookupFixture.detectChanges(); + }); + + it('should render only an input element', () => { + const de = lookupFixture.debugElement.queryAll(By.css('input.form-control')); + expect(de.length).toBe(1); + }); + + }); + + describe('and init model value is empty', () => { + beforeEach(() => { + + lookupFixture = TestBed.createComponent(DsDynamicLookupComponent); + lookupComp = lookupFixture.componentInstance; // FormComponent test instance + lookupComp.group = LOOKUP_TEST_GROUP; + lookupComp.model = new DynamicLookupModel(LOOKUP_TEST_MODEL_CONFIG); + lookupFixture.detectChanges(); + }); + + it('should init component properly', () => { + expect(lookupComp.firstInputValue).toBe(''); + }); + + it('should return search results', fakeAsync(() => { + const de = lookupFixture.debugElement.queryAll(By.css('button')); + const btnEl = de[0].nativeElement; + const results$ = authorityServiceStub.getEntriesByName({} as any); + + lookupComp.firstInputValue = 'test'; + lookupFixture.detectChanges(); + + btnEl.click(); + tick(); + lookupFixture.detectChanges(); + results$.subscribe((results) => { + expect(lookupComp.optionsList).toEqual(results.payload); + }) + + })); + + it('should select a results entry properly', fakeAsync(() => { + let de = lookupFixture.debugElement.queryAll(By.css('button')); + const btnEl = de[0].nativeElement; + const selectedValue = Object.assign(new AuthorityValueModel(), {id: 1, display: 'one', value: 1}); + spyOn(lookupComp.change, 'emit'); + + lookupComp.firstInputValue = 'test'; + lookupFixture.detectChanges(); + btnEl.click(); + tick(); + lookupFixture.detectChanges(); + de = lookupFixture.debugElement.queryAll(By.css('button.dropdown-item')); + const entryEl = de[0].nativeElement; + entryEl.click(); + + expect(lookupComp.firstInputValue).toEqual('one'); + expect(lookupComp.model.value).toEqual(selectedValue); + expect(lookupComp.change.emit).toHaveBeenCalled(); + })); + + it('should set model.value on input type when AuthorityOptions.closed is false', fakeAsync(() => { + lookupComp.firstInputValue = 'test'; + lookupFixture.detectChanges(); + + lookupComp.onInput(new Event('input')); + expect(lookupComp.model.value).toEqual(new FormFieldMetadataValueObject('test')) + + })); + + it('should not set model.value on input type when AuthorityOptions.closed is true', () => { + lookupComp.model.authorityOptions.closed = true; + lookupComp.firstInputValue = 'test'; + lookupFixture.detectChanges(); + + lookupComp.onInput(new Event('input')); + expect(lookupComp.model.value).not.toBeDefined(); + + }); + }); + + describe('and init model value is not empty', () => { + beforeEach(() => { + + lookupFixture = TestBed.createComponent(DsDynamicLookupComponent); + lookupComp = lookupFixture.componentInstance; // FormComponent test instance + lookupComp.group = LOOKUP_TEST_GROUP; + lookupComp.model = new DynamicLookupModel(LOOKUP_TEST_MODEL_CONFIG); + lookupComp.model.value = new FormFieldMetadataValueObject('test', null, 'test001'); + lookupFixture.detectChanges(); + + // spyOn(store, 'dispatch'); + }); + + it('should init component properly', () => { + expect(lookupComp.firstInputValue).toBe('test') + }); + }); + }); + + describe('when model is DynamicLookupNameModel', () => { + + describe('', () => { + beforeEach(() => { + + lookupFixture = TestBed.createComponent(DsDynamicLookupComponent); + lookupComp = lookupFixture.componentInstance; // FormComponent test instance + lookupComp.group = LOOKUP_TEST_GROUP; + lookupComp.model = new DynamicLookupNameModel(LOOKUP_NAME_TEST_MODEL_CONFIG); + lookupFixture.detectChanges(); + + // spyOn(store, 'dispatch'); + }); + + it('should render two input element', () => { + const de = lookupFixture.debugElement.queryAll(By.css('input.form-control')); + expect(de.length).toBe(2); + }); + + }); + + describe('and init model value is empty', () => { + + beforeEach(() => { + + lookupFixture = TestBed.createComponent(DsDynamicLookupComponent); + lookupComp = lookupFixture.componentInstance; // FormComponent test instance + lookupComp.group = LOOKUP_TEST_GROUP; + lookupComp.model = new DynamicLookupNameModel(LOOKUP_NAME_TEST_MODEL_CONFIG); + lookupFixture.detectChanges(); + }); + + it('should select a results entry properly', fakeAsync(() => { + const payload = [ + Object.assign(new AuthorityValueModel(), {id: 1, display: 'Name, Lastname', value: 1}), + Object.assign(new AuthorityValueModel(), {id: 2, display: 'NameTwo, LastnameTwo', value: 2}), + ]; + let de = lookupFixture.debugElement.queryAll(By.css('button')); + const btnEl = de[0].nativeElement; + const selectedValue = Object.assign(new AuthorityValueModel(), {id: 1, display: 'Name, Lastname', value: 1}); + + spyOn(lookupComp.change, 'emit'); + authorityServiceStub.setNewPayload(payload); + lookupComp.firstInputValue = 'test'; + lookupFixture.detectChanges(); + btnEl.click(); + tick(); + lookupFixture.detectChanges(); + de = lookupFixture.debugElement.queryAll(By.css('button.dropdown-item')); + const entryEl = de[0].nativeElement; + entryEl.click(); + + expect(lookupComp.firstInputValue).toEqual('Name'); + expect(lookupComp.secondInputValue).toEqual('Lastname'); + expect(lookupComp.model.value).toEqual(selectedValue); + expect(lookupComp.change.emit).toHaveBeenCalled(); + })); + + }); + + describe('and init model value is not empty', () => { + beforeEach(() => { + + lookupFixture = TestBed.createComponent(DsDynamicLookupComponent); + lookupComp = lookupFixture.componentInstance; // FormComponent test instance + lookupComp.group = LOOKUP_TEST_GROUP; + lookupComp.model = new DynamicLookupNameModel(LOOKUP_NAME_TEST_MODEL_CONFIG); + lookupComp.model.value = new FormFieldMetadataValueObject('Name, Lastname', null, 'test001'); + lookupFixture.detectChanges(); + + }); + + it('should init component properly', () => { + expect(lookupComp.firstInputValue).toBe('Name'); + expect(lookupComp.secondInputValue).toBe('Lastname'); + }); + }); + + }); }); // declare a test component @@ -89,31 +341,9 @@ describe('Dynamic Lookup component', () => { }) class TestComponent { - group: FormGroup = new FormGroup({ - lookup: new FormControl(), - }); + group: FormGroup = LOOKUP_TEST_GROUP; - inputLookupModelConfig = { - authorityOptions: { - closed: false, - metadata: 'lookup', - name: 'RPAuthority', - scope: 'c1c16450-d56f-41bc-bb81-27f1d1eb5c23' - } as AuthorityOptions, - disabled: false, - errorMessages: {required: 'Required field.'}, - id: 'lookup', - label: 'Author', - maxOptions: 10, - name: 'lookup', - placeholder: 'Author', - readOnly: false, - required: true, - repeatable: true, - separator: ',', - validators: {required: null}, - value: undefined - }; + inputLookupModelConfig = LOOKUP_TEST_MODEL_CONFIG; model = new DynamicLookupModel(this.inputLookupModelConfig); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts index a0a9f3be31..4e88e9c78e 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts @@ -32,7 +32,6 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit { public loading = false; public pageInfo: PageInfo; public optionsList: any; - public name2: string; protected searchOptions: IntegrationSearchOptions; protected sub: Subscription; @@ -50,11 +49,6 @@ export class DsDynamicLookupComponent implements OnDestroy, OnInit { this.model.maxOptions, 1); - // Switch Lookup/LookupName - if (this.isLookupName()) { - this.name2 = this.model.name + '2'; - } - this.setInputsValue(this.model.value); this.model.valueUpdates diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html index aed4e16bca..6a5e588610 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html @@ -7,9 +7,9 @@ [readonly]="model.readOnly" [type]="model.inputType" [value]="formatItemForInput(model.value)" - (blur)="onBlurEvent($event)" + (blur)="onBlur($event)" (click)="$event.stopPropagation(); openDropdown(sdRef);" - (focus)="onFocusEvent($event)" + (focus)="onFocus($event)" (keypress)="$event.preventDefault()">