[ADF-4441] Save button should be disabled when form fields are invalid (#4817)

* [ADF-4441] Save button should be disabled when form inputs are invalid, Refactored disable custom outcome buttons unit tests

* [ADF-4441] add missing space

* [ADF-4441] Refactor failing unit tests

* [ADF-4441] Added documentation for disableSaveButton property
This commit is contained in:
arditdomi
2019-06-10 12:01:58 +01:00
committed by Eugenio Romano
parent 3e1092d7bf
commit 4ea656e537
5 changed files with 156 additions and 33 deletions

View File

@@ -586,7 +586,7 @@ describe('FormComponent', () => {
expect(formService.completeTaskForm).not.toHaveBeenCalled();
});
it('should complete form form and raise corresponding event', () => {
it('should complete form and raise corresponding event', () => {
spyOn(formService, 'completeTaskForm').and.callFake(() => {
return new Observable((observer) => {
observer.next();
@@ -709,7 +709,7 @@ describe('FormComponent', () => {
expect(formComponent.data).toBe(metadata);
});
it('should disable outcome buttons for readonly form', () => {
it('should disable custom outcome buttons for readonly form', () => {
const formModel = new FormModel();
formModel.readOnly = true;
formComponent.form = formModel;
@@ -727,31 +727,6 @@ describe('FormComponent', () => {
expect(formComponent.isOutcomeButtonEnabled(null)).toBeFalsy();
});
it('should always enable save outcome for writeable form', () => {
const formModel = new FormModel();
const field = new FormFieldModel(formModel, {
type: 'text',
value: null,
required: true
});
const containerModel = new ContainerModel(field);
formModel.fields.push(containerModel);
formComponent.form = formModel;
formModel.onFormFieldChanged(field);
expect(formModel.isValid).toBeFalsy();
const outcome = new FormOutcomeModel(new FormModel(), {
id: FormComponent.SAVE_OUTCOME_ID,
name: FormOutcomeModel.SAVE_ACTION
});
formComponent.readOnly = true;
expect(formComponent.isOutcomeButtonEnabled(outcome)).toBeTruthy();
});
it('should disable outcome buttons for invalid form', () => {
const formModel = new FormModel();
const field = new FormFieldModel(formModel, {
@@ -780,19 +755,139 @@ describe('FormComponent', () => {
formComponent.form = formModel;
formComponent.disableCompleteButton = true;
const field = new FormFieldModel(formModel, {
type: 'text',
value: 'text',
required: true
});
const containerModel = new ContainerModel(field);
formModel.fields.push(containerModel);
formComponent.form = formModel;
formModel.onFormFieldChanged(field);
expect(formModel.isValid).toBeTruthy();
const completeOutcome = new FormOutcomeModel(new FormModel(), {
id: FormComponent.COMPLETE_OUTCOME_ID,
name: FormOutcomeModel.COMPLETE_ACTION
});
expect(formModel.isValid).toBeTruthy();
const completeOutcome = formComponent.form.outcomes.find((outcome) => outcome.name === FormOutcomeModel.COMPLETE_ACTION);
expect(formComponent.isOutcomeButtonEnabled(completeOutcome)).toBeFalsy();
});
it('should disable save outcome button when form is valid and readOnly', () => {
const formModel = new FormModel();
const field = new FormFieldModel(formModel, {
type: 'text',
value: 'text',
required: true
});
const containerModel = new ContainerModel(field);
formModel.fields.push(containerModel);
formComponent.form = formModel;
formModel.onFormFieldChanged(field);
expect(formModel.isValid).toBeTruthy();
const saveOutcome = new FormOutcomeModel(new FormModel(), {
id: FormComponent.SAVE_OUTCOME_ID,
name: FormOutcomeModel.SAVE_ACTION
});
formComponent.form.readOnly = true;
expect(formComponent.isOutcomeButtonEnabled(saveOutcome)).toBeFalsy();
});
it('should enable save outcome button when form is valid and not readOnly', () => {
const formModel = new FormModel();
const field = new FormFieldModel(formModel, {
type: 'text',
value: 'text',
required: true
});
const containerModel = new ContainerModel(field);
formModel.fields.push(containerModel);
formComponent.form = formModel;
formModel.onFormFieldChanged(field);
expect(formModel.isValid).toBeTruthy();
const saveOutcome = new FormOutcomeModel(new FormModel(), {
id: FormComponent.SAVE_OUTCOME_ID,
name: FormOutcomeModel.SAVE_ACTION
});
formComponent.form.readOnly = false;
expect(formComponent.isOutcomeButtonEnabled(saveOutcome)).toBeTruthy();
});
it('should disable save outcome button when disableSaveButton is true', () => {
const formModel = new FormModel();
formComponent.form = formModel;
formComponent.disableSaveButton = true;
const saveOutcome = new FormOutcomeModel(new FormModel(), {
id: FormComponent.SAVE_OUTCOME_ID,
name: FormOutcomeModel.SAVE_ACTION
});
expect(formComponent.isOutcomeButtonEnabled(saveOutcome)).toBeFalsy();
});
it('should disable save outcome button when the form is invalid', () => {
const formModel = new FormModel();
formComponent.form = formModel;
const field = new FormFieldModel(formModel, {
type: 'text',
value: null,
required: true
});
const containerModel = new ContainerModel(field);
formModel.fields.push(containerModel);
formComponent.form = formModel;
formModel.onFormFieldChanged(field);
expect(formModel.isValid).toBeFalsy();
const saveOutcome = new FormOutcomeModel(new FormModel(), {
id: FormComponent.SAVE_OUTCOME_ID,
name: FormOutcomeModel.SAVE_ACTION
});
expect(formComponent.isOutcomeButtonEnabled(saveOutcome)).toBeFalsy();
});
it('should disable start process outcome button when disableStartProcessButton is true', () => {
const formModel = new FormModel();
formComponent.form = formModel;
formComponent.disableStartProcessButton = true;
const field = new FormFieldModel(formModel, {
type: 'text',
value: 'text',
required: true
});
const containerModel = new ContainerModel(field);
formModel.fields.push(containerModel);
formComponent.form = formModel;
formModel.onFormFieldChanged(field);
expect(formModel.isValid).toBeTruthy();
const startProcessOutcome = formComponent.form.outcomes.find((outcome) => outcome.name === FormOutcomeModel.START_PROCESS_ACTION);
const startProcessOutcome = new FormOutcomeModel(new FormModel(), {
id: FormComponent.START_PROCESS_OUTCOME_ID,
name: FormOutcomeModel.START_PROCESS_ACTION
});
expect(formComponent.isOutcomeButtonEnabled(startProcessOutcome)).toBeFalsy();
});