fix(multiselect): corrige disparo do evento de change na inicialização

Corrige disparo indesejado do evento de change na inicialização do componente.

Fixes DTHFUI-2524

Author: alinelariguet

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-base.component.spec.ts

@@ -28,9 +28,9 @@ describe('PoMultiselectBaseComponent:', () => {
     expectSettersMethod(component, 'required', 'undefined', 'required', false);
     expectSettersMethod(component, 'required', undefined, 'required', false);
 
-    spyOn(component, 'updateModelToValidate');
+    spyOn(component, <any>'validateModel');
     component.disabled = true;
-    expect(component.updateModelToValidate).toHaveBeenCalled();
+    expect(component['validateModel']).toHaveBeenCalled();
   });
 
   it('should set disabled', () => {
@@ -42,10 +42,10 @@ describe('PoMultiselectBaseComponent:', () => {
     expectSettersMethod(component, 'disabled', 'undefined', 'disabled', false);
     expectSettersMethod(component, 'disabled', undefined, 'disabled', false);
 
-    spyOn(component, 'updateModelToValidate');
+    spyOn(component, <any>'validateModel');
     spyOn(component, 'updateVisibleItems');
     component.disabled = true;
-    expect(component.updateModelToValidate).toHaveBeenCalled();
+    expect(component['validateModel']).toHaveBeenCalled();
     expect(component.updateVisibleItems).toHaveBeenCalled();
   });
 
@@ -107,12 +107,6 @@ describe('PoMultiselectBaseComponent:', () => {
     expect(component.updateList).toHaveBeenCalledWith([]);
   });
 
-  it('should set variable readyToValidation to true', () => {
-    component['readyToValidation'] = false;
-    component.ngAfterContentChecked();
-    expect(component['readyToValidation']).toBeTruthy();
-  });
-
   it('should call validation functions and sort function', () => {
     component.options = [{label: '1', value: 1}];
     component.sort = true;
@@ -177,25 +171,6 @@ describe('PoMultiselectBaseComponent:', () => {
     expect(component.visibleOptionsDropdown.length).toBe(1);
   });
 
-  it('should call method callOnChange with selectedOptions', fakeAsync(() => {
-    component['readyToValidation'] = true;
-    component['selectedOptions'] = [];
-    spyOn(component, 'callOnChange');
-    component.updateModelToValidate();
-
-    tick(100);
-    expect(component.callOnChange).toHaveBeenCalledWith([]);
-  }));
-
-  it('shouldn`t call method callOnChange', fakeAsync(() => {
-    component['readyToValidation'] = false;
-    spyOn(component, 'callOnChange');
-    component.updateModelToValidate();
-
-    tick(100);
-    expect(component.callOnChange).not.toHaveBeenCalled();
-  }));
-
   it('should call onModelChange and eventChange', () => {
     const fakeThis = {
       onModelChange: v => {},
@@ -343,16 +318,6 @@ describe('PoMultiselectBaseComponent:', () => {
     expect(component.selectedOptions.length).toBe(1);
   });
 
-  it('should call `callOnChange` and `updateSelectedOptions` with `[]` if model value is `invalid`.', () => {
-    spyOn(component, 'updateSelectedOptions');
-    spyOn(component, 'callOnChange');
-
-    component.writeValue(null);
-
-    expect(component.updateSelectedOptions).toHaveBeenCalledWith([]);
-    expect(component.callOnChange).toHaveBeenCalledWith([]);
-  });
-
   it('should update model if the values is different of the selectedOptions.', () => {
     component.selectedOptions = [];
     component.options = [{value: 1, label: '1'}, {value: 2, label: '2'}];
@@ -401,6 +366,39 @@ describe('PoMultiselectBaseComponent:', () => {
       component.eventChange([{value: 1, label : '1'}]);
       expect(component.change.emit).not.toHaveBeenCalled();
     });
+
+    it('registerOnValidatorChange: should register validatorChange function', () => {
+      const registerOnValidatorChangeFn = () => {};
+
+      component.registerOnValidatorChange(registerOnValidatorChangeFn);
+      expect(component['validatorChange']).toBe(registerOnValidatorChangeFn);
+    });
+
+    it('validateModel: shouldn`t call `validatorChange` when it is falsy', () => {
+      component['validatorChange'] = undefined;
+
+      component['validateModel']();
+
+      expect(component['validatorChange']).toBeUndefined();
+    });
+
+    it('validateModel: should call `validatorChange` to validateModel when `validatorChange` is a function', () => {
+      component['validatorChange'] = () => {};
+
+      spyOn(component, <any> 'validatorChange');
+
+      component['validateModel']();
+
+      expect(component['validatorChange']).toHaveBeenCalledWith();
+    });
+
+    it('writeValue: should call `updateSelectedOptions` with `[]` if model value is `invalid`.', () => {
+      spyOn(component, 'updateSelectedOptions');
+
+      component.writeValue(null);
+
+      expect(component.updateSelectedOptions).toHaveBeenCalledWith([]);
+    });
   });
 
   describe('Properties:', () => {

projects/ui/src/lib/components/po-field/po-multiselect/po-multiselect-base.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentChecked, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, Validator } from '@angular/forms';
 
 import { browserLanguage, convertToBoolean, removeDuplicatedOptions, removeUndefinedAndNullOptions, sortOptionsByProperty,
@@ -40,7 +40,7 @@ export const poMultiselectLiteralsDefault = {
  * Este componente também não deve ser utilizado em casos onde a seleção seja única. Nesses casos, deve-se utilizar o
  * po-select, po-combo ou po-radio-group.
  */
-export abstract class PoMultiselectBaseComponent implements AfterContentChecked, ControlValueAccessor, OnInit, Validator {
+export abstract class PoMultiselectBaseComponent implements ControlValueAccessor, OnInit, Validator {
 
   private _autofocus?: boolean = false;
   private _disabled?: boolean = false;
@@ -55,7 +55,7 @@ export abstract class PoMultiselectBaseComponent implements AfterContentChecked,
   private onModelChange: any;
   // tslint:disable-next-line
   private onModelTouched: any;
-  private readyToValidation = false;
+  private validatorChange: any;
 
   selectedOptions: Array<PoMultiselectOption> = [];
   visibleOptionsDropdown: Array<PoMultiselectOption> = [];
@@ -159,7 +159,7 @@ export abstract class PoMultiselectBaseComponent implements AfterContentChecked,
    */
   @Input('p-required') set required(required: boolean) {
     this._required = <any>required === '' ? true : convertToBoolean(required);
-    this.updateModelToValidate();
+    this.validateModel();
   }
 
   get required() {
@@ -177,7 +177,7 @@ export abstract class PoMultiselectBaseComponent implements AfterContentChecked,
    */
   @Input('p-disabled') set disabled(disabled: boolean) {
     this._disabled = <any>disabled === '' ? true : convertToBoolean(disabled);
-    this.updateModelToValidate();
+    this.validateModel();
 
     this.updateVisibleItems();
   }
@@ -295,13 +295,6 @@ export abstract class PoMultiselectBaseComponent implements AfterContentChecked,
     this.updateList(this.options);
   }
 
-  ngAfterContentChecked() {
-    // Seta esta variável para indicar que a tela já foi carregada e podem ser aplicadas as validações.
-    // A partir desse momento, toda vez que uma propriedade que interfere na validação, for alterada, o model será atualizado
-    // para que o campo seja validado novamente.
-    this.readyToValidation = true;
-  }
-
   validAndSortOptions() {
     if (this.options && this.options.length) {
 
@@ -329,18 +322,6 @@ export abstract class PoMultiselectBaseComponent implements AfterContentChecked,
     }
   }
 
-  // Emite a atualização do model caso esta propriedade seja alterada dinamicamente.
-  updateModelToValidate() {
-    if (this.readyToValidation) {
-
-      // Este timeout é necessário para quando for atualizado o model e uma propriedade do Datepicker ao mesmo tempo.
-      // Caso contrário, o writeValue não é disparado, não atualizando o model do componente.
-      setTimeout(() => {
-        this.callOnChange(this.selectedOptions);
-      });
-    }
-  }
-
   callOnChange(selectedOptions: Array<PoMultiselectOption>) {
     if (this.onModelChange) {
       this.onModelChange(this.getValuesFromOptions(selectedOptions));
@@ -429,10 +410,7 @@ export abstract class PoMultiselectBaseComponent implements AfterContentChecked,
   }
 
   writeValue(values: any): void {
-    if (!values) {
-      values = [];
-      this.callOnChange([]);
-    }
+    values = values || [];
 
     // Validar se todos os items existem entre os options, senão atualizar o model
     this.updateSelectedOptions(values);
@@ -450,6 +428,16 @@ export abstract class PoMultiselectBaseComponent implements AfterContentChecked,
     this.onModelTouched = fn;
   }
 
+  registerOnValidatorChange(fn: () => void) {
+    this.validatorChange = fn;
+  }
+
+  private validateModel() {
+    if (this.validatorChange) {
+      this.validatorChange();
+    }
+  }
+
   abstract updateVisibleItems(): void;
 
 }