hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-18 07:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

issues with form component tests

Browse Source
This commit is contained in:
lotte
2018-09-07 13:48:00 +02:00
parent 14f5c97ecc
commit 14fd58dd21
6 changed files with 348 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

507
src/app/shared/form/form.component.spec.ts
View File

@@ -1,24 +1,21 @@
import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing'; import { async, ComponentFixture, inject, TestBed, } from '@angular/core/testing';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule, By } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { import {
DynamicFormArrayModel, DynamicFormArrayModel,
DynamicFormControlEvent, DynamicFormControlEvent,
DynamicFormControlModel, DynamicFormControlModel,
DynamicInputModel DynamicInputModel
} from '@ng-dynamic-forms/core'; } from '@ng-dynamic-forms/core';
import { ActionsSubject, Store } from '@ngrx/store';
import { of as observableOf } from 'rxjs';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { of as observableOf } from 'rxjs';
import { FormComponent } from './form.component'; import { FormComponent } from './form.component';
import { FormService } from './form.service'; import { FormService } from './form.service';
import { FormBuilderService } from './builder/form-builder.service'; import { FormBuilderService } from './builder/form-builder.service';
import { FormState } from './form.reducer'; import { FormAddError, FormChangeAction } from './form.actions';
import { FormAddError, FormChangeAction, FormStatusChangeAction } from './form.actions';
import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model'; import { FormFieldMetadataValueObject } from './builder/models/form-field-metadata-value.model';
import { GLOBAL_CONFIG } from '../../../config'; import { GLOBAL_CONFIG } from '../../../config';
import { createTestComponent } from '../testing/utils'; import { createTestComponent } from '../testing/utils';
@@ -26,7 +23,6 @@ import { getMockFormService } from '../mocks/mock-form-service';
import { getMockFormBuilderService } from '../mocks/mock-form-builder-service'; import { getMockFormBuilderService } from '../mocks/mock-form-builder-service';
export const TEST_FORM_MODEL = [ export const TEST_FORM_MODEL = [
new DynamicInputModel( new DynamicInputModel(
{ {
id: 'dc_title', id: 'dc_title',
@@ -93,11 +89,12 @@ export const TEST_FORM_MODEL_WITH_ARRAY = [
}) })
]; ];
fdescribe('FormComponent test suite', () => { describe('FormComponent test suite', () => {
let testComp: TestComponent; let testComp: TestComponent;
let formComp: FormComponent; let formComp: FormComponent;
let testFixture: ComponentFixture<TestComponent>; let testFixture: ComponentFixture<TestComponent>;
let formFixture: ComponentFixture<FormComponent>; let formFixture: ComponentFixture<FormComponent>;
let dynamicForm;
const config = { const config = {
form: { form: {
@@ -107,23 +104,10 @@ fdescribe('FormComponent test suite', () => {
} }
} }
} as any; } as any;
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; let html;
let formService;
const store = new Store<FormState>(observableOf({}), new ActionsSubject(), undefined); let formBuilderService;
// async beforeEach // async beforeEach
beforeEach(async(() => { beforeEach(async(() => {
@@ -142,21 +126,19 @@ fdescribe('FormComponent test suite', () => {
], // declare the test component ], // declare the test component
providers: [ providers: [
ChangeDetectorRef, ChangeDetectorRef,
{provide: FormBuilderService, useValue: getMockFormBuilderService()},
FormComponent, FormComponent,
{provide: FormService, useValue: getMockFormService()}, { provide: FormBuilderService, useValue: getMockFormBuilderService() },
{provide: GLOBAL_CONFIG, useValue: config}, { provide: FormService, useValue: getMockFormService() },
{ { provide: GLOBAL_CONFIG, useValue: config }
provide: Store, useValue: store
}
], ],
schemas: [CUSTOM_ELEMENTS_SCHEMA] schemas: [CUSTOM_ELEMENTS_SCHEMA]
}); });
formService = TestBed.get(FormService);
formBuilderService = TestBed.get(FormBuilderService);
})); }));
describe('', () => { describe('', () => {
// synchronous beforeEach // // synchronous beforeEach
beforeEach(() => { beforeEach(() => {
html = ` html = `
<ds-form *ngIf="formModel" #formRef="formComponent" <ds-form *ngIf="formModel" #formRef="formComponent"
@@ -169,7 +151,6 @@ fdescribe('FormComponent test suite', () => {
}); });
it('should create FormComponent', inject([FormComponent], (app: FormComponent) => { it('should create FormComponent', inject([FormComponent], (app: FormComponent) => {
expect(app).toBeDefined(); expect(app).toBeDefined();
})); }));
}); });
@@ -183,236 +164,246 @@ fdescribe('FormComponent test suite', () => {
formComp.formModel = TEST_FORM_MODEL; formComp.formModel = TEST_FORM_MODEL;
formComp.displaySubmit = false; formComp.displaySubmit = false;
formFixture.detectChanges(); formFixture.detectChanges();
spyOn(store, 'dispatch'); dynamicForm = formFixture.debugElement.query(By.css('ds-dynamic-form'));
formBuilderService.findById.and.returnValue(TEST_FORM_MODEL);
}); });
afterEach(() => { afterEach(() => {
formFixture.destroy(); formFixture.destroy();
formComp = null; formComp = null;
}); });
//
it('should dispatch a FormStatusChangeAction when Form group status changes', () => { // it('should dispatch a FormStatusChangeAction when Form group status changes', () => {
const control = formComp.formGroup.get(['dc_title']); // // spyOn(formComp, 'onChange');
control.setValue('Test Title'); // const control = new FormControl('', Validators.required);
// const event = {
expect(store.dispatch).toHaveBeenCalledWith(new FormStatusChangeAction('testForm', formComp.formGroup.valid)); // $event: new FormFieldMetadataValueObject('Test Title'),
// context: null,
}); // control: control,
// group: formComp.formGroup,
fit('should display form errors when errors are added to the state', () => { // model: formComp.formModel[0],
const error = { // type: 'change'
fieldId: 'dc_title', // } as DynamicFormControlEvent;
fieldIndex: 0, // dynamicForm.componentInstance.change.emit(event);
message: 'error.validation.required' //
}; // // expect(formComp.onChange).toHaveBeenCalledWith('testForm', formComp.formGroup.valid);
// formComp.onChange(event);
store.dispatch(new FormAddError(formComp.formId, error.fieldId, error.fieldIndex, error.message)); // // const control = new FormControl('', Validators.required);
formFixture.detectChanges(); // formComp.formGroup.addControl('dc_title', control);
// control.setValue('Test Title');
expect((formComp as any).formErrors[0]).toEqual(error); //
// expect(formService.changeForm).toHaveBeenCalledWith('testForm', formComp.formGroup.valid);
}); // });
//
it('should remove form errors when errors are empty in the state', () => { // it('should display form errors when errors are added to the state', () => {
(formComp as any).formErrors = [{ //
fieldId: 'dc_title', // const error = {formComp.formId, 'dc_title', 0, 'error.validation.required';
message: 'error.validation.required' // formService.getFormErrors().next([error]);
}]; // formFixture.detectChanges();
const errors = []; //
// expect((formComp as any).formErrors).toEqual([error]);
formState.testForm.errors = errors; //
store.nextState(formState); // });
formFixture.detectChanges(); //
// fit('should remove form errors when errors are empty in the state', () => {
expect((formComp as any).formErrors).toEqual(errors); // (formComp as any).formErrors = [{
// fieldId: 'dc_title',
}); // message: 'error.validation.required'
// }];
it('should dispatch FormChangeAction on form change', inject([FormBuilderService], (service: FormBuilderService) => { // const errors = [];
const event = { //
$event: new FormFieldMetadataValueObject('Test Title'), // formService.getFormErrors().next([]);
context: null, // formFixture.detectChanges();
control: formComp.formGroup.get('dc_title'), //
group: formComp.formGroup, // expect((formComp as any).formErrors).toEqual(errors);
model: formComp.formModel[0], //
type: 'change' // });
} as DynamicFormControlEvent; //
// it('should dispatch FormChangeAction on form change', inject([FormBuilderService], (service: FormBuilderService) => {
spyOn(formComp.change, 'emit'); // const event = {
// $event: new FormFieldMetadataValueObject('Test Title'),
formComp.onChange(event); // context: null,
// control: formComp.formGroup.get('dc_title'),
expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testForm', service.getValueFromModel(formComp.formModel))); // group: formComp.formGroup,
expect(formComp.change.emit).toHaveBeenCalled(); // model: formComp.formModel[0],
})); // type: 'change'
// } as DynamicFormControlEvent;
it('should emit change on form change', inject([FormBuilderService], (service: FormBuilderService) => { //
const event = { // spyOn(formComp.change, 'emit');
$event: new FormFieldMetadataValueObject('Test Title'), //
context: null, // formComp.onChange(event);
control: formComp.formGroup.get('dc_title'), //
group: formComp.formGroup, // expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testForm', service.getValueFromModel(formComp.formModel)));
model: formComp.formModel[0], // expect(formComp.change.emit).toHaveBeenCalled();
type: 'change' // }));
} as DynamicFormControlEvent; //
// it('should emit change on form change', inject([FormBuilderService], (service: FormBuilderService) => {
spyOn(formComp.change, 'emit'); // const event = {
// $event: new FormFieldMetadataValueObject('Test Title'),
formComp.onChange(event); // context: null,
// control: formComp.formGroup.get('dc_title'),
expect(formComp.change.emit).toHaveBeenCalled(); // group: formComp.formGroup,
})); // model: formComp.formModel[0],
// type: 'change'
it('should not emit change Event on form change when emitChange is false', inject([FormBuilderService], (service: FormBuilderService) => { // } as DynamicFormControlEvent;
const event = { //
$event: new FormFieldMetadataValueObject('Test Title'), // spyOn(formComp.change, 'emit');
context: null, //
control: formComp.formGroup.get('dc_title'), // formComp.onChange(event);
group: formComp.formGroup, //
model: formComp.formModel[0], // expect(formComp.change.emit).toHaveBeenCalled();
type: 'change' // }));
} as DynamicFormControlEvent; //
// it('should not emit change Event on form change when emitChange is false', inject([FormBuilderService], (service: FormBuilderService) => {
formComp.emitChange = false; // const event = {
spyOn(formComp.change, 'emit'); // $event: new FormFieldMetadataValueObject('Test Title'),
// context: null,
formComp.onChange(event); // control: formComp.formGroup.get('dc_title'),
// group: formComp.formGroup,
expect(formComp.change.emit).not.toHaveBeenCalled(); // model: formComp.formModel[0],
})); // type: 'change'
// } as DynamicFormControlEvent;
it('should emit blur Event on blur', () => { //
const event = { // formComp.emitChange = false;
$event: new FocusEvent('blur'), // spyOn(formComp.change, 'emit');
context: null, //
control: formComp.formGroup.get('dc_title'), // formComp.onChange(event);
group: formComp.formGroup, //
model: formComp.formModel[0], // expect(formComp.change.emit).not.toHaveBeenCalled();
type: 'blur' // }));
} as DynamicFormControlEvent; //
// it('should emit blur Event on blur', () => {
spyOn(formComp.blur, 'emit'); // const event = {
// $event: new FocusEvent('blur'),
formComp.onBlur(event); // context: null,
// control: formComp.formGroup.get('dc_title'),
expect(formComp.blur.emit).toHaveBeenCalled(); // group: formComp.formGroup,
}); // model: formComp.formModel[0],
// type: 'blur'
it('should emit focus Event on focus', () => { // } as DynamicFormControlEvent;
const event = { //
$event: new FocusEvent('focus'), // spyOn(formComp.blur, 'emit');
context: null, //
control: formComp.formGroup.get('dc_title'), // formComp.onBlur(event);
group: formComp.formGroup, //
model: formComp.formModel[0], // expect(formComp.blur.emit).toHaveBeenCalled();
type: 'focus' // });
} as DynamicFormControlEvent; //
// it('should emit focus Event on focus', () => {
spyOn(formComp.focus, 'emit'); // const event = {
// $event: new FocusEvent('focus'),
formComp.onFocus(event); // context: null,
// control: formComp.formGroup.get('dc_title'),
expect(formComp.focus.emit).toHaveBeenCalled(); // group: formComp.formGroup,
}); // model: formComp.formModel[0],
// type: 'focus'
it('should return Observable of form status', () => { // } as DynamicFormControlEvent;
//
const control = formComp.formGroup.get(['dc_title']); // spyOn(formComp.focus, 'emit');
control.setValue('Test Title'); //
formState.testForm.valid = true; // formComp.onFocus(event);
store.nextState(formState); //
formFixture.detectChanges(); // expect(formComp.focus.emit).toHaveBeenCalled();
// });
formComp.isValid().subscribe((valid) => { //
expect(valid).toBe(true); // it('should return Observable of form status', () => {
}); //
}); // const control = formComp.formGroup.get(['dc_title']);
// control.setValue('Test Title');
it('should emit submit Event on form submit whether the form is valid', () => { // formState.testForm.valid = true;
// store.nextState(formState);
const control = formComp.formGroup.get(['dc_title']); // formFixture.detectChanges();
control.setValue('Test Title'); //
formState.testForm.valid = true; // formComp.isValid().subscribe((valid) => {
spyOn(formComp.submit, 'emit'); // expect(valid).toBe(true);
// });
store.nextState(formState); // });
formFixture.detectChanges(); //
// it('should emit submit Event on form submit whether the form is valid', () => {
formComp.onSubmit(); //
expect(formComp.submit.emit).toHaveBeenCalled(); // const control = formComp.formGroup.get(['dc_title']);
}); // control.setValue('Test Title');
// formState.testForm.valid = true;
it('should not emit submit Event on form submit whether the form is not valid', () => { // spyOn(formComp.submit, 'emit');
//
spyOn((formComp as any).formService, 'validateAllFormFields'); // store.nextState(formState);
// formFixture.detectChanges();
store.nextState(formState); //
formFixture.detectChanges(); // formComp.onSubmit();
// expect(formComp.submit.emit).toHaveBeenCalled();
formComp.onSubmit(); // });
expect((formComp as any).formService.validateAllFormFields).toHaveBeenCalled(); //
}); // it('should not emit submit Event on form submit whether the form is not valid', () => {
//
it('should reset form group', () => { // spyOn((formComp as any).formService, 'validateAllFormFields');
//
spyOn(formComp.formGroup, 'reset'); // store.nextState(formState);
// formFixture.detectChanges();
formComp.reset(); //
// formComp.onSubmit();
expect(formComp.formGroup.reset).toHaveBeenCalled(); // expect((formComp as any).formService.validateAllFormFields).toHaveBeenCalled();
}); // });
}); //
// it('should reset form group', () => {
describe('', () => { //
beforeEach(() => { // spyOn(formComp.formGroup, 'reset');
//
formFixture = TestBed.createComponent(FormComponent); // formComp.reset();
formComp = formFixture.componentInstance; // FormComponent test instance //
formComp.formId = 'testFormArray'; // expect(formComp.formGroup.reset).toHaveBeenCalled();
formComp.formModel = TEST_FORM_MODEL_WITH_ARRAY; // });
formComp.displaySubmit = false; // });
formFixture.detectChanges(); //
spyOn(store, 'dispatch'); // describe('', () => {
}); // beforeEach(() => {
//
afterEach(() => { // formFixture = TestBed.createComponent(FormComponent);
formFixture.destroy(); // formComp = formFixture.componentInstance; // FormComponent test instance
formComp = null; // formComp.formId = 'testFormArray';
}); // formComp.formModel = TEST_FORM_MODEL_WITH_ARRAY;
// formComp.displaySubmit = false;
it('should return ReadOnly property from array item', inject([FormBuilderService], (service: FormBuilderService) => { // formFixture.detectChanges();
const readOnly = formComp.isItemReadOnly(formComp.formModel[0] as DynamicFormArrayModel, 0); // spyOn(store, 'dispatch');
// });
expect(readOnly).toBe(false); //
})); // afterEach(() => {
// formFixture.destroy();
it('should dispatch FormChangeAction when an item has been added to an array', inject([FormBuilderService], (service: FormBuilderService) => { // formComp = null;
formComp.insertItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1); // });
//
expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel))); // it('should return ReadOnly property from array item', inject([FormBuilderService], (service: FormBuilderService) => {
})); // const readOnly = formComp.isItemReadOnly(formComp.formModel[0] as DynamicFormArrayModel, 0);
//
it('should emit addArrayItem Event when an item has been added to an array', inject([FormBuilderService], (service: FormBuilderService) => { // expect(readOnly).toBe(false);
spyOn(formComp.addArrayItem, 'emit'); // }));
//
formComp.insertItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1); // 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(formComp.addArrayItem.emit).toHaveBeenCalled(); //
})); // expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel)));
// }));
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); // it('should emit addArrayItem Event when an item has been added to an array', inject([FormBuilderService], (service: FormBuilderService) => {
// spyOn(formComp.addArrayItem, 'emit');
expect(store.dispatch).toHaveBeenCalledWith(new FormChangeAction('testFormArray', service.getValueFromModel(formComp.formModel))); //
})); // formComp.insertItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1);
//
it('should emit removeArrayItem Event when an item has been removed from an array', inject([FormBuilderService], (service: FormBuilderService) => { // expect(formComp.addArrayItem.emit).toHaveBeenCalled();
spyOn(formComp.removeArrayItem, 'emit'); // }));
//
formComp.removeItem(new Event('click'), formComp.formModel[0] as DynamicFormArrayModel, 1); // 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(formComp.removeArrayItem.emit).toHaveBeenCalled(); //
})); // 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();
// }));
}) })
}); });

86
src/app/shared/form/form.component.ts
View File

@@ -1,6 +1,13 @@
import { distinctUntilChanged, filter, map } from 'rxjs/operators';
import {distinctUntilChanged, map, filter} from 'rxjs/operators'; import {
import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'; ChangeDetectorRef,
Component,
EventEmitter,
Input,
OnDestroy,
OnInit,
Output
} from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms'; import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { import {
@@ -10,22 +17,11 @@ import {
DynamicFormGroupModel, DynamicFormGroupModel,
DynamicFormLayout, DynamicFormLayout,
} from '@ng-dynamic-forms/core'; } from '@ng-dynamic-forms/core';
import { select, Store } from '@ngrx/store';
import { findIndex } from 'lodash'; import { findIndex } from 'lodash';
import { AppState } from '../../app.reducer';
import {
FormChangeAction,
FormInitAction,
FormRemoveAction,
FormRemoveErrorAction,
FormStatusChangeAction
} from './form.actions';
import { FormBuilderService } from './builder/form-builder.service'; import { FormBuilderService } from './builder/form-builder.service';
import { Observable , Subscription } from 'rxjs'; import { Observable, Subscription } from 'rxjs';
import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util'; import { hasValue, isNotEmpty, isNotNull, isNull } from '../empty.util';
import { FormService } from './form.service'; import { FormService } from './form.service';
import { formObjectFromIdSelector } from './selectors';
import { FormEntry, FormError } from './form.reducer'; import { FormEntry, FormError } from './form.reducer';
/** /**
@@ -92,8 +88,7 @@ export class FormComponent implements OnDestroy, OnInit {
constructor(private formService: FormService, constructor(private formService: FormService,
protected changeDetectorRef: ChangeDetectorRef, protected changeDetectorRef: ChangeDetectorRef,
private formBuilderService: FormBuilderService, private formBuilderService: FormBuilderService) {
private store: Store<AppState>) {
} }
/** /**
@@ -132,13 +127,14 @@ export class FormComponent implements OnDestroy, OnInit {
ngOnInit() { ngOnInit() {
if (!this.formGroup) { if (!this.formGroup) {
this.formGroup = this.formBuilderService.createFormGroup(this.formModel); this.formGroup = this.formBuilderService.createFormGroup(this.formModel);
} else { } else {
this.formModel.forEach((model) => { this.formModel.forEach((model) => {
this.formBuilderService.addFormGroupControl(this.formGroup, this.parentFormModel, model); this.formBuilderService.addFormGroupControl(this.formGroup, this.parentFormModel, model);
}); });
} }
this.store.dispatch(new FormInitAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel), this.getFormGroupValidStatus())); this.formService.initForm(this.formId, this.formModel, this.getFormGroupValidStatus());
// TODO: take a look to the following method: // TODO: take a look to the following method:
// this.keepSync(); // this.keepSync();
@@ -148,46 +144,61 @@ export class FormComponent implements OnDestroy, OnInit {
this.subs.push(this.formGroup.statusChanges.pipe( this.subs.push(this.formGroup.statusChanges.pipe(
filter((currentStatus) => this.formValid !== this.getFormGroupValidStatus())) filter((currentStatus) => this.formValid !== this.getFormGroupValidStatus()))
.subscribe((currentStatus) => { .subscribe((currentStatus) => {
// Dispatch a FormStatusChangeAction if the form status has changed this.formService.setStatusChanged(this.formId, this.getFormGroupValidStatus());
this.store.dispatch(new FormStatusChangeAction(this.formId, this.getFormGroupValidStatus()));
this.formValid = this.getFormGroupValidStatus(); this.formValid = this.getFormGroupValidStatus();
})); }));
this.subs.push( this.subs.push(
this.store.pipe( this.formService.getForm(this.formId).pipe(
select(formObjectFromIdSelector(this.formId)),
filter((formState: FormEntry) => !!formState && (isNotEmpty(formState.errors) || isNotEmpty(this.formErrors))), filter((formState: FormEntry) => !!formState && (isNotEmpty(formState.errors) || isNotEmpty(this.formErrors))),
map((formState) => formState.errors), map((formState) => formState.errors),
distinctUntilChanged(),) distinctUntilChanged())
// .delay(100) // this terrible delay is here to prevent the detection change error // .delay(100) // this terrible delay is here to prevent the detection change error
.subscribe((errors: FormError[]) => { .subscribe((errors: FormError[]) => {
const {formGroup, formModel} = this; const { formGroup, formModel } = this;
errors errors
.filter((error: FormError) => findIndex(this.formErrors, {fieldId: error.fieldId, fieldIndex: error.fieldIndex}) === -1) .filter((error: FormError) => findIndex(this.formErrors, {
fieldId: error.fieldId,
fieldIndex: error.fieldIndex
}) === -1)
.forEach((error: FormError) => { .forEach((error: FormError) => {
const {fieldId} = error; const { fieldId } = error;
const {fieldIndex} = error; const { fieldIndex } = error;
let field: AbstractControl; let field: AbstractControl;
if (!!this.parentFormModel) { if (!!this.parentFormModel) {
field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel, fieldIndex); field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel, fieldIndex);
} else { } else {
field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel, fieldIndex); field = this.formBuilderService.getFormControlById(fieldId, formGroup, formModel, fieldIndex);
} }
console.log('1', error);
if (field) { if (field) {
console.log('2',error);
const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel); const model: DynamicFormControlModel = this.formBuilderService.findById(fieldId, formModel);
console.log('4',error);
this.formService.addErrorToField(field, model, error.message); this.formService.addErrorToField(field, model, error.message);
// this.formService.validateAllFormFields(formGroup); // this.formService.validateAllFormFields(formGroup);
console.log('5',error);
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
} }
console.log('4',error);
}); });
console.log(errors);
this.formErrors this.formErrors
.filter((error: FormError) => findIndex(errors, {fieldId: error.fieldId, fieldIndex: error.fieldIndex}) === -1) .filter((error: FormError) => findIndex(errors, {
fieldId: error.fieldId,
fieldIndex: error.fieldIndex
}) === -1)
.forEach((error: FormError) => { .forEach((error: FormError) => {
const {fieldId} = error; const { fieldId } = error;
const {fieldIndex} = error; const { fieldIndex } = error;
let field: AbstractControl; let field: AbstractControl;
if (!!this.parentFormModel) { if (!!this.parentFormModel) {
field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel, fieldIndex); field = this.formBuilderService.getFormControlById(fieldId, formGroup.parent as FormGroup, formModel, fieldIndex);
@@ -200,7 +211,7 @@ export class FormComponent implements OnDestroy, OnInit {
this.formService.removeErrorFromField(field, model, error.message); this.formService.removeErrorFromField(field, model, error.message);
} }
}); });
console.log(this.formErrors);
this.formErrors = errors; this.formErrors = errors;
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
}) })
@@ -214,7 +225,7 @@ export class FormComponent implements OnDestroy, OnInit {
this.subs this.subs
.filter((sub) => hasValue(sub)) .filter((sub) => hasValue(sub))
.forEach((sub) => sub.unsubscribe()); .forEach((sub) => sub.unsubscribe());
this.store.dispatch(new FormRemoveAction(this.formId)); this.formService.removeForm(this.formId)
} }
/** /**
@@ -245,9 +256,8 @@ export class FormComponent implements OnDestroy, OnInit {
} }
onChange(event: DynamicFormControlEvent): void { onChange(event: DynamicFormControlEvent): void {
const action: FormChangeAction = new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel));
this.store.dispatch(action); this.formService.changeForm(this.formId, this.formModel);
this.formGroup.markAsPristine(); this.formGroup.markAsPristine();
if (this.emitChange) { if (this.emitChange) {
@@ -257,7 +267,7 @@ export class FormComponent implements OnDestroy, OnInit {
const control: FormControl = event.control; const control: FormControl = event.control;
const fieldIndex: number = (event.context && event.context.index) ? event.context.index : 0; const fieldIndex: number = (event.context && event.context.index) ? event.context.index : 0;
if (control.valid) { if (control.valid) {
this.store.dispatch(new FormRemoveErrorAction(this.formId, event.model.id, fieldIndex)); this.formService.removeError(this.formId, event.model.id, fieldIndex);
} }
} }
@@ -290,14 +300,14 @@ export class FormComponent implements OnDestroy, OnInit {
const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray; const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
this.removeArrayItem.emit(this.getEvent($event, arrayContext, index, 'remove')); this.removeArrayItem.emit(this.getEvent($event, arrayContext, index, 'remove'));
this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext); this.formBuilderService.removeFormArrayGroup(index, formArrayControl, arrayContext);
this.store.dispatch(new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel))); this.formService.changeForm(this.formId, this.formModel);
} }
insertItem($event, arrayContext: DynamicFormArrayModel, index: number): void { insertItem($event, arrayContext: DynamicFormArrayModel, index: number): void {
const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray; const formArrayControl = this.formGroup.get(this.formBuilderService.getPath(arrayContext)) as FormArray;
this.formBuilderService.insertFormArrayGroup(index, formArrayControl, arrayContext); this.formBuilderService.insertFormArrayGroup(index, formArrayControl, arrayContext);
this.addArrayItem.emit(this.getEvent($event, arrayContext, index, 'add')); this.addArrayItem.emit(this.getEvent($event, arrayContext, index, 'add'));
this.store.dispatch(new FormChangeAction(this.formId, this.formBuilderService.getValueFromModel(this.formModel))); this.formService.changeForm(this.formId, this.formModel);
} }
protected getEvent($event: any, arrayContext: DynamicFormArrayModel, index: number, type: string): DynamicFormControlEvent { protected getEvent($event: any, arrayContext: DynamicFormArrayModel, index: number, type: string): DynamicFormControlEvent {
@@ -314,6 +324,6 @@ export class FormComponent implements OnDestroy, OnInit {
} }
const model = context.group[0] as DynamicFormControlModel; const model = context.group[0] as DynamicFormControlModel;
const control = group.controls[index] as FormControl; const control = group.controls[index] as FormControl;
return {$event, context, control, group, model, type}; return { $event, context, control, group, model, type };
} }
} }

32
src/app/shared/form/form.service.ts
View File

@@ -10,8 +10,14 @@ import { FormBuilderService } from './builder/form-builder.service';
import { DynamicFormControlModel } from '@ng-dynamic-forms/core'; import { DynamicFormControlModel } from '@ng-dynamic-forms/core';
import { isEmpty, isNotUndefined } from '../empty.util'; import { isEmpty, isNotUndefined } from '../empty.util';
import { uniqueId } from 'lodash'; import { uniqueId } from 'lodash';
import { FormChangeAction } from './form.actions'; import {
FormChangeAction,
FormInitAction,
FormRemoveAction, FormRemoveErrorAction,
FormStatusChangeAction
} from './form.actions';
import { GLOBAL_CONFIG, GlobalConfig } from '../../../config'; import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
import { FormEntry } from './form.reducer';
@Injectable() @Injectable()
export class FormService { export class FormService {
@@ -142,4 +148,28 @@ export class FormService {
} }
return (this.config.form.validatorMap.hasOwnProperty(validator)) ? this.config.form.validatorMap[validator] : validator; return (this.config.form.validatorMap.hasOwnProperty(validator)) ? this.config.form.validatorMap[validator] : validator;
} }
public initForm(formId: string, model: DynamicFormControlModel[], valid: boolean) {
this.store.dispatch(new FormInitAction(formId, this.formBuilderService.getValueFromModel(model), valid))
}
public setStatusChanged(formId: string, valid: boolean) {
this.store.dispatch(new FormStatusChangeAction(formId, valid))
}
public getForm(formId: string): Observable<FormEntry> {
return this.store.pipe(select(formObjectFromIdSelector(formId)));
}
public removeForm(formId: string) {
this.store.dispatch(new FormRemoveAction(formId));
}
public changeForm(formId: string, model: DynamicFormControlModel[]) {
this.store.dispatch(new FormChangeAction(formId, this.formBuilderService.getValueFromModel(model)));
}
public removeError(formId: string, eventModelId: string, fieldIndex: number) {
this.store.dispatch(new FormRemoveErrorAction(formId, eventModelId, fieldIndex));
}
} }

15
src/app/shared/mocks/mock-form-service.ts
View File

@@ -1,12 +1,23 @@
import { FormService } from '../form/form.service'; import { FormService } from '../form/form.service';
import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
import { map } from 'rxjs/operators';
export function getMockFormService( export function getMockFormService(
id$: string = 'random_id' id$: string = 'random_id',
errors = new BehaviorSubject([])
): FormService { ): FormService {
return jasmine.createSpyObj('FormService', { return jasmine.createSpyObj('FormService', {
getUniqueId: id$, getUniqueId: id$,
resetForm: {}, resetForm: {},
validateAllFormFields: {} validateAllFormFields: {},
getForm: errors.pipe(map((err) => { return {data: {}, valid: true, errors: err} })),
removeForm: undefined,
removeError: undefined,
changeForm: undefined,
setStatusChanged: undefined,
initForm: undefined,
getFormErrors: errors,
addErrorToField: undefined
}); });
} }

5
src/app/shared/testing/mock-store.ts
View File

@@ -1,7 +1,6 @@
import { map } from 'rxjs/operators';
import {map} from 'rxjs/operators';
import { Action } from '@ngrx/store'; import { Action } from '@ngrx/store';
import { Observable , BehaviorSubject } from 'rxjs'; import { BehaviorSubject, Observable } from 'rxjs';
export class MockStore<T> extends BehaviorSubject<T> { export class MockStore<T> extends BehaviorSubject<T> {

5
src/modules/app/server-app.module.ts
View File

@@ -49,7 +49,10 @@ export function createTranslateLoader() {
AppModule AppModule
], ],
providers: [ providers: [
{ provide: Angulartics2GoogleAnalytics, useClass: AngularticsMock }, {
provide: Angulartics2GoogleAnalytics,
useClass: AngularticsMock
},
{ {
provide: AuthService, provide: AuthService,
useClass: ServerAuthService useClass: ServerAuthService